[ { "path": ".angular-cli.json", "content": "{\n \"project\": {\n \"version\": \"1.0.0-beta.32.3\",\n \"name\": \"StudioWeb\"\n },\n \"apps\": [\n {\n \"root\": \"src\",\n \"outDir\": \"dist\",\n \"assets\": [\n \"assets\",\n \"favicon.ico\",\n \"manifest.json\",\n \"service-worker.js\"\n ],\n \"index\": \"index.html\",\n \"main\": \"main.ts\",\n \"test\": \"test.ts\",\n \"tsconfig\": \"tsconfig.json\",\n \"prefix\": \"app\",\n \"mobile\": false,\n \"styles\": [\n \"../node_modules/font-awesome/css/font-awesome.css\",\n \"../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n \"../node_modules/ng2-toastr/ng2-toastr.css\",\n \"../node_modules/primeng/resources/themes/bootstrap/theme.css\",\n \"../node_modules/primeng/resources/primeng.min.css\",\n \"./libs/bootstrap-timepicker/css/bootstrap-timepicker.css\",\n \"./libs/minicolors/jquery.minicolors.css\",\n \"./libs/ruler/ruler.css\",\n \"./styles/style.css\",\n \"./styles/jquery.timepicker.min.css\"\n ],\n \"scripts\": [\n \"../node_modules/jquery/dist/jquery.min.js\",\n \"./libs/jquery.base64.js\",\n \"./libs/jquery-ui.js\",\n \"./libs/jquery.knob.min.js\",\n \"./libs/flashdetect/flashdetect.js\",\n \"./libs/rc4v1/rc4v1.js\",\n \"./libs/rc4v2/rc4v2.js\",\n \"./libs/qrcode/qrcode.js\",\n \"./libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js\",\n \"./libs/jquery.timepicker/jquery.timepicker.min.js\",\n \"./libs/contextmenu/bootstrap-contextmenu.js\",\n \"./libs/stop-watch/stop-watch.js\",\n \"./store/signage_sdk.js\",\n \"../node_modules/bootstrap/dist/js/bootstrap.js\",\n \"../node_modules/bootbox/bootbox.js\",\n \"../node_modules/platform/platform.js\",\n \"./libs/fabric.require1-4-12.js\",\n \"./libs/minicolors/jquery.minicolors.js\",\n \"./libs/gradient/colorpicker.js\",\n \"./libs/xml2js/xml2js.js\",\n \"./libs/gradient/jquery.gradientpicker.js\",\n \"./libs/enjoyhint/enjoyhint.js\",\n \"../node_modules/xdate/src/xdate.js\",\n \"./libs/ruler/ruler.js\"\n ],\n \"environmentSource\": \"environments/environment.ts\",\n \"environments\": {\n \"dev\": \"environments/environment.ts\",\n \"hmr\": \"environments/environment.hmr.ts\",\n \"prod\": \"environments/environment.prod.ts\"\n }\n }\n ],\n \"addons\": [\n \"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)\",\n \"./styles/fonts//montserrat.woff2\"\n ],\n \"packages\": [],\n \"e2e\": {\n \"protractor\": {\n \"config\": \"./protractor.conf.js\"\n }\n },\n \"test\": {\n \"karma\": {\n \"config\": \"./karma.conf.js\"\n }\n },\n \"defaults\": {\n \"styleExt\": \"css\",\n \"prefixInterfaces\": false,\n \"inline\": {\n \"style\": false,\n \"template\": false\n },\n \"spec\": {\n \"class\": false,\n \"component\": true,\n \"directive\": true,\n \"module\": false,\n \"pipe\": true,\n \"service\": true\n }\n }\n}\n" }, { "path": ".editorconfig", "content": "# Editor configuration, see http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[*.md]\nmax_line_length = off\ntrim_trailing_whitespace = false\n" }, { "path": ".gitignore", "content": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n\n\n# compiled output\n/dist/*.js\n/dist/**\n/dist\n/tmp\n\n# dependencies\n/node_modules\n/bower_components\n\n# IDEs and editors\n/.idea\n/.idea/workspace.xml\n/.vscode\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n\n# misc\n/.sass-cache\n/documentation\n/connect.lock\n/coverage/*\n/libpeerconnection.log\nnpm-debug.log\ntestem.log\n/typings\n*.log.*\n\n#include\n!index.js\n!/typings\n\n\n# js/map\n*.js\nsrc/**/*.js\n*prod.js\nsrc/**/*.map\n#System Files\n.DS_Store\nThumbs.db\nworkspace.xml\n\n!signageSDK.js\n!service-worker.js\n!src/store/signage_sdk.js\n!src/libs/*\n!src/libs/**/*\n!src/locale/**/*\n#src/store/application.state.js\n#src/store/imsdb.interfaces.js\n#src/store/imsdb.interfaces_auto.js\n#src/store/store.data.js\n#*.xlf\n#*.xmb\n!temp/*.js\n!temp/*.txt\n" }, { "path": "LICENSE", "content": "======================================================================\n\n MediaSignage Add-on license\n to GNU GENERAL PUBLIC LICENSE V3\n Jan 7, 2014\n\nMediaSignage Inc SignagePlayer open source under GPL V3 modified license.\nGPL V3 add-on License for MediaSignage Copyright (c) SignagePlayer\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"),\nto deal in the Software with some restriction as described in exhibit (A).\n\nThe SignagePlayer open source software is available without any warranty,\ndocumentation and support. The primary purpose of this software is:\n\nA) Educational: study of this product design and architecture\nB) Security: transparency into the inner workings of the mediaCLOUD and related apps\nC) All usage permitted only within the operation of the DigitalSignage.com mediaCLOUD\n and only under MediaSignage Inc related products and services.\nD) Customization and modification which are governed under items A-C\n\nExhibit A:\n==========\nUsage, modification, compilation and any other benefit of the SignagePlayer\nsource code must come in a form of connection into the MediaSignage public mediaCLOUD\nservice or to a private mediaSERVER purchased from MediaSignage Inc.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A\nPARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\nHOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE\n\n\n GNU GENERAL PUBLIC LICENSE\n Version 3, 29 June 2007\n\n Copyright (C) 2007 Free Software Foundation, Inc. \n Everyone is permitted to copy and distribute verbatim copies\n of this license document, but changing it is not allowed.\n\n Preamble\n\n The GNU General Public License is a free, copyleft license for\nsoftware and other kinds of works.\n\n The licenses for most software and other practical works are designed\nto take away your freedom to share and change the works. By contrast,\nthe GNU General Public License is intended to guarantee your freedom to\nshare and change all versions of a program--to make sure it remains free\nsoftware for all its users. We, the Free Software Foundation, use the\nGNU General Public License for most of our software; it applies also to\nany other work released this way by its authors. You can apply it to\nyour programs, too.\n\n When we speak of free software, we are referring to freedom, not\nprice. Our General Public Licenses are designed to make sure that you\nhave the freedom to distribute copies of free software (and charge for\nthem if you wish), that you receive source code or can get it if you\nwant it, that you can change the software or use pieces of it in new\nfree programs, and that you know you can do these things.\n\n To protect your rights, we need to prevent others from denying you\nthese rights or asking you to surrender the rights. Therefore, you have\ncertain responsibilities if you distribute copies of the software, or if\nyou modify it: responsibilities to respect the freedom of others.\n\n For example, if you distribute copies of such a program, whether\ngratis or for a fee, you must pass on to the recipients the same\nfreedoms that you received. You must make sure that they, too, receive\nor can get the source code. And you must show them these terms so they\nknow their rights.\n\n Developers that use the GNU GPL protect your rights with two steps:\n(1) assert copyright on the software, and (2) offer you this License\ngiving you legal permission to copy, distribute and/or modify it.\n\n For the developers' and authors' protection, the GPL clearly explains\nthat there is no warranty for this free software. For both users' and\nauthors' sake, the GPL requires that modified versions be marked as\nchanged, so that their problems will not be attributed erroneously to\nauthors of previous versions.\n\n Some devices are designed to deny users access to install or run\nmodified versions of the software inside them, although the manufacturer\ncan do so. This is fundamentally incompatible with the aim of\nprotecting users' freedom to change the software. The systematic\npattern of such abuse occurs in the area of products for individuals to\nuse, which is precisely where it is most unacceptable. Therefore, we\nhave designed this version of the GPL to prohibit the practice for those\nproducts. If such problems arise substantially in other domains, we\nstand ready to extend this provision to those domains in future versions\nof the GPL, as needed to protect the freedom of users.\n\n Finally, every program is threatened constantly by software patents.\nStates should not allow patents to restrict development and use of\nsoftware on general-purpose computers, but in those that do, we wish to\navoid the special danger that patents applied to a free program could\nmake it effectively proprietary. To prevent this, the GPL assures that\npatents cannot be used to render the program non-free.\n\n The precise terms and conditions for copying, distribution and\nmodification follow.\n\n TERMS AND CONDITIONS\n\n 0. Definitions.\n\n \"This License\" refers to version 3 of the GNU General Public License.\n\n \"Copyright\" also means copyright-like laws that apply to other kinds of\nworks, such as semiconductor masks.\n\n \"The Program\" refers to any copyrightable work licensed under this\nLicense. Each licensee is addressed as \"you\". \"Licensees\" and\n\"recipients\" may be individuals or organizations.\n\n To \"modify\" a work means to copy from or adapt all or part of the work\nin a fashion requiring copyright permission, other than the making of an\nexact copy. The resulting work is called a \"modified version\" of the\nearlier work or a work \"based on\" the earlier work.\n\n A \"covered work\" means either the unmodified Program or a work based\non the Program.\n\n To \"propagate\" a work means to do anything with it that, without\npermission, would make you directly or secondarily liable for\ninfringement under applicable copyright law, except executing it on a\ncomputer or modifying a private copy. Propagation includes copying,\ndistribution (with or without modification), making available to the\npublic, and in some countries other activities as well.\n\n To \"convey\" a work means any kind of propagation that enables other\nparties to make or receive copies. Mere interaction with a user through\na computer network, with no transfer of a copy, is not conveying.\n\n An interactive user interface displays \"Appropriate Legal Notices\"\nto the extent that it includes a convenient and prominently visible\nfeature that (1) displays an appropriate copyright notice, and (2)\ntells the user that there is no warranty for the work (except to the\nextent that warranties are provided), that licensees may convey the\nwork under this License, and how to view a copy of this License. If\nthe interface presents a list of user commands or options, such as a\nmenu, a prominent item in the list meets this criterion.\n\n 1. Source Code.\n\n The \"source code\" for a work means the preferred form of the work\nfor making modifications to it. \"Object code\" means any non-source\nform of a work.\n\n A \"Standard Interface\" means an interface that either is an official\nstandard defined by a recognized standards body, or, in the case of\ninterfaces specified for a particular programming language, one that\nis widely used among developers working in that language.\n\n The \"System Libraries\" of an executable work include anything, other\nthan the work as a whole, that (a) is included in the normal form of\npackaging a Major Component, but which is not part of that Major\nComponent, and (b) serves only to enable use of the work with that\nMajor Component, or to implement a Standard Interface for which an\nimplementation is available to the public in source code form. A\n\"Major Component\", in this context, means a major essential component\n(kernel, window system, and so on) of the specific operating system\n(if any) on which the executable work runs, or a compiler used to\nproduce the work, or an object code interpreter used to run it.\n\n The \"Corresponding Source\" for a work in object code form means all\nthe source code needed to generate, install, and (for an executable\nwork) run the object code and to modify the work, including scripts to\ncontrol those activities. However, it does not include the work's\nSystem Libraries, or general-purpose tools or generally available free\nprograms which are used unmodified in performing those activities but\nwhich are not part of the work. For example, Corresponding Source\nincludes interface definition files associated with source files for\nthe work, and the source code for shared libraries and dynamically\nlinked subprograms that the work is specifically designed to require,\nsuch as by intimate data communication or control flow between those\nsubprograms and other parts of the work.\n\n The Corresponding Source need not include anything that users\ncan regenerate automatically from other parts of the Corresponding\nSource.\n\n The Corresponding Source for a work in source code form is that\nsame work.\n\n 2. Basic Permissions.\n\n All rights granted under this License are granted for the term of\ncopyright on the Program, and are irrevocable provided the stated\nconditions are met. This License explicitly affirms your unlimited\npermission to run the unmodified Program. The output from running a\ncovered work is covered by this License only if the output, given its\ncontent, constitutes a covered work. This License acknowledges your\nrights of fair use or other equivalent, as provided by copyright law.\n\n You may make, run and propagate covered works that you do not\nconvey, without conditions so long as your license otherwise remains\nin force. You may convey covered works to others for the sole purpose\nof having them make modifications exclusively for you, or provide you\nwith facilities for running those works, provided that you comply with\nthe terms of this License in conveying all material for which you do\nnot control copyright. Those thus making or running the covered works\nfor you must do so exclusively on your behalf, under your direction\nand control, on terms that prohibit them from making any copies of\nyour copyrighted material outside their relationship with you.\n\n Conveying under any other circumstances is permitted solely under\nthe conditions stated below. Sublicensing is not allowed; section 10\nmakes it unnecessary.\n\n 3. Protecting Users' Legal Rights From Anti-Circumvention Law.\n\n No covered work shall be deemed part of an effective technological\nmeasure under any applicable law fulfilling obligations under article\n11 of the WIPO copyright treaty adopted on 20 December 1996, or\nsimilar laws prohibiting or restricting circumvention of such\nmeasures.\n\n When you convey a covered work, you waive any legal power to forbid\ncircumvention of technological measures to the extent such circumvention\nis effected by exercising rights under this License with respect to\nthe covered work, and you disclaim any intention to limit operation or\nmodification of the work as a means of enforcing, against the work's\nusers, your or third parties' legal rights to forbid circumvention of\ntechnological measures.\n\n 4. Conveying Verbatim Copies.\n\n You may convey verbatim copies of the Program's source code as you\nreceive it, in any medium, provided that you conspicuously and\nappropriately publish on each copy an appropriate copyright notice;\nkeep intact all notices stating that this License and any\nnon-permissive terms added in accord with section 7 apply to the code;\nkeep intact all notices of the absence of any warranty; and give all\nrecipients a copy of this License along with the Program.\n\n You may charge any price or no price for each copy that you convey,\nand you may offer support or warranty protection for a fee.\n\n 5. Conveying Modified Source Versions.\n\n You may convey a work based on the Program, or the modifications to\nproduce it from the Program, in the form of source code under the\nterms of section 4, provided that you also meet all of these conditions:\n\n a) The work must carry prominent notices stating that you modified\n it, and giving a relevant date.\n\n b) The work must carry prominent notices stating that it is\n released under this License and any conditions added under section\n 7. This requirement modifies the requirement in section 4 to\n \"keep intact all notices\".\n\n c) You must license the entire work, as a whole, under this\n License to anyone who comes into possession of a copy. This\n License will therefore apply, along with any applicable section 7\n additional terms, to the whole of the work, and all its parts,\n regardless of how they are packaged. This License gives no\n permission to license the work in any other way, but it does not\n invalidate such permission if you have separately received it.\n\n d) If the work has interactive user interfaces, each must display\n Appropriate Legal Notices; however, if the Program has interactive\n interfaces that do not display Appropriate Legal Notices, your\n work need not make them do so.\n\n A compilation of a covered work with other separate and independent\nworks, which are not by their nature extensions of the covered work,\nand which are not combined with it such as to form a larger program,\nin or on a volume of a storage or distribution medium, is called an\n\"aggregate\" if the compilation and its resulting copyright are not\nused to limit the access or legal rights of the compilation's users\nbeyond what the individual works permit. Inclusion of a covered work\nin an aggregate does not cause this License to apply to the other\nparts of the aggregate.\n\n 6. Conveying Non-Source Forms.\n\n You may convey a covered work in object code form under the terms\nof sections 4 and 5, provided that you also convey the\nmachine-readable Corresponding Source under the terms of this License,\nin one of these ways:\n\n a) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by the\n Corresponding Source fixed on a durable physical medium\n customarily used for software interchange.\n\n b) Convey the object code in, or embodied in, a physical product\n (including a physical distribution medium), accompanied by a\n written offer, valid for at least three years and valid for as\n long as you offer spare parts or customer support for that product\n model, to give anyone who possesses the object code either (1) a\n copy of the Corresponding Source for all the software in the\n product that is covered by this License, on a durable physical\n medium customarily used for software interchange, for a price no\n more than your reasonable cost of physically performing this\n conveying of source, or (2) access to copy the\n Corresponding Source from a network server at no charge.\n\n c) Convey individual copies of the object code with a copy of the\n written offer to provide the Corresponding Source. This\n alternative is allowed only occasionally and noncommercially, and\n only if you received the object code with such an offer, in accord\n with subsection 6b.\n\n d) Convey the object code by offering access from a designated\n place (gratis or for a charge), and offer equivalent access to the\n Corresponding Source in the same way through the same place at no\n further charge. You need not require recipients to copy the\n Corresponding Source along with the object code. If the place to\n copy the object code is a network server, the Corresponding Source\n may be on a different server (operated by you or a third party)\n that supports equivalent copying facilities, provided you maintain\n clear directions next to the object code saying where to find the\n Corresponding Source. Regardless of what server hosts the\n Corresponding Source, you remain obligated to ensure that it is\n available for as long as needed to satisfy these requirements.\n\n e) Convey the object code using peer-to-peer transmission, provided\n you inform other peers where the object code and Corresponding\n Source of the work are being offered to the general public at no\n charge under subsection 6d.\n\n A separable portion of the object code, whose source code is excluded\nfrom the Corresponding Source as a System Library, need not be\nincluded in conveying the object code work.\n\n A \"User Product\" is either (1) a \"consumer product\", which means any\ntangible personal property which is normally used for personal, family,\nor household purposes, or (2) anything designed or sold for incorporation\ninto a dwelling. In determining whether a product is a consumer product,\ndoubtful cases shall be resolved in favor of coverage. For a particular\nproduct received by a particular user, \"normally used\" refers to a\ntypical or common use of that class of product, regardless of the status\nof the particular user or of the way in which the particular user\nactually uses, or expects or is expected to use, the product. A product\nis a consumer product regardless of whether the product has substantial\ncommercial, industrial or non-consumer uses, unless such uses represent\nthe only significant mode of use of the product.\n\n \"Installation Information\" for a User Product means any methods,\nprocedures, authorization keys, or other information required to install\nand execute modified versions of a covered work in that User Product from\na modified version of its Corresponding Source. The information must\nsuffice to ensure that the continued functioning of the modified object\ncode is in no case prevented or interfered with solely because\nmodification has been made.\n\n If you convey an object code work under this section in, or with, or\nspecifically for use in, a User Product, and the conveying occurs as\npart of a transaction in which the right of possession and use of the\nUser Product is transferred to the recipient in perpetuity or for a\nfixed term (regardless of how the transaction is characterized), the\nCorresponding Source conveyed under this section must be accompanied\nby the Installation Information. But this requirement does not apply\nif neither you nor any third party retains the ability to install\nmodified object code on the User Product (for example, the work has\nbeen installed in ROM).\n\n The requirement to provide Installation Information does not include a\nrequirement to continue to provide support service, warranty, or updates\nfor a work that has been modified or installed by the recipient, or for\nthe User Product in which it has been modified or installed. Access to a\nnetwork may be denied when the modification itself materially and\nadversely affects the operation of the network or violates the rules and\nprotocols for communication across the network.\n\n Corresponding Source conveyed, and Installation Information provided,\nin accord with this section must be in a format that is publicly\ndocumented (and with an implementation available to the public in\nsource code form), and must require no special password or key for\nunpacking, reading or copying.\n\n 7. Additional Terms.\n\n \"Additional permissions\" are terms that supplement the terms of this\nLicense by making exceptions from one or more of its conditions.\nAdditional permissions that are applicable to the entire Program shall\nbe treated as though they were included in this License, to the extent\nthat they are valid under applicable law. If additional permissions\napply only to part of the Program, that part may be used separately\nunder those permissions, but the entire Program remains governed by\nthis License without regard to the additional permissions.\n\n When you convey a copy of a covered work, you may at your option\nremove any additional permissions from that copy, or from any part of\nit. (Additional permissions may be written to require their own\nremoval in certain cases when you modify the work.) You may place\nadditional permissions on material, added by you to a covered work,\nfor which you have or can give appropriate copyright permission.\n\n Notwithstanding any other provision of this License, for material you\nadd to a covered work, you may (if authorized by the copyright holders of\nthat material) supplement the terms of this License with terms:\n\n a) Disclaiming warranty or limiting liability differently from the\n terms of sections 15 and 16 of this License; or\n\n b) Requiring preservation of specified reasonable legal notices or\n author attributions in that material or in the Appropriate Legal\n Notices displayed by works containing it; or\n\n c) Prohibiting misrepresentation of the origin of that material, or\n requiring that modified versions of such material be marked in\n reasonable ways as different from the original version; or\n\n d) Limiting the use for publicity purposes of names of licensors or\n authors of the material; or\n\n e) Declining to grant rights under trademark law for use of some\n trade names, trademarks, or service marks; or\n\n f) Requiring indemnification of licensors and authors of that\n material by anyone who conveys the material (or modified versions of\n it) with contractual assumptions of liability to the recipient, for\n any liability that these contractual assumptions directly impose on\n those licensors and authors.\n\n All other non-permissive additional terms are considered \"further\nrestrictions\" within the meaning of section 10. If the Program as you\nreceived it, or any part of it, contains a notice stating that it is\ngoverned by this License along with a term that is a further\nrestriction, you may remove that term. If a license document contains\na further restriction but permits relicensing or conveying under this\nLicense, you may add to a covered work material governed by the terms\nof that license document, provided that the further restriction does\nnot survive such relicensing or conveying.\n\n If you add terms to a covered work in accord with this section, you\nmust place, in the relevant source files, a statement of the\nadditional terms that apply to those files, or a notice indicating\nwhere to find the applicable terms.\n\n Additional terms, permissive or non-permissive, may be stated in the\nform of a separately written license, or stated as exceptions;\nthe above requirements apply either way.\n\n 8. Termination.\n\n You may not propagate or modify a covered work except as expressly\nprovided under this License. Any attempt otherwise to propagate or\nmodify it is void, and will automatically terminate your rights under\nthis License (including any patent licenses granted under the third\nparagraph of section 11).\n\n However, if you cease all violation of this License, then your\nlicense from a particular copyright holder is reinstated (a)\nprovisionally, unless and until the copyright holder explicitly and\nfinally terminates your license, and (b) permanently, if the copyright\nholder fails to notify you of the violation by some reasonable means\nprior to 60 days after the cessation.\n\n Moreover, your license from a particular copyright holder is\nreinstated permanently if the copyright holder notifies you of the\nviolation by some reasonable means, this is the first time you have\nreceived notice of violation of this License (for any work) from that\ncopyright holder, and you cure the violation prior to 30 days after\nyour receipt of the notice.\n\n Termination of your rights under this section does not terminate the\nlicenses of parties who have received copies or rights from you under\nthis License. If your rights have been terminated and not permanently\nreinstated, you do not qualify to receive new licenses for the same\nmaterial under section 10.\n\n 9. Acceptance Not Required for Having Copies.\n\n You are not required to accept this License in order to receive or\nrun a copy of the Program. Ancillary propagation of a covered work\noccurring solely as a consequence of using peer-to-peer transmission\nto receive a copy likewise does not require acceptance. However,\nnothing other than this License grants you permission to propagate or\nmodify any covered work. These actions infringe copyright if you do\nnot accept this License. Therefore, by modifying or propagating a\ncovered work, you indicate your acceptance of this License to do so.\n\n 10. Automatic Licensing of Downstream Recipients.\n\n Each time you convey a covered work, the recipient automatically\nreceives a license from the original licensors, to run, modify and\npropagate that work, subject to this License. You are not responsible\nfor enforcing compliance by third parties with this License.\n\n An \"entity transaction\" is a transaction transferring control of an\norganization, or substantially all assets of one, or subdividing an\norganization, or merging organizations. If propagation of a covered\nwork results from an entity transaction, each party to that\ntransaction who receives a copy of the work also receives whatever\nlicenses to the work the party's predecessor in interest had or could\ngive under the previous paragraph, plus a right to possession of the\nCorresponding Source of the work from the predecessor in interest, if\nthe predecessor has it or can get it with reasonable efforts.\n\n You may not impose any further restrictions on the exercise of the\nrights granted or affirmed under this License. For example, you may\nnot impose a license fee, royalty, or other charge for exercise of\nrights granted under this License, and you may not initiate litigation\n(including a cross-claim or counterclaim in a lawsuit) alleging that\nany patent claim is infringed by making, using, selling, offering for\nsale, or importing the Program or any portion of it.\n\n 11. Patents.\n\n A \"contributor\" is a copyright holder who authorizes use under this\nLicense of the Program or a work on which the Program is based. The\nwork thus licensed is called the contributor's \"contributor version\".\n\n A contributor's \"essential patent claims\" are all patent claims\nowned or controlled by the contributor, whether already acquired or\nhereafter acquired, that would be infringed by some manner, permitted\nby this License, of making, using, or selling its contributor version,\nbut do not include claims that would be infringed only as a\nconsequence of further modification of the contributor version. For\npurposes of this definition, \"control\" includes the right to grant\npatent sublicenses in a manner consistent with the requirements of\nthis License.\n\n Each contributor grants you a non-exclusive, worldwide, royalty-free\npatent license under the contributor's essential patent claims, to\nmake, use, sell, offer for sale, import and otherwise run, modify and\npropagate the contents of its contributor version.\n\n In the following three paragraphs, a \"patent license\" is any express\nagreement or commitment, however denominated, not to enforce a patent\n(such as an express permission to practice a patent or covenant not to\nsue for patent infringement). To \"grant\" such a patent license to a\nparty means to make such an agreement or commitment not to enforce a\npatent against the party.\n\n If you convey a covered work, knowingly relying on a patent license,\nand the Corresponding Source of the work is not available for anyone\nto copy, free of charge and under the terms of this License, through a\npublicly available network server or other readily accessible means,\nthen you must either (1) cause the Corresponding Source to be so\navailable, or (2) arrange to deprive yourself of the benefit of the\npatent license for this particular work, or (3) arrange, in a manner\nconsistent with the requirements of this License, to extend the patent\nlicense to downstream recipients. \"Knowingly relying\" means you have\nactual knowledge that, but for the patent license, your conveying the\ncovered work in a country, or your recipient's use of the covered work\nin a country, would infringe one or more identifiable patents in that\ncountry that you have reason to believe are valid.\n\n If, pursuant to or in connection with a single transaction or\narrangement, you convey, or propagate by procuring conveyance of, a\ncovered work, and grant a patent license to some of the parties\nreceiving the covered work authorizing them to use, propagate, modify\nor convey a specific copy of the covered work, then the patent license\nyou grant is automatically extended to all recipients of the covered\nwork and works based on it.\n\n A patent license is \"discriminatory\" if it does not include within\nthe scope of its coverage, prohibits the exercise of, or is\nconditioned on the non-exercise of one or more of the rights that are\nspecifically granted under this License. You may not convey a covered\nwork if you are a party to an arrangement with a third party that is\nin the business of distributing software, under which you make payment\nto the third party based on the extent of your activity of conveying\nthe work, and under which the third party grants, to any of the\nparties who would receive the covered work from you, a discriminatory\npatent license (a) in connection with copies of the covered work\nconveyed by you (or copies made from those copies), or (b) primarily\nfor and in connection with specific products or compilations that\ncontain the covered work, unless you entered into that arrangement,\nor that patent license was granted, prior to 28 March 2007.\n\n Nothing in this License shall be construed as excluding or limiting\nany implied license or other defenses to infringement that may\notherwise be available to you under applicable patent law.\n\n 12. No Surrender of Others' Freedom.\n\n If conditions are imposed on you (whether by court order, agreement or\notherwise) that contradict the conditions of this License, they do not\nexcuse you from the conditions of this License. If you cannot convey a\ncovered work so as to satisfy simultaneously your obligations under this\nLicense and any other pertinent obligations, then as a consequence you may\nnot convey it at all. For example, if you agree to terms that obligate you\nto collect a royalty for further conveying from those to whom you convey\nthe Program, the only way you could satisfy both those terms and this\nLicense would be to refrain entirely from conveying the Program.\n\n 13. Use with the GNU Affero General Public License.\n\n Notwithstanding any other provision of this License, you have\npermission to link or combine any covered work with a work licensed\nunder version 3 of the GNU Affero General Public License into a single\ncombined work, and to convey the resulting work. The terms of this\nLicense will continue to apply to the part which is the covered work,\nbut the special requirements of the GNU Affero General Public License,\nsection 13, concerning interaction through a network will apply to the\ncombination as such.\n\n 14. Revised Versions of this License.\n\n The Free Software Foundation may publish revised and/or new versions of\nthe GNU General Public License from time to time. Such new versions will\nbe similar in spirit to the present version, but may differ in detail to\naddress new problems or concerns.\n\n Each version is given a distinguishing version number. If the\nProgram specifies that a certain numbered version of the GNU General\nPublic License \"or any later version\" applies to it, you have the\noption of following the terms and conditions either of that numbered\nversion or of any later version published by the Free Software\nFoundation. If the Program does not specify a version number of the\nGNU General Public License, you may choose any version ever published\nby the Free Software Foundation.\n\n If the Program specifies that a proxy can decide which future\nversions of the GNU General Public License can be used, that proxy's\npublic statement of acceptance of a version permanently authorizes you\nto choose that version for the Program.\n\n Later license versions may give you additional or different\npermissions. However, no additional obligations are imposed on any\nauthor or copyright holder as a result of your choosing to follow a\nlater version.\n\n 15. Disclaimer of Warranty.\n\n THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY\nAPPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT\nHOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM \"AS IS\" WITHOUT WARRANTY\nOF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,\nTHE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR\nPURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM\nIS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF\nALL NECESSARY SERVICING, REPAIR OR CORRECTION.\n\n 16. Limitation of Liability.\n\n IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING\nWILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS\nTHE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY\nGENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE\nUSE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF\nDATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD\nPARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),\nEVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF\nSUCH DAMAGES.\n\n 17. Interpretation of Sections 15 and 16.\n\n If the disclaimer of warranty and limitation of liability provided\nabove cannot be given local legal effect according to their terms,\nreviewing courts shall apply local law that most closely approximates\nan absolute waiver of all civil liability in connection with the\nProgram, unless a warranty or assumption of liability accompanies a\ncopy of the Program in return for a fee.\n\n END OF TERMS AND CONDITIONS\n\n How to Apply These Terms to Your New Programs\n\n If you develop a new program, and you want it to be of the greatest\npossible use to the public, the best way to achieve this is to make it\nfree software which everyone can redistribute and change under these terms.\n\n To do so, attach the following notices to the program. It is safest\nto attach them to the start of each source file to most effectively\nstate the exclusion of warranty; and each file should have at least\nthe \"copyright\" line and a pointer to where the full notice is found.\n\n \n Copyright (C) \n\n This program is free software: you can redistribute it and/or modify\n it under the terms of the GNU General Public License as published by\n the Free Software Foundation, either version 3 of the License, or\n (at your option) any later version.\n\n This program is distributed in the hope that it will be useful,\n but WITHOUT ANY WARRANTY; without even the implied warranty of\n MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n GNU General Public License for more details.\n\n You should have received a copy of the GNU General Public License\n along with this program. If not, see .\n\nAlso add information on how to contact you by electronic and paper mail.\n\n If the program does terminal interaction, make it output a short\nnotice like this when it starts in an interactive mode:\n\n Copyright (C) \n This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.\n This is free software, and you are welcome to redistribute it\n under certain conditions; type `show c' for details.\n\nThe hypothetical commands `show w' and `show c' should show the appropriate\nparts of the General Public License. Of course, your program's commands\nmight be different; for a GUI interface, you would use an \"about box\".\n\n You should also get your employer (if you work as a programmer) or school,\nif any, to sign a \"copyright disclaimer\" for the program, if necessary.\nFor more information on this, and how to apply and follow the GNU GPL, see\n.\n\n The GNU General Public License does not permit incorporating your program\ninto proprietary programs. If your program is a subroutine library, you\nmay consider it more useful to permit linking proprietary applications with\nthe library. If this is what you want to do, use the GNU Lesser General\nPublic License instead of this License. But first, please read\n.\n\n" }, { "path": "README.md", "content": "StudioLite, Digital Signage for the rest of us\n---------------------------------------\n\n\n\n

\n \n

\n\n\n------------------------------------------------------------------------\n\nStudioLite is an open source, 100% FREE, Digital Signage platform that was designed with ease of use in mind.\nWith StudioLite anyone can have a Digital Signage solution that is entirely customizable. \nTake the source code, modify it, brand it and build a product that's right for you and your customers.\nBest of all, you will take full advantage of the world's most popular Digital Signage cloud so you don't have to worry about backend programming or even setup a server, it's all done for you using the mediaCLOUD.\n\n - Based on the poplar SignageStudio Pro ( [MediaSignage]: http://www.DigitalSignage.com )\n - Connected to a private mediaSERVER or the public free mediaCLOUD\n - 100% open source based on GNU V3 license\n - Contributors are welcome, fork, modify and send pull requests\n - Powered by Google's Angular Framework + TypeScript + ngrx \n\nLinks:\n------------------------------------------------------------------------\n- StudioLite documentation: http://www.digitalsignage.com/lite_docs/\n- Cloud web app: http://go.digitalsignage.com\n- Home: http://lite.digitalsignage.com\n- Docs: http://www.digitalsignage.com/msdocs/\n- Support: http://script.digitalsignage.com/forum/index.php/board,9.0.html\n- Developer video tutorial: http://goo.gl/nkx7wr\n- StudioLite intro video: http://lite.digitalsignage.com/video1.html\n- StudioLite advanced video: http://lite.digitalsignage.com/video2.html\n- Developers page: http://www.digitalsignage.com/_html/open_source_digital_signage.html\n- Angular: https://angular.io/\n\nTechnical data:\n------------------------------------------------------------------------\n- Build on top the latest version Google's Angular framework with a clean MV* design\n- Developed using the latest version of TypeScript and ngrx store\n- Powered by Bootstrap using responsive design for phones, tablets and desktops\n- Lazy loaded modules for best user load experience\n- Driven using Soap API and includes Helper SDK\n- Uses a local msdb (database) through SDK for offline work\n- Support Angular AOT mode\n- Support available through the MediaSignage support forum\n\nInstallation:\n------------------------------------------------------------------------\n\nStudioLite can be downloaded directly from GitHub\nWith git you will be able to easily update to the latest version of StudioLite as well as take advantage Angular CLI which is included in the bundle\n\ncurrently the application should run under:\n- typescript 2.4\n- node 6.x \n\nto install and host:\n\n``` npm install -g npm``` (this will ensure npm 5.4.2 >)\n\n\n```\ngit clone https://github.com/born2net/studio-lite.git\ncd studio-lite\nnpm install -g @angular/cli@latest\nnpm install\nopen browser to: http://localhost:4208/\n```\n\nCustomization:\n------------------------------------------------------------------------\nKeep in mind the SignageStudio lite as well as its related SDK Pepper are often released with new updates, so you will lose any changes you make to your code if you overwrite it with our release builds.\n\nTo overcome this you can follow these guidelines:\n\n1.\tAlways be sure to override files and not modify the original source file. This is true for both CSS and JavaScript code. Simply load your version of the CSS after ours to apply your latest changes. HTML files can be diffed (see below).\n2.\tOur code base is modulated and uses 100% object oriented design pattern. This allows you to sub class (aka inherit) from our classes and make your applied changes (use _.extend to mixin).\n3.\tYou can also use pre-processor scripts which replace code segments automatically using directives.\n4.\tAnd finally, even while following steps 1-3 you may find that your code is broken due to design changes in the original repository. That’s when GitHub comes to the rescue. When your fork the source repository, you can always merge the tree onto your forked project. Use source control diff tool to merge the changes into your code and resolve any conflicts.\n\nWith the above steps you can ensure that your source code is fully customizable while still keeping it synchronized with our ongoing development efforts.\nAnd if you built something wonderful, just send us a pull request so we check it out. \nIf we like what you did we we will merge it into our code base, so you will always receive it when you fetch our changes.\n\nIf you are not a developer you can hire professional, inexpensive help from sites like oDesk and Freelancer.\nSince Angular is an opinionated framework, any developer who is verse in Angular, will be able to quickly customize a solution for your own business logic. \n\nVideos:\n------------------------------------------------------------------------\n\n[![Development with StudioLite](http://img.youtube.com/vi/Znti-QVDjvg/0.jpg)](https://www.youtube.com/watch?v=Znti-QVDjvg&feature=youtu.be \"Advanced angular tips and tricks\")\n\n\nprevious version:\n------------------------------------------------------------------------\nIf you are looking for the previous version of StudioLite which was developed using BackboneJS, go to the branch:\n - https://github.com/born2net/studio-lite/tree/studiolite-backbone\n\nLicense:\n------------------------------------------------------------------------\nThe SignageStudio Web Lite and Pepper SDK are available under GPL\n - V3 https://github.com/born2net/studio-lite/blob/master/LICENSE\n\n\n\n" }, { "path": "dev/notes.txt", "content": "////////////// NOTES ////////////////\n\n\n\nneed to find a way to remove core-js from videoangular definitions\nsed -i.bak '/core-js/d' './node_modules/videogular2/src/core/vg-media/i-playable.d.ts ; sed -i.bak '/core-js/d' './node_modules/videogular2/src/core/services/vg-api.d.ts'\n\n\nreload video:\nhttps://github.com/videogular/videogular2/issues/442\n\n\nnpm uninstall -g angular-cli @angular/cli\nnpm cache clean\nnpm install -g @angular/cli@latest\nOR\n\nnpm install -g @angular/cli@1.2.6\nnpm install -g @angular/cli@8.0.2\n\nLocal project package:\n\nrm -rf node_modules dist # use rmdir on Windows\nnpm install --save-dev @angular/cli@latest <<<<<<<<<<<<<<<<\nnpm install\n\n\nng init --ng4\n\n==================================================================================================================\n\n\n------------------------------------\n>>> switch to StudioLite global env:\n------------------------------------\nnvm use 6.16.0 ; node --version;\nrm -r -f /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript;\ncp -r -f /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript-2.4.2/ /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript;\nnpm remove -g @angular/cli ; npm install -g @angular/cli@1.2.4;\n\n\n------------------------------------\n>>> switch to latest global env:\n------------------------------------\nnvm use 10.15.0 ; node --version;\nrm -r -f /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript;\ncp -r -f /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript-3.5.1/ /cygdrive/c/Program\\ Files/nodejs/node_modules/typescript;\nnpm remove -g @angular/cli ; npm install -g @angular/cli@8.0.2;\n\n\n==================================================================================================================\n\n\ndebug sessions:\n\nreflection:\n http://127.0.0.1:8080/src/create_reflection.html\n\nlocal:\n http://localhost:4208/\n\ncampaigns:\n http://localhost:4208/campaigns\n\nFasterqRemoteStatus (base64):\n http://localhost:4208/index.html?mode=remoteStatus¶m=eyJjYWxsX3R5cGUiOiJFTUFJTCIsInNlcnZpY2VfaWQiOjE5LCJ2ZXJpZmljYXRpb24iOjY5NSwibGluZV9pZCI6IjIxMTAiLCJsaW5lX25hbWUiOiIgbmV3IGxpbmUgMSIsImJ1c2luZXNzX2lkIjoiMzU4NjEzIiwic21zIjoiIiwiZW1haWwiOiJib3JuMm5ldEBnbWFpbC5jb20iLCJkYXRlIjoiNC83LzIwMTcifQ==\n\nFasterqTerminal (rc4):\n http://localhost:4208/index.html?data=5b6bcb27d4547657cfe4e021e1c6761fe8b4a33c3d62983ee8f6b0ccbded7b8a6578e47862f0aca0ca7ac070a1a27121fe17f5c496483ee08cf0a061440f277a3e49dcaaf3bb198c71033ed398d60166e3b82c9153f4c3a6d346f7d11b3016\n\nauto-login local demo_lite\n\thttp://localhost:4208/index.html?param=dXNlcj1kZW1vX2xpdGVAbXMuY29tLHBhc3M9cGFzc3dvcmQ=\n\nauto-login remote demo_lite\n\thttps://secure.digitalsignage.com/studioweb/index.html?param=dXNlcj1kZW1vX2xpdGVAbXMuY29tLHBhc3M9cGFzc3dvcmQ=\n\nauto-login local lite22\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlMjJAbXMuY29tLHBhc3M9MTIzMTIz\n\nauto-login local lite90\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlOTBAbXMuY29tLHBhc3M9MTIzMTIz\n\nauto-login local lite28\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlMjhAbXMuY29tLHBhc3M9MTIzMTIz\n\n==================================================================================================================\n\nrevert webpack ng tools: npm install --save @ngtools/webpack@1.2.4\n\n\n==================================================================================================================\n\n\nclear cache: npm clear cache\n\nnpm install @angular/cli@latest -g\nnpm install -g @angular/cli\n\n\n==================================================================================================================\n\nreflection Usage:\n\nto run this script and generate interface sdk / msdb:\n\nrun live-server inside /cygdrive/c/msweb/studiolite\n\nopen browser to:\n\nhttp://127.0.0.1:8080/src/create_reflection.html\n\n\n==================================================================================================================\n\nSwitching fabric versions:\n\nadd/remove import \"fabric\"; from app-modules.ts\nadd/remove form angular-cli.json:\n\"../node_modules/fabric/dist/fabric.js\"\nor \nangular-cli.json: \"./libs/fabric.require1-4-12.js\",\nor\nto load remotely:\n\n\n\n==================================================================================================================\n\n\n\n\n \n \n \n \n\n \n \n\n\n==================================================================================================================\n\nfor translation:\n\n1. release_aot > to generate all ./dist files in english\n2. x_translate > to create an english version of ./src/local/messages.xmb\n3. develop_new_script > to generate ./src/local/hebrew.xtb from messages.xmb (use server API)\n https://secure.digitalsignage.com/getLocal/he/xxx/go%20find%20me%20and%20bring%20me%20here\n4. release_aot_hebrew > to create new StudioLite in hebrew and upload to specific local server dir" }, { "path": "e2e/app.e2e-spec.ts", "content": "import { NgKitchenSinkPage } from './app.po';\n\ndescribe('ng-kitchen-sink App', function() {\n let page: NgKitchenSinkPage;\n\n beforeEach(() => {\n page = new NgKitchenSinkPage();\n });\n\n it('should display message saying app works', () => {\n page.navigateTo();\n expect(page.getParagraphText()).toEqual('app works!');\n });\n});\n" }, { "path": "e2e/app.po.ts", "content": "import { browser, element, by } from 'protractor';\n\nexport class NgKitchenSinkPage {\n navigateTo() {\n return browser.get('/');\n }\n\n getParagraphText() {\n return element(by.css('app-root h1')).getText();\n }\n}\n" }, { "path": "e2e/tsconfig.json", "content": "{\n \"compileOnSave\": false,\n \"compilerOptions\": {\n \"declaration\": false,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"module\": \"commonjs\",\n \"moduleResolution\": \"node\",\n \"outDir\": \"../dist/out-tsc-e2e\",\n \"sourceMap\": true,\n \"target\": \"es5\",\n \"typeRoots\": [\n \"../node_modules/@types\"\n ]\n }\n}\n" }, { "path": "examples/adStatsSample.xml", "content": "\n\n \n stationId,packageId,packageContentId,packageName,contentName,day,hour,counts,duration,mph,rate\n stationId,localContentId,day,hour,counts,duration,mph,rate\n \n \n \n \n 14,136,3,8,9,1214.9,0.221447,0\n 14,136,3,9,14,1889.8,0.442799,0\n 14,136,3,10,14,1856.2,0.383568,0\n 14,136,3,11,14,1890.1,0.456984,0\n 14,136,3,12,14,1848.5,0.41431,0\n 14,136,3,13,13,1754.9,0.39168,0\n 14,136,3,14,14,1890.2,0.457008,0\n 14,136,3,15,14,1890.2,0.457008,0\n 14,136,3,16,14,1890.1,0.456983,0\n 14,136,3,17,14,1890,0.45696,0\n 14,136,3,18,14,1890.2,0.457008,0\n 14,136,3,19,14,1890.1,0.456984,0\n 14,136,3,20,14,1890,0.45696,0\n 14,136,3,21,14,1890.2,0.457008,0\n 14,136,3,22,15,2025.3,0.489672,0\n 14,136,3,23,14,1889.9,0.456935,0\n 14,136,4,0,14,1890.3,0.457031,0\n 14,136,4,1,14,1890.2,0.457008,0\n 14,136,4,2,14,1890.2,0.457008,0\n 14,136,4,3,14,1890.2,0.457007,0\n 14,136,4,4,14,1890.1,0.456984,0\n 14,136,4,5,14,1889.9,0.42432,0\n 14,136,4,6,14,1889.9,0.456935,0\n 14,136,4,7,14,1889.9,0.456935,0\n 14,136,4,8,14,1890.2,0.457007,0\n 14,136,4,9,14,1890,0.45696,0\n 14,136,4,10,15,2024.9,0.489575,0\n 14,136,4,11,14,1889.9,0.456935,0\n 14,136,4,12,14,1889.7,0.42427,0\n 14,136,4,13,14,1889.6,0.45686,0\n 14,136,4,14,14,1890,0.456959,0\n 14,136,4,15,14,1889.7,0.456885,0\n 14,136,4,16,14,1889.9,0.456935,0\n 14,136,4,17,14,1889.9,0.456935,0\n 14,136,4,18,14,1890,0.45696,0\n 14,136,4,19,15,2024.9,0.489575,0\n 14,136,4,20,14,1889.9,0.456934,0\n 14,136,4,21,14,1889.9,0.456935,0\n 14,136,4,22,14,1889.8,0.45691,0\n 14,136,4,23,14,1889.9,0.456935,0\n 14,136,5,0,14,1889.9,0.456935,0\n 14,136,5,1,14,1890.2,0.457008,0\n 14,136,5,2,14,1890.2,0.457008,0\n 14,136,5,3,14,1890,0.456959,0\n 14,136,5,4,14,1889.7,0.456885,0\n 14,136,5,5,14,1890.1,0.424368,0\n 14,136,5,6,14,1890,0.45696,0\n 14,136,5,7,14,1890,0.45696,0\n 14,136,5,8,13,1716.2,0.349707,0\n 14,136,5,9,14,1890.2,0.457008,0\n 14,136,5,10,9,1215.3,0.293832,0\n 14,136,7,12,2,27.4,0,0\n 14,136,7,13,13,1756.2,0.391992,0\n 14,136,7,14,14,1891.8,0.457392,0\n 14,136,7,15,15,2026.4,0.489936,0\n 14,136,7,16,14,1892,0.45744,0\n 14,136,7,17,14,1892.3,0.457512,0\n 14,136,7,18,14,1891.5,0.45732,0\n 14,136,7,19,14,1891.2,0.457248,0\n 14,136,7,20,14,1891.2,0.457248,0\n 14,136,7,21,14,1891.5,0.45732,0\n 14,136,7,22,14,1891.4,0.457296,0\n 14,136,7,23,14,1891.5,0.45732,0\n 14,136,8,0,14,1891.7,0.457368,0\n 14,136,8,1,14,1891.8,0.457391,0\n 14,136,8,2,14,1891.1,0.457224,0\n 14,136,8,3,15,2026.7,0.490008,0\n 14,136,8,4,13,1756.8,0.424752,0\n 14,136,8,5,14,1889.9,0.424319,0\n 14,136,8,6,14,1889.7,0.456884,0\n 14,136,8,7,14,1890.1,0.456984,0\n 14,136,8,8,13,1755,0.391703,0\n 14,136,8,9,14,1889.8,0.45691,0\n 14,136,8,10,15,2025,0.489599,0\n 14,136,8,11,4,539.9,0.130535,0\n 14,136,8,12,9,1047.5,0.195815,0\n 14,136,8,13,2,515.1,0.124539,0\n 14,137,3,8,8,481,0.112702,0\n 14,137,3,9,15,901.5,0.21123,0\n 14,137,3,10,12,699.9,0.165785,0\n 14,137,3,11,14,841.9,0.203545,0\n 14,137,3,12,13,781.4,0.188915,0\n 14,137,3,13,13,781.4,0.188916,0\n 14,137,3,14,14,841.5,0.203446,0\n 14,137,3,15,14,841.4,0.203421,0\n 14,137,3,16,14,841.4,0.20342,0\n 14,137,3,17,15,901.8,0.218025,0\n 14,137,3,18,14,841.3,0.203397,0\n 14,137,3,19,14,841.3,0.203396,0\n 14,137,3,20,14,841.6,0.203471,0\n 14,137,3,21,14,841.3,0.203396,0\n 14,137,3,22,14,841.4,0.20342,0\n 14,137,3,23,14,841.4,0.203421,0\n 14,137,4,0,14,841.3,0.203397,0\n 14,137,4,1,14,841.5,0.203447,0\n 14,137,4,2,14,841.6,0.20347,0\n 14,137,4,3,15,901.6,0.217976,0\n 14,137,4,4,14,841.4,0.203421,0\n 14,137,4,5,14,841.7,0.203495,0\n 14,137,4,6,14,841.4,0.20342,0\n 14,137,4,7,14,841.4,0.20342,0\n 14,137,4,8,14,841.3,0.203396,0\n 14,137,4,9,14,841.3,0.203396,0\n 14,137,4,10,14,841.3,0.203396,0\n 14,137,4,11,14,841.4,0.20342,0\n 14,137,4,12,14,813.4,0.196651,0\n 14,137,4,13,14,841.3,0.203396,0\n 14,137,4,14,15,901.2,0.217878,0\n 14,137,4,15,14,841.3,0.203396,0\n 14,137,4,16,14,841.4,0.20342,0\n 14,137,4,17,14,841.3,0.203396,0\n 14,137,4,18,14,841.2,0.203372,0\n 14,137,4,19,14,841.4,0.20342,0\n 14,137,4,20,14,841.3,0.203396,0\n 14,137,4,21,14,841.2,0.203372,0\n 14,137,4,22,14,840.9,0.2033,0\n 14,137,4,23,14,841.3,0.203396,0\n 14,137,5,0,15,901.3,0.217902,0\n 14,137,5,1,14,841.4,0.20342,0\n 14,137,5,2,14,841.2,0.203372,0\n 14,137,5,3,14,841.4,0.203421,0\n 14,137,5,4,14,841.4,0.20342,0\n 14,137,5,5,13,781.3,0.18889,0\n 14,137,5,6,15,901.4,0.217926,0\n 14,137,5,7,14,841.2,0.203372,0\n 14,137,5,8,11,637.2,0.154052,0\n 14,137,5,9,14,841.3,0.203396,0\n 14,137,5,10,9,540.9,0.13077,0\n 14,137,7,13,13,782.8,0.18926,0\n 14,137,7,14,14,843.1,0.203841,0\n 14,137,7,15,14,842.7,0.203742,0\n 14,137,7,16,14,842.8,0.203765,0\n 14,137,7,17,14,842.7,0.203741,0\n 14,137,7,18,14,842.3,0.203643,0\n 14,137,7,19,14,842.8,0.203765,0\n 14,137,7,20,14,843.1,0.203839,0\n 14,137,7,21,15,904,0.218564,0\n 14,137,7,22,14,842.6,0.203717,0\n 14,137,7,23,14,842.7,0.203741,0\n 14,137,8,0,14,842.5,0.203693,0\n 14,137,8,1,14,842.9,0.203792,0\n 14,137,8,2,14,842.3,0.203642,0\n 14,137,8,3,14,842.8,0.203767,0\n 14,137,8,4,14,842.1,0.203595,0\n 14,137,8,5,14,841.4,0.20342,0\n 14,137,8,6,14,841.4,0.20342,0\n 14,137,8,7,14,841.3,0.203396,0\n 14,137,8,8,13,781.2,0.188866,0\n 14,137,8,9,14,841.4,0.20342,0\n 14,137,8,10,14,841.4,0.20342,0\n 14,137,8,11,5,300.5,0.07265,0\n 14,137,8,12,6,360.6,0.08718,0\n 14,137,8,13,1,60.1,0.01453,0\n 14,138,3,8,7,420.7,0.098574,0\n 14,138,3,9,14,841.3,0.197123,0\n 14,138,3,10,12,721.4,0.170824,0\n 14,138,3,11,14,841.6,0.20347,0\n 14,138,3,12,13,781.5,0.18894,0\n 14,138,3,13,13,781.3,0.18889,0\n 14,138,3,14,14,841.4,0.203421,0\n 14,138,3,15,14,841.6,0.20347,0\n 14,138,3,16,14,841.7,0.203495,0\n 14,138,3,17,14,841.4,0.20342,0\n 14,138,3,18,14,841.6,0.203471,0\n 14,138,3,19,15,901.8,0.218025,0\n 14,138,3,20,14,841.6,0.20347,0\n 14,138,3,21,14,841.5,0.203446,0\n 14,138,3,22,14,841.4,0.20342,0\n 14,138,3,23,14,841.4,0.203421,0\n 14,138,4,0,14,841.6,0.20347,0\n 14,138,4,1,14,841.3,0.203397,0\n 14,138,4,2,14,841.4,0.20342,0\n 14,138,4,3,14,841.3,0.203396,0\n 14,138,4,4,14,841.4,0.203421,0\n 14,138,4,5,13,781.4,0.188915,0\n 14,138,4,6,14,841.2,0.203373,0\n 14,138,4,7,14,841.5,0.203445,0\n 14,138,4,8,15,901.6,0.217975,0\n 14,138,4,9,14,841.4,0.20342,0\n 14,138,4,10,14,841.4,0.203421,0\n 14,138,4,11,14,841.4,0.20342,0\n 14,138,4,12,13,781.2,0.188866,0\n 14,138,4,13,14,841.3,0.203396,0\n 14,138,4,14,14,841.4,0.20342,0\n 14,138,4,15,14,841.3,0.203396,0\n 14,138,4,16,14,841.4,0.203421,0\n 14,138,4,17,15,901.7,0.218,0\n 14,138,4,18,14,841.4,0.20342,0\n 14,138,4,19,14,841.4,0.20342,0\n 14,138,4,20,14,841.4,0.20342,0\n 14,138,4,21,14,841.4,0.203421,0\n 14,138,4,22,14,841.4,0.20342,0\n 14,138,4,23,14,841.2,0.203372,0\n 14,138,5,0,14,841.6,0.20347,0\n 14,138,5,1,14,841.3,0.203396,0\n 14,138,5,2,14,841.4,0.20342,0\n 14,138,5,3,15,901.5,0.217952,0\n 14,138,5,4,14,841.5,0.203445,0\n 14,138,5,5,13,781.2,0.188866,0\n 14,138,5,6,14,841.4,0.20342,0\n 14,138,5,7,14,841.5,0.203445,0\n 14,138,5,8,11,661.2,0.159855,0\n 14,138,5,9,14,841.6,0.20347,0\n 14,138,5,10,9,541,0.130795,0\n 14,138,7,13,13,782.7,0.189236,0\n 14,138,7,14,14,842.8,0.203766,0\n 14,138,7,15,14,843.1,0.203838,0\n 14,138,7,16,14,842.9,0.20379,0\n 14,138,7,17,14,842.5,0.203693,0\n 14,138,7,18,14,843.3,0.203888,0\n 14,138,7,19,14,842.9,0.203791,0\n 14,138,7,20,14,843.1,0.203841,0\n 14,138,7,21,14,843,0.203814,0\n 14,138,7,22,14,843.2,0.203865,0\n 14,138,7,23,14,843,0.203815,0\n 14,138,8,0,15,902.7,0.218248,0\n 14,138,8,1,14,842.4,0.203669,0\n 14,138,8,2,14,843.1,0.203837,0\n 14,138,8,3,14,842.4,0.203667,0\n 14,138,8,4,14,842.8,0.203766,0\n 14,138,8,5,13,781.1,0.188842,0\n 14,138,8,6,14,841.4,0.20342,0\n 14,138,8,7,14,841.4,0.203421,0\n 14,138,8,8,14,793.3,0.191791,0\n 14,138,8,9,14,841.3,0.203397,0\n 14,138,8,10,14,841.5,0.203445,0\n 14,138,8,11,4,240.4,0.05812,0\n 14,138,8,12,6,360.8,0.08723,0\n 14,138,8,13,1,60.1,0.01453,0\n 18,136,2,15,2,269.9,0.06324,0\n 18,136,2,16,1,134.9,0.031608,0\n 18,137,2,15,1,60,0.014058,0\n 18,137,2,16,2,120.1,0.02814,0\n 18,138,2,15,2,120.1,0.02814,0\n 18,138,2,16,2,120,0.028116,0\n 19,136,3,12,1,134.9,0,0\n 19,136,3,13,14,1398.6,0.156452,0\n 19,136,3,16,2,270.3,0.032736,0\n 19,136,4,13,7,9960.4,2.301675,0\n 19,137,3,12,1,66.1,0.015981,0\n 19,137,3,13,5,304.1,0.073522,0\n 19,137,3,16,1,60.5,0.014627,0\n 19,137,4,13,4,244.5,0.059113,0\n 19,138,3,12,1,93.9,0.022702,0\n 19,138,3,13,5,303.3,0.073329,0\n 19,138,3,16,1,61.2,0.014796,0\n 19,138,4,13,4,185.6,0.044872,0\n \n \n \n" }, { "path": "examples/apps_table.txt", "content": "app_id\tapp_name\thelp_name\tdescription\tuninstallable\thidden\tprice\tmin_version\n10005\tEmbeded Resource\t\"\"\tEmbeded Resource\tFalse\tTrue\t0\t4.12\n10010\tScene\t\"\"\tScene\tFalse\tTrue\t0\t4.12\n10020\tExternal Resource\t\"\"\tExternal Resource\tFalse\tFalse\t0\t4.12\n10030\tLabel\t\"\"\tLabel\tFalse\tFalse\t0\t4.12\n10040\tHtml\t\"\"\tHtml\tFalse\tFalse\t0\t4.12\n10050\tRss Text\t\"\"\tRss Text\tFalse\tFalse\t0\t4.12\n10060\tCustom Rss\t\"\"\tCustom Rss\tFalse\tFalse\t0\t4.12\n10070\tMedia Rss/Podcast\t\"\"\tMedia Rss/Podcast\tFalse\tFalse\t0\t4.12\n10080\tWeather\t\"\"\tWeather\tFalse\tFalse\t0\t4.12\n10090\tStock\t\"\"\tStock\tFalse\tFalse\t0\t4.12\n10100\tCatalog\t\"\"\tCatalog\tFalse\tFalse\t0\t4.12\n10110\tCapture/Camera\t\"\"\tCapture/Camera\tTrue\tFalse\t0\t4.12\n10120\tClock\t\"\"\tClock\tTrue\tFalse\t0\t4.12\n10122\tCountdown\t\"\"\tCountdown\tTrue\tFalse\t0\t4.12\n10130\tGrid/Chart\t\"\"\tGrid/Chart\tTrue\tFalse\t0\t4.12\n10140\tExt Application\t\"\"\tExt Application\tTrue\tFalse\t0\t4.12\n10145\tWebkit\t\"\"\tWebkit\tTrue\tFalse\t0\t4.33\n10150\tAdvertising\t\"\"\tAdvertising\tTrue\tFalse\t0\t4.12\n10160\tQR Code\t\"\"\tQR Code\tTrue\tFalse\t0\t4.12\n10180\tCollectionViewer\t\"\"\tCollectionViewer\tTrue\tFalse\t0\t4.12\n10185\tLocation based\t\"\"\tLocation based\tTrue\tFalse\t0\t4.33\n10190\tXML Player\t\"\"\tXML Player\tTrue\tFalse\t0\t4.12\n10195\tJSON Player\t\"\"\tJSON Player\tTrue\tFalse\t0\t4.33\n10210\tTwitter\t\"\"\tTwitter\tTrue\tFalse\t0\t4.12\n10220\tYouTube\t\"\"\tYouTube\tTrue\tFalse\t0\t4.12\n10300\tForm\t\"\"\tForm\tTrue\tFalse\t0\t4.12\n10400\tMessage\t\"\"\tMessage\tTrue\tFalse\t0\t4.12\n10500\tLabel Queue\t\"\"\tLabel Queue\tTrue\tFalse\t0\t4.15\n11000\tBrowser\t\"\"\tBrowser\tTrue\tFalse\t0\t4.33\n12000\tDigg\t\"\"\tDigg\tTrue\tFalse\t0\t4.33\n12010\tWorld weather\t\"\"\tWeather\tTrue\tFalse\t0\t4.33\n12020\tFacebook\t\"\"\tFacebook\tTrue\tFalse\t0\t4.33\n12030\tGoogle calendar\t\"\"\tGoogle calendar\tTrue\tFalse\t0\t4.33\n12032\tGoogle Sheets\t\"\"\tGoogle Sheets\tTrue\tFalse\t0\t4.33\n12040\tGoogle plus\t\"\"\tGoogle plus\tTrue\tFalse\t0\t4.33\n12050\tPicasa\t\"\"\tPicasa\tTrue\tFalse\t0\t4.33\n12060\tInstagram\t\"\"\tInstagram\tTrue\tFalse\t0\t4.33\n12070\tGoogle drive\t\"\"\tGoogle drive\tTrue\tFalse\t0\t4.33\n12080\t500px\t\"\"\t500px\tTrue\tFalse\t0\t4.33\n12090\tPinterest\t\"\"\tPinterest\tTrue\tFalse\t0\t4.33\n12100\tFasterQ\t\"\"\tFasterQ\tTrue\tFalse\t0\t4.33\n12200\tTumblr\t\"\"\tTumblr\tTrue\tFalse\t0\t4.33\n12210\tDropbox\t\"\"\tDropbox\tTrue\tFalse\t0\t4.33\n12220\tFlickr\t\"\"\tFlickr\tTrue\tFalse\t0\t4.33\n12230\tTwitter\t\"\"\tTwitter\tTrue\tFalse\t0\t4.33\n12240\tYelp\t\"\"\tYelp\tTrue\tFalse\t0\t4.33\n12250\tEtsy\t\"\"\tEtsy\tTrue\tFalse\t0\t4.33\n12260\tMashape\t\"\"\tMashape\tTrue\tFalse\t0\t4.33" }, { "path": "examples/calendar_google.xml", "content": "scene\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n\n\n \n \n \n \n \n \n\n\n\n\nPlayer\n\n\n \n \n \n \n \n \n\n\n\n\nplayer\n\n\n \n \n \n \n \n \n\n\n\n\n\n\n \n \n \n \n \n \n\n" }, { "path": "examples/collection.xml", "content": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/collection_scene.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/digg.xml", "content": "Scene:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\nPlayer:\n\n\n \n \n \n \n \n \n" }, { "path": "examples/googlesheets.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/instagram_feed.xml", "content": "scene:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\nplayer:\n\n\n \n \n \n \n \n" }, { "path": "examples/jsonItem.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/jsonPlayer.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/json_as3_maps.xml", "content": "\n\n\n\t\n\t\t0)\n\t\t\t\t{\n\n\t\t\t\t\tfor each(var item:Object in m_fieldCollection.source)\n\t\t\t\t\t{\n\t\t\t\t\t\tif (item.name==BlockJsonItemPlayer(m_playerLoader.player).fieldName)\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tfieldCombo.selectedItem = item;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tfieldComboForm.label = \"Field name\";\n\t\t\t\t\tfieldComboForm.visible = true;\n\t\t\t\t\tfieldComboForm.height = NaN;\n\t\t\t\t\tspreadsheetFrame.visible = false;\n\t\t\t\t\tfieldPathForm.enabled = false;\n\t\t\t\t\tfieldTypeForm.enabled = false;\n\t\t\t\t\tfieldCombo.visible = true;\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\tfieldComboForm.label = \"Field name\";\n\t\t\t\t\tfieldComboForm.visible = false;\n\t\t\t\t\tfieldComboForm.height = 10;\n\t\t\t\t\tfieldPathForm.enabled = true;\n\t\t\t\t\tfieldTypeForm.enabled = true;\n\t\t\t\t\tfieldCombo.visible = true;\n\t\t\t\t}\n\n\t\t\t\tfontCtrl.fontItem = BlockJsonItemPlayer(m_playerLoader.player).fontItem;\n\t\t\t\tfor each(var fieldType:Object in ArrayList(fieldTypeCombo.dataProvider).source)\n\t\t\t\t{\n\t\t\t\t\tif (fieldType.name==BlockJsonItemPlayer(m_playerLoader.player).fieldType)\n\t\t\t\t\t{\n\t\t\t\t\t\tfieldTypeCombo.selectedItem = fieldType;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tupdateButtons();\n\t\t\t\tif (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"date\")\n\t\t\t\t{\n\t\t\t\t\tdateFormat.text = BlockJsonItemPlayer(m_playerLoader.player).dateFormat;\n\t\t\t\t}\n\t\t\t\telse if (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"resource\" || BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"object\")\n\t\t\t\t{\n\t\t\t\t\tmaintainAspectRatio.selected = BlockJsonItemPlayer(m_playerLoader.player).maintainAspectRatio;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tprivate function onFieldChanged(event:Event):void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).fieldType= fieldCombo.selectedItem.type;\n\t\t\t\tfieldPath.text = BlockJsonItemPlayer(m_playerLoader.player).fieldName = fieldCombo.selectedItem.name;\n\t\t\t\tif (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"date\")\n\t\t\t\t{\n\t\t\t\t\tdateFormat.text = BlockJsonItemPlayer(m_playerLoader.player).dateFormat;\n\t\t\t\t}\n\t\t\t\telse if (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"resource\" || BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"object\")\n\t\t\t\t{\n\t\t\t\t\tmaintainAspectRatio.selected = BlockJsonItemPlayer(m_playerLoader.player).maintainAspectRatio;\n\t\t\t\t}\n\n\t\t\t\tupdateButtons();\n\n\t\t\t\tfor each(var fieldType:Object in ArrayList(fieldTypeCombo.dataProvider).source)\n\t\t\t\t{\n\t\t\t\t\tif (fieldType.name==BlockJsonItemPlayer(m_playerLoader.player).fieldType)\n\t\t\t\t\t{\n\t\t\t\t\t\tfieldTypeCombo.selectedItem = fieldType;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tprivate function onFieldPathChanged(event:Event):void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).fieldName = fieldPath.text;\n\t\t\t}\n\n\n\t\t\tprivate function onFieldType():void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).fieldType= fieldTypeCombo.selectedItem.name;\n\t\t\t\tupdateButtons();\n\t\t\t}\n\n\t\t\tprivate function onFontChanged(event:Event):void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).fontItem = fontCtrl.fontItem;\n\t\t\t}\n\n\t\t\tprivate function onMaintainAspectRatio():void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).maintainAspectRatio = maintainAspectRatio.selected;\n\t\t\t}\n\n\t\t\tprivate function onDateFormat():void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).dateFormat = dateFormat.text;\n\t\t\t}\n\n\n\t\t\tprivate function onSpreadsheetCell():void\n\t\t\t{\n\t\t\t\tBlockJsonItemPlayer(m_playerLoader.player).fieldName = fieldPath.text = \"$cells.\" + row.value + \".\" + col.value + \".value\";\n\t\t\t}\n\n\t\t\tprivate function updateButtons():void\n\t\t\t{\n\t\t\t\tif (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"text\")\n\t\t\t\t{\n\t\t\t\t\tfontCtrl.visible = true;\n\t\t\t\t\tmaintainAspectRatioForm.visible = false;\n\t\t\t\t\tdateFormatForm.visible = dateInfo.visible = false;\n\t\t\t\t}\n\t\t\t\telse if (BlockJsonItemPlayer(m_playerLoader.player).fieldType==\"date\")\n\t\t\t\t{\n\t\t\t\t\tfontCtrl.visible = true;\n\t\t\t\t\tmaintainAspectRatioForm.visible = false;\n\t\t\t\t\tdateFormatForm.visible = dateInfo.visible = true;\n\t\t\t\t}\n\t\t\t\telse\n\t\t\t\t{\n\t\t\t\t\tfontCtrl.visible = false;\n\t\t\t\t\tmaintainAspectRatioForm.visible = true;\n\t\t\t\t\tdateFormatForm.visible = dateInfo.visible = false;\n\t\t\t\t}\n\t\t\t}\n\t\t]]>\n\t\n\n\t\n\t\n\n\t\n\t\t\n\t\n\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\n\t\n\t\n\n\t\n\t\t\n\n\t\t\n\t\t\t\n\t\t\t\tY Year YY YYYY\n\t\t\t\tM Month in year M MM MMM MMM\n\t\t\t\tD Day in month D DD\n\t\t\t\tE Days in week E EE EEE EEEE\n\t\t\t\tA AM/PM AM or PM\n\t\t\t\tJ Hour in Day 0-23\n\t\t\t\tH Hour in Day 1-24\n\t\t\t\tK Hour in am/pm 0-11\n\t\t\t\tL Hour in am/pm 1-12\n\t\t\t\tN Minute in hour N NN\n\t\t\t\tS Seconds in minute SS\n\t\t\t\n\t\t\n\t\n\n\n" }, { "path": "examples/json_scenes.xml", "content": "\n\n \n \n \n \n \n \n" }, { "path": "examples/jsonsheets.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/location.xml", "content": "\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "examples/player_weather_scene.xml", "content": "\n\n \n \n \n \n \n" }, { "path": "examples/reseller_sample.xml", "content": "\n\n\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n" }, { "path": "examples/sceneSample.xml", "content": "\n\t\n\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tI am qr\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<Font fontSize=\"16\" fontColor=\"102\" fontFamily=\"Arial\" fontWeight=\"bold\" fontStyle=\"normal\" textDecoration=\"none\" textAlign=\"left\"/>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\n" }, { "path": "examples/sceneSampleLayout.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "examples/twitterv3.xml", "content": "Scene\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\nPlayer\n\n\n \n \n \n \n \n \n" }, { "path": "examples/worldweather.xml", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n" }, { "path": "notes.txt", "content": "////////////// NOTES ////////////////\n\n\n\nneed to find a way to remove core-js from videoangular definitions\nsed -i.bak '/core-js/d' './node_modules/videogular2/src/core/vg-media/i-playable.d.ts ; sed -i.bak '/core-js/d' './node_modules/videogular2/src/core/services/vg-api.d.ts'\n\n\nreload video:\nhttps://github.com/videogular/videogular2/issues/442\n\n\nnpm uninstall -g angular-cli @angular/cli\nnpm cache clean\nnpm install -g @angular/cli@latest\nLocal project package:\n\nrm -rf node_modules dist # use rmdir on Windows\nnpm install --save-dev @angular/cli@latest <<<<<<<<<<<<<<<<\nnpm install\n\n\nng init --ng4\n\n\n==================================================================================================================\ndebug sessions:\n\nreflection:\n http://127.0.0.1:8080/src/create_reflection.html\n\nlocal:\n http://localhost:4208/\n\ncampaigns:\n http://localhost:4208/campaigns\n\nFasterqRemoteStatus (base64):\n http://localhost:4208/index.html?mode=remoteStatus¶m=eyJjYWxsX3R5cGUiOiJFTUFJTCIsInNlcnZpY2VfaWQiOjE5LCJ2ZXJpZmljYXRpb24iOjY5NSwibGluZV9pZCI6IjIxMTAiLCJsaW5lX25hbWUiOiIgbmV3IGxpbmUgMSIsImJ1c2luZXNzX2lkIjoiMzU4NjEzIiwic21zIjoiIiwiZW1haWwiOiJib3JuMm5ldEBnbWFpbC5jb20iLCJkYXRlIjoiNC83LzIwMTcifQ==\n\nFasterqTerminal (rc4):\n http://localhost:4208/index.html?data=5b6bcb27d4547657cfe4e021e1c6761fe8b4a33c3d62983ee8f6b0ccbded7b8a6578e47862f0aca0ca7ac070a1a27121fe17f5c496483ee08cf0a061440f277a3e49dcaaf3bb198c71033ed398d60166e3b82c9153f4c3a6d346f7d11b3016\n\nauto-login local demo_lite\n\thttp://localhost:4208/index.html?param=dXNlcj1kZW1vX2xpdGVAbXMuY29tLHBhc3M9cGFzc3dvcmQ=\n\nauto-login remote demo_lite\n\thttps://secure.digitalsignage.com/studioweb/index.html?param=dXNlcj1kZW1vX2xpdGVAbXMuY29tLHBhc3M9cGFzc3dvcmQ=\n\nauto-login remote demo_lite\n https://goo.gl/rru309\n\nauto-login local lite22\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlMjJAbXMuY29tLHBhc3M9MTIzMTIz\n\nauto-login local lite90\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlOTBAbXMuY29tLHBhc3M9MTIzMTIz\n\nauto-login local lite28\n\thttp://localhost:4208/index.html?param=dXNlcj1saXRlMjhAbXMuY29tLHBhc3M9MTIzMTIz\n\n\n==================================================================================================================\n\nrevert webpack ng tools: npm install --save @ngtools/webpack@1.2.4\n\n\n==================================================================================================================\n\n\nclear cache: npm clear cache\n\nnpm install @angular/cli@latest -g\nnpm install -g @angular/cli\n\n\n==================================================================================================================\n\nreflection Usage:\n\nto run this script and generate interface sdk / msdb:\n\nrun live-server inside /cygdrive/c/msweb/studiolite\n\nopen browser to:\n\nhttp://127.0.0.1:8080/src/create_reflection.html\n\n\n==================================================================================================================\n\nSwitching fabric versions:\n\nadd/remove import \"fabric\"; from app-modules.ts\nadd/remove form angular-cli.json:\n\"../node_modules/fabric/dist/fabric.js\"\nor\nangular-cli.json: \"./libs/fabric.require1-4-12.js\",\nor\nto load remotely:\n\n\n\n==================================================================================================================\n\n\n\n\n \n \n \n \n\n \n \n\n\n\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"studioweb\",\n \"version\": \"0.1.778\",\n \"license\": \"Modified GPL (see readme.md)\",\n \"angular-cli\": {},\n \"scripts\": {\n \"postinstall\": \"npm run dev\",\n \"compodoc\": \"./node_modules/.bin/compodoc -p src/tsconfig.json\",\n \"x_disk-build\": \"ng build && npm run sw\",\n \"x_disk-serve\": \"cd dist && live-server --port=4208 --host=localhost --entry-file=/index.html\",\n \"x_reg_release\": \"rm -r -f ./dist && npm run x_bump && npm run x_prod && npm run x_rsync\",\n \"x_start\": \"ng serve\",\n \"x_lint\": \"tslint \\\"src/**/*.ts\\\"\",\n \"x_prod_jit\": \"ng build --target=production --base-href ./ --aot fiw.alse\",\n \"x_prod_aot\": \"ng build --target=production --base-href ./ --aot true\",\n \"x_prod_aot_hebrew\": \"ng build --locale iw -i18n-file src/locale/iw.xtb --i18n-format xtb --target=production --base-href ./ --aot true\",\n \"x_rsync\": \"rsync --progress --chmod=ug=rwx --chmod=o=rx -av --stats -e ssh /cygdrive/c/msweb/studiolite/dist/ Sean@secure.digitalsignage.com:/var/www/sites/dynasite/htdocs/_msportal/_js/_node/_studioweb\",\n \"x_rsync_docs\": \"rsync --progress --chmod=ug=rwx --chmod=o=rx -av --stats -e ssh /cygdrive/c/msweb/studiolite/documentation/ Sean@digitalsignage.com:/var/www/sites/mediasignage.com/htdocs/lite_docs\",\n \"x_rsync_iw\": \"rsync --progress --chmod=ug=rwx --chmod=o=rx -av --stats -e ssh /cygdrive/c/msweb/studiolite/dist/ Sean@digitalsignage.com:/var/www/sites/dynasite/htdocs/_msportal/_js/_node/_studioweb/locale/iw\",\n \"x_sw\": \"sw-precache --root=dist --config=sw-precache-config.js\",\n \"x_bump\": \"gulp x_bump\",\n \"x_cssDev\": \"gulp cssDev\",\n \"x_cssRelease\": \"gulp cssRelease\",\n \"x_translate\": \"node_modules/.bin/ng-xi18n -p src/tsconfig.json --i18nFormat=xmb\",\n \"x_node_copy\": \"cp -r -f ./node_modules/ ./dist/out-tsc/\",\n \"cp module\": \"cp ./node_modules/ng-mslib/src/myng-component.ts ./node_modules/ng-mslib/dist/\",\n \"generate_locale\": \"npm run x_node_copy && npm run x_translate\",\n \"hmr\": \"ng serve --port 4208 --aot false --hmr -e=hmr\",\n \"dev\": \"npm run x_cssDev && ng serve --port 4208 --aot false\",\n \"release_aot_hebrew\": \"npm run x_cssRelease && rm -r -f ./dist && npm run x_bump && npm run x_prod_aot_hebrew && npm run x_sw && npm run x_rsync_iw\",\n \"release_aot\": \"npm run x_cssRelease && rm -r -f ./dist && npm run x_bump && npm run x_prod_aot && npm run x_sw && npm run x_rsync\",\n \"release_aot_no_sync\": \"npm run x_cssRelease && rm -r -f ./dist && npm run x_bump && npm run x_prod_aot && npm run x_sw\",\n \"release_jit\": \"npm run x_cssRelease && rm -r -f ./dist && npm run x_bump && npm run x_prod_jit && npm run x_sw && npm run x_rsync\"\n },\n \"dependencies\": {\n \"@angular/animations\": \"^4.3.1\",\n \"@angular/common\": \"^4.3.1\",\n \"@angular/compiler\": \"^4.3.1\",\n \"@angular/core\": \"^4.3.1\",\n \"@angular/forms\": \"^4.3.1\",\n \"@angular/http\": \"^4.3.1\",\n \"@angular/platform-browser\": \"^4.3.1\",\n \"@angular/platform-browser-dynamic\": \"^4.3.1\",\n \"@angular/router\": \"^4.3.1\",\n \"@ngrx/core\": \"^1.2.0\",\n \"@ngrx/effects\": \"^2.0.0\",\n \"@ngrx/store\": \"^2.2.1\",\n \"@ngrx/store-devtools\": \"^3.2.3\",\n \"@ngtools/webpack\": \"^1.2.4\",\n \"@types/bootbox\": \"^4.4.30\",\n \"@types/gsap\": \"1.19.0\",\n \"@types/lodash\": \"^4.14.52\",\n \"@types/xdate\": \"^0.8.27\",\n \"angular-pipes\": \"^5.4.0\",\n \"angular2-fontawesome\": \"~0.8.0\",\n \"angular2-google-maps\": \"^0.17.0\",\n \"angular2-highcharts\": \"^0.4.1\",\n \"angular2-redux-util\": \"^0.8.86\",\n \"angular2-uuid\": \"^1.1.0\",\n \"bootbox\": \"^4.4.0\",\n \"bootstrap\": \"^3.3.7\",\n \"core-js\": \"^2.4.1\",\n \"fabric\": \"git://github.com/born2net/fabric.js.git\",\n \"font-awesome\": \"~4.7.0\",\n \"gsap\": \"1.19.1\",\n \"gulp-bump\": \"^2.5.1\",\n \"hammerjs\": \"^2.0.8\",\n \"immutable\": \"^3.8.1\",\n \"jquery\": \"^3.1.1\",\n \"lodash\": \"^4.17.4\",\n \"moment\": \"^2.17.1\",\n \"ng-mslib\": \"^1.0.109\",\n \"ng-validators\": \"^0.2.1\",\n \"ng2-bs3-modal\": \"^0.10.4\",\n \"ng2-toastr\": \"^4.1.2\",\n \"ngrx-store-freeze\": \"^0.1.6\",\n \"ngx-bootstrap\": \"^1.7.1\",\n \"ngx-color-picker\": \"^4.0.0\",\n \"ngx-contextmenu\": \"^1.0.3\",\n \"platform\": \"^1.3.3\",\n \"primeng\": \"^4.0.0-rc.2\",\n \"print-js\": \"^1.0.34\",\n \"redux\": \"^3.6.0\",\n \"redux-thunk\": \"^2.1.0\",\n \"reselect\": \"^2.5.4\",\n \"rxjs\": \"^5.4.2\",\n \"stacktrace-js\": \"^1.3.1\",\n \"string\": \"^3.3.3\",\n \"ts-helpers\": \"^1.1.1\",\n \"typescript\": \"2.4.0\",\n \"videogular2\": \"^5.2.0\",\n \"x2js\": \"^3.1.0\",\n \"xdate\": \"^0.8.0\",\n \"xml2js\": \"^0.4.17\",\n \"zone.js\": \"^0.8.12\"\n },\n \"devDependencies\": {\n \"@angular/cli\": \"^1.0.1\",\n \"@angular/compiler-cli\": \"^4.3.1\",\n \"@angular/language-service\": \"^4.3.1\",\n \"@angularclass/hmr\": \"^1.2.2\",\n \"@compodoc/compodoc\": \"^1.0.0-beta.9\",\n \"@types/core-js\": \"^0.9.41\",\n \"@types/hammerjs\": \"^2.0.33\",\n \"@types/immutable\": \"^3.8.6\",\n \"@types/jasmine\": \"2.5.38\",\n \"@types/jquery\": \"^2.0.34\",\n \"@types/node\": \"^6.0.42\",\n \"@types/x2js\": \"0.0.27\",\n \"autoprefixer\": \"^6.6.1\",\n \"co\": \"^4.6.0\",\n \"codelyzer\": \"~2.0.0\",\n \"fs-extra\": \"^2.1.2\",\n \"gulp\": \"^3.9.1\",\n \"gulp-comment-swap\": \"0.0.10\",\n \"gulp-concat\": \"^2.6.0\",\n \"gulp-git\": \"^1.6.0\",\n \"gulp-inject\": \"^1.3.1\",\n \"gulp-insert\": \"^0.5.0\",\n \"gulp-replace\": \"^0.5.4\",\n \"gulp-rimraf\": \"^0.2.0\",\n \"gulp-shell\": \"^0.5.2\",\n \"gulp-sourcemaps\": \"^1.6.0\",\n \"gulp-tslint\": \"^4.3.1\",\n \"gulp-tslint-stylish\": \"^1.1.1\",\n \"gulp-typedoc\": \"^1.2.1\",\n \"gulp-typescript\": \"^3.0.1\",\n \"gulp-uglify\": \"^1.2.0\",\n \"gulp-util\": \"^3.0.7\",\n \"gulp-watch\": \"^4.2.4\",\n \"node-fetch\": \"^1.6.3\",\n \"replace\": \"^0.3.0\",\n \"rsync\": \"^0.5.0\",\n \"run-sequence\": \"^1.2.2\",\n \"sw-precache\": \"4.2.1\",\n \"ts-node\": \"~2.0.0\",\n \"tslint\": \"~4.4.2\",\n \"webdriver-manager\": \"10.2.5\",\n \"xml2js\": \"^0.4.17\"\n }\n}\n" }, { "path": "src/Lib.ts", "content": "/** Common Library **/\nimport {Injectable} from \"@angular/core\";\nimport * as Immutable from \"immutable\";\nimport {List, Map} from \"immutable\";\nimport * as _ from \"lodash\";\nimport * as moment from 'moment'\nimport {Observable} from \"rxjs\";\nimport {PartialObserver} from \"rxjs/Observer\";\nimport {AnonymousSubscription} from \"rxjs/Subscription\";\nimport {environment} from \"./environments/environment\";\nimport {FormGroup, ValidatorFn} from \"@angular/forms\";\n\nexport var simpleRegExp = '[\\\\[\\\\]\\\\-A-Za-z0-9_~=!:@\\.|\\ ]{3,50}';\n//(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,})\nexport var urlRegExp = `(https?:\\/\\/(?:www\\.|(?!www))\\.*)`\n\n\n/** this control value must be equal to given control's value */\nexport function equalValueValidator(targetKey: string, toMatchKey: string): ValidatorFn {\n return (group: FormGroup): { [key: string]: any } => {\n const target = group.controls[targetKey];\n const toMatch = group.controls[toMatchKey];\n if (target.touched && toMatch.touched) {\n const isMatch = target.value === toMatch.value;\n // set equal value error on dirty controls\n if (!isMatch && target.valid && toMatch.valid) {\n toMatch.setErrors({equalValue: targetKey});\n const message = targetKey + ' != ' + toMatchKey;\n return {'equalValue': message};\n }\n if (isMatch && toMatch.hasError('equalValue')) {\n toMatch.setErrors(null);\n }\n }\n\n return null;\n };\n}\n\nconst rxjsDebugger = true;\nconst rc4Key = '226a3a42f34ddd778ed2c3ba56644315';\nObservable.prototype.sub = Observable.prototype.subscribe;\n\nwindow['con'] = (msg, stringify) => {\n if (Lib.DevMode()) {\n if (stringify)\n msg = JSON.stringify(msg);\n console.info(`${_.uniqueId()}:${new Date().toLocaleTimeString()} ${msg}`);\n }\n\n}\n\ndeclare module 'rxjs/Observable' {\n interface Observable {\n debug: (...any) => Observable\n }\n\n // interface Observable {\n // get(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;\n // }\n}\n\ndeclare module \"rxjs/Observable\" {\n interface Observable {\n sub: (observerOrNext: PartialObserver | ((value: T) => void),\n error: (error: any) => void,\n complete?: () => void) => AnonymousSubscription;\n }\n}\n\nObservable.prototype.debug = function (message: string) {\n return this.do(\n nextValue => {\n if (rxjsDebugger) {\n console.debug('ObsDebug-I: ' + message, (nextValue.type || nextValue))\n }\n },\n error => {\n if (rxjsDebugger) {\n console.error('ObsDebug-E: ' + message, error)\n }\n },\n () => {\n if (rxjsDebugger) {\n console.debug('ObsDebug-C: ' + message);\n /** for DevTools colors: **/\n //console.log(\"%cObsDebug-C %s\", \"color: red\", message);\n }\n }\n );\n};\n\n@Injectable()\nexport class Lib {\n\n static Con(msg: any, stringify?: boolean) {\n con(msg, stringify)\n }\n\n /**\n *\n * @param dateString format of date + time: /Date(1469923200000+0000)/\"\n * @returns {any}\n * @constructor\n */\n static ProcessDateField(dateString: string, addDay: boolean = false): any {\n if (_.isUndefined(dateString))\n return '';\n var epoc = dateString.match(/Date\\((.*)\\)/)\n if (epoc[1]) {\n var date = epoc[1].split('+')[0]\n var time = epoc[1].split('+')[1]\n var result;\n //todo: adding +1 on save to server hack, need to ask Alon\n if (addDay) {\n result = moment(Number(date)).add(1, 'day');\n } else {\n result = moment(Number(date));\n }\n return moment(result).format('YYYY-MM-DD');\n /** moment examples\n var a = moment().unix().format()\n console.log(moment.now());\n console.log(moment().format('dddd'));\n console.log(moment().startOf('day').fromNow());\n **/\n }\n }\n\n static ToValidNumber(i_value): number {\n if (_.isNaN(i_value))\n return 0;\n if (_.isNumber(i_value))\n return i_value;\n return 0;\n }\n\n static Try(i_fn: () => void) {\n try {\n i_fn();\n } catch (e) {\n if (Lib.DevMode())\n console.error('Lib.Try exception in function: ' + i_fn + ' ' + e);\n }\n }\n\n /** deep compare two objects **/\n static IsEqual(obj1, obj2) {\n function _equals(obj1, obj2) {\n var clone = $.extend(true, {}, obj1);\n var cloneStr = JSON.stringify(clone);\n return cloneStr === JSON.stringify($.extend(true, clone, obj2));\n }\n\n return _equals(obj1, obj2) && _equals(obj2, obj1);\n }\n\n static GetThemeColor() {\n var light = true;\n if (light)\n return '#428ac9 ';\n return '#eb7c66';\n }\n\n static EncryptUserPass(i_user, i_pass) {\n var rc4 = new RC4(rc4Key);\n var crumb = i_user + ':SignageStudioLite:' + i_pass + ':' + ' USER'\n return rc4.doEncrypt(crumb);\n }\n\n static AlertOnLeave() {\n if (!Lib.DevMode()) {\n window.onbeforeunload = function (e) {\n var message = \"Did you save your changes?\",\n e = e || window.event;\n // For IE and Firefox\n if (e) {\n e.returnValue = message;\n }\n // For Safari\n return message;\n };\n }\n\n }\n\n /**\n Format a seconds value into an object broken into hours / minutes / seconds\n @method formatSecondsToObject\n @param {Number} i_totalSeconds\n @return {Object}\n **/\n static FormatSecondsToObject(i_totalSeconds) {\n var seconds: any = 0;\n var minutes: any = 0;\n var hours: any = 0;\n var totalInSeconds = i_totalSeconds;\n if (i_totalSeconds >= 3600) {\n hours = Math.floor(i_totalSeconds / 3600);\n i_totalSeconds = i_totalSeconds - (hours * 3600);\n }\n if (i_totalSeconds >= 60) {\n minutes = Math.floor(i_totalSeconds / 60);\n seconds = i_totalSeconds - (minutes * 60);\n }\n if (hours == 0 && minutes == 0)\n seconds = i_totalSeconds;\n var playbackLength = {\n hours: parseInt(hours),\n minutes: parseInt(minutes),\n seconds: parseInt(seconds),\n totalInSeconds: parseInt(totalInSeconds)\n };\n return playbackLength;\n }\n\n /**\n *\n * @param dateString format of date + time: /Date(1469923200000+0000)/\"\n * @returns {any}\n * @constructor\n */\n static ProcessDateFieldToUnix(dateString: string, addDay: boolean = false): any {\n if (_.isUndefined(dateString))\n return '';\n //todo: adding +1 on save to server hack, need to ask Alon\n if (addDay) {\n return moment(dateString, 'YYYY-MM-DD').add(0, 'day').valueOf();\n } else {\n return moment(dateString, 'YYYY-MM-DD').valueOf();\n }\n }\n\n /**\n Pad zeros\n @method padZeros\n @param {Number} n value\n @param {Number} width pre-pad width\n @param {Number} z negative as in '-'\n @return {Number} zero padded string\n **/\n static PadZeros(n, width, z) {\n z = z || '0';\n n = n + '';\n return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;\n }\n\n /**\n Convert number or string to float with double precision\n @method parseToFloatDouble\n @param {Object} i_value\n @return {Number}\n **/\n static ParseToFloatDouble(i_value: any): number {\n return parseFloat(parseFloat(i_value).toFixed(2));\n }\n\n /**\n Capitilize first letter\n @method capitaliseFirst\n @param {String} string\n @return {String} string\n **/\n static CapitaliseFirst(string) {\n return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();\n }\n\n /**\n base64Encode\n @method base64Encode\n @param {String}\n @return {String}\n **/\n static Base64Encode(str) {\n var c1, c2, c3;\n var Base64 = {\n _keyStr: \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\", encode: function (e) {\n var t = \"\";\n var n, r, i, s, o, u, a;\n var f = 0;\n e = Base64._utf8_encode(e);\n while (f < e.length) {\n n = e.charCodeAt(f++);\n r = e.charCodeAt(f++);\n i = e.charCodeAt(f++);\n s = n >> 2;\n o = (n & 3) << 4 | r >> 4;\n u = (r & 15) << 2 | i >> 6;\n a = i & 63;\n if (isNaN(r)) {\n u = a = 64\n } else if (isNaN(i)) {\n a = 64\n }\n t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)\n }\n return t\n }, decode: function (e) {\n var t = \"\";\n var n, r, i;\n var s, o, u, a;\n var f = 0;\n e = e.replace(/[^A-Za-z0-9\\+\\/\\=]/g, \"\");\n while (f < e.length) {\n s = this._keyStr.indexOf(e.charAt(f++));\n o = this._keyStr.indexOf(e.charAt(f++));\n u = this._keyStr.indexOf(e.charAt(f++));\n a = this._keyStr.indexOf(e.charAt(f++));\n n = s << 2 | o >> 4;\n r = (o & 15) << 4 | u >> 2;\n i = (u & 3) << 6 | a;\n t = t + String.fromCharCode(n);\n if (u != 64) {\n t = t + String.fromCharCode(r)\n }\n if (a != 64) {\n t = t + String.fromCharCode(i)\n }\n }\n t = Base64._utf8_decode(t);\n return t\n }, _utf8_encode: function (e) {\n e = e.replace(/\\r\\n/g, \"\\n\");\n var t = \"\";\n for (var n = 0; n < e.length; n++) {\n var r = e.charCodeAt(n);\n if (r < 128) {\n t += String.fromCharCode(r)\n } else if (r > 127 && r < 2048) {\n t += String.fromCharCode(r >> 6 | 192);\n t += String.fromCharCode(r & 63 | 128)\n } else {\n t += String.fromCharCode(r >> 12 | 224);\n t += String.fromCharCode(r >> 6 & 63 | 128);\n t += String.fromCharCode(r & 63 | 128)\n }\n }\n return t\n }, _utf8_decode: function (e) {\n var t = \"\";\n var n = 0;\n var r = c1 = c2 = 0;\n while (n < e.length) {\n r = e.charCodeAt(n);\n if (r < 128) {\n t += String.fromCharCode(r);\n n++\n } else if (r > 191 && r < 224) {\n c2 = e.charCodeAt(n + 1);\n t += String.fromCharCode((r & 31) << 6 | c2 & 63);\n n += 2\n } else {\n c2 = e.charCodeAt(n + 1);\n c3 = e.charCodeAt(n + 2);\n t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);\n n += 3\n }\n }\n return t\n }\n }\n return Base64.encode(str);\n }\n\n /**\n base64Decode\n @method base64Decode\n @param {String}\n @return {String}\n **/\n static Base64Decode(str) {\n var c1, c2, c3;\n var Base64 = {\n _keyStr: \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\", encode: function (e) {\n var t = \"\";\n var n, r, i, s, o, u, a;\n var f = 0;\n e = Base64._utf8_encode(e);\n while (f < e.length) {\n n = e.charCodeAt(f++);\n r = e.charCodeAt(f++);\n i = e.charCodeAt(f++);\n s = n >> 2;\n o = (n & 3) << 4 | r >> 4;\n u = (r & 15) << 2 | i >> 6;\n a = i & 63;\n if (isNaN(r)) {\n u = a = 64\n } else if (isNaN(i)) {\n a = 64\n }\n t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)\n }\n return t\n }, decode: function (e) {\n var t = \"\";\n var n, r, i;\n var s, o, u, a;\n var f = 0;\n e = e.replace(/[^A-Za-z0-9\\+\\/\\=]/g, \"\");\n while (f < e.length) {\n s = this._keyStr.indexOf(e.charAt(f++));\n o = this._keyStr.indexOf(e.charAt(f++));\n u = this._keyStr.indexOf(e.charAt(f++));\n a = this._keyStr.indexOf(e.charAt(f++));\n n = s << 2 | o >> 4;\n r = (o & 15) << 4 | u >> 2;\n i = (u & 3) << 6 | a;\n t = t + String.fromCharCode(n);\n if (u != 64) {\n t = t + String.fromCharCode(r)\n }\n if (a != 64) {\n t = t + String.fromCharCode(i)\n }\n }\n t = Base64._utf8_decode(t);\n return t\n }, _utf8_encode: function (e) {\n e = e.replace(/\\r\\n/g, \"\\n\");\n var t = \"\";\n for (var n = 0; n < e.length; n++) {\n var r = e.charCodeAt(n);\n if (r < 128) {\n t += String.fromCharCode(r)\n } else if (r > 127 && r < 2048) {\n t += String.fromCharCode(r >> 6 | 192);\n t += String.fromCharCode(r & 63 | 128)\n } else {\n t += String.fromCharCode(r >> 12 | 224);\n t += String.fromCharCode(r >> 6 & 63 | 128);\n t += String.fromCharCode(r & 63 | 128)\n }\n }\n return t\n }, _utf8_decode: function (e) {\n var t = \"\";\n var n = 0;\n var r = c1 = c2 = 0;\n while (n < e.length) {\n r = e.charCodeAt(n);\n if (r < 128) {\n t += String.fromCharCode(r);\n n++\n } else if (r > 191 && r < 224) {\n c2 = e.charCodeAt(n + 1);\n t += String.fromCharCode((r & 31) << 6 | c2 & 63);\n n += 2\n } else {\n c2 = e.charCodeAt(n + 1);\n c3 = e.charCodeAt(n + 2);\n t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);\n n += 3\n }\n }\n return t\n }\n }\n return Base64.decode(str);\n }\n\n /**\n Simplify a string to basic character set\n @method cleanChar\n @param {String} value\n @return {String} cleaned string\n **/\n static CleanChar(value) {\n if (value == null)\n value = '';\n if ($.isNumeric(value))\n return value;\n value = value.replace(/,/g, ' ');\n value = value.replace(/\\\\}/g, ' ');\n value = value.replace(/{/g, ' ');\n value = value.replace(/\"/g, ' ');\n value = value.replace(/'/g, ' ');\n value = value.replace(/&/g, 'and');\n value = value.replace(/>/g, ' ');\n value = value.replace(//ig, \")\");\n }\n case 3: {\n i_string = i_string.replace(/&/ig, \"and\");\n }\n case 4: {\n i_string = i_string.replace(/\"/ig, \"`\");\n i_string = i_string.replace(/'/ig, \"`\");\n }\n }\n return i_string;\n }\n\n static IsNumber(value) {\n if (_.isNaN(Number(value))) return false;\n return true;\n }\n\n static CleanCharForXml(value: any): any {\n var clean = function (value: string) {\n if (_.isUndefined(value))\n return '';\n if (_.isNull(value))\n return '';\n if (_.isNumber(value))\n return value;\n if (_.isBoolean(value))\n return value;\n value = value.replace(/\\}/g, ' ');\n value = value.replace(/%/g, ' ');\n value = value.replace(/{/g, ' ');\n value = value.replace(/\"/g, '`');\n value = value.replace(/'/g, '`');\n value = value.replace(/&/g, 'and');\n value = value.replace(/>/g, ' ');\n value = value.replace(/ {\n // currently we don't support / clean arrays\n if (_.isArray(value[k]))\n return value[k] = v;\n value[k] = clean(v);\n });\n return value;\n }\n\n static UnionList(a: List, b: List) {\n return a.toSet().union(b.toSet()).toList();\n }\n\n static ProcessHourStartEnd(value: string, key: string): any {\n if (_.isUndefined(!value))\n return '';\n if (key == 'hourStart')\n return `${value}:00`;\n return `${value}:59`;\n }\n\n /**\n * CheckFoundIndex will check if a return value is -1 and error out if in dev mode (list.findIndex or indexOf for example)\n * @param i_value\n * @param i_message\n * @returns {number}\n * @constructor\n */\n static CheckFoundIndex(i_value: number, i_message: string = 'CheckFoundIndex did not find index'): number {\n if (i_value === -1) {\n console.log(i_message);\n if (Lib.DevMode()) {\n alert(i_message);\n throw Error(i_message);\n }\n }\n return i_value;\n }\n\n // static GetCompSelector(i_constructor) {\n // return 'need to fix 2';\n // if (!Lib.DevMode())\n // return;\n // var annotations = Reflect.getMetadata('annotations', i_constructor);\n // var componentMetadata = annotations.find(annotation => {\n // return (annotation instanceof Component);\n // });\n // return componentMetadata.selector;\n // }\n\n static BootboxHide(i_time = 1500) {\n setTimeout(() => {\n bootbox.hideAll();\n }, i_time)\n }\n\n static DateToAbsolute(year, month) {\n return year * 12 + month;\n }\n\n static DateFromAbsolute(value: number) {\n var year = Math.floor(value / 12);\n var month = value % 12 + 1;\n return {\n year,\n month\n }\n }\n\n static MapOfIndex(map: Map, index: number, position: \"first\" | \"last\"): string {\n var mapJs = map.toJS();\n var mapJsPairs = _.toPairs(mapJs);\n var offset = position == 'first' ? 0 : 1;\n if (mapJsPairs[index] == undefined)\n return \"0\"\n return mapJsPairs[index][offset];\n }\n\n /**\n * PrivilegesXmlTemplate will generate a template for priveleges in 2 possible modes\n *\n * mode 1: just a raw template (we will ignore the values set) and this is the mode when\n * no selPrivName and appStore params are given\n *\n * mode 2: is when we actually serialize data to save to server and in this mode we do pass\n * in the selPrivName and appStore which we use to retrieve current values from user appStore\n * and generate the final XML to save to server\n *\n * @param selPrivName\n * @param appStore\n * @param callBack\n * @constructor\n */\n static Base64() {\n\n var _PADCHAR = \"=\", _ALPHA = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/\", _VERSION = \"1.0\";\n\n\n function _getbyte64(s, i) {\n // This is oddly fast, except on Chrome/V8.\n // Minimal or no improvement in performance by using a\n // object with properties mapping chars to value (eg. 'A': 0)\n\n var idx = _ALPHA.indexOf(s.charAt(i));\n\n if (idx === -1) {\n throw \"Cannot decode base64\";\n }\n\n return idx;\n }\n\n\n function _decode(s) {\n var pads = 0, i, b10, imax = s.length, x = [];\n\n s = String(s);\n\n if (imax === 0) {\n return s;\n }\n\n if (imax % 4 !== 0) {\n throw \"Cannot decode base64\";\n }\n\n if (s.charAt(imax - 1) === _PADCHAR) {\n pads = 1;\n\n if (s.charAt(imax - 2) === _PADCHAR) {\n pads = 2;\n }\n\n // either way, we want to ignore this last block\n imax -= 4;\n }\n\n for (i = 0; i < imax; i += 4) {\n b10 = ( _getbyte64(s, i) << 18 ) | ( _getbyte64(s, i + 1) << 12 ) | ( _getbyte64(s, i + 2) << 6 ) | _getbyte64(s, i + 3);\n x.push(String.fromCharCode(b10 >> 16, ( b10 >> 8 ) & 0xff, b10 & 0xff));\n }\n\n switch (pads) {\n case 1:\n b10 = ( _getbyte64(s, i) << 18 ) | ( _getbyte64(s, i + 1) << 12 ) | ( _getbyte64(s, i + 2) << 6 );\n x.push(String.fromCharCode(b10 >> 16, ( b10 >> 8 ) & 0xff));\n break;\n\n case 2:\n b10 = ( _getbyte64(s, i) << 18) | ( _getbyte64(s, i + 1) << 12 );\n x.push(String.fromCharCode(b10 >> 16));\n break;\n }\n\n return x.join(\"\");\n }\n\n\n function _getbyte(s, i) {\n var x = s.charCodeAt(i);\n\n if (x > 255) {\n throw \"INVALID_CHARACTER_ERR: DOM Exception 5\";\n }\n\n return x;\n }\n\n\n function _encode(s) {\n if (arguments.length !== 1) {\n throw \"SyntaxError: exactly one argument required\";\n }\n\n s = String(s);\n\n var i, b10, x = [], imax = s.length - s.length % 3;\n\n if (s.length === 0) {\n return s;\n }\n\n for (i = 0; i < imax; i += 3) {\n b10 = ( _getbyte(s, i) << 16 ) | ( _getbyte(s, i + 1) << 8 ) | _getbyte(s, i + 2);\n x.push(_ALPHA.charAt(b10 >> 18));\n x.push(_ALPHA.charAt(( b10 >> 12 ) & 0x3F));\n x.push(_ALPHA.charAt(( b10 >> 6 ) & 0x3f));\n x.push(_ALPHA.charAt(b10 & 0x3f));\n }\n\n switch (s.length - imax) {\n case 1:\n b10 = _getbyte(s, i) << 16;\n x.push(_ALPHA.charAt(b10 >> 18) + _ALPHA.charAt(( b10 >> 12 ) & 0x3F) + _PADCHAR + _PADCHAR);\n break;\n\n case 2:\n b10 = ( _getbyte(s, i) << 16 ) | ( _getbyte(s, i + 1) << 8 );\n x.push(_ALPHA.charAt(b10 >> 18) + _ALPHA.charAt(( b10 >> 12 ) & 0x3F) + _ALPHA.charAt(( b10 >> 6 ) & 0x3f) + _PADCHAR);\n break;\n }\n\n return x.join(\"\");\n }\n\n\n return {\n decode: _decode,\n encode: _encode,\n VERSION: _VERSION\n };\n }\n\n // static LoadComponentAsync(name: string, path: string) {\n //\n // return System.import(path).then(c => c[name]);\n //\n // //return System.import('/dist/public/out.js')\n // // .catch(function (e) {\n // // alert('prob loading out.js ' + e);\n // // }).then(function (e) {\n // // alert(e);\n // // alert(e[name]);\n // // alert(JSON.stringify(e));\n // // return System.import('App1').then(c => c[name]);\n // // });\n // }\n\n\n static ConstructImmutableFromTable(path): Array {\n var arr = [];\n path.forEach((member) => {\n var obj = {};\n obj[member._attr.name] = {\n table: {}\n }\n for (var k in member._attr) {\n var value = member._attr[k]\n obj[member._attr.name][k] = value;\n for (var t in member.Tables[\"0\"]._attr) {\n var value = member.Tables[\"0\"]._attr[t]\n obj[member._attr.name]['table'][t] = value;\n }\n }\n arr.push(Immutable.fromJS(obj));\n });\n return arr;\n }\n\n static ComputeMask(accessMask): number {\n var bits = [1, 2, 4, 8, 16, 32, 64, 128];\n var computedAccessMask = 0;\n accessMask.forEach(value => {\n var bit = bits.shift();\n if (value) computedAccessMask = computedAccessMask + bit;\n\n })\n return computedAccessMask;\n }\n\n static ValidateEmail(email) {\n var re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(email);\n }\n\n static GetAccessMask(accessMask): List {\n var checks = List();\n var bits = [1, 2, 4, 8, 16, 32, 64, 128];\n for (var i = 0; i < bits.length; i++) {\n let checked = (bits[i] & accessMask) > 0 ? true : false;\n checks = checks.push(checked)\n }\n return checks;\n }\n\n static GetADaysMask(accessMask): List {\n var checks = List();\n var bits = [1, 2, 4, 8, 16, 32, 64];\n for (var i = 0; i < bits.length; i++) {\n let checked = (bits[i] & accessMask) > 0 ? true : false;\n checks = checks.push(checked)\n }\n return checks;\n }\n\n static log(msg) {\n console.log(new Date().toTimeString().replace(/.*(\\d{2}:\\d{2}:\\d{2}).*/, \"$1\") + ': ' + msg);\n }\n\n static guid(): string {\n function s4() {\n return Math.floor((1 + Math.random()) * 0x10000)\n .toString(16)\n .substring(1);\n }\n\n return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();\n }\n\n /**\n Smart convert color (many) to decinal\n @method colorToDecimal\n @param {String} color\n @return {Number} decimal\n **/\n static ColorToDecimal(color) {\n if (color.match('rgb')) {\n color = this.RgbToHex(color);\n return this.HexToDecimal(color)\n }\n return this.HexToDecimal(color);\n }\n\n static ColorToHex(color) {\n if (color.match('#')) {\n return color;\n }\n if (color.match('rgb')) {\n return '#' + this.RgbToHex(color);\n }\n return '#' + color;\n }\n\n /**\n Hex to decimal converter\n @method hexToDecimal\n @param {String} h\n @return {Number} decimal\n **/\n static HexToDecimal(h) {\n function hexfix(str) {\n var v, w;\n v = parseInt(str, 16);\t// in rrggbb\n if (str.length == 3) {\n // nybble colors - fix to hex colors\n // 0x00000rgb -> 0x000r0g0b\n // 0x000r0g0b | 0x00r0g0b0 -> 0x00rrggbb\n w = ((v & 0xF00) << 8) | ((v & 0x0F0) << 4) | (v & 0x00F);\n v = w | (w << 4);\n }\n return v.toString(16).toUpperCase();\n }\n\n\n var h = h.replace(/#/gi, '');\n h = hexfix(h);\n return parseInt(h, 16);\n }\n\n /**\n RGB color to hex converter\n @method rgbToHex\n @param {Number} rgb\n @return {String} hex\n **/\n static RgbToHex(rgb) {\n function componentFromStr(numStr, percent) {\n var num = Math.max(0, parseInt(numStr, 10));\n return percent ?\n Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);\n }\n\n var rgbRegex = /^rgb\\(\\s*(-?\\d+)(%?)\\s*,\\s*(-?\\d+)(%?)\\s*,\\s*(-?\\d+)(%?)\\s*\\)$/;\n var result, r, g, b, hex = \"\";\n if ((result = rgbRegex.exec(rgb))) {\n r = componentFromStr(result[1], result[2]);\n g = componentFromStr(result[3], result[4]);\n b = componentFromStr(result[5], result[6]);\n hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);\n }\n return hex;\n }\n\n /**\n Decimal to hex converter\n @method decimalToHex\n @param {Number} d\n @return {String} hex\n **/\n static DecimalToHex(d) {\n var hex = Number(d).toString(16);\n hex = \"000000\".substr(0, 6 - hex.length) + hex;\n return hex;\n }\n\n static ReduxLoggerMiddleware = store => next => action => {\n // console.log(\"dispatching\", action.type);\n let result = next(action);\n //console.log(\"next state\", store.getState());\n return result\n };\n\n /**\n this.ngmslibService.inDevMode() uses url localhost (window.location.href.indexOf('localhost') > -1)\n while Lib.DevMode uses environment var\n */\n static DevMode(): boolean {\n if (environment.production) {\n return false;\n }\n return true;\n }\n\n static GetSamples(): Object {\n return {\n 1019: 'Sushi Restaurant,pro',\n 1029: 'food menu board,pro',\n 1007: 'Home and Garden,pro',\n 1009: 'Hotel Lobby,pro',\n 1016: 'Coffee Shop,pro',\n 1011: 'Hobby Shop,pro',\n 1013: 'Sports Bar,pro',\n 1014: 'Museum,pro',\n 1017: 'Bank,pro',\n 1018: 'Gas Station,pro',\n 1020: 'Casino,pro',\n 1000: 'Travel,pro',\n 1021: 'Bicycle Shop,pro',\n 1022: 'Tanning Salon,pro',\n 1023: 'Pharmacy,pro',\n 1024: 'Laser Away,pro',\n 1025: 'Dentistry,pro',\n 1026: 'Clothing store,pro',\n 1027: 'Golf club,pro',\n 1028: 'RC Heli,pro',\n 1030: 'seven eleven,pro',\n 1031: 'Subway,pro',\n 1032: 'Super market,pro',\n 1033: 'Investment Group,pro',\n 1035: 'Synagogue,pro',\n 1036: 'Dry Cleaning,pro',\n 1037: 'Ice Cream Shop,pro',\n 1038: 'Real Estate office,pro',\n 1039: 'Night Club,pro',\n 1040: 'Hockey,pro',\n 1041: 'Train Station,pro',\n 1042: 'Realtor,pro',\n 1043: 'Toy Store,pro',\n 1044: 'Indian Restaurant,pro',\n 1045: 'Library,pro',\n 1046: 'Movie Theater,pro',\n 1047: 'Airport,pro',\n 1048: 'LAX,pro',\n 100310: 'Motel,pro',\n 100301: 'Parks and Recreations,pro',\n 100322: 'Corner Bakery,pro',\n 100331: 'Retirement home,pro',\n 100368: 'Navy recruiting office,pro',\n 100397: 'Martial arts school,pro',\n 100414: 'Supercuts,pro',\n 100432: 'The UPS Store,pro',\n 100438: 'Cruise One,pro',\n 100483: 'Car service,pro',\n 100503: 'fedex kinkos,pro',\n 100510: 'veterinarian,pro',\n 100556: 'YMCA,pro',\n 100574: 'Tax services,pro',\n 100589: 'Wedding planner,pro',\n 100590: 'Cleaning services,pro',\n 100620: 'Pet Training,pro',\n 100661: 'Gymboree Kids,pro',\n 100677: 'Trader Joes,pro',\n 100695: 'Men Haircuts,pro',\n 100722: 'Jiffy Lube,pro',\n 100738: 'Toyota car dealer,pro',\n 100747: 'Winery,pro',\n 100771: 'Savings and Loans,pro',\n 100805: 'Nail Salon,pro',\n 100822: 'Weight Watchers,pro',\n 100899: 'Dollar Tree,pro',\n 100938: 'Western Bagles,pro',\n 100959: 'Kaiser Permanente,pro',\n 300143: 'Funeral home,pro',\n 205734: 'Church,pro',\n 220354: 'College,pro',\n 206782: 'Dr Waiting Room,pro',\n 300769: 'NFL Stadium,pro',\n 301814: 'University Campus,pro',\n 303038: 'Day care,pro',\n 304430: 'GameStop,pro',\n 307713: 'Del Taco,pro',\n 305333: 'General Hospital,pro',\n 305206: 'Starbucks,pro',\n 308283: 'training and fitness,pro',\n 311519: 'High school hall,pro',\n 309365: 'Winery,pro',\n 310879: 'Law Firm,pro',\n 1001: 'Health Club,pro',\n 1002: 'Gym,pro',\n 1003: 'Flower Shop,pro',\n 1004: 'Car Dealership,pro',\n 1012: 'Pet Shop,pro',\n 1005: 'Hair Salon,pro',\n 1209: 'Motorcycle shop,lite',\n 1210: 'Sushi and Grill,lite',\n 1211: 'the Coffee Shop,lite',\n 1212: 'Pizzeria,lite',\n 1213: 'Music Store,lite',\n 1214: 'Diner,lite',\n 1215: 'the Hair Salon,lite',\n 1216: 'Dentist,lite',\n 1203: 'Jewelry,lite',\n 1217: 'Crossfit,lite',\n 1218: 'Copy and Print shop,lite',\n 1219: 'Antique Store,lite',\n 1220: 'Clock Repair Store,lite',\n 1221: 'Eastern Cuisine,lite',\n 1222: 'the Toy Store,lite',\n 1223: 'Pet Store Grooming,lite',\n 1224: 'the Veterinarian,lite',\n 1225: 'Tattoo Parlor,lite',\n 1226: 'Camera Store,lite',\n 1228: 'Bike shop,lite',\n 1229: 'Gun Shop,lite',\n 1230: 'Chiropractic Clinic,lite',\n 1231: 'French Restaurant,lite',\n 1233: 'Winery,lite',\n 1232: 'Mexican Taqueria,lite',\n 1234: 'Bistro Restaurant,lite',\n 1235: 'Vitamin Shop,lite',\n 1227: 'Tailor Shop,lite',\n 1236: 'Computer Repair,lite',\n 1237: 'Car Detail,lite',\n 1238: 'Asian Restaurants,lite',\n 1239: 'Marijuana Dispensary,lite',\n 1240: 'the Church,lite',\n 1241: 'Synagogue,lite',\n 1242: 'Frozen Yogurt Store,lite',\n 1244: 'Baby Day Care,lite',\n 1052: 'Car wash,lite',\n 1053: 'Smoke shop,lite',\n 1054: 'Yoga place,lite',\n 1055: 'Laundromat,lite',\n 1056: 'Baby clothes,lite',\n 1057: 'Travel agency,lite',\n 1058: 'Real Estate agent,lite'\n }\n }\n\n static Xml2Json() {\n //https://github.com/metatribal/xmlToJSON\n var xmlToJSON = (function () {\n\n this.version = \"1.3\";\n\n var options = { // set up the default options\n mergeCDATA: true, // extract cdata and merge with text\n grokAttr: true, // convert truthy attributes to boolean, etc\n grokText: true, // convert truthy text/attr to boolean, etc\n normalize: true, // collapse multiple spaces to single space\n xmlns: true, // include namespaces as attribute in output\n namespaceKey: '_ns', // tag name for namespace objects\n textKey: '_text', // tag name for text nodes\n valueKey: '_value', // tag name for attribute values\n attrKey: '_attr', // tag for attr groups\n cdataKey: '_cdata', // tag for cdata nodes (ignored if mergeCDATA is true)\n attrsAsObject: true, // if false, key is used as prefix to name, set prefix to '' to merge children and attrs.\n stripAttrPrefix: true, // remove namespace prefixes from attributes\n stripElemPrefix: true, // for elements of same name in diff namespaces, you can enable namespaces and access the nskey property\n childrenAsArray: true // force children into arrays\n };\n\n var prefixMatch: any = new RegExp('(?!xmlns)^.*:/');\n var trimMatch: any = new RegExp('^\\s+|\\s+$g');\n\n this.grokType = function (sValue) {\n if (/^\\s*$/.test(sValue)) {\n return null;\n }\n if (/^(?:true|false)$/i.test(sValue)) {\n return sValue.toLowerCase() === \"true\";\n }\n if (isFinite(sValue)) {\n return parseFloat(sValue);\n }\n return sValue;\n };\n\n this.parseString = function (xmlString, opt) {\n return this.parseXML(this.stringToXML(xmlString), opt);\n }\n\n this.parseXML = function (oXMLParent, opt) {\n\n // initialize options\n for (var key in opt) {\n options[key] = opt[key];\n }\n\n var vResult = {}, nLength = 0, sCollectedTxt = \"\";\n\n // parse namespace information\n if (options.xmlns && oXMLParent.namespaceURI) {\n vResult[options.namespaceKey] = oXMLParent.namespaceURI;\n }\n\n // parse attributes\n // using attributes property instead of hasAttributes method to support older browsers\n if (oXMLParent.attributes && oXMLParent.attributes.length > 0) {\n var vAttribs = {};\n\n for (nLength; nLength < oXMLParent.attributes.length; nLength++) {\n var oAttrib = oXMLParent.attributes.item(nLength);\n vContent = {};\n var attribName = '';\n\n if (options.stripAttrPrefix) {\n attribName = oAttrib.name.replace(prefixMatch, '');\n\n } else {\n attribName = oAttrib.name;\n }\n\n if (options.grokAttr) {\n vContent[options.valueKey] = this.grokType(oAttrib.value.replace(trimMatch, ''));\n } else {\n vContent[options.valueKey] = oAttrib.value.replace(trimMatch, '');\n }\n\n if (options.xmlns && oAttrib.namespaceURI) {\n vContent[options.namespaceKey] = oAttrib.namespaceURI;\n }\n\n if (options.attrsAsObject) { // attributes with same local name must enable prefixes\n vAttribs[attribName] = vContent;\n } else {\n vResult[options.attrKey + attribName] = vContent;\n }\n }\n\n if (options.attrsAsObject) {\n vResult[options.attrKey] = vAttribs;\n } else {\n }\n }\n\n // iterate over the children\n if (oXMLParent.hasChildNodes()) {\n for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {\n oNode = oXMLParent.childNodes.item(nItem);\n\n if (oNode.nodeType === 4) {\n if (options.mergeCDATA) {\n sCollectedTxt += oNode.nodeValue;\n } else {\n if (vResult.hasOwnProperty(options.cdataKey)) {\n if (vResult[options.cdataKey].constructor !== Array) {\n vResult[options.cdataKey] = [vResult[options.cdataKey]];\n }\n vResult[options.cdataKey].push(oNode.nodeValue);\n\n } else {\n if (options.childrenAsArray) {\n vResult[options.cdataKey] = [];\n vResult[options.cdataKey].push(oNode.nodeValue);\n } else {\n vResult[options.cdataKey] = oNode.nodeValue;\n }\n }\n }\n } /* nodeType is \"CDATASection\" (4) */ else if (oNode.nodeType === 3) {\n sCollectedTxt += oNode.nodeValue;\n } /* nodeType is \"Text\" (3) */ else if (oNode.nodeType === 1) { /* nodeType is \"Element\" (1) */\n\n if (nLength === 0) {\n vResult = {};\n }\n\n // using nodeName to support browser (IE) implementation with no 'localName' property\n if (options.stripElemPrefix) {\n sProp = oNode.nodeName.replace(prefixMatch, '');\n } else {\n sProp = oNode.nodeName;\n }\n\n vContent = xmlToJSON.parseXML(oNode);\n\n if (vResult.hasOwnProperty(sProp)) {\n if (vResult[sProp].constructor !== Array) {\n vResult[sProp] = [vResult[sProp]];\n }\n vResult[sProp].push(vContent);\n\n } else {\n if (options.childrenAsArray) {\n vResult[sProp] = [];\n vResult[sProp].push(vContent);\n } else {\n vResult[sProp] = vContent;\n }\n nLength++;\n }\n }\n }\n } else if (!sCollectedTxt) { // no children and no text, return null\n if (options.childrenAsArray) {\n vResult[options.textKey] = [];\n vResult[options.textKey].push(null);\n } else {\n vResult[options.textKey] = null;\n }\n }\n\n if (sCollectedTxt) {\n if (options.grokText) {\n var value = this.grokType(sCollectedTxt.replace(trimMatch, ''));\n if (value !== null && value !== undefined) {\n vResult[options.textKey] = value;\n }\n } else if (options.normalize) {\n vResult[options.textKey] = sCollectedTxt.replace(trimMatch, '').replace(/\\s+/g, \" \");\n } else {\n vResult[options.textKey] = sCollectedTxt.replace(trimMatch, '');\n }\n }\n\n return vResult;\n }\n\n\n // Convert xmlDocument to a string\n // Returns null on failure\n this.xmlToString = function (xmlDoc) {\n try {\n var xmlString = xmlDoc.xml ? xmlDoc.xml : (new XMLSerializer()).serializeToString(xmlDoc);\n return xmlString;\n } catch (err) {\n console.log('error ' + err);\n return null;\n }\n }\n\n // Convert a string to XML Node Structure\n // Returns null on failure\n this.stringToXML = function (xmlString) {\n try {\n var xmlDoc = null;\n\n if (window['DOMParser']) {\n\n var parser = new DOMParser();\n xmlDoc = parser.parseFromString(xmlString, \"text/xml\");\n\n return xmlDoc;\n } else {\n xmlDoc = new ActiveXObject(\"Microsoft.XMLDOM\");\n xmlDoc.async = false;\n xmlDoc.loadXML(xmlString);\n\n return xmlDoc;\n }\n } catch (e) {\n console.log('error stringToXML ' + e);\n return null;\n }\n }\n\n return this;\n }).call({});\n return xmlToJSON;\n }\n\n\n}\n\n\n/* tslint:disable */\n// polyfill for Object.assign (not part of TS yet)\n// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign\nif (!Object.assign) {\n Object.defineProperty(Object, \"assign\", {\n enumerable: false,\n configurable: true,\n writable: true,\n value: function (target) {\n \"use strict\";\n if (target === undefined || target === null) {\n throw new TypeError(\"Cannot convert first argument to object\");\n }\n\n var to = Object(target);\n for (var i = 1; i < arguments.length; i++) {\n var nextSource = arguments[i];\n if (nextSource === undefined || nextSource === null) {\n continue;\n }\n nextSource = Object(nextSource);\n\n var keysArray = Object.keys(nextSource);\n for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {\n var nextKey = keysArray[nextIndex];\n var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);\n if (desc !== undefined && desc.enumerable) {\n to[nextKey] = nextSource[nextKey];\n }\n }\n }\n return to;\n }\n });\n}\n\n// window['StringJS'] = ss.default;\n// MyS.prototype = StringJS('')\n// MyS.prototype.constructor = MyS;\n// function MyS(val) {\n// this.setValue(val);\n// }\n//\n// var formatMoney = function(n, c, d, t){\n// var c = isNaN(c = Math.abs(c)) ? 2 : c,\n// d = d == undefined ? \".\" : d,\n// t = t == undefined ? \",\" : t,\n// s = n < 0 ? \"-\" : \"\",\n// i:any = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),\n// j = (j = i.length) > 3 ? j % 3 : 0;\n// return s + (j ? i.substr(0, j) + t : \"\") + i.substr(j).replace(/(\\d{3})(?=\\d)/g, \"$1\" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : \"\");\n// };\n//\n// MyS.prototype.isBlank = function () {\n// var value = this.s;\n// if (_.isNaN(value))\n// return true;\n// if (_.isUndefined(value))\n// return true;\n// if (_.isNull(value))\n// return true;\n// if (_.isEmpty(String(value)))\n// return true;\n// return false;\n// }\n//\n// MyS.prototype.isNotBlank = function () {\n// var value = this.s;\n// if (_.isNaN(value))\n// return false;\n// if (_.isUndefined(value))\n// return false;\n// if (_.isNull(value))\n// return false;\n// if (_.isEmpty(String(value)))\n// return false;\n// return true;\n// }\n//\n// /**\n// * booleanToNumber\n// * convert boolean to a number 0 or 1\n// * if forceCast is true, it will always return a number, else it will alow strings to pass through it\n// * @param forceCast\n// * @returns {any}\n// */\n// MyS.prototype.booleanToNumber = function (forceCasting: boolean = false) {\n// var value = this.s;\n// if (value == '')\n// return 0;\n// if (_.isUndefined(value) || _.isNull(value) || value == 'NaN' || value == 'null' || value == 'NULL')\n// return 0;\n// if (value === \"0\" || value === 'false' || value === \"False\" || value === false)\n// return 0;\n// if (value === 1 || value === \"true\" || value === \"True\" || value === true)\n// return 1;\n// if (forceCasting) {\n// return parseInt(value);\n// } else {\n// return value;\n// }\n// }\n//\n// MyS.prototype.toCurrency = function (format?: 'us'|'eu') {\n//\n// var value = StringJS(this.s).toFloat(2);\n// if (_.isNaN(value))\n// value = 0;\n// switch (format) {\n// case 'eu': {\n// return '€' + formatMoney(value, 2, '.', ',');\n// }\n// case 'us': {}\n// default: {\n// return '$' + formatMoney(value, 2, '.', ',');\n// }\n// }\n// }\n//\n// MyS.prototype.toPercent = function () {\n// return StringJS(this.s).toFloat(2) + '%';\n// }\n//\n// MyS.prototype.fileTailName = function (i_level) {\n// var fileName = this.s;\n// var arr = fileName.split('/');\n// var size = arr.length;\n// var c = arr.slice(0 - i_level, size)\n// return new this.constructor(c.join('/'));\n// }\n//\n// MyS.prototype.cleanChar = function () {\n// var value = this.s;\n// if (_.isUndefined(value))\n// return '';\n// if (_.isNull(value))\n// return '';\n// if (_.isNumber(value))\n// return value;\n// if (_.isBoolean(value))\n// return value;\n// value = value.replace(/\\}/g, ' ');\n// value = value.replace(/%/g, ' ');\n// value = value.replace(/{/g, ' ');\n// value = value.replace(/\"/g, '`');\n// value = value.replace(/'/g, '`');\n// value = value.replace(/&/g, 'and');\n// value = value.replace(/>/g, ' ');\n// value = value.replace(/\n
\n \n
\n \n\n
\n \n
\n
\n

Have a nice day :)

\n \n
\n
\n
\n \n \n
\n
\n
\n
\n
\n\n
\n \n
loading...
\n
\n
\n

have a nice day

\n

\n
\n\n\n\n\n \n

Upgrade to Enterprise

\n \n \n \n \n \n\n\n\n \n

Pick your language

\n \n \n \n \n \n\n\n\n" }, { "path": "src/app/app-component.ts", "content": "import {AfterViewInit, Component, VERSION, ViewChild, ViewContainerRef} from \"@angular/core\";\nimport \"rxjs/add/operator/catch\";\nimport {ActivatedRoute, NavigationEnd, Router} from \"@angular/router\";\nimport {CommBroker} from \"../services/CommBroker\";\nimport {EventManager, Title} from \"@angular/platform-browser\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {Observable} from \"rxjs\";\nimport * as packageJson from \"../../package.json\";\nimport {AuthService} from \"../services/AuthService\";\nimport {LocalStorage} from \"../services/LocalStorage\";\nimport {YellowPepperService} from \"../services/yellowpepper.service\";\nimport {RedPepperService} from \"../services/redpepper.service\";\nimport {IUiState} from \"../store/store.data\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE} from \"../store/actions/appdb.actions\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {Map, List} from 'immutable';\nimport {Consts} from \"../interfaces/Consts\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport * as moment from 'moment'\nimport {LiveLogModel} from \"../models/live-log-model\";\nimport {LocaleSelector} from \"./locale-selector/local-selector\";\n\nenum MainAppShowModeEnum {\n MAIN,\n SAVE,\n PREVIEW,\n LOGOUT\n}\n\nexport enum MainAppShowStateEnum {\n INIT,\n NORMAL,\n SAVE,\n SAVING,\n SAVE_AND_PREVIEW,\n SAVED,\n GOODBYE\n}\n\n@Component({\n selector: 'app-root',\n templateUrl: './app-component.html',\n animations: [\n trigger('logoutState', [\n state('active', style({\n transform: 'scale(2)',\n alpha: 0\n })),\n transition('* => active', animate('1000ms ease-out'))\n ])\n ]\n})\n\nexport class AppComponent implements AfterViewInit {\n version: string;\n ngVersion: string;\n offlineDevMode: any = window['offlineDevMode'];\n m_ShowModeEnum = MainAppShowModeEnum;\n m_showMode: any = MainAppShowModeEnum.MAIN;\n m_hidden = false;\n m_localSelected;\n // isBrandingDisabled: Observable;\n syncOnSave = false;\n m_logoutState = '';\n productName = 'Studio-Lite';\n isBrandingDisabled: boolean = false;\n demoModeMsg = `Sorry cannot save while in demo mode, please open a new FREE account to be able to use all features...`;\n\n constructor(private router: Router,\n private localStorage: LocalStorage,\n private commBroker: CommBroker,\n private rp: RedPepperService,\n private authService: AuthService,\n private yp: YellowPepperService,\n private activatedRoute: ActivatedRoute,\n private vRef: ViewContainerRef,\n private titleService: Title,\n private eventManager: EventManager,\n private toastr: ToastsManager) {\n\n // this.version = packageJson.version;\n // this.ngVersion = VERSION.full\n\n // this.localStorage.removeItem('remember_me')\n // this.localStorage.removeItem('business_id')\n // this.localStorage.removeItem('no_show_limited')\n\n this.checkPlatform();\n this.listenAppStateChange();\n this.toastr.setRootViewContainerRef(vRef);\n this.listenRouterUpdateTitle();\n this.listenUpgradeEnterpris();\n this.listenSaves();\n this.appResized();\n Observable.fromEvent(window, 'resize').debounceTime(250)\n .subscribe(() => {\n this.appResized();\n }, (e) => {\n console.error(e)\n });\n }\n\n @ViewChild('modalProUpgrade')\n modal: ModalComponent;\n\n @ViewChild('modalLocale')\n modalLocale: ModalComponent;\n\n @ViewChild('localSelector')\n localSelector: LocaleSelector;\n\n ngOnInit() {\n\n this.yp.isBrandingDisabled()\n .subscribe((v) => {\n this.isBrandingDisabled = v;\n if (!this.isBrandingDisabled)\n this.productName = this.rp.getUserData().resellerName;\n }, (e) => console.error(e));\n\n let s = this.router.events\n .subscribe((val) => {\n if (val instanceof NavigationEnd) {\n if (val.url.indexOf('data') > -1 || val.url.indexOf('remoteStatus') > -1) {\n this.router.navigate(['/FasterqTerminal', val.url.split('?')[1]]);\n } else {\n this.authService.start();\n }\n s.unsubscribe();\n }\n }, (e) => console.error(e));\n }\n\n _onMenuIcon(icon, event) {\n event.stopImmediatePropagation();\n event.preventDefault();\n switch (icon) {\n case 'web': {\n window.open('http://www.digitalsignage.com', '_blank');\n break;\n }\n case 'chat': {\n window.open('http://www.digitalsignage.com/_html/live_chat.html', '_blank');\n break;\n }\n case 'upgrade': {\n this.modal.open();\n break;\n }\n case 'save': {\n this.saveAndRestartPrompt(() => {\n })\n break;\n }\n case 'locale': {\n this.modalLocale.open();\n break;\n }\n }\n }\n\n /**\n Save and serialize configuration to remote mediaSERVER> Save and restart will check if\n the Stations module has been loaded and if no connected stations are present, it will NOT\n prompt for option to restart station on save, otherwise it will.\n @method saveAndRestartPrompt\n @param {Function} call back after save\n **/\n saveAndRestartPrompt(i_callBack) {\n bootbox.dialog({\n message: 'Restart connected stations and apply your saved work?',\n title: 'Save work to remote server',\n buttons: {\n success: {\n label: 'OK',\n className: \"btn-success\",\n callback: () => {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'app saved'})}));\n }\n },\n danger: {\n label: 'Save & restart stations',\n className: \"btn-success\",\n callback: () => {\n // reboot will reboot the PC or exits presentation android\n // pepper.sendCommand('rebootStation', -1, function () {});\n // reboot player exits player\n // pepper.sendCommand('rebootPlayer', -1, function () {\n // sync and restart does a fast / soft restart of player\n this.syncOnSave = true;\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'app saved and restarting all stations'})}));\n }\n },\n main: {\n label: 'Cancel',\n callback: () => {\n return;\n }\n }\n }\n });\n }\n\n ngAfterViewInit() {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.NORMAL}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onLocaleChanged(i_localSelected) {\n this.m_localSelected = i_localSelected;\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: {mainAppState: MainAppShowStateEnum.SAVE}}));\n this.modalLocale.close();\n }\n\n private listenAppStateChange() {\n this.yp.listenMainAppState()\n .subscribe((i_value: MainAppShowStateEnum) => {\n switch (i_value) {\n\n case MainAppShowStateEnum.SAVE_AND_PREVIEW: {\n if (this.rp.getUserData().businessID == 459848) {\n this.viewMode(MainAppShowModeEnum.MAIN);\n const uiState: IUiState = {mainAppState: MainAppShowStateEnum.NORMAL};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n return bootbox.alert(this.demoModeMsg);\n }\n this.save(() => {\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'loading preview'})}));\n this.viewMode(MainAppShowModeEnum.PREVIEW);\n });\n break;\n }\n\n case MainAppShowStateEnum.NORMAL: {\n this.viewMode(MainAppShowModeEnum.MAIN);\n break;\n }\n\n case MainAppShowStateEnum.SAVED: {\n con('Saved to server');\n if (this.syncOnSave)\n this.rp.sendCommand('syncAndStart', -1, () => {\n });\n this.syncOnSave = false;\n const uiState: IUiState = {appSaved: moment().format('h:mm:ss')};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n if (this.m_localSelected)\n this.localSelector.redirect(this.m_localSelected)\n break;\n }\n\n case MainAppShowStateEnum.GOODBYE: {\n con('Goodbye');\n this.m_logoutState = 'active'\n this.viewMode(MainAppShowModeEnum.LOGOUT);\n break;\n }\n\n case MainAppShowStateEnum.SAVE: {\n if (this.rp.getUserData().businessID == 459848) {\n this.viewMode(MainAppShowModeEnum.MAIN);\n const uiState: IUiState = {mainAppState: MainAppShowStateEnum.NORMAL};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n return bootbox.alert(this.demoModeMsg);\n }\n this.save(() => {\n this.viewMode(MainAppShowModeEnum.MAIN);\n const uiState: IUiState = {mainAppState: MainAppShowStateEnum.NORMAL};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n });\n break;\n }\n }\n }, (e) => console.error(e))\n }\n\n private save(i_cb: () => void) {\n this.viewMode(MainAppShowModeEnum.SAVE);\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVING}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.rp.save((result) => {\n if (result.status == true) {\n this.rp.reduxCommit(null, true)\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVED}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n i_cb();\n } else {\n alert('error ' + JSON.stringify(result));\n }\n })\n }\n\n private viewMode(i_mode: MainAppShowModeEnum) {\n this.m_showMode = i_mode;\n switch (i_mode) {\n case MainAppShowModeEnum.MAIN: {\n this.m_hidden = false;\n break;\n }\n case MainAppShowModeEnum.PREVIEW: {\n this.m_hidden = true;\n break;\n }\n case MainAppShowModeEnum.SAVE: {\n this.m_hidden = true;\n break;\n }\n case MainAppShowModeEnum.LOGOUT: {\n this.m_hidden = true;\n break;\n }\n }\n }\n\n private checkPlatform() {\n switch (platform.name.toLowerCase()) {\n case 'microsoft edge': {\n // alert(`${platform.name} browser not supported at this time, please use Google Chrome`);\n break;\n }\n case 'chrome': {\n break;\n }\n default: {\n // alert('for best performance please use Google Chrome');\n break;\n }\n }\n }\n\n private listenUpgradeEnterpris() {\n this.commBroker.onEvent(Consts.Events().UPGRADE_ENTERPRISE)\n .subscribe((v) => {\n this.modal.open();\n }, (e) => console.error(e));\n }\n\n private listenSaves() {\n this.eventManager.addGlobalEventListener('window', 'keydown.control.s', (event) => {\n event.preventDefault();\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: {mainAppState: MainAppShowStateEnum.SAVE}}));\n })\n }\n\n public appResized(): void {\n var appHeight = document.body.clientHeight;\n var appWidth = document.body.clientWidth;\n var uiState: IUiState = {appSized: Map({width: appWidth, height: appHeight})}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n\n this.commBroker.setValue(Consts.Values().APP_SIZE, {\n height: appHeight,\n width: appWidth\n });\n this.commBroker.fire({\n fromInstance: self,\n event: Consts.Events().WIN_SIZED,\n context: '',\n message: {\n height: appHeight,\n width: appWidth\n }\n })\n }\n\n private listenRouterUpdateTitle() {\n this.router.events\n .filter(event => event instanceof NavigationEnd)\n .map(() => this.activatedRoute)\n .map(route => {\n while (route.firstChild) {\n route = route.firstChild\n }\n return route;\n }).filter(route => route.outlet === 'primary')\n .mergeMap(route => route.data)\n .subscribe((event) => {\n this.titleService.setTitle(event['title'])\n }, (e) => console.error(e));\n }\n}" }, { "path": "src/app/app-module.ts", "content": "import {BrowserModule} from \"@angular/platform-browser\";\nimport {Compiler, NgModule, ErrorHandler} from \"@angular/core\";\nimport {FormsModule, ReactiveFormsModule} from \"@angular/forms\";\nimport {HttpModule, JsonpModule} from \"@angular/http\";\nimport {Ng2Bs3ModalModule} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {AppComponent} from \"./app-component\";\nimport {LocalStorage} from \"../services/LocalStorage\";\nimport {RedPepperService} from \"../services/redpepper.service\";\nimport {YellowPepperService} from \"../services/yellowpepper.service\";\nimport {MsLibModule} from \"ng-mslib/dist/mslib.module\";\nimport {ToastModule, ToastOptions} from \"ng2-toastr\";\nimport {AccordionModule, AlertModule, ModalModule} from \"ngx-bootstrap\";\nimport {DropdownModule, DropdownModule as DropdownModulePrime, InputTextModule, SelectButtonModule, TreeModule} from \"primeng/primeng\";\nimport {routing} from \"../app-routes\";\nimport {LoginPanel} from \"../comps/entry/LoginPanel\";\nimport {Logout} from \"../comps/logout/Logout\";\nimport {AgmCoreModule} from \"angular2-google-maps/core\";\nimport {ImgLoader} from \"../comps/imgloader/ImgLoader\";\nimport {ChartModule} from \"angular2-highcharts\";\nimport {CommBroker} from \"../services/CommBroker\";\nimport {AUTH_PROVIDERS} from \"../services/AuthService\";\nimport {StoreService} from \"../services/StoreService\";\nimport {NgMenu} from \"../comps/ng-menu/ng-menu\";\nimport {NgMenuItem} from \"../comps/ng-menu/ng-menu-item\";\nimport {AutoLogin} from \"../comps/entry/AutoLogin\";\nimport {StoreModule} from \"@ngrx/store\";\nimport {INITIAL_APPLICATION_STATE} from \"../store/application.state\";\nimport {EffectsModule} from \"@ngrx/effects\";\nimport {StoreDevtoolsModule} from \"@ngrx/store-devtools\";\nimport {ACTION_LIVELOG_UPDATE, AppdbAction} from \"../store/actions/appdb.actions\";\nimport {AppDbEffects} from \"../store/effects/appdb.effects\";\nimport {MsdbEffects} from \"../store/effects/msdb.effects\";\nimport {environment} from \"../environments/environment\";\nimport {productionReducer} from \"../store/store.data\";\nimport {NgmslibService} from \"ng-mslib\";\nimport {SharedModule} from \"../modules/shared.module\";\nimport {Dashboard} from \"./dashboard/dashboard-navigation\";\nimport {Appwrap} from \"./appwrap\";\nimport \"hammerjs\";\nimport \"print-js\";\nimport \"gsap\";\nimport \"gsap/CSSPlugin\";\nimport \"gsap/Draggable\";\nimport \"gsap/TweenLite\";\nimport \"gsap/ScrollToPlugin\";\nimport {Lib} from \"../Lib\";\nimport {FontLoaderService} from \"../services/font-loader-service\";\nimport {SimpleGridModule} from \"../comps/simple-grid-module/SimpleGridModule\";\nimport {GlobalErrorHandler} from \"../services/global-error-handler\";\nimport {BrowserAnimationsModule} from \"@angular/platform-browser/animations\";\nimport {FasterqTerminal} from \"./fasterq/fasterq-terminal\";\nimport {WizardService} from \"../services/wizard-service\";\nimport {ResellerLogo} from \"../comps/logo/reseller-logo\";\nimport {DashPanel} from \"./dashboard/dash-panel\";\nimport {ServerAvg} from \"./dashboard/server-avg\";\nimport {StorageUsed} from \"./dashboard/storage-used\";\nimport {LiveLogModel} from \"../models/live-log-model\";\n\n// import \"fabric\"; // need to remove if we import via cli\n// import {ScreenTemplate} from \"../comps/screen-template/screen-template\";\n\ndeclare global {\n interface JQueryStatic {\n base64: any;\n knob: any;\n gradientPicker: any;\n timepicker: any;\n contextmenu: any;\n index: any;\n }\n}\n\nexport class CustomToastOption extends ToastOptions {\n animate: 'flyRight';\n positionClass: 'toast-bottom-right';\n toastLife: 10000;\n showCloseButton: true;\n maxShown: 5;\n newestOnTop: true;\n enableHTML: true;\n dismiss: 'auto';\n messageClass: \"\";\n titleClass: \"\"\n}\n\nexport const providing = [CommBroker, WizardService, AUTH_PROVIDERS, RedPepperService, YellowPepperService, LocalStorage, StoreService, FontLoaderService, AppdbAction, {\n provide: \"OFFLINE_ENV\",\n useValue: window['offlineDevMode']\n },\n {\n provide: \"HYBRID_PRIVATE\",\n useValue: false\n },\n {\n provide: ErrorHandler,\n useClass: GlobalErrorHandler\n },\n {\n provide: ToastOptions,\n useClass: CustomToastOption\n }\n];\n\nconst decelerations = [AppComponent, AutoLogin, LoginPanel, Appwrap, Dashboard, Logout, NgMenu, NgMenuItem, ImgLoader, FasterqTerminal, DashPanel, ServerAvg, StorageUsed];\n\nexport function appReducer(state: any = INITIAL_APPLICATION_STATE, action: any) {\n if (environment.production) {\n return productionReducer(state, action);\n } else {\n return productionReducer(state, action);\n // return developmentReducer(state, action);\n }\n}\n\n\n@NgModule({\n declarations: [decelerations],\n imports: [\n BrowserModule,\n FormsModule,\n BrowserAnimationsModule,\n ReactiveFormsModule,\n Ng2Bs3ModalModule,\n HttpModule,\n ChartModule,\n StoreModule.provideStore(appReducer),\n EffectsModule.run(AppDbEffects),\n EffectsModule.run(MsdbEffects),\n environment.imports, \n // StoreDevtoolsModule.instrumentStore({maxAge: 2}),\n // StoreDevtoolsModule.instrumentOnlyWithExtension(),\n AgmCoreModule.forRoot({\n apiKey: 'AIzaSyDKa8Z3QLtACfSfxF-S8A44gm5bkvNTmuM',\n libraries: ['places']\n }),\n SimpleGridModule.forRoot(),\n SharedModule.forRoot(),\n ToastModule.forRoot(),\n AlertModule.forRoot(),\n MsLibModule.forRoot({a: 1}),\n ModalModule.forRoot(),\n DropdownModule,\n AccordionModule.forRoot(),\n JsonpModule,\n TreeModule,\n InputTextModule,\n SelectButtonModule,\n InputTextModule,\n DropdownModulePrime,\n routing,\n ],\n providers: [providing],\n bootstrap: [AppComponent]\n})\n\nexport class AppModule {\n constructor(private commBroker: CommBroker, private compiler: Compiler, private ngmslibService: NgmslibService, private yp: YellowPepperService, private fontLoaderService: FontLoaderService) {\n Lib.Con(`running in dev mode: ${Lib.DevMode()}`);\n Lib.Con(`App in ${(compiler instanceof Compiler) ? 'AOT' : 'JIT'} mode`);\n window['business_id'] = -1;\n window['jQueryAny'] = jQuery;\n window['jXML'] = jQuery;\n this.ngmslibService.globalizeStringJS();\n Lib.Con(StringJS('app-loaded-and-ready').humanize().s);\n Lib.AlertOnLeave();\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'app started'})}));\n }\n}\n\n" }, { "path": "src/app/appwrap.ts", "content": "import {Component} from \"@angular/core\";\nimport {Router} from \"@angular/router\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable} from \"rxjs/Observable\";\nimport {YellowPepperService} from \"../services/yellowpepper.service\";\n\n@Component({\n template: `\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n
\n `\n})\nexport class Appwrap extends Compbaser {\n\n isBrandingDisabled: Observable\n\n constructor(private router: Router, private yp:YellowPepperService) {\n super();\n jQuery(\".navbar-header .navbar-toggle\").trigger(\"click\");\n jQuery('.navbar-nav').css({\n display: 'block'\n });\n this.isBrandingDisabled = this.yp.isBrandingDisabled()\n }\n\n // public listenMenuChanges() {\n // var unsub = self.commBroker.onEvent(Consts.Events().MENU_SELECTION).subscribe((e: IMessage) => {\n // if (!this.routerActive)\n // return;\n // let screen = (e.message);\n // self.router.navigate([`/App1/${screen}`]);\n // });\n // }\n}" }, { "path": "src/app/blocks/block-fabric-image.ts", "content": "import {BlockFabric} from \"./block-fabric\";\nimport * as _ from \"lodash\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\nconst blockType = BlockLabels.BLOCKCODE_IMAGE;\n\nexport class BlockFabricImage extends BlockFabric {\n\n m_canvas;\n m_gridMagneticMode = 0;\n m_nativeID;\n m_fileFormat;\n\n constructor(options, i_blockService, i_pepper) {\n super(options, i_blockService, i_pepper, blockType)\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_blockType = blockType;\n _.extend(options, {blockType: this.m_blockType})\n this._initResourcesData();\n }\n\n /**\n Set the instance resource data from msdb which includes resource_id (handle of a resource)\n as well as the description of the resource and icon.\n @method _initResourcesData\n **/\n _initResourcesData() {\n var domPlayerData = this._getBlockPlayerData();\n var xSnippet = $(domPlayerData).find('Resource');\n this.m_resourceID = $(xSnippet).attr('hResource');\n this.m_nativeID = this.m_pepper.getResourceNativeID(this.m_resourceID);\n if (_.isNull(this.m_nativeID)) {\n this._selfDestruct();\n return;\n }\n this.m_blockName = this.m_pepper.getResourceRecord(this.m_resourceID).resource_name;\n this.m_blockDescription = this.m_pepper.getResourceName(this.m_resourceID);\n this.m_fileFormat = this.m_pepper.getResourceType(this.m_resourceID);\n this.m_blockFontAwesome = this.m_blockService.getFontAwesome(this.m_fileFormat);\n }\n\n /**\n Convert the block into a fabric js compatible object\n @Override\n @method fabricateBlock\n **/\n fabricateBlock(i_canvasScale, i_callback) {\n\n var domPlayerData = this._getBlockPlayerData();\n var layout = $(domPlayerData).find('Layout');\n var businessID = this.m_pepper.getUserData().businessID;\n var elemID = _.uniqueId('imgElemrand')\n var imgPath;\n\n if (this.m_fileFormat == 'swf') {\n imgPath = './_assets/flash.png';\n } else {\n /*\n if (platform.name == 'Chrome') {\n // CDN\n imgPath = window.g_protocol + 's3.signage.me/business' + this.m_pepper.getUserData().businessID + '/resources/';\n imgPath = 'https://s3.signage.me/business' + this.m_pepper.getUserData().businessID + '/resources/';\n imgPath += +this.m_nativeID + '.' + this.m_fileFormat;\n } else {\n // Legacy\n imgPath = window.g_protocol + this.m_pepper.getUserData().domain + '/Resources/business' + this.m_pepper.getUserData().businessID + '/resources/' + this.m_nativeID + '.' + this.m_fileFormat;\n }\n */\n imgPath = window.g_protocol + this.m_pepper.getUserData().domain + '/Resources/business' + this.m_pepper.getUserData().businessID + '/resources/' + this.m_nativeID + '.' + this.m_fileFormat;\n // log('loading img from ' + imgPath);\n }\n\n var initImage = (i_image, i_passed) => {\n if (!i_passed) {\n i_callback();\n return;\n }\n $(i_image).width(1000).height(800).appendTo('body');\n var options = this._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), parseInt(layout.attr('width')), parseInt(layout.attr('height')), parseInt(layout.attr('rotation')));\n var img = new fabric.Image(i_image, options);\n _.extend(this, img);\n this._fabricAlpha(domPlayerData);\n this._fabricLock();\n this['canvasScale'] = i_canvasScale;\n i_callback();\n };\n\n // manage errors of resources which don't load\n $(``).on('load', function() {\n initImage(this, true);\n }).on('error', function() {\n initImage(this, false);\n })\n }\n\n /**\n Get the resource id of the embedded resource\n **/\n getResourceID() {\n return this.m_resourceID;\n }\n\n /**\n Delete this block\n @method deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n **/\n deleteBlock(i_memoryOnly) {\n // $(Elements.IMAGE_ASPECT_RATIO).off('change', this.m_inputChangeHandler);\n this._deleteBlock(i_memoryOnly);\n }\n\n}\n" }, { "path": "src/app/blocks/block-fabric-josn-item.ts", "content": "import {BlockFabric} from \"./block-fabric\";\nimport * as _ from \"lodash\";\nimport {Lib} from \"../../Lib\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\nimport {BlockFabricLabel} from \"./block-fabric-label\";\n\n\nconst blockType = BlockLabels.BLOCKCODE_JSON_ITEM;\n\nexport class BlockFabricJsonItem extends BlockFabricLabel {\n\n protected m_options;\n protected m_selected;\n protected m_labelFontSelector:any;\n protected m_config:{};\n protected m_sceneMime:string;\n\n constructor(options, i_blockService, i_pepper) {\n super(options, i_blockService, i_pepper)\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_blockType = blockType;\n _.extend(options, {blockType: this.m_blockType})\n this.m_sceneMime = this.m_pepper.getSceneMime(this.m_sceneID);\n this.m_config = {\n 'Json.instagram.feed': {\n title: 'Instagram',\n tabTitle: 'Posts',\n fields: {\n 1: {\n name: \"title\",\n type: \"text\",\n label: \"title\"\n },\n 2: {\n name: \"urlImage\",\n type: \"resource\",\n label: \"image\"\n },\n 3: {\n name: \"video\",\n type: \"resource\",\n label: \"video\"\n }\n }\n },\n 'Json.twitter': {\n title: 'Twitter',\n tabTitle: 'Tweets',\n fields: {\n 1: {\n name: \"name\",\n type: \"text\",\n label: \"name\"\n },\n 2: {\n name: \"text\",\n type: \"text\",\n label: \"text\"\n },\n 3: {\n name: \"screen_name\",\n type: \"text\",\n label: \"screen name\"\n },\n 4: {\n name: \"created_at\",\n type: \"text\",\n label: \"created at\"\n },\n 5: {\n name: \"profile_background_image_url\",\n type: \"resource\",\n label: \"Background image\"\n },\n 6: {\n name: \"profile_image_url\",\n type: \"resource\",\n label: \"Image\"\n }\n }\n },\n 'Json.digg': {\n title: 'Digg',\n tabTitle: 'Posts',\n fields: {\n 1: {\n name: \"title\",\n type: \"text\",\n label: \"title\"\n },\n 2: {\n name: \"link\",\n type: \"resource\",\n label: \"image\"\n }\n }\n },\n 'Json.spreadsheet': {\n title: 'Spreadsheet',\n tabTitle: 'Cells',\n fields: {\n 1: {\n name: \"$cells.1.1.value\",\n type: \"dual_numeric\",\n label: \"Sheet cell\"\n }\n }\n },\n\n 'Json.calendar': {\n title: 'Calendar',\n tabTitle: 'Date',\n fields: {\n 1: {\n name: \"summary\",\n type: \"text\",\n label: \"summary\"\n },\n 2: {\n name: \"description\",\n type: \"text\",\n label: \"description\"\n },\n 3: {\n name: \"organizer\",\n type: \"text\",\n label: \"organizer\"\n },\n 4: {\n name: \"organizerEmail\",\n type: \"text\",\n label: \"organizer email\"\n },\n 5: {\n name: \"created\",\n type: \"text\",\n label: \"created\"\n },\n 6: {\n name: \"startDateTime_time\",\n type: \"date\",\n label: \"start date time\"\n },\n 7: {\n name: \"endDateTime_time\",\n type: \"date\",\n label: \"end date time\"\n },\n 8: {\n name: \"updated\",\n type: \"text\",\n label: \"updated\"\n }\n }\n },\n 'Json.weather': {\n title: 'World weather',\n tabTitle: 'Conditions',\n fields: {\n 1: {\n name: \"$[0].data.current_condition[0].iconPath\",\n type: \"resource\",\n label: \"current icon\"\n },\n 2: {\n name: \"$[0].data.current_condition[0].temp_@\",\n type: \"text\",\n label: \"current temp\"\n },\n 3: {\n name: \"$[0].data.current_condition[0].humidity\",\n type: \"text\",\n label: \"current humidity\"\n },\n 4: {\n name: \"$[0].data.weather[0].iconPath\",\n type: \"resource\",\n label: \"today icon\"\n },\n 5: {\n name: \"$[0].data.weather[0].mintemp@\",\n type: \"text\",\n label: \"today min temp\"\n },\n 6: {\n name: \"$[0].data.weather[0].maxtemp@\",\n type: \"text\",\n label: \"today max temp\"\n },\n 7: {\n name: \"$[0].data.weather[0].day\",\n type: \"text\",\n label: \"today label\"\n },\n 8: {\n name: \"$[0].data.weather[1].iconPath\",\n type: \"resource\",\n label: \"today+1 icon\"\n },\n 9: {\n name: \"$[0].data.weather[1].mintemp@\",\n type: \"text\",\n label: \"today+1 min temp\"\n },\n 10: {\n name: \"$[0].data.weather[1].maxtemp@\",\n type: \"text\",\n label: \"today+1 max temp\"\n },\n 11: {\n name: \"$[0].data.weather[1].day\",\n type: \"text\",\n label: \"today+1 label\"\n },\n 12: {\n name: \"$[0].data.weather[2].iconPath\",\n type: \"resource\",\n label: \"today+2 icon\"\n },\n 13: {\n name: \"$[0].data.weather[2].mintemp@\",\n type: \"text\",\n label: \"today+2 min temp\"\n },\n 14: {\n name: \"$[0].data.weather[2].maxtemp@\",\n type: \"text\",\n label: \"today+2 max temp\"\n },\n 15: {\n name: \"$[0].data.weather[2].day\",\n type: \"text\",\n label: \"today+2 label\"\n },\n 16: {\n name: \"$[0].data.weather[3].iconPath\",\n type: \"resource\",\n label: \"today+3 icon\"\n },\n 17: {\n name: \"$[0].data.weather[3].mintemp@\",\n type: \"text\",\n label: \"today+3 min temp\"\n },\n 18: {\n name: \"$[0].data.weather[3].maxtemp@\",\n type: \"text\",\n label: \"today+3 max temp\"\n },\n 19: {\n name: \"$[0].data.weather[3].day\",\n type: \"text\",\n label: \"today+3 label\"\n },\n 20: {\n name: \"$[0].data.weather[4].iconPath\",\n type: \"resource\",\n label: \"today+4 icon\"\n },\n 21: {\n name: \"$[0].data.weather[4].mintemp@\",\n type: \"text\",\n label: \"today+4 min temp\"\n },\n 22: {\n name: \"$[0].data.weather[4].maxtemp@\",\n type: \"text\",\n label: \"today+4 max temp\"\n },\n 23: {\n name: \"$[0].data.weather[4].day\",\n type: \"text\",\n label: \"today+4 label\"\n },\n 24: {\n name: \"$[0].data.weather[5].iconPath\",\n type: \"resource\",\n label: \"today+5 icon\"\n },\n 25: {\n name: \"$[0].data.weather[5].mintemp@\",\n type: \"text\",\n label: \"today+5 min temp\"\n },\n 26: {\n name: \"$[0].data.weather[5].maxtemp@\",\n type: \"text\",\n label: \"today+5 max temp\"\n },\n 27: {\n name: \"$[0].data.weather[5].day\",\n type: \"text\",\n label: \"today+5 label\"\n },\n 28: {\n name: \"$[0].data.weather[6].iconPath\",\n type: \"resource\",\n label: \"today+6 icon\"\n },\n 29: {\n name: \"$[0].data.weather[6].mintemp@\",\n type: \"text\",\n label: \"today+6 min temp\"\n },\n 30: {\n name: \"$[0].data.weather[6].maxtemp@\",\n type: \"text\",\n label: \"today+6 max temp\"\n },\n 31: {\n name: \"$[0].data.weather[6].day\",\n type: \"text\",\n label: \"today+6 label\"\n }\n }\n }\n };\n }\n\n /**\n translate a json item path such as $[0].data.weather... to it's label\n @method _translateToLabel\n @param {Number} i_playerData\n @return {Number} Unique clientId.\n **/\n private _translateToLabel(i_jsonPath:string):string {\n var self = this;\n\n // no mime configured in scnene so return same label\n if (_.isUndefined(self.m_sceneMime))\n return i_jsonPath;\n\n switch (self.m_sceneMime) {\n case 'Json.spreadsheet':\n {\n // lookup up label in m_config for spreadsheet\n return self.m_config['Json.spreadsheet'].fields['1'].label;\n }\n default:\n {\n // look up label in m_config db for everything else\n var fields:any = self.m_config[self.m_sceneMime].fields;\n for (var item in fields) {\n if (fields[item].name == i_jsonPath)\n return fields[item].label;\n }\n }\n }\n return i_jsonPath;\n }\n\n /**\n Some json item field names need to be muated into something else.\n For example, the default fieldName of text needs to be changed into '$cells.1.1.value' when\n used in a scene of mimeType\n @method _mutateCustomFieldName\n **/\n private _mutateCustomFieldName():void {\n var self = this;\n switch (self.m_sceneMime) {\n case 'Json.spreadsheet':\n {\n var domPlayerData = self._getBlockPlayerData();\n var xSnippet = $(domPlayerData).find('XmlItem');\n var fieldName = $(xSnippet).attr('fieldName');\n if (fieldName == 'text') {\n var value = self.m_config['Json.spreadsheet'].fields['1'].name;\n $(xSnippet).attr('fieldName', value);\n // self._setBlockPlayerData(domPlayerData, BB.CONSTS.NO_NOTIFICATION);\n }\n break;\n }\n default:\n {\n }\n }\n }\n\n /**\n Convert the block into a fabric js compatible object\n @Override\n @method fabricateBlock\n @param {number} i_canvasScale\n @param {function} i_callback\n **/\n fabricateBlock(i_canvasScale, i_callback) {\n var self= this;\n self._mutateCustomFieldName();\n var domPlayerData = self._getBlockPlayerData();\n var layout = $(domPlayerData).find('Layout');\n var xSnippet = $(domPlayerData).find('XmlItem');\n var fieldName = $(xSnippet).attr('fieldName');\n var text = self._translateToLabel(fieldName);\n var font = $(xSnippet).find('Font');\n var link = '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';\n var url = ('https:' === document.location.protocol ? 'https' : 'http') + link;\n\n //$.getScript(src, function (data) {\n // console.log(data);\n //});\n\n var t = new fabric.IText(text, {\n fontSize: Number($(font).attr('fontSize')),\n //fontFamily: 'Graduate',\n //fontFamily: 'Jolly Lodger',\n //fontFamily: 'Arial',\n fontFamily: $(font).attr('fontFamily'),\n fill: '#' + Lib.DecimalToHex($(font).attr('fontColor')),\n textDecoration: $(font).attr('textDecoration'),\n fontWeight: $(font).attr('fontWeight'),\n fontStyle: $(font).attr('fontStyle'),\n textAlign: $(font).attr('textAlign'),\n top: 5,\n left: 5\n });\n\n // calculate block so it can always contain the text it holds and doesn't bleed\n //self.m_minSize.w = t.width < 50 ? 50 : t.width * 1.2;\n //self.m_minSize.h = t.height < 50 ? 50 : t.height * 1.2;\n //var w = parseInt(layout.attr('width')) < self.m_minSize.w ? self.m_minSize.w : parseInt(layout.attr('width'));\n //var h = parseInt(layout.attr('height')) < self.m_minSize.h ? self.m_minSize.h : parseInt(layout.attr('height'));\n\n var w = parseInt(layout.attr('width'));\n var textWidth = t.width * 1.2;\n if (textWidth > w) {\n t.setText('...');\n }\n var h = parseInt(layout.attr('height'));\n var textHeight = t.height * 1.2;\n if (textHeight > h) {\n t.setText('...');\n }\n var rec = self._fabricRect(w, h, domPlayerData);\n var o = self._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), w, h, parseInt(layout.attr('rotation')));\n\n rec.originX = 'center';\n rec.originY = 'center';\n t.top = 0 - (rec.height / 2);\n t.left = 0 - (rec.width / 2);\n _.extend(self, o);\n self.add(rec);\n self.add(t);\n self._fabricAlpha(domPlayerData);\n self._fabricLock();\n self['canvasScale'] = i_canvasScale;\n\n //$.ajax({\n // url: url,\n // async: false,\n // dataType: 'script',\n // complete: function (e) {\n // setTimeout(i_callback, 1);\n // }\n //});\n setTimeout(i_callback, 1);\n\n var direction = $(font).attr('textAlign');\n switch (direction) {\n case 'left':\n {\n break;\n }\n case 'center':\n {\n t.set({\n textAlign: direction,\n originX: direction,\n left: 0\n });\n break;\n }\n case 'right':\n {\n t.set({\n textAlign: direction,\n originX: direction,\n left: rec.width / 2\n });\n break;\n }\n }\n }\n\n}\n" }, { "path": "src/app/blocks/block-fabric-label.ts", "content": "import {BlockFabric} from \"./block-fabric\";\nimport * as _ from \"lodash\";\nimport {Lib} from \"../../Lib\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\n\nconst blockType = BlockLabels.LABEL;\n\nexport class BlockFabricLabel extends BlockFabric {\n\n constructor(options, i_blockService, i_pepper) {\n super(options, i_blockService, i_pepper, blockType)\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_blockType = blockType;\n _.extend(options, {blockType: this.m_blockType})\n }\n\n /**\n Convert the block into a fabric js compatible object\n @Override\n @method fabricateBlock\n @param {number} i_canvasScale\n @param {function} i_callback\n **/\n fabricateBlock(i_canvasScale, i_callback) {\n\n var domPlayerData = this._getBlockPlayerData();\n var layout = $(domPlayerData).find('Layout');\n var label = $(domPlayerData).find('Label');\n var text = $(label).find('Text').text();\n var font = $(label).find('Font');\n\n var url = ('https:' === document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';\n\n //$.getScript(src, function (data) {\n // console.log(data);\n //});\n\n var t = new fabric.IText(text, {\n fontSize: Number($(font).attr('fontSize')),\n //fontFamily: 'Graduate',\n //fontFamily: 'Jolly Lodger',\n //fontFamily: 'Arial',\n fontFamily: $(font).attr('fontFamily'),\n fill: '#' + Lib.DecimalToHex($(font).attr('fontColor')),\n textDecoration: $(font).attr('textDecoration'),\n fontWeight: $(font).attr('fontWeight'),\n fontStyle: $(font).attr('fontStyle'),\n textAlign: $(font).attr('textAlign'),\n top: 5,\n left: 5\n });\n\n // calculate block so it can always contain the text it holds and doesn't bleed\n this.m_minSize.w = t.width < 50 ? 50 : t.width * 1.2;\n this.m_minSize.h = t.height < 50 ? 50 : t.height * 1.2;\n var w = parseInt(layout.attr('width')) < this.m_minSize.w ? this.m_minSize.w : parseInt(layout.attr('width'));\n var h = parseInt(layout.attr('height')) < this.m_minSize.h ? this.m_minSize.h : parseInt(layout.attr('height'));\n\n var rec = this._fabricRect(w, h, domPlayerData);\n var o = this._fabricateOptions(parseInt(layout.attr('y')), parseInt(layout.attr('x')), w, h, parseInt(layout.attr('rotation')));\n //var group = new fabric.Group([ rec, t ], o);\n //_.extend(this, group);\n\n rec.originX = 'center';\n rec.originY = 'center';\n t.top = 0 - (rec.height / 2);\n t.left = 0 - (rec.width / 2);\n _.extend(this, o);\n this.add(rec);\n this.add(t);\n this._fabricAlpha(domPlayerData);\n this._fabricLock();\n this['canvasScale'] = i_canvasScale;\n\n //$.ajax({\n // url: url,\n // async: false,\n // dataType: \"script\",\n // complete: function(e){\n // setTimeout(i_callback,1)\n // }\n //});\n setTimeout(i_callback,1);\n\n var direction = $(font).attr('textAlign');\n switch (direction) {\n case 'left': {\n break;\n }\n case 'center': {\n t.set({\n textAlign: direction,\n originX: direction,\n left: 0\n });\n break;\n }\n case 'right': {\n t.set({\n textAlign: direction,\n originX: direction,\n left: rec.width / 2\n });\n break;\n }\n }\n\n // todo: add shadow\n //http://jsfiddle.net/Kienz/fgWNL/\n //http://jsfiddle.net/fabricjs/7gvJG/\n //http://jsfiddle.net/5KKQ2/\n //t.set('shadow', {\n // color: 'black',\n // blur: 1,\n // offsetX:3,\n // offsetY: 1\n //});({ color: 'rgba(12,12,12,1)' });\n //rec.set('shadow', {\n // color: 'black',\n // blur: 1,\n // offsetX:3,\n // offsetY: 1\n //});\n }\n\n /**\n Delete this block\n @method deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n **/\n deleteBlock(i_memoryOnly) {\n // $(Elements.IMAGE_ASPECT_RATIO).off('change', this.m_inputChangeHandler);\n this._deleteBlock(i_memoryOnly);\n }\n\n}\n" }, { "path": "src/app/blocks/block-fabric-scene.ts", "content": "import {BlockFabric} from \"./block-fabric\";\nimport * as _ from 'lodash';\nimport {Lib} from \"../../Lib\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\nconst blockType = BlockLabels.BLOCKCODE_SCENE;\n\nexport class BlockFabricScene extends BlockFabric {\n\n m_canvas;\n m_gridMagneticMode = 0;\n\n constructor(options, i_blockService, i_pepper) {\n super(options, i_blockService, i_pepper, blockType)\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_blockType = blockType;\n _.extend(options, {blockType: this.m_blockType})\n }\n\n /**\n get player data for a scene\n @Override\n **/\n getBlockData() {\n var data = BlockFabric.prototype.getBlockData.call(this);\n var domPlayerData = this._getBlockPlayerData();\n data.blockName = $(domPlayerData).find('Player').eq(0).attr('label');\n return data;\n }\n\n /**\n Update the msdb for the block with new values inside its player_data\n @Override\n **/\n _setBlockPlayerData(i_xmlDoc, i_noNotify) {\n // var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);\n // switch (this.m_placement) {\n // case BB.CONSTS.PLACEMENT_CHANNEL: {\n // var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(this.m_block_id);\n // var domPlayerData = $.parseXML(recBlock['player_data']);\n // var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');\n // var player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);\n // pepper.setScenePlayerData(scene_id, player_data);\n // break;\n // }\n //\n // case BB.CONSTS.PLACEMENT_IS_SCENE: {\n // pepper.setScenePlayerData(this.m_block_id, player_data);\n // //if (!i_noNotify)\n // // this._announceBlockChanged();\n // break;\n // }\n // }\n }\n\n /**\n Get the XML player data of a block, depending where its placed\n @Override\n **/\n _getBlockPlayerData(): any {\n var blockID = this.m_pepper.getSceneIdFromPseudoId(this.m_block_id);\n var recPlayerData = this.m_pepper.getScenePlayerRecord(blockID);\n var xPlayerdata = recPlayerData['player_data_value'];\n return $.parseXML(xPlayerdata);\n // var recBlock = undefined;\n //\n // switch (this.m_placement) {\n //\n // case BB.CONSTS.PLACEMENT_CHANNEL: {\n // recBlock = pepper.getCampaignTimelineChannelPlayerRecord(this.m_block_id);\n // var domPlayerData = $.parseXML(recBlock['player_data']);\n // var sceneHandle = $(domPlayerData).find('Player').attr('hDataSrc');\n // return pepper.getScenePlayerdataDom(sceneHandle);\n // break;\n // }\n //\n // case BB.CONSTS.PLACEMENT_IS_SCENE: {\n // var blockID = pepper.getSceneIdFromPseudoId(this.m_block_id);\n // var recPlayerData = BB.Pepper.getScenePlayerRecord(blockID);\n // var xPlayerdata = recPlayerData['player_data_value'];\n // return $.parseXML(xPlayerdata);\n // break;\n // }\n // }\n }\n\n /**\n Find the border section in player_data for selected block\n **/\n // _findBorder(i_domPlayerData) {\n // var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Border');\n // return xSnippet;\n // }\n\n /**\n Find the background section in player_data for selected block\n **/\n // _findBackground(i_domPlayerData) {\n // var xSnippet = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');\n // return xSnippet;\n // }\n\n /**\n Find the gradient blocks in player_data for selected scene block\n **/\n _findGradientPoints(i_domPlayerData) {\n var xBackground = $(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');\n var xSnippet = $(xBackground).find('GradientPoints').eq(0);\n return xSnippet;\n }\n\n /**\n Add the checkers background to a scene\n **/\n _fabricApplySceneBgImage(i_image) {\n this.m_canvas.setBackgroundColor('', this.m_canvas.renderAll.bind(this.m_canvas));\n $('#sceneCanvasContainer').find('.canvas-container').removeClass('checkers').removeClass('grid25').removeClass('grid50').addClass(i_image);\n this.m_canvas.renderAll();\n }\n\n /**\n Set a scene's background color or image\n @method fabricSceneBg\n **/\n fabricSceneBg() {\n var domPlayerData = this._getBlockPlayerData();\n var colorPoints = this._findGradientPoints(domPlayerData)\n var color = $(colorPoints).find('Point').attr('color');\n\n switch (this.m_gridMagneticMode) {\n case 0: {\n if (_.isUndefined(color)) {\n this._fabricApplySceneBgImage('checkers');\n return;\n }\n color = '#' + Lib.DecimalToHex(color);\n if (this.m_canvas.backgroundColor == color)\n return;\n this.m_canvas.setBackgroundColor(color, function () {\n });\n this.m_canvas.renderAll();\n break;\n }\n case 1: {\n this._fabricApplySceneBgImage('grid25');\n break;\n }\n case 2: {\n this._fabricApplySceneBgImage('grid50');\n break;\n }\n }\n }\n\n /**\n Set reference to managed canvas\n **/\n setCanvas(i_canvas, i_magneticGridMode) {\n this.m_canvas = i_canvas;\n this.m_gridMagneticMode = i_magneticGridMode;\n this.fabricSceneBg();\n }\n\n /**\n Get the scene id that's associated with this block given that it resides in a timeline > channel\n **/\n // getChannelBlockSceneID() {\n // var recBlock = pepper.getCampaignTimelineChannelPlayerRecord(this.m_block_id);\n // var domPlayerData = $.parseXML(recBlock['player_data']);\n // var scene_id = $(domPlayerData).find('Player').attr('hDataSrc');\n // return scene_id;\n // }\n\n /**\n Delete this block\n @method deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n **/\n deleteBlock(i_memoryOnly) {\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.SCENE_BG_COLOR_CHANGED, this);\n // $(Elements.SCENE_NAME_INPUT).off(\"input\", this.m_inputNameChangeHandler);\n // $(Elements.SCENE_WIDTH_INPUT).off(\"input\", this.m_inputWidthChangeHandler);\n // $(Elements.SCENE_WIDTH_INPUT).off(\"blur\", this.m_inputWidthChangeHandler);\n // $(Elements.SCENE_HEIGHT_INPUT).off(\"blur\", this.m_inputWidthChangeHandler);\n // $(Elements.SCENE_HEIGHT_INPUT).off(\"input\", this.m_inputHeightChangeHandler);\n // this._deleteBlock(i_memoryOnly);\n }\n}\n" }, { "path": "src/app/blocks/block-fabric-svg.ts", "content": "import {BlockFabric} from \"./block-fabric\";\nimport * as _ from \"lodash\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\n\nconst blockType = BlockLabels.BLOCKCODE_SVG;\n\nexport class BlockFabricSvg extends BlockFabric {\n\n m_nativeID;\n m_fileFormat;\n\n constructor(options, i_blockService, i_pepper) {\n super(options, i_blockService, i_pepper, blockType)\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_blockType = blockType;\n _.extend(options, {blockType: this.m_blockType})\n this._initResourcesData();\n }\n\n /**\n Set the instance resource data from msdb which includes resource_id (handle of a resource)\n as well as the description of the resource and icon.\n @method _initResourcesData\n **/\n _initResourcesData() {\n var domPlayerData = this._getBlockPlayerData();\n var xSnippet = $(domPlayerData).find('Resource');\n this.m_resourceID = $(xSnippet).attr('hResource');\n this.m_nativeID = this.m_pepper.getResourceNativeID(this.m_resourceID);\n if (_.isNull(this.m_nativeID)) {\n this._selfDestruct();\n return;\n }\n this.m_blockName = this.m_pepper.getResourceRecord(this.m_resourceID).resource_name;\n this.m_blockDescription = this.m_pepper.getResourceName(this.m_resourceID);\n this.m_fileFormat = this.m_pepper.getResourceType(this.m_resourceID);\n this.m_blockFontAwesome = this.m_blockService.getFontAwesome(this.m_fileFormat);\n }\n\n\n // /var/www/sites/dynasite/htdocs/_msportal/_js/_node/public/assets/14.svg\n /**\n Convert the block into a fabric js compatible object, called externally on creation of block\n @Override\n @method fabricateBlock\n **/\n fabricateBlock(i_canvasScale, i_callback) {\n var self = this;\n\n var domPlayerData = self._getBlockPlayerData();\n var layout = $(domPlayerData).find('Layout');\n\n var w = parseInt(layout.attr('width'));\n var h = parseInt(layout.attr('height'));\n var rec = self._fabricRect(w, h, domPlayerData);\n\n var svgPath = window.g_protocol + self.m_pepper.getUserData().domain + '/Resources/business' + self.m_pepper.getUserData().businessID + '/resources/' + self.m_nativeID + '.' + self.m_fileFormat;\n var urlPath = jQuery.base64.encode(svgPath);\n var srvPath = 'https://secure.digitalsignage.com/proxyRequest/' + urlPath;\n\n //svgPath = 'https://secure.digitalsignage.com/_public/assets/15.svg';\n //svgPath = 'https://ida.signage.me/Test/14.svg';\n //svgPath = 'https://ida.signage.me/code/14.svg';\n //svgPath = \"https://s3-us-west-2.amazonaws.com/oregon-signage-resources/business372844/resources/14.svg\";\n //svgPath = 'https://ida2.signage.me/14.svg';\n\n $.get(srvPath, function (svg) {\n var hh, ww, svgHeight, svgWidth, re;\n\n // set new height in SVG per current selection box height\n hh = layout.attr('height');\n\n // catch load errors\n svgHeight = svg.match(/(height=\")([^\\\"]*)/)\n if (_.isNull(svgHeight)) {\n i_callback();\n return;\n }\n svgHeight = svgHeight[2];\n re = new RegExp('height=\"' + svgHeight + '\"', \"ig\");\n svg = svg.replace(re, 'height=\"' + hh + '\"');\n\n // set new width in SVG per current selection box width\n ww = layout.attr('width');\n svgWidth = svg.match(/(width=\")([^\\\"]*)/)[2];\n re = new RegExp('width=\"' + svgWidth + '\"', \"ig\");\n svg = svg.replace(re, 'width=\"' + ww + '\"');\n\n fabric.loadSVGFromString(svg, function (objects:any, options) {\n objects[0].heightAttr = hh;\n objects[0].widthAttr = ww;\n objects[0].height = hh;\n objects[0].width = ww;\n\n var groupSvg = fabric.util.groupSVGElements(objects, options);\n\n rec.originX = 'center';\n rec.originY = 'center';\n groupSvg.originX = 'center';\n groupSvg.originY = 'center';\n var o = {\n left: parseInt(layout.attr('x')),\n top: parseInt(layout.attr('y')),\n width: parseInt(layout.attr('width')),\n height: parseInt(layout.attr('height')),\n angle: parseInt(layout.attr('rotation')),\n hasRotatingPoint: false,\n stroke: 'transparent',\n cornerColor: 'black',\n cornerSize: 5,\n lockRotation: true,\n transparentCorners: false\n };\n _.extend(self, o);\n self.add(rec);\n self.add(groupSvg);\n self._fabricAlpha(domPlayerData);\n self._fabricLock();\n self['canvasScale'] = i_canvasScale;\n i_callback();\n });\n\n }, 'text');\n }\n\n /**\n Get the resource id of the embedded resource\n @method getResourceID\n @return {Number} resource_id;\n **/\n getResourceID() {\n return this.m_resourceID;\n }\n\n /**\n Delete this block\n @method deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n **/\n deleteBlock(i_memoryOnly) {\n // $(Elements.IMAGE_ASPECT_RATIO).off('change', this.m_inputChangeHandler);\n this._deleteBlock(i_memoryOnly);\n }\n\n}\n" }, { "path": "src/app/blocks/block-fabric.ts", "content": "import * as _ from 'lodash';\nimport {Lib} from \"../../Lib\";\nimport {BlockService} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\n\nexport class BlockFabric extends fabric.Group {\n\n m_block_id;\n m_sceneID;\n m_blockType;\n m_zIndex = -1;\n m_minSize = {w: 50, h: 50};\n m_blockName;\n m_blockAcronym;\n m_blockDescription;\n m_blockIcon;\n m_blockFontAwesome;\n m_blockSvg;\n m_resourceID;\n m_blockProperty;\n m_blockService: BlockService;\n m_pepper: RedPepperService;\n\n constructor(options, i_blockService, i_pepper, i_blockType) {\n super()\n this.m_blockType = i_blockType\n this.m_blockService = i_blockService;\n this.m_pepper = i_pepper;\n this.m_block_id = options.i_block_id;\n this.m_sceneID = options.i_scene_player_data_id;\n this.m_zIndex = -1;\n this.m_minSize = {w: 50, h: 50};\n this.m_blockName = i_blockService.getBlockBoilerplate(this.m_blockType).name;\n this.m_blockAcronym = i_blockService.getBlockBoilerplate(this.m_blockType).acronym;\n this.m_blockDescription = i_blockService.getBlockBoilerplate(this.m_blockType).description;\n this.m_blockIcon = i_blockService.getBlockBoilerplate(this.m_blockType).icon;\n this.m_blockFontAwesome = i_blockService.getBlockBoilerplate(this.m_blockType).fontAwesome;\n this.m_blockSvg = i_blockService.getBlockBoilerplate(this.m_blockType).svg;\n this.m_resourceID = undefined;\n }\n\n // _setBlockPlayerData(i_xmlDoc, i_noNotify, i_xmlIsString) {\n // var player_data;\n // if (i_xmlIsString == true) {\n // player_data = i_xmlDoc;\n // } else {\n // player_data = (new XMLSerializer()).serializeToString(i_xmlDoc);\n // }\n // this.m_pepper.setScenePlayerdataBlock(this.m_sceneID, this.m_block_id, player_data);\n // this.m_pepper.reduxCommit();\n // // switch (this.m_placement) {\n // // case PLACEMENT_SCENE: {\n // // this.m_pepper.setScenePlayerdataBlock(this.m_sceneID, this.m_block_id, player_data);\n // // break;\n // // }\n // // case PLACEMENT_IS_SCENE: {\n // // this.m_pepper.setScenePlayerData(this.m_block_id, player_data);\n // // break;\n // // }\n // // }\n // }\n\n /**\n Get the XML player data of a block, depending where its placed\n If you like to view XML raw data, be sure to debug domPlayerData.children[0].outerHTML\n **/\n _getBlockPlayerData(): any {\n return this.m_pepper.getScenePlayerdataBlock(this.m_sceneID, this.m_block_id);\n // to view data debug domPlayerData.children[0].outerHTML\n }\n\n /**\n Find the border section in player_data for selected block\n **/\n _findBorder(i_domPlayerData) {\n return $(i_domPlayerData).find('Border');\n }\n\n /**\n Fabricate alpha to canvas\n **/\n _fabricAlpha(i_domPlayerData) {\n var appearance = $(i_domPlayerData).find('Appearance');\n var opacity: any = $(appearance).attr('alpha');\n this.setOpacity(opacity);\n }\n\n /**\n Fabricate color points to canvas\n **/\n _fabricColorPoints(i_domPlayerData) {\n var gradientPoints = $(i_domPlayerData).find('GradientPoints');\n var points = $(gradientPoints).find('Point');\n var colorStops = {}\n _.each(points, function (point) {\n var color = '#' + Lib.DecimalToHex(($(point).attr('color')));\n var offset: any = $(point).attr('midpoint');\n offset = offset / 250;\n colorStops[offset] = color;\n });\n return colorStops;\n }\n\n /**\n Config the fabric block border\n **/\n _fabricateBorder(i_options) {\n var domPlayerData = this._getBlockPlayerData()\n var border = this._findBorder(domPlayerData);\n var color = border.length == 0 ? 'transparent' : '#' + Lib.DecimalToHex($(border).attr('borderColor'));\n return _.extend({\n // borderColor: '#5d5d5d',\n stroke: color,\n strokeWidth: 1\n }, i_options);\n }\n\n /**\n Build the options injected into a newly created fabric object\n **/\n _fabricateOptions(i_top, i_left, i_width, i_height, i_angle) {\n var options = {\n top: i_top,\n left: i_left,\n width: i_width,\n height: i_height,\n angle: i_angle,\n fill: '#ececec',\n hasRotatingPoint: false,\n transparentCorners: false,\n cornerColor: 'black',\n cornerSize: 5,\n lockRotation: true,\n lineWidth: 1\n };\n return this._fabricateBorder(options);\n }\n\n /**\n Fabricate color points to canvas\n **/\n _fabricRect(i_width, i_height, i_domPlayerData) {\n var options = this._fabricateOptions(0, 0, i_width, i_height, 0);\n var r = new fabric.Rect(options);\n r.setGradient('fill', {\n x1: 0 - (i_width / 2),\n y1: 0,\n x2: (i_width / 2),\n y2: 0,\n colorStops: this._fabricColorPoints(i_domPlayerData)\n });\n return r;\n }\n\n\n\n \n /**\n Convert the block into a fabric js compatible object, called externally on creation of block\n @Override\n @method fabricateBlock\n **/\n fabricateBlock(i_canvasScale, i_callback) {\n var domPlayerData = this._getBlockPlayerData();\n var layout = $(domPlayerData).find('Layout');\n\n var w = parseInt(layout.attr('width'));\n var h = parseInt(layout.attr('height'));\n var rec = this._fabricRect(w, h, domPlayerData);\n\n fabric.loadSVGFromString(this.m_blockSvg, (objects, options) => {\n var groupSvg = fabric.util.groupSVGElements(objects, options);\n rec.originX = 'center';\n rec.originY = 'center';\n groupSvg.originX = 'center';\n groupSvg.originY = 'center';\n\n var o = {\n left: parseInt(layout.attr('x')),\n top: parseInt(layout.attr('y')),\n width: parseInt(layout.attr('width')),\n height: parseInt(layout.attr('height')),\n angle: parseInt(layout.attr('rotation')),\n hasRotatingPoint: false,\n stroke: 'transparent',\n cornerColor: 'black',\n cornerSize: 5,\n lockRotation: true,\n transparentCorners: false\n };\n _.extend(this, o);\n this.add(rec);\n this.add(groupSvg);\n this._fabricAlpha(domPlayerData);\n this._fabricLock();\n this['canvasScale'] = i_canvasScale;\n i_callback();\n });\n }\n\n /**\n On changes in msdb model updated UI common lock properties\n **/\n _fabricLock() {\n var domPlayerData = this._getBlockPlayerData();\n var locked: any = $(domPlayerData).attr('locked');\n if (_.isUndefined(locked) || locked == '0') {\n locked = false;\n } else {\n locked = true;\n }\n this.lockMovementX = locked;\n this.lockMovementY = locked;\n //self.lockScalingX = locked; self.lockScalingY = locked; self.lockUniScaling = locked; self.lockRotation = locked;\n /////var dimensionProps = BB.comBroker.getService(BB.SERVICES['DIMENSION_PROPS_LAYOUT']);\n /////if (_.isUndefined(dimensionProps))\n ////// return;\n //////dimensionProps.setLock(locked);\n }\n\n /**\n Get block data as a json formatted object literal and return to caller\n **/\n getBlockData() {\n var data = {\n blockID: this.m_block_id,\n blockType: this.m_blockType,\n blockName: this.m_blockName,\n blockDescription: this.m_blockDescription,\n blockIcon: this.m_blockIcon,\n blockFontAwesome: this.m_blockFontAwesome,\n blockAcronym: this.m_blockAcronym,\n blockMinWidth: this.m_minSize.w,\n blockMinHeight: this.m_minSize.h,\n blockData: this._getBlockPlayerData()\n };\n return data;\n }\n\n /**\n Set a block's z-index in case we know it (i.e.: it is going to be a re-render of a previous block that\n was removed from the canvas)\n **/\n setZindex(i_zIndex) {\n this.m_zIndex = i_zIndex;\n }\n\n /**\n Get a block's z-index\n @method getZindex\n @param {Number} i_index\n **/\n getZindex(i_zIndex) {\n return this.m_zIndex;\n }\n\n /**\n Delete block is a public method used as fall back method, if not overridden by inherited instance.\n It is also a semi abstract method, all implementations should go into _deleteBlock();\n @method deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n @return none\n **/\n deleteBlock(i_memoryOnly) {\n /* semi-abstract, overridden, do not modify */\n this._deleteBlock(i_memoryOnly);\n }\n\n /**\n bug fix: backward comparability with player_data that includes deleted resources\n this was already fixed but we live _selfDestruct for backwards compatability\n @method _selfDestruct\n **/\n _selfDestruct() {\n setTimeout(() => {\n //todo: ???\n // var sceneEditView = BB.comBroker.getService(BB.SERVICES['SCENE_EDIT_VIEW']);\n // if (!_.isUndefined(sceneEditView)) {\n // var selectedSceneID = sceneEditView.getSelectedSceneID();\n // pepper.removeScenePlayer(selectedSceneID, self.m_block_id);\n // BB.comBroker.fire(BB.EVENTS.LOAD_SCENE, this, null, selectedSceneID);\n // }\n }, 2000);\n }\n\n /**\n Delete block is a private method that is always called regardless if instance has\n been inherited or not. Used for releasing memory for garbage collector.\n @method _deleteBlock\n @params {Boolean} i_memoryOnly if true only remove from existance but not from msdb\n @return none\n **/\n _deleteBlock(i_memoryOnly) {\n // if (!i_memoryOnly)\n // pepper.removeBlockFromTimelineChannel(this.m_block_id);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_SELECTED, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_LENGTH_CHANGING, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CHANGED, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.GRADIENT_COLOR_CLOSED, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.BLOCK_BORDER_CHANGE, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.ALPHA_CHANGED, this);\n // BB.comBroker.stopListenWithNamespace(BB.EVENTS.LOCK_CHANGED, this);\n // $(Elements.SHOW_BACKGROUND).off(this.m_proxyToggleBgKey, this.m_proxyToggleBg);\n // $(Elements.SHOW_BORDER).off(this.m_proxyToggleBorderKey, this.m_proxyToggleBorder);\n\n // if (this.off != undefined)\n // this.off('modified');\n //\n // if (this.m_sceneSelectedHandler)\n // this.m_canvas.off('object:selected', this.m_sceneSelectedHandler);\n //\n // $.each(this, function (k) {\n // this[k] = undefined;\n // });\n }\n}" }, { "path": "src/app/blocks/block-prop-calendar.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport * as moment from 'moment'\n\n@Component({\n selector: 'block-prop-calendar',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
\n
\n
\n
    \n
  • \n token
    \n \n
    • \n
  • \n \n
    • \n
  • \n Load with calendar\n
    \n \n \n\n
    \n
    • \n
  • \n offset range mode\n
    \n \n \n
    \n
    • \n\n
  • \n
    \n \n
    • \n\n
  • \n
    \n \n
    • \n\n
  • \n
    \n \n
    • \n\n
  • \n
    \n \n
    • \n\n
\n
\n
\n \n
\n
\n
\n `\n})\nexport class BlockPropCalendar extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_calList = [];\n m_calSeleced: any = {};\n m_mode = false;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'token': [''],\n 'mode': [''],\n 'startDate': ['1/1/2020'],\n 'endDate': ['1/1/2020'],\n 'before': [],\n 'after': [],\n 'calSelection': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n _saveDates(range) {\n\n }\n\n _onCalSelected(event) {\n var calId = event.target.value;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('id', calId);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var $data = jXML(domPlayerData).find('Json').find('Data');\n var mode = $data.attr('mode');\n this.m_mode = (mode == 'fixed') ? false : true;\n var before = $data.attr('before');\n var after = $data.attr('after');\n this.m_formInputs['mode'].setValue(this.m_mode);\n this.m_formInputs['after'].setValue(after);\n this.m_formInputs['before'].setValue(before);\n this.m_formInputs['token'].setValue($data.attr('token'));\n this._getGoogleCalendars();\n this._populateStartEndDates();\n }\n\n /**\n Populate the start and end dates for Google calendar date range selection\n If first time date component is used, set startDate and endDate where\n startDate is relative to today and endDate for a week from now\n @method _populateStartEndDates\n **/\n _populateStartEndDates(): void {\n var startDate = this._getRangeDate('startDate');\n var endDate = this._getRangeDate('endDate');\n this.m_formInputs['startDate'].setValue(startDate);\n this.m_formInputs['endDate'].setValue(endDate);\n }\n\n _setRangeDate(i_field: 'startDate' | 'endDate', i_value): void {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json').find('Data');\n var value = moment(i_value).unix() + '000';\n jXML(xSnippet).attr(i_field, value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _getRangeDate(i_field): string {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n var value: any = jXML(item).attr(i_field);\n if (_.isEmpty(value)) {\n var date = new Date();\n var lastWeek: number = date.setDate(new Date().getDate() - 7);\n var newDate = moment(lastWeek).format('YYYY-MM-DD');\n return newDate;\n }\n value = value.slice(0, -3);\n value = moment.unix(parseInt(value)).format('YYYY-MM-DD');\n return value;\n }\n\n _onModeChange(i_value) {\n var mode = i_value == true ? 'offset' : 'fixed';\n this.m_mode = i_value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json').find('Data');\n jXML(xSnippet).attr('mode', mode);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _getGoogleCalendars() {\n var self = this;\n try {\n jQuery.ajax({\n url: `https://secure.digitalsignage.com/GoogleCalendarList/${self.m_contGroup.value.token}/100`,\n dataType: \"json\",\n type: \"post\",\n complete: function (response, status) {\n self.m_calSeleced = {};\n self.m_calList = [];\n if (_.isUndefined(response.responseText) || response.responseText.length == 0)\n return;\n if (response.responseText.indexOf('Cannot')>-1)\n return;\n var jData = JSON.parse(response.responseText);\n _.forEach(jData, function (k: any) {\n self.m_calList.push({\n id: k.id,\n label: k.summary\n })\n });\n var id = self._getFileId();\n if (id && id.length > 10)\n self.m_calSeleced = self.m_calList.find(item => item.id == id);\n self.m_formInputs['calSelection'].setValue(self.m_calSeleced.id);\n self.cd.markForCheck()\n },\n error: function (jqXHR, exception) {\n console.log('ajax req:' + jqXHR, exception);\n }\n });\n } catch (e) {\n console.error('error on ajax' + e);\n }\n }\n\n private _getFileId(): string {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n return jXML(item).attr('id');\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onCreateToken() {\n var win = window.open('http://google.signage.me', '_blank');\n if (win) {\n win.focus();\n } else {\n bootbox.alert('Browser popups are blocked, please enable and try again');\n }\n }\n\n private saveToStore() {\n // Lib.Con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('before', this.m_contGroup.value.before);\n jXML(item).attr('after', this.m_contGroup.value.after);\n jXML(item).attr('token', this.m_contGroup.value.token);\n this._setRangeDate('startDate',this.m_contGroup.value.startDate)\n this._setRangeDate('endDate',this.m_contGroup.value.endDate)\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-clock.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from \"@angular/core\";\nimport {FormBuilder} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser} from \"ng-mslib\";\nimport {IFontSelector} from \"../../comps/font-selector/font-selector\";\nimport {Lib} from \"../../Lib\";\n\n@Component({\n selector: 'block-prop-clock',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
\n
\n
\n
    \n
  • \n
    \n Choose format\n
    \n \n
    \n
    \n
    • \n
\n
\n
\n
\n \n `\n})\nexport class BlockPropClock extends Compbaser implements AfterViewInit {\n\n m_blockData: IBlockData;\n m_fontConfig: IFontSelector;\n m_clockFormats = [{\n type: 'longDateAndTime',\n format: 'Friday, Mar 21 2018 at 8:59AM'\n }, {\n type: 'longDate',\n format: 'Friday, Mar 21 2018'\n }, {\n type: 'shortDayTime',\n format: 'Friday 9:10 AM'\n }, {\n type: 'date',\n format: '3/21/18'\n }, {\n type: 'time',\n format: '9:00:39 AM'\n }];\n\n m_model = {\n options: this.m_clockFormats[0]\n };\n\n constructor(private fb: FormBuilder, private rp: RedPepperService, private bs: BlockService) {\n super();\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n _onFontChanged(config: IFontSelector) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Clock');\n var xSnippetFont = jXML(xSnippet).find('Font');\n config.bold == true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');\n config.italic == true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');\n config.underline == true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');\n xSnippetFont.attr('fontColor', Lib.ColorToDecimal(config.color));\n xSnippetFont.attr('fontSize', config.size);\n xSnippetFont.attr('fontFamily', config.font);\n xSnippetFont.attr('textAlign', config.alignment);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onFormatChanged(e) {\n var mask = this.bs.getBlockBoilerplate(this.m_blockData.blockCode).getDateTimeMask(e.type);\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Clock');\n xSnippet.attr('clockMask', mask);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var self = this;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Clock');\n var mask = jXML(xSnippet).attr('clockMask');\n var xSnippetFont = jXML(xSnippet).find('Font');\n\n this.m_clockFormats.forEach(i_clockFormat => {\n var currMask = self.bs.getBlockBoilerplate(self.m_blockData.blockCode).getDateTimeMask(i_clockFormat.type);\n if (mask == currMask) {\n this.m_model = {options: i_clockFormat};\n }\n });\n\n this.m_fontConfig = {\n size: Number(xSnippetFont.attr('fontSize')),\n alignment: xSnippetFont.attr('textAlign'),\n bold: xSnippetFont.attr('fontWeight') == 'bold' ? true : false,\n italic: xSnippetFont.attr('fontStyle') == 'italic' ? true : false,\n font: xSnippetFont.attr('fontFamily'),\n underline: xSnippetFont.attr('textDecoration') == 'underline' ? true : false,\n color: Lib.ColorToHex(Lib.DecimalToHex(xSnippetFont.attr('fontColor'))),\n }\n }\n\n destroy() {\n // console.log('destroy html component');\n }\n}\n" }, { "path": "src/app/blocks/block-prop-collection.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, ViewChild} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {List} from \"immutable\";\nimport {ISimpleGridEdit} from \"../../comps/simple-grid-module/SimpleGrid\";\nimport {StoreModel} from \"../../store/model/StoreModel\";\nimport {SimpleGridRecord} from \"../../comps/simple-grid-module/SimpleGridRecord\";\nimport {SimpleGridTable} from \"../../comps/simple-grid-module/SimpleGridTable\";\nimport {ISimpleGridDraggedData} from \"../../comps/simple-grid-module/SimpleGridDraggable\";\nimport {JsonEventResourceModel} from \"./json-event-grid\";\nimport {Lib} from \"../../Lib\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {BlockLabels, PLACEMENT_LISTS, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n selector: 'block-prop-collection',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n styles: [`\n /* walk up the ancestor tree and if darkTheme is found, apply style */\n /*:host-context(.darkTheme) * {*/\n /*background-color: #1e1e1e;*/\n /*}*/\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n\n
\n
\n
  • \n Kiosk mode
    \n
    \n \n \n
    \n
    • \n \n
  • \n \n \n
    • \n
  • \n \n
    \n
    \n \n \n \n name\n seconds\n order\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n
    • \n
  • \n \n
    • \n
    \n \n \n

    add content to collection

    \n     \n \n \n \n \n     \n `\n})\nexport class BlockPropCollection extends Compbaser implements AfterViewInit {\n\n formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n m_PLACEMENT_LISTS = PLACEMENT_LISTS;\n m_collectionList: List;\n m_jsonEventResources: Array;\n\n constructor(private fb: FormBuilder, private yp:YellowPepperService, private cd: ChangeDetectorRef, private bs: BlockService, @Inject('BLOCK_PLACEMENT') private blockPlacement: string, private rp: RedPepperService) {\n super();\n this.m_contGroup = fb.group({\n 'mode': [0]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @ViewChild('simpleGrid')\n simpleGrid: SimpleGridTable;\n\n @ViewChild(ModalComponent)\n modal: ModalComponent;\n\n @Input()\n set setBlockData(i_blockData) {\n this.m_blockData = i_blockData;\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onAddNewBlock() {\n this.modal.open()\n }\n\n _onClosed(){\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n // _onAddedNewBlock(i_addContents:IAddContents) {\n // console.log('added ' + i_addContents.name);\n // this.modal.close()\n // }\n\n _onDragComplete(dragData: ISimpleGridDraggedData) {\n // dragData.items.forEach((item: StoreModel, i) => con(i + ' ' + item.getKey('name')) );\n var currentIndex = dragData.currentIndex;\n var newIndex = dragData.newIndex;\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('Collection').children().get(newIndex);\n var source = jXML(domPlayerData).find('Collection').children().get(currentIndex);\n newIndex > currentIndex ? jXML(target).after(source) : jXML(target).before(source);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onRemoveCollectionItem() {\n var record: SimpleGridRecord = this.simpleGrid.getSelected();\n if (_.isUndefined(record)) return;\n var rowIndex = this.simpleGrid.getSelected().index;\n var domPlayerData = this.m_blockData.playerDataDom;\n jXML(domPlayerData).find('Collection').children().eq(rowIndex).remove();\n // self._populateTableCollection(domPlayerData);\n this._populateTableEvents();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onAddNewCollectionItem() {\n this._onAddNewBlock()\n }\n\n _onDurationEdited(event: ISimpleGridEdit, index) {\n var value = event.value;\n if (!Lib.IsNumber(value)) return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Collection').children().get(index);\n jXML(item).attr('duration', value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onPageNameEdited(event: ISimpleGridEdit, index) {\n var value = event.value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Collection').children().get(index);\n jXML(item).attr('page', value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n\n _populateTableCollection() {\n this.m_collectionList = List([]);\n var domPlayerData = this.m_blockData.playerDataDom as any\n var rowIndex = 0;\n\n jXML(domPlayerData).find('Collection').children().each((k, page) => {\n var resource_hResource, scene_hDataSrc;\n var type = jXML(page).attr('type');\n if (type == 'resource') {\n resource_hResource = jXML(page).find('Resource').attr('hResource');\n } else {\n scene_hDataSrc = jXML(page).find('Player').attr('hDataSrc');\n }\n //con('populating ' + resource_hResource);\n\n var storeModel = new StoreModel({\n rowIndex: rowIndex,\n checkbox: true,\n name: jXML(page).attr('page'),\n duration: jXML(page).attr('duration'),\n type: type,\n resource_hResource: resource_hResource,\n scene_hDataSrc: scene_hDataSrc\n });\n this.m_collectionList = this.m_collectionList.push(storeModel);\n rowIndex++;\n });\n this.m_collectionList = this._sortCollection(this.m_collectionList);\n }\n\n /**\n Load event list to block props UI\n @method _populateTableEvents\n **/\n _populateTableEvents() {\n var data: Array = [], rowIndex = 0;\n var domPlayerData = this.m_blockData.playerDataDom;\n // self.m_collectionEventTable.bootstrapTable('removeAll');\n jXML(domPlayerData).find('EventCommands').children().each(function (k, eventCommand) {\n var pageName = '';\n if (jXML(eventCommand).attr('command') == 'selectPage')\n pageName = jXML(eventCommand).find('Page').attr('name');\n var storeModel = new JsonEventResourceModel({\n rowIndex: rowIndex,\n checkbox: true,\n event: jXML(eventCommand).attr('from'),\n pageName: pageName,\n action: jXML(eventCommand).attr('command')\n }\n )\n data.push(storeModel)\n rowIndex++;\n });\n this.m_jsonEventResources = data;\n }\n\n _sortCollection(i_collection: List): List {\n var sorted = i_collection.sort((a, b) => {\n if (a.getKey('rowIndex') > b.getKey('rowIndex'))\n return 1;\n if (a.getKey('rowIndex') < b.getKey('rowIndex'))\n return -1;\n return 0;\n })\n return sorted as List;\n }\n\n _render() {\n this.m_contGroup.reset();\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippetCollection = jXML(domPlayerData).find('Collection');\n var mode = jXML(xSnippetCollection).attr('mode') == 'kiosk' ? 1 : 0;\n this.formInputs['mode'].setValue(mode);\n this._populateTableCollection();\n this._populateTableEvents();\n this.cd.markForCheck();\n }\n\n _toggleKioskMode(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n jXML(domPlayerData).find('Collection').attr('mode', i_value ? 'kiosk' : 'slideshow');\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n /**\n Add a new collection item which can include a Scene or a resource (not a component)\n @method _onAddedContent\n @param {Event} e\n **/\n _onAddedContent(i_addContents: IAddContents) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippetCollection = jXML(domPlayerData).find('Collection');\n var buff = '';\n if (Number(i_addContents.blockCode) == BlockLabels.BLOCKCODE_SCENE) {\n // add scene to collection, if block resides in scene don't allow cyclic reference to collection scene inside current scene\n if (this.blockPlacement == PLACEMENT_SCENE && this.m_blockData.scene.handle == i_addContents.sceneData.scene_id) {\n return bootbox.alert('You cannot display a scene in a collection that refers to itself, that is just weird');\n } \n var sceneName = i_addContents.sceneData.domPlayerDataJson.Player._label;\n var nativeId = i_addContents.sceneData.scene_native_id;\n buff = ` \n \n `;\n } else {\n // Add resources to collection\n var resourceName = this.rp.getResourceRecord(i_addContents.resourceId).resource_name;\n buff = `\n \n \n \n \n \n `\n }\n jXML(xSnippetCollection).append(jXML(buff));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n // var domPlayerData = this.m_blockData.playerDataDom;\n // var xSnippet = jXML(domPlayerData).find('HTML');\n // xSnippet.attr('src', this.m_contGroup.value.url);\n // this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n\n" }, { "path": "src/app/blocks/block-prop-common.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Subject} from \"rxjs\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Lib} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\n@Component({\n selector: 'block-prop-common',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n
    \n
    \n common properties\n \n \n\n
    \n
      \n
    • \n alpha\n \n
      • \n
    • \n background\n \n
      \n
      • \n
    • \n
      \n scene background color\n
      \n
      \n \n \n
      \n \n
      \n
      • \n
    • \n
      \n border color\n
      \n
      \n \n \n
      \n \n
      \n
      • \n
    \n
    \n \n `\n})\nexport class BlockPropCommon extends Compbaser implements AfterViewInit {\n\n private formInputs = {};\n contGroup: FormGroup;\n m_blockData: IBlockData;\n m_isPropsForScene: boolean = false;\n m_borderColorChanged = new Subject();\n m_sceneBackgroundColorChanged = new Subject();\n m_color;\n m_sceneBackgroundColor;\n\n constructor(@Inject('BLOCK_PLACEMENT') private blockPlacement: string, private cd: ChangeDetectorRef, private fb: FormBuilder, private rp: RedPepperService, private bs: BlockService, private el: ElementRef) {\n super();\n this.contGroup = fb.group({\n 'alpha': [0],\n 'borderColor': [],\n 'border': [0],\n 'sceneBackgroundColor': [],\n 'sceneBackground': [0]\n });\n _.forEach(this.contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.contGroup.controls[key] as FormControl;\n })\n this._listenBorderChanged();\n }\n\n /**\n * set block data for the component.\n * on first selection we just set the blockData, in subsequent calls we only\n * re-render if we are dealing with a new block id, note that on componet creation\n * the rendering is done via ngAfterViewInit\n * @param i_blockData\n */\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n ngAfterViewInit() {\n this._listenBorderChanged();\n this._bgGradientWidgetInit();\n this._render();\n }\n\n /**\n * Render the component with latest data from BlockData\n */\n _render() {\n this.m_isPropsForScene = parseInt(this.m_blockData.blockCode) == BlockLabels.BLOCKCODE_SCENE ? true : false;\n this._alphaPopulate();\n this._gradientPopulate();\n this._sceneBackgroundPopulate();\n this._borderPropsPopulate();\n }\n\n _listenBorderChanged() {\n this.cancelOnDestroy(\n //\n this.m_borderColorChanged\n .debounceTime(500)\n .filter(v => v != '#123')\n .subscribe((i_color: any) => {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var border = this._findBorder(domPlayerData);\n jXML(border).attr('borderColor', Lib.HexToDecimal(i_color));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.m_sceneBackgroundColorChanged\n .debounceTime(500)\n .filter(v => v != '#123')\n .subscribe((i_color: any) => {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var xPoints = this._findGradientPoints(domPlayerData);\n jXML(xPoints).find('Point').attr('color', Lib.HexToDecimal(i_color));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.bs.notifySceneBgChanged();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Toggle block background on UI checkbox selection\n @method _toggleBorder\n @param {event} e\n **/\n _toggleSceneBackground(i_checked: boolean) {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var checked = i_checked == true ? 1 : 0;\n if (checked) {\n var xBgSnippet = this.bs.getCommonBackgroundXML();\n var data = jXML(domPlayerData).find('Data').eq(0);\n jXML(data).find('Background').remove();\n jXML(data).append(jXML(xBgSnippet));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this._sceneBackgroundPopulate();\n } else {\n var xSnippet = this._findGradientPointsScene(domPlayerData);\n jXML(xSnippet).empty();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n this.bs.notifySceneBgChanged()\n }\n\n /**\n Toggle block background on UI checkbox selection\n @method _toggleBorder\n @param {event} e\n **/\n _toggleBorder(i_checked: boolean) {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var checked = i_checked == true ? 1 : 0;\n if (checked) {\n var xBgSnippet = this.bs.getCommonBorderXML();\n var data = jXML(domPlayerData).find('Data').eq(0);\n var bgData: any = this._findBorder(data);\n if (bgData.length > 0 && !_.isUndefined(bgData.replace)) { // ie bug workaround\n bgData.replace(jXML(xBgSnippet));\n } else {\n jXML(data).append(jXML(xBgSnippet));\n }\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n } else {\n var xSnippet = this._findBorder(domPlayerData);\n jXML(xSnippet).remove();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n }\n\n /**\n On changes in msdb model updated UI common alpha properties\n @method _alphaPopulate\n **/\n _alphaPopulate() {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData);\n var data = jXML(domPlayerData).find('Data').eq(0);\n var xSnippet = jXML(data).find('Appearance').eq(0);\n var a1: any = jXML(xSnippet).attr('alpha');\n if (_.isUndefined(a1)) a1 = 1;\n this.formInputs['alpha'].setValue(a1)\n }\n\n _onAlphaChange(event) {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData);\n var data = jXML(domPlayerData).find('Data').eq(0);\n var xSnippet = jXML(data).find('Appearance').eq(0);\n jXML(xSnippet).attr('alpha', event.target.value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.bs.notifySceneBlockChanged(this.m_blockData)\n }\n\n _sceneBackgroundPropsPopulate() {\n var self = this;\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var xSnippet = self._findBorder(domPlayerData);\n if (xSnippet.length > 0) {\n var color = jXML(xSnippet).attr('borderColor');\n this._updateBorderColor(true, color)\n } else {\n this._updateBorderColor(false, '16777215')\n }\n }\n\n /**\n On changes in msdb model updated UI common border properties\n @method _borderPropsPopulate\n **/\n _borderPropsPopulate() {\n var self = this;\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var xSnippet = self._findBorder(domPlayerData);\n if (xSnippet.length > 0) {\n var color = jXML(xSnippet).attr('borderColor');\n this._updateBorderColor(true, color)\n } else {\n this._updateBorderColor(false, '16777215')\n }\n }\n\n @timeout(50)\n _sceneBackgroundPopulate() {\n if (!this.m_isPropsForScene) return;\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n var xPoints = this._findGradientPointsScene(domPlayerData);\n var color = jXML(xPoints).find('Point').attr('color');\n if (_.isUndefined(color))\n return this.formInputs['sceneBackground'].setValue(false)\n this.formInputs['sceneBackground'].setValue(true);\n color = '#' + Lib.DecimalToHex(color);\n this.m_sceneBackgroundColor = color;\n this.cd.markForCheck();\n }\n\n @timeout(50)\n _updateBorderColor(i_value, i_color) {\n this.formInputs['border'].setValue(i_value);\n this.m_color = '#' + Lib.DecimalToHex(i_color);\n // this.formInputs['border_input'].setValue(this.m_color);\n this.cd.markForCheck();\n }\n\n @timeout(50)\n _updateSceneBackgroundColor(i_value, i_color) {\n this.formInputs['sceneBackground'].setValue(i_value);\n this.m_color = '#' + Lib.DecimalToHex(i_color);\n this.cd.markForCheck();\n }\n\n /**\n Find the border section in player_data for selected block\n @method _findBorder\n @param {object} i_domPlayerData\n @return {Xml} xSnippet\n **/\n _findBorder(i_domPlayerData) {\n return jXML(i_domPlayerData).find('Border');\n }\n\n /**\n Load jXML gradient component once\n @method _bgGradientWidgetInit\n **/\n _bgGradientWidgetInit() {\n var self = this;\n var lazyUpdateBgColor = _.debounce(function (points, styles) {\n if (points.length == 0)\n return;\n self._gradientChanged({points: points, styles: styles})\n // console.log('gradient 1...' + Math.random());\n }, 50);\n\n var gradientColorPickerClosed = function () {\n // console.log('gradient 2');\n };\n\n jQuery('#bgColorGradientSelector', self.el.nativeElement).gradientPicker({\n change: lazyUpdateBgColor,\n closed: gradientColorPickerClosed,\n fillDirection: \"90deg\"\n });\n\n // always close gradient color picker on mouseout\n // jXML('.colorpicker').on('mouseleave', function (e) {\n // jXML(document).trigger('mousedown');\n // console.log('gradient 3');\n // });\n }\n\n /**\n On changes in msdb model updated UI common gradient background properties\n @method _gradientPopulate\n **/\n _gradientPopulate() {\n var self = this;\n var gradient = jXML('#bgColorGradientSelector', self.el.nativeElement).data(\"gradientPicker-sel\");\n // gradient.changeFillDirection(\"top\"); /* change direction future support */\n this._bgGradientWidgetClear();\n var domPlayerData = self.m_blockData.playerDataDom;\n var xSnippet = self._findGradientPoints(domPlayerData);\n if (xSnippet.length > 0) {\n var points = jXML(xSnippet).find('Point');\n $.each(points, function (i, point) {\n var pointColor = Lib.DecimalToHex(jXML(point).attr('color'));\n var pointMidpoint = (parseInt(jXML(point).attr('midpoint')) / 250);\n gradient.addPoint(pointMidpoint, pointColor, true);\n });\n }\n }\n\n _bgGradientWidgetClear() {\n var gradient = jQuery('#bgColorGradientSelector', this.el.nativeElement).data(\"gradientPicker-sel\");\n gradient.removeAllPoints();\n gradient.clear();\n }\n\n _gradientChanged(e) {\n var self = this;\n var points: any = e.points;\n var styles = e.styles;\n if (points.length == 0)\n return;\n var domPlayerData = self.m_blockData.playerDataDom;\n jXML(domPlayerData).find('Background').remove();\n var pointsXML = \"\";\n for (var i = 0; i < points.length; ++i) {\n var pointMidpoint: any = (points[i].position * 250);\n var color = Lib.ColorToDecimal(points[i].color);\n var xPoint = '';\n // log(xPoint);\n // jXML(gradientPoints).append(xPoint);\n pointsXML += xPoint;\n }\n var xPointsSnippet = jXML.parseXML(this.bs.getCommonBackgroundXML());\n jXML(xPointsSnippet).find('GradientPoints').empty().append(pointsXML);\n var newGradientPoints = (new XMLSerializer()).serializeToString(xPointsSnippet);\n jXML(domPlayerData).find('Data').append(newGradientPoints)\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _findGradientPoints(i_domPlayerData) {\n var xSnippet = jXML(i_domPlayerData).find('GradientPoints');\n return xSnippet;\n }\n\n _findGradientPointsScene(i_domPlayerData) {\n var xBackground = jXML(i_domPlayerData).find('Layout').eq(0).siblings().filter('Background');\n var xSnippet = jXML(xBackground).find('GradientPoints').eq(0);\n return xSnippet;\n }\n\n\n _onRemoveBackgroundClicked() {\n this._bgGradientWidgetClear();\n var domPlayerData = this.m_blockData.playerDataDom;\n var gradientPoints = this._findGradientPoints(domPlayerData);\n jXML(gradientPoints).empty();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _findBackground(i_domPlayerData) {\n var xSnippet = jXML(i_domPlayerData).find('Background');\n return xSnippet;\n }\n\n destroy() {\n var gradient = jXML('#bgColorGradientSelector', this.el.nativeElement).data(\"gradientPicker-sel\");\n gradient.destroyed();\n }\n}\n\n" }, { "path": "src/app/blocks/block-prop-container.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, Inject, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {BlockService, IBlockData, ISceneData} from \"./block-service\";\nimport {CampaignTimelineChanelPlayersModel} from \"../../store/imsdb.interfaces_auto\";\nimport {ColorPickerService} from \"ngx-color-picker\";\nimport {Tab} from \"../../comps/tabs/tab\";\nimport {BlockLabels, PLACEMENT_CHANNEL, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\n\n\n@Component({\n selector: 'block-prop-container',\n template: `\n {{me}}\n \n \n \n \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n

    no block prop found, new?

    \n {{m_blockTypeSelected}}\n
    \n
    \n     \n \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n     \n     \n `,\n})\nexport class BlockPropContainer extends Compbaser implements AfterViewInit {\n\n m_blockTypeSelected: string = 'none';\n m_blockLabels = BlockLabels;\n m_blockData: IBlockData;\n m_tabTitle: string = 'none';\n m_showSettingsTab = true;\n\n constructor(@Inject('BLOCK_PLACEMENT') private blockPlacement: string, private yp: YellowPepperService, private bs: BlockService, private cpService: ColorPickerService, private cd: ChangeDetectorRef) {\n super();\n // console.log(blockPlacement);\n if (this.blockPlacement == PLACEMENT_CHANNEL)\n this._listenOnChannels();\n if (this.blockPlacement == PLACEMENT_SCENE)\n this._listenOnScenes();\n }\n\n @ViewChild('settings')\n settings: Tab;\n\n ngAfterViewInit() {\n this.toggleSettingsTab();\n }\n\n private _listenOnChannels() {\n this.cancelOnDestroy(\n //\n this.yp.listenBlockChannelSelectedOrChanged()\n .mergeMap((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModel) => {\n return this.bs.getBlockData(i_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId())\n })\n .subscribe((blockData: IBlockData) => {\n this.m_blockTypeSelected = blockData.blockCode;\n this.m_tabTitle = blockData.blockAcronym;\n this.m_blockData = blockData;\n // for json based scenes show the settings, unless its the actual Json Player which we don't\n if (blockData.playerMimeScene && this.m_blockTypeSelected != '4300') {\n this.m_showSettingsTab = true;\n this.toggleSettingsTab();\n } else {\n this.m_showSettingsTab = false;\n this.toggleSettingsTab();\n }\n }, (e) => console.error(e))\n )\n }\n\n private _listenOnScenes() {\n this.cancelOnDestroy(\n //\n this.yp.listenSceneOrBlockSelectedChanged()\n .mergeMap((i_sceneData: ISceneData) => {\n return this.bs.getBlockDataInScene(i_sceneData)\n })\n .subscribe((blockData: IBlockData) => {\n this.m_blockTypeSelected = blockData.blockCode;\n this.m_tabTitle = blockData.blockAcronym;\n this.m_blockData = blockData;\n this.m_showSettingsTab = false;\n this.toggleSettingsTab();\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n }\n\n // private getTabTitle(i_blockData: IBlockData): string {\n // // this.bs.getCommonBorderXML()if (i_blockData.blockAcronym.indexOf('JSON')) > -1 ? blockData.playerMimeScene : blockData.blockAcronym\n // }\n\n private toggleSettingsTab() {\n if (!this.settings) return;\n this.settings.show = this.m_showSettingsTab;\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/blocks/block-prop-fasterq.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {Subject} from \"rxjs\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Lib} from \"../../Lib\";\n\n@Component({\n selector: 'block-prop-fasterq',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n styles: [`\n .offSet {\n position: relative;\n top: 5px;\n }\n\n button {\n margin: 5px;\n height: 30px;\n }\n\n .colorPicker {\n width: 20px;\n float: left;\n display: inline-block;\n margin: 0 10px 0 0;\n padding: 15px 45px;\n border-radius: 0;\n border: 1px solid gray;\n padding: 10px 20px 10px 20px;\n background: #21ff2e;\n text-decoration: none;\n }\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n customer lines
    \n
      \n
    • \n \n \n
      \n
      \n
      • \n
      • \n
      • \n
      • \n
      • \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropFasterQ extends Compbaser implements AfterViewInit {\n\n formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_borderColorChanged = new Subject();\n m_moveColorPickerOnce = false;\n m_color = '#ffffff';\n\n constructor(private fb: FormBuilder, private el: ElementRef, private bs: BlockService, private cd: ChangeDetectorRef) {\n super();\n this.m_contGroup = fb.group({\n 'lineID1': [''],\n 'lineID2': [''],\n 'lineID3': [''],\n 'lineID4': [''],\n 'lineID5': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n this._listenColorChanged();\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n _listenColorChanged() {\n this.cancelOnDestroy(\n //\n this.m_borderColorChanged\n .debounceTime(500)\n .distinct()\n .skip(1)\n .subscribe((i_color) => {\n this.m_color = String(i_color);\n this.saveToStore();\n }, (e) => console.error(e))\n )\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var domPlayerData = this.m_blockData.playerDataDom\n var xWebKit = jXML(domPlayerData).find('Webkit');\n var xWebKitData = jXML(xWebKit).find('Data');\n this.formInputs['lineID1'].setValue(jXML(xWebKitData).attr('lineID1'));\n this.formInputs['lineID2'].setValue(jXML(xWebKitData).attr('lineID2'));\n this.formInputs['lineID3'].setValue(jXML(xWebKitData).attr('lineID3'));\n this.formInputs['lineID4'].setValue(jXML(xWebKitData).attr('lineID4'));\n this.formInputs['lineID5'].setValue(jXML(xWebKitData).attr('lineID5'));\n this.setNewColor(jXML(xWebKitData).attr('bgColor'));\n // this.m_color = Lib.ColorToHex(Lib.DecimalToHex(jXML(xWebKitData).attr('bgColor')));\n }\n\n @timeout()\n _moveColorPicker() {\n console.log(this.m_color);\n if (this.m_moveColorPickerOnce) return;\n this.m_moveColorPickerOnce = true;\n jXML(\".color-picker\", this.el.nativeElement).css(\"left\", \"+=100\");\n }\n\n @timeout(50)\n private setNewColor(i_color) {\n if (_.isNaN(Lib.ColorToDecimal(i_color)))\n i_color = '#ffffff';\n this.m_color = i_color\n this.cd.markForCheck();\n }\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xWebKit = jXML(domPlayerData).find('Webkit');\n var xWebKitData = jXML(xWebKit).find('Data');\n jXML(xWebKitData).attr('lineID1', this.formInputs['lineID1'].value);\n jXML(xWebKitData).attr('lineID2', this.formInputs['lineID2'].value);\n jXML(xWebKitData).attr('lineID3', this.formInputs['lineID3'].value);\n jXML(xWebKitData).attr('lineID4', this.formInputs['lineID4'].value);\n jXML(xWebKitData).attr('lineID5', this.formInputs['lineID5'].value);\n jXML(xWebKitData).attr('bgColor', this.m_color);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-html.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-html',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n\n {{me}}\n
    \n
    \n
      \n
    • \n url
      \n \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropHtml extends Compbaser implements AfterViewInit {\n\n private formInputs = {};\n m_contGroup: FormGroup;\n private m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private rp: RedPepperService, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'url': ['', [Validators.pattern(urlRegExp)]]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n this.m_contGroup.reset();\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippet = jXML(domPlayerData).find('HTML');\n this.formInputs['url'].setValue(xSnippet.attr('src'));\n }\n\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('HTML');\n xSnippet.attr('src', this.m_contGroup.value.url);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-image.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {urlRegExp} from \"../../Lib\";\n\n@Component({\n selector: 'block-prop-image',\n host: {'(input-blur)': 'saveToStore($event)'},\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n url
      \n \n
      • \n
    • \n maintain aspect ratio\n
      \n \n \n
      \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropImage extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'url': ['', [Validators.pattern(urlRegExp)]],\n 'maintain': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n @Input() external: boolean = false;\n\n /**\n Toggle maintain aspect ratio\n **/\n _toggleAspectRatio(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('AspectRatio');\n jXML(xSnippet).attr('maintain', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n if (this.external) {\n var xSnippet = jXML(domPlayerData).find('LINK');\n this.m_formInputs['url'].setValue(xSnippet.attr('src'));\n } else {\n var xSnippet = jXML(domPlayerData).find('AspectRatio');\n var maintain = StringJS(jXML(xSnippet).attr('maintain')).booleanToNumber();\n this.m_formInputs['maintain'].setValue(maintain);\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n private saveToStore() {\n con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('LINK');\n xSnippet.attr('src', this.m_contGroup.value.url);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/blocks/block-prop-instagram.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-instagram',\n host: {'(input-blur)': 'saveToStore($event)'},\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
      \n
    • \n token\n \n
      • \n
    • \n \n
      • \n
    \n
    \n
    \n \n
    \n
    \n
    \n `\n})\nexport class BlockPropInstagram extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'token': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var jXMLdata = jXML(domPlayerData).find('Json').find('Data');\n this.m_formInputs['token'].setValue(jXMLdata.attr('token'));\n // this.cd.markForCheck();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onCreateToken() {\n var win = window.open('http://instagram.signage.me', '_blank');\n if (win) {\n win.focus();\n } else {\n bootbox.alert('Browser popups are blocked, please enable and try again');\n }\n }\n\n private saveToStore() {\n con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('token', this.m_contGroup.value.token);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-json-item.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {IFontSelector} from \"../../comps/font-selector/font-selector\";\nimport {Lib} from \"../../Lib\";\n\n@Component({\n selector: 'block-prop-json-item',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
    \n Json path notation\n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n \n \n \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n maintain aspect ratio\n
    \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n `\n})\nexport class BlockPropJsonItem extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_sheetList = [];\n m_sheetSeleced: any = {};\n m_fields = [];\n m_dateFields = [];\n m_fontConfig: IFontSelector;\n\n jsonItemFieldContainer;\n jsonItemTextFieldsContainer;\n jsonItemDualNumericSettings;\n jsonItemIconSettings;\n jsonItemDateSettings;\n jsonItemFontSettings;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'jsonItemField': [''],\n 'jsonItemTextFields': [''],\n 'jsonItemDualNumeric1': [''],\n 'jsonItemDualNumeric2': [''],\n 'jsonItemDateFormat': [''],\n 'jsonItemMaintainAspectRatio': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var jXMLdata = jXML(domPlayerData).find('Json').find('Data');\n var mode = jXMLdata.attr('mode');\n\n // JSON item (no mime)\n if (_.isUndefined(this.m_blockData.playerMimeScene)) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n var xSnippetFont = jXML(xSnippet).find('Font');\n var fieldName = jXML(xSnippet).attr('fieldName');\n\n this.jsonItemFieldContainer = true;\n this.jsonItemTextFieldsContainer = false;\n this.jsonItemDualNumericSettings = false;\n this.jsonItemIconSettings = false;\n this.jsonItemDateSettings = false;\n this.jsonItemFontSettings = true;\n this.m_formInputs['jsonItemField'].setValue(fieldName);\n this._populateFonts(xSnippetFont)\n } else {\n // Json mime\n this._populateMimeType();\n }\n }\n\n _toggleAspectRatio(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n jXML(xSnippet).attr('maintainAspectRatio', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onJsonItemTextFieldChanged(i_event) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n jXML(xSnippet).attr('fieldName', i_event.target.value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onJsonItemTextFieldsChanged(event) {\n var name = event.target.value;\n var mime = this.m_blockData.playerMimeScene;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n _.forEach(this.m_config[mime].fields, (k:any) => {\n if (k.name == name) {\n jXML(xSnippet).attr('fieldType', k.type);\n jXML(xSnippet).attr('fieldName', k.name);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this._populateMimeType();\n\n }\n })\n }\n\n _onJsonItemDateFieldsChanged(event) {\n var value = event.target.value;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n jXML(xSnippet).attr('dateFormat', value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this._populateMimeType();\n }\n\n _onDualNumericChanged(){\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n var row = this.m_contGroup.value.jsonItemDualNumeric1;\n var column = this.m_contGroup.value.jsonItemDualNumeric2;\n var fieldName = `$cells.${row}.${column}.value`;\n jXML(xSnippet).attr('fieldName', fieldName);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n \n _onFontChanged(config: IFontSelector) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n var xSnippetFont = jXML(xSnippet).find('Font');\n config.bold == true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');\n config.italic == true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');\n config.underline == true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');\n xSnippetFont.attr('fontColor', Lib.ColorToDecimal(config.color));\n xSnippetFont.attr('fontSize', config.size);\n xSnippetFont.attr('fontFamily', config.font);\n xSnippetFont.attr('textAlign', config.alignment);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n /**\n The component is a subclass of JSON item (i.e.: it has a mimetype) so we need to populate it according\n to its mimetype config options\n **/\n private _populateMimeType() {\n var self = this;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n var xSnippetFont = jXML(xSnippet).find('Font');\n var fieldType = jXML(xSnippet).attr('fieldType');\n var fieldName = jXML(xSnippet).attr('fieldName');\n var maintainAspectRatio = jXML(xSnippet).attr('maintainAspectRatio');\n var dateFormat = jXML(xSnippet).attr('dateFormat');\n\n this.jsonItemFieldContainer = false;\n this.jsonItemTextFieldsContainer = true;\n\n this.m_fields = [{type: '', value: '', label: 'no field selected'}];\n var fields: any = self.m_config[this.m_blockData.playerMimeScene].fields;\n _.each(fields, (k: any) => this.m_fields.push({type: k.type, value: k.name, label: k.label}));\n this.m_formInputs['jsonItemTextFields'].setValue(fieldName)\n\n // populate according to filed type (text/resource)\n switch (fieldType) {\n case 'resource': {\n this.jsonItemFontSettings = false;\n this.jsonItemDateSettings = false;\n this.jsonItemIconSettings = true;\n self._populateAspectRatio(maintainAspectRatio);\n break;\n }\n case 'date': {\n self._populateDateFormat(dateFormat);\n this._populateFonts(xSnippetFont);\n this.jsonItemDateSettings = true;\n break;\n }\n case 'dual_numeric': {\n }\n case 'text': {\n this.jsonItemIconSettings = false;\n this.jsonItemDateSettings = false;\n this.jsonItemFontSettings = true;\n this._populateFonts(xSnippetFont);\n break;\n }\n }\n\n // populate according to mimetype exception or default behavior\n switch (this.m_blockData.playerMimeScene) {\n case 'Json.spreadsheet': {\n this.jsonItemDualNumericSettings = true;\n self._populateDualNumeric();\n break;\n }\n default: {\n this.jsonItemDualNumericSettings = false;\n }\n }\n this.cd.markForCheck();\n this.cd.detectChanges();\n }\n\n private _populateFonts(xSnippetFont) {\n this.m_fontConfig = {\n bold: xSnippetFont.attr('fontWeight') === 'bold' ? true : false,\n italic: xSnippetFont.attr('fontStyle') === 'italic' ? true : false,\n underline: xSnippetFont.attr('textDecoration') === 'underline' ? true : false,\n alignment: xSnippetFont.attr('textAlign'),\n font: xSnippetFont.attr('fontFamily'),\n color: Lib.ColorToHex(Lib.DecimalToHex(xSnippetFont.attr('fontColor'))),\n size: Number(xSnippetFont.attr('fontSize'))\n };\n // this.cd.markForCheck();\n }\n\n /**\n Populate date format for common types of date styles on dropdown selection\n @method _populateDateFormat\n @param {string} i_selectedFormat\n **/\n private _populateDateFormat(i_selectedFormat) {\n var formats = [\n 'D/M/Y',\n 'DD/MM/YY',\n 'DD/MM/YYYY',\n 'DD/MMM/YY',\n 'MM/DD/YY',\n 'MM/DD/YYYY',\n 'MMM/DD/YYYY ',\n 'D/M/Y J:NN:SS',\n 'DD/MM/YY J:NN:SS',\n 'DD/MM/YYYY J:NN:SS',\n 'DD/MMM/YY J:NN:SS',\n 'MM/DD/YY J:NN:SS',\n 'MM/DD/YYYY J:NN:SS',\n 'MMM/DD/YYYY J:NN:SS',\n 'J:NN:SS',\n 'J:NN:SS A',\n 'J:NN:SS A',\n 'J:NN'\n ];\n this.m_dateFields = [{value: 'select format'}];\n for (var i = 0; i < formats.length; i++) {\n this.m_dateFields.push({value: formats[i]});\n }\n this.m_formInputs['jsonItemDateFormat'].setValue(i_selectedFormat)\n }\n\n /**\n Populate aspect ratio switch button\n **/\n private _populateAspectRatio(i_aspectRatio) {\n var value = StringJS(i_aspectRatio).booleanToNumber();\n this.m_formInputs['jsonItemMaintainAspectRatio'].setValue(value)\n }\n\n /**\n Populate the dual numeric steppers that are used in components like the google sheets\n @method _populateDualNumeric\n **/\n private _populateDualNumeric() {\n var row: string = '1';\n var column: string = '1';\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('XmlItem');\n var fieldName = jXML(xSnippet).attr('fieldName');\n var re = /cells.([0-9]+).([0-9]+).value/i;\n var match = fieldName.match(re);\n if (!_.isNull(match)) {\n row = String(match[1]);\n column = String(match[2]);\n }\n this.m_formInputs['jsonItemDualNumeric1'].setValue(row)\n this.m_formInputs['jsonItemDualNumeric2'].setValue(column)\n // var spinners = jXML('.spinner', Elements.JSON_ITEM_DUAL_NUMERIC_SETTINGS);\n // jXML(spinners[0]).spinner('value', row);\n // jXML(spinners[2]).spinner('value', column);\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n m_config = {\n 'Json.instagram.feed': {\n title: 'Instagram',\n tabTitle: 'Posts',\n fields: {\n 1: {\n name: \"title\",\n type: \"text\",\n label: \"title\"\n },\n 2: {\n name: \"urlImage\",\n type: \"resource\",\n label: \"image\"\n },\n 3: {\n name: \"video\",\n type: \"resource\",\n label: \"video\"\n }\n }\n },\n 'Json.twitter': {\n title: 'Twitter',\n tabTitle: 'Tweets',\n fields: {\n 1: {\n name: \"name\",\n type: \"text\",\n label: \"name\"\n },\n 2: {\n name: \"text\",\n type: \"text\",\n label: \"text\"\n },\n 3: {\n name: \"screen_name\",\n type: \"text\",\n label: \"screen name\"\n },\n 4: {\n name: \"created_at\",\n type: \"text\",\n label: \"created at\"\n },\n 5: {\n name: \"profile_background_image_url\",\n type: \"resource\",\n label: \"Background image\"\n },\n 6: {\n name: \"profile_image_url\",\n type: \"resource\",\n label: \"Image\"\n }\n }\n },\n 'Json.digg': {\n title: 'Digg',\n tabTitle: 'Posts',\n fields: {\n 1: {\n name: \"title\",\n type: \"text\",\n label: \"title\"\n },\n 2: {\n name: \"link\",\n type: \"resource\",\n label: \"image\"\n }\n }\n },\n 'Json.spreadsheet': {\n title: 'Spreadsheet',\n tabTitle: 'Cells',\n fields: {\n 1: {\n name: \"$cells.1.1.value\",\n type: \"dual_numeric\",\n label: \"Sheet cell\"\n }\n }\n },\n\n 'Json.calendar': {\n title: 'Calendar',\n tabTitle: 'Date',\n fields: {\n 1: {\n name: \"summary\",\n type: \"text\",\n label: \"summary\"\n },\n 2: {\n name: \"description\",\n type: \"text\",\n label: \"description\"\n },\n 3: {\n name: \"organizer\",\n type: \"text\",\n label: \"organizer\"\n },\n 4: {\n name: \"organizerEmail\",\n type: \"text\",\n label: \"organizer email\"\n },\n 5: {\n name: \"created\",\n type: \"text\",\n label: \"created\"\n },\n 6: {\n name: \"startDateTime_time\",\n type: \"date\",\n label: \"start date time\"\n },\n 7: {\n name: \"endDateTime_time\",\n type: \"date\",\n label: \"end date time\"\n },\n 8: {\n name: \"updated\",\n type: \"text\",\n label: \"updated\"\n }\n }\n },\n 'Json.weather': {\n title: 'World weather',\n tabTitle: 'Conditions',\n fields: {\n 1: {\n name: \"$[0].data.current_condition[0].iconPath\",\n type: \"resource\",\n label: \"current icon\"\n },\n 2: {\n name: \"$[0].data.current_condition[0].temp_@\",\n type: \"text\",\n label: \"current temp\"\n },\n 3: {\n name: \"$[0].data.current_condition[0].humidity\",\n type: \"text\",\n label: \"current humidity\"\n },\n 4: {\n name: \"$[0].data.weather[0].iconPath\",\n type: \"resource\",\n label: \"today icon\"\n },\n 5: {\n name: \"$[0].data.weather[0].mintemp@\",\n type: \"text\",\n label: \"today min temp\"\n },\n 6: {\n name: \"$[0].data.weather[0].maxtemp@\",\n type: \"text\",\n label: \"today max temp\"\n },\n 7: {\n name: \"$[0].data.weather[0].day\",\n type: \"text\",\n label: \"today label\"\n },\n 8: {\n name: \"$[0].data.weather[1].iconPath\",\n type: \"resource\",\n label: \"today+1 icon\"\n },\n 9: {\n name: \"$[0].data.weather[1].mintemp@\",\n type: \"text\",\n label: \"today+1 min temp\"\n },\n 10: {\n name: \"$[0].data.weather[1].maxtemp@\",\n type: \"text\",\n label: \"today+1 max temp\"\n },\n 11: {\n name: \"$[0].data.weather[1].day\",\n type: \"text\",\n label: \"today+1 label\"\n },\n 12: {\n name: \"$[0].data.weather[2].iconPath\",\n type: \"resource\",\n label: \"today+2 icon\"\n },\n 13: {\n name: \"$[0].data.weather[2].mintemp@\",\n type: \"text\",\n label: \"today+2 min temp\"\n },\n 14: {\n name: \"$[0].data.weather[2].maxtemp@\",\n type: \"text\",\n label: \"today+2 max temp\"\n },\n 15: {\n name: \"$[0].data.weather[2].day\",\n type: \"text\",\n label: \"today+2 label\"\n },\n 16: {\n name: \"$[0].data.weather[3].iconPath\",\n type: \"resource\",\n label: \"today+3 icon\"\n },\n 17: {\n name: \"$[0].data.weather[3].mintemp@\",\n type: \"text\",\n label: \"today+3 min temp\"\n },\n 18: {\n name: \"$[0].data.weather[3].maxtemp@\",\n type: \"text\",\n label: \"today+3 max temp\"\n },\n 19: {\n name: \"$[0].data.weather[3].day\",\n type: \"text\",\n label: \"today+3 label\"\n },\n 20: {\n name: \"$[0].data.weather[4].iconPath\",\n type: \"resource\",\n label: \"today+4 icon\"\n },\n 21: {\n name: \"$[0].data.weather[4].mintemp@\",\n type: \"text\",\n label: \"today+4 min temp\"\n },\n 22: {\n name: \"$[0].data.weather[4].maxtemp@\",\n type: \"text\",\n label: \"today+4 max temp\"\n },\n 23: {\n name: \"$[0].data.weather[4].day\",\n type: \"text\",\n label: \"today+4 label\"\n },\n 24: {\n name: \"$[0].data.weather[5].iconPath\",\n type: \"resource\",\n label: \"today+5 icon\"\n },\n 25: {\n name: \"$[0].data.weather[5].mintemp@\",\n type: \"text\",\n label: \"today+5 min temp\"\n },\n 26: {\n name: \"$[0].data.weather[5].maxtemp@\",\n type: \"text\",\n label: \"today+5 max temp\"\n },\n 27: {\n name: \"$[0].data.weather[5].day\",\n type: \"text\",\n label: \"today+5 label\"\n },\n 28: {\n name: \"$[0].data.weather[6].iconPath\",\n type: \"resource\",\n label: \"today+6 icon\"\n },\n 29: {\n name: \"$[0].data.weather[6].mintemp@\",\n type: \"text\",\n label: \"today+6 min temp\"\n },\n 30: {\n name: \"$[0].data.weather[6].maxtemp@\",\n type: \"text\",\n label: \"today+6 max temp\"\n },\n 31: {\n name: \"$[0].data.weather[6].day\",\n type: \"text\",\n label: \"today+6 label\"\n }\n }\n }\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-json-player.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser} from \"ng-mslib\";\nimport {urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {SimpleGridTable} from \"../../comps/simple-grid-module/SimpleGridTable\";\n\n@Component({\n selector: 'block-prop-json-player',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {'(input-blur)': 'saveToStore($event)'},\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n
      \n \n \n
      \n
      • \n
    • \n
      \n \n \n
      \n
      • \n
    • \n load with scene\n
      \n \n \n
      \n
      • \n
    • \n
      \n \n
      • \n
    • \n play video to completion\n
      \n \n \n
      \n
      • \n
    • \n random playback\n
      \n \n \n
      \n
      • \n
    • \n slideshow\n
      \n \n \n
      \n
      • \n\n
    • \n \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropJsonPlayer extends Compbaser implements AfterViewInit {\n\n formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_sceneSelection = [];\n m_sceneSeleced: any = {};\n m_slideShowMode = 0;\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService, private bs: BlockService, private cd: ChangeDetectorRef) {\n super();\n this.m_contGroup = fb.group({\n 'sceneSelection': [],\n 'randomOrder': [],\n 'slideShow': [],\n 'playVideoInFull': [],\n 'itemInterval': [],\n 'itemsPath': [],\n 'itemsUrl': ['', [Validators.pattern(urlRegExp)]],\n 'url': ['', [Validators.pattern(urlRegExp)]]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @ViewChild('simpleGrid')\n simpleGrid: SimpleGridTable;\n\n @Input() standAlone: boolean = false;\n\n\n @Input()\n set setBlockData(i_blockData) {\n /**\n Disabled as in this component we wish to always update UI on block changes\n since we are addinf and removing elements to event grid and need to be updated\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n **/\n this.m_blockData = i_blockData;\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onPlayVideoInFull(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n jXML(xSnippet).attr('playVideoInFull', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onRandomPlay(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n jXML(xSnippet).attr('randomOrder', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onSlideShow(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n this.m_slideShowMode = i_value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n jXML(xSnippet).attr('slideShow', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onSceneSelectionChanged(i_scene_id) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n var xSnippetPlayer = jXML(xSnippet).find('Player');\n jXML(xSnippetPlayer).attr('hDataSrc', i_scene_id.value.id);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n /**\n Populate the LI with all available scenes from msdb\n if the mimetype is empty (used for this class) we show all scenes in dropdown, but if mimetype exists\n (used by subclasses of this class) we filter dropdown list by matching mimetypes\n @method _populateSceneDropdown\n **/\n @Once()\n private _initSceneDropdown() {\n var self = this;\n return this.yp.getSceneNames()\n .subscribe((scenes) => {\n this.m_sceneSelection = [];\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n var xSnippetPlayer = jXML(xSnippet).find('Player');\n var selectedSceneID = jXML(xSnippetPlayer).attr('hDataSrc');\n for (var scene in scenes) {\n var mimeType = scenes[scene].mimeType;\n var label = scenes[scene].label;\n var sceneId = scenes[scene].id;\n if (sceneId == selectedSceneID) {\n this.m_sceneSeleced = scenes[scene];\n }\n // if this component is used as a standalone Json Player, include in drop down all possible scenes\n if (self.m_blockData.playerMimeScene == mimeType || this.standAlone) {\n this.m_sceneSelection.push({\n sceneId, label, mimeType, value: scenes[scene]\n })\n }\n }\n }, (e) => console.error(e))\n }\n\n _render() {\n this._initSceneDropdown();\n // this._initEventTable();\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippet = jXML(domPlayerData).find('Json');\n var playVideoInFull = StringJS(jXML(xSnippet).attr('playVideoInFull')).booleanToNumber();\n this.formInputs['playVideoInFull'].setValue(playVideoInFull);\n var randomOrder = StringJS(jXML(xSnippet).attr('randomOrder')).booleanToNumber();\n this.formInputs['randomOrder'].setValue(randomOrder);\n this.m_slideShowMode = StringJS(jXML(xSnippet).attr('slideShow')).booleanToNumber(true) as number;\n this.formInputs['slideShow'].setValue(this.m_slideShowMode);\n this.formInputs['itemsPath'].setValue(jXML(xSnippet).attr('itemsPath'));\n this.formInputs['itemInterval'].setValue(jXML(xSnippet).attr('itemInterval'));\n this.formInputs['itemsUrl'].setValue(jXML(xSnippet).attr('url'));\n }\n\n private saveToStore() {\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Json');\n xSnippet.attr('itemsPath', this.m_contGroup.value.itemsPath);\n xSnippet.attr('url', this.m_contGroup.value.itemsUrl);\n xSnippet.attr('itemInterval', this.m_contGroup.value.itemInterval);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/blocks/block-prop-label.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {Lib, urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {IFontSelector} from \"../../comps/font-selector/font-selector\";\n\n@Component({\n selector: 'block-prop-label',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n\n {{me}}\n
    \n
    \n
      \n
    • \n \n
      • \n
    \n
    \n
    \n \n `\n})\nexport class BlockPropLabel extends Compbaser implements AfterViewInit {\n\n private formInputs = {};\n m_fontConfig: IFontSelector;\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private rp: RedPepperService, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'text': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippetLabel = jXML(domPlayerData).find('Label');\n var xSnippetText = jXML(xSnippetLabel).find('Text');\n var xSnippetFont = jXML(xSnippetLabel).find('Font');\n this.m_fontConfig = {\n bold: xSnippetFont.attr('fontWeight') == 'bold' ? true : false,\n italic: xSnippetFont.attr('fontStyle') == 'italic' ? true : false,\n underline: xSnippetFont.attr('textDecoration') == 'underline' ? true : false,\n alignment: xSnippetFont.attr('textAlign') as any,\n font: xSnippetFont.attr('fontFamily'),\n color: Lib.ColorToHex(Lib.DecimalToHex(xSnippetFont.attr('fontColor'))),\n size: parseInt(xSnippetFont.attr('fontSize'))\n };\n this.formInputs['text'].setValue(xSnippetText.text());\n }\n\n _onFontChanged(config: IFontSelector) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Label');\n var xSnippetFont = jXML(xSnippet).find('Font');\n config.bold == true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');\n config.italic == true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');\n config.underline == true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');\n xSnippetFont.attr('fontColor', Lib.ColorToDecimal(config.color));\n xSnippetFont.attr('fontSize', config.size);\n xSnippetFont.attr('fontFamily', config.font);\n xSnippetFont.attr('textAlign', config.alignment);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var text = this.formInputs['text'].value;\n text = Lib.CleanProbCharacters(text, 1);\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Label');\n var xSnippetText = jXML(xSnippet).find('Text');\n if (text != xSnippetText.text()){\n jXML(xSnippetText).text(text);\n }\n\n\n var xSnippet = jXML(domPlayerData).find('HTML');\n xSnippet.attr('src', this.formInputs['text'].value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-location.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, ViewChild} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {List} from \"immutable\";\nimport {ISimpleGridEdit} from \"../../comps/simple-grid-module/SimpleGrid\";\nimport {StoreModel} from \"../../store/model/StoreModel\";\nimport {SimpleGridRecord} from \"../../comps/simple-grid-module/SimpleGridRecord\";\nimport {SimpleGridTable} from \"../../comps/simple-grid-module/SimpleGridTable\";\nimport {ISimpleGridDraggedData} from \"../../comps/simple-grid-module/SimpleGridDraggable\";\nimport {Lib} from \"../../Lib\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {BlockLabels, PLACEMENT_LISTS, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {LocationMarkModel} from \"../../models/LocationMarkModel\";\n\n@Component({\n selector: 'block-prop-location',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n\n
    \n
    \n
  • \n \n \n
    • \n
  • \n \n
    \n
    \n \n \n \n name\n seconds\n order\n \n \n \n \n \n \n \n \n \n \n
    \n
    \n
    • \n
    \n
    \n

    \n \n \n \n \n \n

    \n
    \n \n\n
    \n
      \n
    • \n name\n \n
      • \n
    • \n latitude\n \n
      • \n
    • \n longitude\n \n
      • \n
    • \n duration\n \n
      • \n
    • \n radius range {{m_radius}} kilometers
      \n \n
      • \n
    • \n conflict priority
      \n \n
      • \n
    \n
    \n
    \n \n \n

    add content to collection

    \n     \n \n \n \n \n     \n \n \n \n \n \n \n \n \n \n `\n})\nexport class BlockPropLocation extends Compbaser implements AfterViewInit {\n\n m_formInputs = {};\n m_currentIndex = 0;\n m_radius = 0;\n m_totalLocations = 0;\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_pendingBlocAddition: { type: string, content: IAddContents, xmlSnippet: string };\n\n m_showMap = false;\n m_PLACEMENT_LISTS = PLACEMENT_LISTS;\n m_collectionList: List;\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private cd: ChangeDetectorRef, private bs: BlockService, @Inject('BLOCK_PLACEMENT') private blockPlacement: string, private rp: RedPepperService) {\n super();\n this.m_contGroup = fb.group({\n 'mode': [0],\n 'label': [0],\n 'lng': [0],\n 'lat': [0],\n 'duration': [0],\n 'priority': [0],\n 'radius': [0]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMarkerSelected()\n .filter((i_LocationMarkModel: LocationMarkModel) => !_.isEmpty(this.m_pendingBlocAddition))\n .subscribe((i_LocationMarkModel: LocationMarkModel) => {\n var domPlayerData = this.m_blockData.playerDataDom;\n var reLat = new RegExp(\":LAT:\", \"ig\");\n var reLng = new RegExp(\":LNG:\", \"ig\");\n this.m_pendingBlocAddition.xmlSnippet = this.m_pendingBlocAddition.xmlSnippet.replace(reLat, i_LocationMarkModel.lat);\n this.m_pendingBlocAddition.xmlSnippet = this.m_pendingBlocAddition.xmlSnippet.replace(reLng, i_LocationMarkModel.lng);\n var xSnippetLocation = jXML(domPlayerData).find('GPS');\n jXML(xSnippetLocation).append(jXML(this.m_pendingBlocAddition.xmlSnippet));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.m_pendingBlocAddition = null;\n this._jumpToLocation('last')\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMapLoad()\n .pairwise()\n .filter(v => v[0] == true && v[1] == false && this.m_pendingBlocAddition && this.m_pendingBlocAddition.xmlSnippet != '')\n .do(() => {\n console.log(1);\n })\n .combineLatest(this.yp.ngrxStore.select(store => store.appDb.uiState.locationMap.locationMarkerSelected))\n .subscribe((v) => {\n console.log(v);\n }, (e) => console.error(e))\n )\n }\n\n @ViewChild('simpleGrid')\n simpleGrid: SimpleGridTable;\n\n @ViewChild('modalAddContent')\n modalAddContent: ModalComponent;\n\n // @ViewChild('modalMap')\n // modalMap: ModalComponent;\n\n @Input()\n set setBlockData(i_blockData) {\n this.m_blockData = i_blockData;\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n this._jumpToLocation('first');\n }\n\n _onModelMapClosed() {\n this.m_showMap = false;\n }\n\n _onDragComplete(dragData: ISimpleGridDraggedData) {\n // dragData.items.forEach((item: StoreModel, i) => con(i + ' ' + item.getKey('name')) );\n var currentIndex = dragData.currentIndex;\n var newIndex = dragData.newIndex;\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('Fixed').children().get(newIndex);\n var source = jXML(domPlayerData).find('Fixed').children().get(currentIndex);\n newIndex > currentIndex ? jXML(target).after(source) : jXML(target).before(source);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onRemoveCollectionItem() {\n var record: SimpleGridRecord = this.simpleGrid.getSelected();\n if (_.isUndefined(record)) return;\n var rowIndex = this.simpleGrid.getSelected().index;\n var domPlayerData = this.m_blockData.playerDataDom;\n jXML(domPlayerData).find('Fixed').children().eq(rowIndex).remove();\n // self._populateTableCollection(domPlayerData);\n // this._populateTableEvents();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n\n _onClosed() {\n this.modalAddContent.close()\n }\n\n _onAddNewBlock(type: string) {\n this.m_pendingBlocAddition = {type: type, content: null, xmlSnippet: ''}\n this.modalAddContent.open()\n }\n\n /**\n Add a new collection item which can include a Scene or a resource (not a component)\n @method _onAddedContent\n @param {Event} e\n **/\n _onAddedContent(i_addContents: IAddContents) {\n\n var domPlayerData = this.m_blockData.playerDataDom;\n var buff = '';\n var locationBuff;\n var xSnippetLocation;\n\n switch (this.m_pendingBlocAddition.type) {\n case 'Fixed': {\n xSnippetLocation = jXML(domPlayerData).find('Fixed');\n locationBuff = '>';\n break;\n }\n case 'GPS': {\n locationBuff = 'lat=\":LAT:\" lng=\":LNG:\" radios=\"4\" duration=\"5\" priority=\"1\">';\n xSnippetLocation = jXML(domPlayerData).find('GPS');\n break;\n }\n }\n\n if (Number(i_addContents.blockCode) == BlockLabels.BLOCKCODE_SCENE) {\n // add scene to collection, if block resides in scene don't allow cyclic reference to collection scene inside current scene\n if (this.blockPlacement == PLACEMENT_SCENE && this.m_blockData.scene.handle == i_addContents.sceneData.scene_id) {\n return bootbox.alert('You cannot display a scene in a collection that refers to itself, that is just weird');\n }\n\n var sceneName = i_addContents.sceneData.domPlayerDataJson.Player._label;\n var nativeId = i_addContents.sceneData.scene_native_id;\n\n buff = `\n \n `;\n } else {\n\n var resourceName = this.rp.getResourceRecord(i_addContents.resourceId).resource_name;\n buff = `\n \n \n \n \n `\n }\n\n // if default item, just add it. if location item, remember it and only add it once user select\n // a location for it in google the map as we need to wait for the coordinates.\n\n switch (this.m_pendingBlocAddition.type) {\n\n case 'Fixed': {\n jXML(xSnippetLocation).append(jXML(buff));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.m_pendingBlocAddition = null;\n break;\n }\n case 'GPS': {\n this.m_pendingBlocAddition.content = i_addContents;\n this.m_pendingBlocAddition.xmlSnippet = buff;\n this._openMap();\n break;\n }\n }\n\n }\n\n _removeLocation() {\n var domPlayerData = this.m_blockData.playerDataDom;\n jXML(domPlayerData).find('GPS').children().eq(this.m_currentIndex).remove();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this._jumpToLocation('first');\n }\n\n /**\n Populate the total map locations set\n @method _populateTotalMapLocations\n @param {Object} domPlayerData\n **/\n _populateTotalMapLocations() {\n var domPlayerData = this.m_blockData.playerDataDom\n this.m_totalLocations = jXML(domPlayerData).find('GPS').children().length;\n if (this.m_totalLocations == 0) {\n this.m_currentIndex = 0;\n } else {\n // jXML(Elements.LOCATION_SELECTED).show();\n }\n // jXML(Elements.TOTAL_MAP_LOCATIONS).text(total);\n }\n\n _openMap() {\n var uiState: IUiState = {locationMap: {loadLocationMap: true}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n /**\n Select specific location and populate both the UI as well scroll map to coordinates\n **/\n _jumpToLocation(i_item?) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var total = jXML(domPlayerData).find('GPS').children().length;\n var item;\n\n if (total == 0) {\n this._populateTotalMapLocations();\n var uiState: IUiState = {locationMap: {locationMarkerSelected: null}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n return;\n }\n if (this.m_currentIndex > total - 1)\n i_item = 'first';\n\n switch (i_item) {\n case 'first': {\n this.m_currentIndex = 0;\n item = jXML(domPlayerData).find('GPS').children().first();\n break;\n }\n case 'last': {\n this.m_currentIndex = total - 1;\n item = jXML(domPlayerData).find('GPS').children().last();\n break;\n }\n case 'next': {\n if (this.m_currentIndex == (total - 1)) {\n item = jXML(domPlayerData).find('GPS').children().last();\n } else {\n this.m_currentIndex++;\n item = jXML(domPlayerData).find('GPS').children().get(this.m_currentIndex);\n }\n break;\n }\n case 'prev': {\n if (this.m_currentIndex == 0) {\n item = jXML(domPlayerData).find('GPS').children().first();\n } else {\n this.m_currentIndex--;\n item = jXML(domPlayerData).find('GPS').children().get(this.m_currentIndex);\n }\n break;\n }\n default: {\n item = jXML(domPlayerData).find('GPS').children().get(this.m_currentIndex);\n }\n }\n\n this.m_radius = parseFloat(jXML(item).attr('radios'));\n var lat = parseFloat(jXML(item).attr('lat'));\n var lng = parseFloat(jXML(item).attr('lng'));\n var duration = parseFloat(jXML(item).attr('duration'));\n\n var marker: LocationMarkModel = new LocationMarkModel({\n id: Math.random(),\n lat: lat,\n lng: lng,\n radius: this.m_radius,\n new: false,\n label: '',\n draggable: true\n })\n\n this.m_formInputs['label'].setValue(jXML(item).attr('page'));\n this.m_formInputs['priority'].setValue(jXML(item).attr('priority'));\n this.m_formInputs['lat'].setValue(lat);\n this.m_formInputs['lng'].setValue(lng);\n this.m_formInputs['duration'].setValue(duration);\n this.m_formInputs['radius'].setValue(this.m_radius);\n\n var uiState: IUiState = {locationMap: {locationMarkerSelected: marker}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n\n // this.m_addBlockLocationView.panToPoint(jXML(item).attr('lat'), jXML(item).attr('lng'));\n }\n\n _onDurationEdited(event: ISimpleGridEdit, index) {\n var value = event.value;\n if (!Lib.IsNumber(value)) return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Fixed').children().get(index);\n jXML(item).attr('duration', value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onPageNameEdited(event: ISimpleGridEdit, index) {\n var value = event.value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Fixed').children().get(index);\n jXML(item).attr('page', value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n\n _populateTableCollection() {\n this.m_collectionList = List([]);\n var domPlayerData = this.m_blockData.playerDataDom as any\n var rowIndex = 0;\n\n jXML(domPlayerData).find('Fixed').children().each((k, page) => {\n var resource_hResource, scene_hDataSrc;\n var type = jXML(page).attr('type');\n if (type == 'resource') {\n resource_hResource = jXML(page).find('Resource').attr('hResource');\n } else {\n scene_hDataSrc = jXML(page).find('Player').attr('hDataSrc');\n }\n //con('populating ' + resource_hResource);\n\n var storeModel = new StoreModel({\n rowIndex: rowIndex,\n checkbox: true,\n name: jXML(page).attr('page'),\n duration: jXML(page).attr('duration'),\n type: type,\n resource_hResource: resource_hResource,\n scene_hDataSrc: scene_hDataSrc\n });\n this.m_collectionList = this.m_collectionList.push(storeModel);\n rowIndex++;\n });\n this.m_collectionList = this._sortCollection(this.m_collectionList);\n }\n\n // /**\n // Load event list to block props UI\n // @method _populateTableEvents\n // **/\n // _populateTableEvents() {\n // var data: Array = [], rowIndex = 0;\n // var domPlayerData = this.m_blockData.playerDataDom;\n // // self.m_collectionEventTable.bootstrapTable('removeAll');\n // jXML(domPlayerData).find('EventCommands').children().each(function (k, eventCommand) {\n // var pageName = '';\n // if (jXML(eventCommand).attr('command') == 'selectPage')\n // pageName = jXML(eventCommand).find('Page').attr('name');\n // var storeModel = new JsonEventResourceModel({\n // rowIndex: rowIndex,\n // checkbox: true,\n // event: jXML(eventCommand).attr('from'),\n // pageName: pageName,\n // action: jXML(eventCommand).attr('command')\n // }\n // )\n // data.push(storeModel)\n // rowIndex++;\n // });\n // this.m_jsonEventResources = data;\n // }\n\n _sortCollection(i_collection: List): List {\n var sorted = i_collection.sort((a, b) => {\n if (a.getKey('rowIndex') > b.getKey('rowIndex'))\n return 1;\n if (a.getKey('rowIndex') < b.getKey('rowIndex'))\n return -1;\n return 0;\n })\n return sorted as List;\n }\n\n _render() {\n this.m_contGroup.reset();\n this._populateTableCollection();\n this._populateTotalMapLocations();\n this._jumpToLocation();\n this.cd.markForCheck();\n }\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n\n var domPlayerData = this.m_blockData.playerDataDom;\n var total = jXML(domPlayerData).find('GPS').children().length;\n if (total == 0)\n return;\n var item = jXML(domPlayerData).find('GPS').children().get(this.m_currentIndex);\n jXML(item).attr('radios', this.m_contGroup.value.radius);\n jXML(item).attr('page', this.m_contGroup.value.label);\n jXML(item).attr('lat', this.m_contGroup.value.lat);\n jXML(item).attr('lng', this.m_contGroup.value.lng);\n jXML(item).attr('duration', this.m_contGroup.value.duration);\n jXML(item).attr('priority', this.m_contGroup.value.priority);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n\n // var xSnippet = jXML(domPlayerData).find('HTML');\n // xSnippet.attr('src', this.m_contGroup.value.url);\n // this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n\n" }, { "path": "src/app/blocks/block-prop-mrss.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-mrss',\n host: {'(input-blur)': 'saveToStore($event)'},\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n maintain aspect ratio\n
      \n \n \n
      \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropMrss extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_showCustomUrl = false;\n m_mrssLinksData = [];\n m_mrssLinks = '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'url': ['', [Validators.pattern(urlRegExp)]],\n 'rssSelection': [],\n 'maintain': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n var links = jXML(jXML.parseXML(this.m_mrssLinks)).find('Rss');\n _.forEach(links, (k, v) => {\n this.m_mrssLinksData.push({\n url: jXML(k).attr('url'),\n label: jXML(k).attr('label')\n })\n });\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n @Input() external: boolean = false;\n\n /**\n Toggle maintain aspect ratio\n **/\n _toggleAspectRatio(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Rss');\n jXML(xSnippet).attr('maintainAspectRatio', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _isUrlCustom(i_url): boolean {\n var feed = this.m_mrssLinksData.find(o => o.url == i_url);\n if (feed && feed.label == 'Custom') return true;\n if (feed) return false;\n return true;\n }\n\n _onRssSelected(event) {\n this.m_showCustomUrl = this._isUrlCustom(event.target.value);\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var xSnippet = jXML(domPlayerData).find('Rss');\n var url = xSnippet.attr('url');\n var maintain = StringJS(jXML(xSnippet).attr('maintainAspectRatio')).booleanToNumber();\n this.m_formInputs['maintain'].setValue(maintain);\n\n if (this._isUrlCustom(url)) {\n this.m_showCustomUrl = true;\n this.m_formInputs['rssSelection'].setValue('');\n this.m_formInputs['url'].setValue(url);\n } else {\n this.m_showCustomUrl = false;\n this.m_formInputs['rssSelection'].setValue(url);\n }\n this.cd.markForCheck();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n private saveToStore() {\n // con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Rss');\n if (this.m_contGroup.value.rssSelection == ''){\n jXML(xSnippet).attr('url', this.m_contGroup.value.url);\n } else {\n jXML(xSnippet).attr('url', this.m_contGroup.value.rssSelection);\n }\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/blocks/block-prop-position.ts", "content": "import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport * as _ from \"lodash\";\nimport {BlockService, IBlockData, ISceneData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {BlockLabels} from \"../../interfaces/Consts\";\n\n@Component({\n selector: 'block-prop-position',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n\n \n\n li {\n padding-top: 3px;\n padding-bottom: 3px;\n }\n\n form {\n padding: 20px;\n }\n\n .inliner {\n display: inline-block;\n width: 60px;\n }\n\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n\n i {\n width: 20px;\n }\n `],\n template: `\n
    \n
    \n
    \n
    \n
    \n
    \n
      \n
    • \n top\n \n
      • \n
    • \n left\n \n
      • \n
    • \n width\n \n
      • \n
    • \n height\n \n
      • \n
    • \n rotation\n \n
      • \n
    • \n \n
      • \n
      \n
    • \n
      \n locked\n
      \n \n \n
      \n
      • \n
    \n
    \n
    \n
    \n
    \n\n \n
    \n
    \n `\n})\nexport class BlockPropPosition extends Compbaser {\n\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_canvasScale = -1;\n m_blockIsScene = false;\n\n constructor(private fb: FormBuilder, private rp: RedPepperService, private yp: YellowPepperService, private bs: BlockService, private cd: ChangeDetectorRef) {\n super();\n\n this.m_contGroup = fb.group({\n 'pixel_y': [0],\n 'pixel_x': [0],\n 'pixel_width': [0],\n 'pixel_height': [0],\n 'rotation': [0],\n 'locked': [],\n 'x1_check': [{value: '', disabled: true}],\n 'x2_check': [{value: '', disabled: true}],\n 'x3_check': [{value: '', disabled: true}],\n 'y1_check': [{value: '', disabled: true}],\n 'y2_check': [{value: '', disabled: true}],\n 'y3_check': [{value: '', disabled: true}],\n 'x1_text': [{value: '', disabled: true}],\n 'x2_text': [{value: '', disabled: true}],\n 'x3_text': [{value: '', disabled: true}],\n 'y1_text': [{value: '', disabled: true}],\n 'y2_text': [{value: '', disabled: true}],\n 'y3_text': [{value: '', disabled: true}]\n });\n\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n\n // this.m_formInputs['x1_check'].disable();\n\n this.cancelOnDestroy(\n //\n this.yp.listenSceneOrBlockSelectedChanged()\n .combineLatest(this.yp.listenFabricSceneScaled(), (i_sceneData: ISceneData, i_scale: number) => {\n this.m_canvasScale = i_scale;\n return i_sceneData\n })\n .mergeMap((i_sceneData: ISceneData) => {\n return this.bs.getBlockDataInScene(i_sceneData)\n })\n .subscribe((blockData: IBlockData) => {\n this.m_blockIsScene = parseInt(blockData.blockCode) == BlockLabels.BLOCKCODE_SCENE ? true : false;\n this.m_blockData = blockData;\n this.m_formInputs['locked'].setValue(StringJS(blockData.playerDataJson.Player._locked).booleanToNumber());\n this.m_formInputs['rotation'].setValue(blockData.playerDataJson.Player.Data.Layout._rotation);\n this.m_formInputs['pixel_height'].setValue(blockData.playerDataJson.Player.Data.Layout._height);\n this.m_formInputs['pixel_width'].setValue(blockData.playerDataJson.Player.Data.Layout._width);\n this.m_formInputs['pixel_x'].setValue(blockData.playerDataJson.Player.Data.Layout._x);\n this.m_formInputs['pixel_y'].setValue(blockData.playerDataJson.Player.Data.Layout._y);\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n }\n\n ngAfterViewInit() {\n // this.cancelOnDestroy(\n // this.m_contGroup.valueChanges\n // .map(v => {\n // for (var z in v)\n // v[z] = parseInt(v[z])\n // return v;\n // })\n // .filter(v => !_.some(v, (o) => _.isNaN(o)))\n // .startWith({})\n // .pairwise()\n // .filter(v => !_.isEqual(v[0], v[1]))\n // .debounceTime(1000)\n // .subscribe((v) => {\n // this.saveToStoreLayout();\n // }, (e) => console.error(e)) //cancelOnDestroy please\n // )\n }\n\n saveToStoreLayout() {\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var x = this.m_contGroup.value.pixel_x;\n var y = this.m_contGroup.value.pixel_y;\n var w = this.m_contGroup.value.pixel_width;\n var h = this.m_contGroup.value.pixel_height;\n var r = this.m_contGroup.value.rotation;\n var blockMinWidth = 50;\n var blockMinHeight = 50;\n if (h < blockMinHeight)\n h = blockMinHeight;\n if (w < blockMinWidth)\n w = blockMinWidth;\n\n if (this.m_blockIsScene) {\n $(domPlayerData).find('Layout').eq(0).attr('width', w);\n $(domPlayerData).find('Layout').eq(0).attr('height', h);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.bs.notifyReloadScene(this.m_blockData.scene.handle);\n\n } else {\n\n var layout = $(domPlayerData).find('Layout');\n layout.attr('rotation', parseInt(r));\n layout.attr('x', parseInt(x));\n layout.attr('y', parseInt(y));\n layout.attr('width', parseInt(w));\n layout.attr('height', parseInt(h));\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.bs.notifySceneBlockChanged(this.m_blockData);\n }\n }\n\n @timeout(250)\n private saveToStoreLock(v) {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var r = v == true ? 1 : 0;\n jXML(domPlayerData).find('Player').attr('locked', r);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n this.bs.notifySceneBlockChanged(this.m_blockData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-qr.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-qr',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n QR code
      \n \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropQR extends Compbaser implements AfterViewInit {\n\n private formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private bs: BlockService) {\n super();\n this.m_contGroup = fb.group({\n 'text': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippet = jXML(domPlayerData).find('Text');\n this.formInputs['text'].setValue(xSnippet.text());\n }\n\n private saveToStore() {\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Text');\n jXML(xSnippet).text(this.m_contGroup.value.text);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-rss.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {Lib, urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {IFontSelector} from \"../../comps/font-selector/font-selector\";\n\n@Component({\n selector: 'block-prop-rss',\n host: {'(input-blur)': 'saveToStore($event)'},\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n \n
      • \n
    • \n \n
      • \n
    • \n
      \n \n
      • \n
    • \n \n
      \n \n Horizontal\n
      \n \n Vertical\n
      • \n
    • \n \n
      \n \n slow\n
      \n \n medium\n
      \n \n fast\n
      • \n \n
    \n
    \n \n
    \n `\n})\nexport class BlockPropRss extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_fontConfig: IFontSelector;\n m_blockData: IBlockData;\n m_showCustomUrl = false;\n m_mrssLinksData = [];\n m_mrssLinks = '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'url': ['', [Validators.pattern(urlRegExp)]],\n 'minRefreshTime': [1],\n 'vertical': [0],\n 'speed': [50],\n 'rssSelection': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n var links = jXML(jXML.parseXML(this.m_mrssLinks)).find('Rss');\n _.forEach(links, (k, v) => {\n this.m_mrssLinksData.push({\n url: jXML(k).attr('url'),\n label: jXML(k).attr('label')\n })\n });\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n @Input() external: boolean = false;\n\n _isUrlCustom(i_url): boolean {\n var feed = this.m_mrssLinksData.find(o => o.url == i_url);\n if (feed && feed.label == 'Custom') return true;\n if (feed) return false;\n return true;\n }\n\n _onRssSelected(event) {\n this.m_showCustomUrl = this._isUrlCustom(event.target.value);\n }\n\n _onFontChanged(config: IFontSelector) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Rss');\n var xSnippetFont = jXML(xSnippet).find('Font').eq(0);\n config.bold == true ? xSnippetFont.attr('fontWeight', 'bold') : xSnippetFont.attr('fontWeight', 'normal');\n config.italic == true ? xSnippetFont.attr('fontStyle', 'italic') : xSnippetFont.attr('fontStyle', 'normal');\n config.underline == true ? xSnippetFont.attr('textDecoration', 'underline') : xSnippetFont.attr('textDecoration', 'none');\n xSnippetFont.attr('fontColor', Lib.ColorToDecimal(config.color));\n xSnippetFont.attr('fontSize', config.size);\n xSnippetFont.attr('fontFamily', config.font);\n xSnippetFont.attr('textAlign', config.alignment);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var xSnippet = jXML(domPlayerData).find('Rss');\n var xSnippetFont = jXML(xSnippet).find('Font').eq(0);\n var url = xSnippet.attr('url');\n var vertical = jXML(xSnippet).attr('vertical');\n var minRefreshTime = jXML(xSnippet).attr('minRefreshTime')\n var speed = jXML(xSnippet).attr('speed')\n\n if (this._isUrlCustom(url)) {\n this.m_showCustomUrl = true;\n this.m_formInputs['rssSelection'].setValue('');\n this.m_formInputs['url'].setValue(url);\n } else {\n this.m_showCustomUrl = false;\n this.m_formInputs['rssSelection'].setValue(url);\n }\n this.m_formInputs['minRefreshTime'].setValue(minRefreshTime);\n this.m_formInputs['speed'].setValue(speed);\n this.m_formInputs['vertical'].setValue(vertical);\n\n this.m_fontConfig = {\n size: Number(xSnippetFont.attr('fontSize')),\n alignment: xSnippetFont.attr('textAlign'),\n bold: xSnippetFont.attr('fontWeight') == 'bold' ? true : false,\n italic: xSnippetFont.attr('fontStyle') == 'italic' ? true : false,\n font: xSnippetFont.attr('fontFamily'),\n underline: xSnippetFont.attr('textDecoration') == 'underline' ? true : false,\n color: Lib.ColorToHex(Lib.DecimalToHex(xSnippetFont.attr('fontColor'))),\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n private saveToStore() {\n // con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Rss');\n if (this.m_contGroup.value.rssSelection == ''){\n jXML(xSnippet).attr('url', this.m_contGroup.value.url);\n } else {\n jXML(xSnippet).attr('url', this.m_contGroup.value.rssSelection);\n }\n jXML(xSnippet).attr('minRefreshTime', this.m_contGroup.value.minRefreshTime);\n jXML(xSnippet).attr('speed', this.m_contGroup.value.speed);\n jXML(xSnippet).attr('vertical', this.m_contGroup.value.vertical);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/blocks/block-prop-scene.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {Lib, urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-scene',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n\n {{me}}\n
    \n
    \n
      \n
    • \n scene name
      \n \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropScene extends Compbaser implements AfterViewInit {\n\n private formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(@Inject('BLOCK_PLACEMENT') private blockPlacement, private fb: FormBuilder, private cd: ChangeDetectorRef, private rp: RedPepperService, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'name': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n this.m_blockData = i_blockData;\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData);\n var name = jXML(domPlayerData).find('Player').eq(0).attr('label');\n this.formInputs['name'].setValue(name);\n }\n\n private saveToStore() {\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData);\n var name = Lib.CleanProbCharacters(this.m_contGroup.value.name, 1);\n jXML(domPlayerData).find('Player').eq(0).attr('label', name);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-sheets.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport * as moment from 'moment'\n\n@Component({\n selector: 'block-prop-sheets',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
      \n
    • \n token
      \n \n
      • \n
    • \n \n
      • \n
    • \n Load with sheet\n
      \n \n \n\n
      \n
      • \n
    \n
    \n
    \n \n
    \n
    \n
    \n `\n})\n\nexport class BlockPropSheets extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_sheetList = [];\n m_sheetSeleced: any = {};\n m_mode = false;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'token': [''],\n 'sheetSelection': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n _onSheetSelected(event) {\n var calId = event.target.value;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('id', calId);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var jXMLdata = jXML(domPlayerData).find('Json').find('Data');\n var mode = jXMLdata.attr('mode');\n this.m_formInputs['token'].setValue(jXMLdata.attr('token'));\n this._getGoogleSheets();\n }\n\n _getGoogleSheets() {\n var self = this;\n try {\n jXML.ajax({\n url: `https://secure.digitalsignage.com/GoogleSheetsList/${self.m_contGroup.value.token}`,\n dataType: \"json\",\n type: \"post\",\n complete: function (response, status) {\n self.m_sheetSeleced = {};\n self.m_sheetList = [];\n if (_.isUndefined(response.responseText) || response.responseText.length == 0)\n return;\n if (response.responseText.indexOf('Cannot')>-1)\n return;\n var jData = JSON.parse(response.responseText);\n _.forEach(jData, function (k: any) {\n self.m_sheetList.push({\n id: k.id,\n label: k.title,\n mimeType: k.mimeType\n })\n });\n var id = self._getFileId();\n if (id && id.length > 10)\n self.m_sheetSeleced = self.m_sheetList.find(item => item.id == id);\n self.m_formInputs['sheetSelection'].setValue(self.m_sheetSeleced.id);\n self.cd.markForCheck()\n },\n error: function (jqXHR, exception) {\n console.log('ajax req:' + jqXHR, exception);\n }\n });\n } catch (e) {\n console.error('error on ajax' + e);\n }\n }\n\n private _getFileId(): string {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n return jXML(item).attr('id');\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onCreateToken() {\n var win = window.open('http://google.signage.me', '_blank');\n if (win) {\n win.focus();\n } else {\n bootbox.alert('Browser popups are blocked, please enable and try again');\n }\n }\n\n private saveToStore() {\n // Lib.Con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('token', this.m_contGroup.value.token);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-twitter.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-twitter',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
      \n
    • \n screen name
      \n \n
      • \n
    • \n token
      \n \n
      • \n
    • \n \n
      • \n
    \n
    \n
    \n \n
    \n
    \n
    \n `\n})\nexport class BlockPropTwitter extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'screenName': [''],\n 'token': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var jXMLdata = jXML(domPlayerData).find('Json').find('Data');\n this.m_formInputs['token'].setValue(jXMLdata.attr('token'));\n this.m_formInputs['screenName'].setValue(jXMLdata.attr('screenName'));\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onCreateToken() {\n var win = window.open('http://twitter.signage.me', '_blank');\n if (win) {\n win.focus();\n } else {\n bootbox.alert('Browser popups are blocked, please enable and try again');\n }\n }\n\n private saveToStore() {\n con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('screenName', this.m_contGroup.value.screenName);\n jXML(item).attr('token', this.m_contGroup.value.token);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-video.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {urlRegExp} from \"../../Lib\";\n\n@Component({\n selector: 'block-prop-video',\n host: {'(input-blur)': 'saveToStore($event)'},\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n url
      \n \n
      • \n
    • \n maintain aspect ratio\n
      \n \n \n
      \n
      • \n
    \n
    \n
    \n `\n})\nexport class BlockPropVideo extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'url': ['', [Validators.pattern(urlRegExp)]],\n 'maintain': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() external: boolean = false;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n /**\n Toggle maintain aspect ratio\n **/\n _toggleAspectRatio(i_value) {\n i_value = StringJS(i_value).booleanToNumber()\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('AspectRatio');\n jXML(xSnippet).attr('maintain', i_value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n if (this.external) {\n var xSnippet = jXML(domPlayerData).find('LINK');\n this.m_formInputs['url'].setValue(xSnippet.attr('src'));\n } else {\n var xSnippet = jXML(domPlayerData).find('AspectRatio');\n var maintain = StringJS(jXML(xSnippet).attr('maintain')).booleanToNumber();\n this.m_formInputs['maintain'].setValue(maintain);\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n private saveToStore() {\n con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('LINK');\n xSnippet.attr('src', this.m_contGroup.value.url);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop-weather.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {simpleRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-weather',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
      \n
    • \n \n
      \n \n Fahrenheit\n
      \n \n Celsius\n
      • \n
    • \n \n
      \n \n Black\n
      \n \n White\n
      \n \n Color\n
      • \n
    • \n address / zip code\n \n
      • \n
    \n
    \n
    \n \n
    \n
    \n
    \n `\n})\nexport class BlockPropWeather extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef, private bs: BlockService, private ngmslibService: NgmslibService) {\n super();\n this.m_contGroup = fb.group({\n 'style': \"\",\n 'unit': \"\",\n 'address': ['', [Validators.pattern(simpleRegExp)]]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n var jXMLdata = jXML(domPlayerData).find('Json').find('Data');\n this.m_formInputs['unit'].setValue(jXMLdata.attr('unit'));\n this.m_formInputs['style'].setValue(jXMLdata.attr('style'));\n this.m_formInputs['address'].setValue(jXMLdata.attr('address'));\n //this.cd.markForCheck();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom;\n var item = jXML(domPlayerData).find('Json').find('Data');\n jXML(item).attr('unit', this.m_contGroup.value.unit);\n jXML(item).attr('style', this.m_contGroup.value.style);\n jXML(item).attr('address', this.m_contGroup.value.address);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n\n\n" }, { "path": "src/app/blocks/block-prop-youtube.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {urlRegExp} from \"../../Lib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-youtube',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
      \n
    • \n volume\n \n
      • \n
    • \n video quality\n \n
      • \n
    • \n region\n \n
      • \n
    • \n \n most viewed\n
      \n \n custom list\n
      • \n
    • \n video ids
      \n \n
      • \n\n
    \n
    \n
    \n `\n})\nexport class BlockPropYouTube extends Compbaser implements AfterViewInit {\n\n formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n m_regions = ['US', 'AR', 'AU', 'AT', 'BE', 'BR', 'CA', 'CL', 'CO', 'CZ', 'EG', 'FR', 'DE', 'GB', 'HK', 'HU', 'IN', 'IE', 'IL', 'IT', 'JP', 'JO', 'MY', 'MX', 'MA', 'NL', 'NZ', 'PE', 'PH', 'PL', 'RU', 'SA', 'SG', 'ZA', 'KR', 'ES', 'SE', 'CH', 'TW', 'AE'];\n\n constructor(private fb: FormBuilder, private bs: BlockService, private cd: ChangeDetectorRef) {\n super();\n this.m_contGroup = fb.group({\n 'volume': [100],\n 'listType': [0],\n 'quality': [5],\n 'region': ['US'],\n 'customList': [''],\n 'text': []\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _render() {\n var domPlayerData = this.m_blockData.playerDataDom\n var xSnippetYouTube = jXML(domPlayerData).find('YouTube');\n var xSnippetYouTubeManualList = jXML(domPlayerData).find('VideoIdList');\n var videoIDs = jXML(xSnippetYouTubeManualList).text();\n var listType = jXML(xSnippetYouTube).attr('listType'); //manually most_viewed\n var region = jXML(xSnippetYouTube).attr('listRegion');\n var volume = parseFloat(xSnippetYouTube.attr('volume'));\n var quality = jXML(xSnippetYouTube).attr('quality');\n this.formInputs['volume'].setValue(volume);\n this.formInputs['listType'].setValue(listType);\n this.formInputs['quality'].setValue(quality);\n this.formInputs['region'].setValue(region);\n this.formInputs['customList'].setValue(videoIDs);\n this.cd.markForCheck();\n }\n\n private saveToStore() {\n if (this.m_contGroup.status != 'VALID')\n return;\n var domPlayerData = this.m_blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('YouTube');\n jXML(xSnippet).attr('volume', this.m_contGroup.value.volume);\n jXML(xSnippet).attr('quality', this.m_contGroup.value.quality);\n jXML(xSnippet).attr('listRegion', this.m_contGroup.value.region);\n jXML(xSnippet).attr('listType', this.m_contGroup.value.listType);\n jXML(xSnippet).find('VideoIdList').remove();\n if (this.m_contGroup.value.listType == 'manually') {\n jXML(xSnippet).append(jXML(`${this.m_contGroup.value.customList}`));\n } else {\n jXML(xSnippet).find('VideoIdList').remove();\n }\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-prop.digg.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'block-prop-digg',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
    \n
    \n
    Digg, it's what's new on the web...
    \n \n
    \n
    \n
    \n
    \n \n
    \n `\n})\nexport class BlockPropDigg extends Compbaser implements AfterViewInit {\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blockData: IBlockData;\n\n constructor(private fb: FormBuilder) {\n super();\n this.m_contGroup = fb.group({\n 'token': ['']\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.m_formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n }\n\n @Input() jsonMode: boolean;\n\n @Input()\n set setBlockData(i_blockData) {\n if (this.m_blockData && this.m_blockData.blockID != i_blockData.blockID) {\n this.m_blockData = i_blockData;\n this._render();\n } else {\n this.m_blockData = i_blockData;\n }\n }\n\n private _render() {\n var domPlayerData: XMLDocument = this.m_blockData.playerDataDom\n jXML(domPlayerData).find('Json').find('Data');\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/blocks/block-service.ts", "content": "/**\n * Block service is responsible only for procedures related to channel and scene blocks\n */\n\nimport {Inject, Injectable} from \"@angular/core\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport * as X2JS from \"x2js\";\nimport * as _ from \"lodash\";\nimport {Observable} from \"rxjs\";\nimport {CampaignTimelineChanelPlayersModelExt, PlayerDataModelExt} from \"../../store/model/msdb-models-extended\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {BLOCK_SERVICE, BlockLabels, PLACEMENT_CHANNEL, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {CommBroker} from \"../../services/CommBroker\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\n\n//// import X2JS from \"x2js\";\n\ninterface IDomPlayerDataJson {\n Player: {\n Data: {\n Appearance: {\n _alpha: string;\n _blendMode: string;\n }\n Background: {\n GradientPoints: {\n Point: {\n _color: string;\n _opacity: string;\n _midpoint: string;\n }\n }\n _style: string;\n _gradientType: string;\n _angle: string;\n _offsetX: string;\n _offsetY: string;\n };\n Border: {\n _borderThickness: string;\n _borderColor: string;\n _cornerRadius: string;\n };\n Layout: {\n _rotation: string;\n _x: string;\n _y: string;\n _width: string;\n _height: string;\n };\n Resource: {\n AspectRatio: {\n _maintain: string;\n };\n Image: string;\n _resource: string;\n _hResource: string;\n }\n };\n _player: string;\n _label: string;\n _interactive: string;\n _locked: string;\n _id: string;\n }\n}\n\nexport interface ISceneData {\n scene_id: number;\n scene_id_pseudo_id: string;\n scene_native_id: number;\n playerDataModel: PlayerDataModelExt;\n domPlayerData: XMLDocument;\n domPlayerDataJson: IDomPlayerDataJson;\n domPlayerDataXml: string;\n block_pseudo_id: any;\n mimeType?;\n}\n\nexport interface IBlockData {\n blockID: number;\n blockType: string;\n blockCode: string;\n blockName: string;\n blockDescription: string;\n blockIcon: string;\n blockFontAwesome: string;\n blockAcronym: string;\n blockMinWidth: number;\n blockMinHeight: number;\n playerDataJson: any;\n playerDataDom: XMLDocument,\n playerMimeScene: string;\n playerDataJsonHandle: number;\n campaignTimelineChanelPlayersModelExt: CampaignTimelineChanelPlayersModelExt,\n duration: number;\n offset: number;\n scene?: {\n name: string,\n handle: any,\n playerDataJson: IDomPlayerDataJson;\n playerDataDom: XMLDocument\n },\n resource?: {\n name: string,\n handle: string,\n type: string,\n }\n}\n\n@Injectable()\nexport class BlockService {\n parser;\n\n private m_zIndex = -1;\n private m_minSize = {w: 50, h: 50};\n private m_components = {};\n private m_fontAwesome = {};\n private m_blockCodes = {};\n private m_commBroker;\n\n constructor(private commBroker: CommBroker, @Inject('BLOCK_PLACEMENT') private blockPlacement: string, private yp: YellowPepperService, private rp: RedPepperService) {\n this.parser = new X2JS({\n escapeMode: true,\n attributePrefix: \"_\",\n arrayAccessForm: \"none\",\n emptyNodeForm: \"text\",\n enableToStringFunc: true,\n arrayAccessFormPaths: [],\n skipEmptyTextNodesForObj: true\n });\n\n\n var self = this;\n this.m_blockCodes = _.invert(BlockLabels);\n this.m_fontAwesome = {\n 'scene': {image: 'fa-pencil-square-o'},\n 'qr': {image: 'fa-qrcode'},\n 'youtube': {image: 'fa-youtube'},\n 'collection': {image: 'fa-stack-exchange'},\n 'location': {image: 'fa-map-marker'},\n 'fasterq': {image: 'fa-male'},\n 'twitter': {image: 'fa-twitter'},\n 'twitteritem': {image: 'fa-twitter'},\n 'instagram': {image: 'fa-instagram'},\n 'json': {image: 'fa-cubes'},\n 'jsonitem': {image: 'fa-cubes'},\n 'worldweather': {image: 'fa-sun-o'},\n 'googlesheets': {image: 'fa-table'},\n 'googlecalendar': {image: 'fa-calendar'},\n 'digg': {image: 'fa-digg'},\n 'rss': {image: 'fa-rss'},\n 'mrss': {image: 'fa-rss-square'},\n 'flv': {image: 'fa-file-video-o'},\n 'mp4': {image: 'fa-video-camera'},\n 'png': {image: 'fa-picture-o'},\n 'swf': {image: 'fa-bolt'},\n 'jpg': {image: 'fa-file-image-o'},\n 'svg': {image: 'fa-file-image-o'},\n 'html5': {image: 'fa-html5'},\n 'clock': {image: 'fa-clock-o'},\n 'label': {image: 'fa-file-text-o'},\n 'extvideo': {image: 'fa-share-square-o'},\n 'extimage': {image: 'fa-share-square '}\n };\n\n this.m_components = {\n 3100: {\n name: 'Video',\n //color: '#D50D36',\n color: '#E5E5E5',\n acronym: 'video',\n description: 'Movie file',\n svg: new String('backgroundLayer 1'),\n fontAwesome: self.getFontAwesome('mp4'),\n getDefaultPlayerData: function (i_placement, i_resourceID) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '';\n },\n ext: [\n 0, 'flv',\n 1, 'mp4'\n ]\n },\n 3130: {\n name: 'Image',\n //color: '#24870D',\n color: '#E5E5E5',\n acronym: 'Image',\n description: 'Bitmap file',\n fontAwesome: self.getFontAwesome('jpg'),\n svg: new String('background Layer 1'),\n getDefaultPlayerData: function (i_placement, i_resourceID) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '';\n },\n ext: [\n 0, 'png',\n 1, 'jpg',\n 2, 'swf'\n ]\n },\n 3140: {\n name: 'SVG',\n //color: '#24870D',\n color: '#E5E5E5',\n acronym: 'SVG',\n description: 'SVG file',\n svg: new String('background Layer 1'),\n getDefaultPlayerData: function (i_placement, i_resourceID) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '';\n },\n ext: [\n 0, 'svg'\n ]\n },\n 3160: {\n name: 'External image',\n //color: '#B6B5A1',\n color: '#E5E5E5',\n acronym: 'ext image',\n description: 'Download images and Flash swf from external web links',\n svg: new String('background Layer 1 '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('extimage')\n },\n 3150: {\n name: 'External video',\n //color: '#5BB5E8',\n color: '#E5E5E5',\n acronym: 'ext video',\n description: 'Download video from external web links',\n svg: new String('background Layer 1 '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('extvideo')\n },\n 3430: {\n name: 'QR',\n app_id: '10160',\n color: '#E5E5E5',\n acronym: 'qr',\n description: 'QR code for mobile device integration',\n svg: new String('backgroundLayer 1'),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('qr')\n },\n 4600: {\n name: 'YouTube',\n app_id: '10220',\n color: '#E5E5E5',\n acronym: 'YouTube',\n description: 'YouTube - broadcast yourself',\n svg: new String(''),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('youtube')\n },\n 4100: {\n name: 'Collection',\n app_id: '10180',\n color: '#E5E5E5',\n acronym: 'Collection',\n description: 'Collection - just list your content',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('collection')\n },\n 4105: {\n name: 'Location',\n app_id: '10185',\n color: '#E5E5E5',\n acronym: 'Location',\n description: 'Location - content by GPS coordinates',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('location')\n },\n 6100: {\n name: 'FasterQ',\n app_id: '12100',\n color: '#E5E5E5',\n acronym: 'FasterQ',\n description: 'FasterQ - smart lines',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('fasterq')\n },\n 4500: {\n name: 'Twitter',\n app_id: '10210',\n color: '#E5E5E5',\n acronym: 'Twitter',\n description: 'Twitter',\n svg: '',\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('twitter')\n },\n 4505: {\n name: 'Twitter Item',\n app_id: '10210',\n color: '#E5E5E5',\n acronym: 'Twitter',\n description: 'Twitter',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('twitteritem')\n },\n 4300: {\n name: 'JS Object player',\n app_id: '10195',\n color: '#E5E5E5',\n acronym: 'JSON',\n description: 'JSON',\n svg: '',\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('json')\n },\n 4310: {\n name: 'JS Object item',\n app_id: '10195',\n color: '#E5E5E5',\n acronym: 'JSON item',\n description: 'JSON item',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('jsonitem')\n },\n 6010: {\n name: 'Weather',\n app_id: '12010',\n color: '#E5E5E5',\n acronym: 'weather',\n description: 'World Weather',\n mimeType: 'Json.weather',\n jsonItemLongDescription: 'Include a seven day extended weather forecast in your presentation, including highs, lows, humidity, wind conditions and more. Pick from white, black or color icons',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('worldweather')\n },\n 6022: {\n name: 'Sheets',\n app_id: '12032',\n color: '#E5E5E5',\n acronym: 'Sheets',\n description: 'Google Sheets',\n mimeType: 'Json.spreadsheet',\n jsonItemLongDescription: 'Easily link Scene labels to Google spreadsheet cells simply by specifying the column and row you want to link to, on the Google cloud spreadsheet. Very flexible, easy to add and even easier to edit',\n svg: '',\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('googlesheets')\n },\n 6020: {\n name: 'Calendar',\n app_id: '12030',\n color: '#E5E5E5',\n acronym: 'Calendar',\n description: 'Google Calendar',\n mimeType: 'Json.calendar',\n jsonItemLongDescription: 'With the Google Calendar component you can simply select only the Calendar you want and set a specific date range relative to today, allowing your content to always stay relevant',\n svg: '',\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('googlecalendar')\n },\n 6230: {\n name: 'Twitter V3',\n app_id: '12230',\n color: '#E5E5E5',\n acronym: 'Twitter V3',\n description: 'Twitter V3',\n mimeType: 'Json.twitter',\n jsonItemLongDescription: 'Get live tweets from your favorite twitter account, filter by a twitter user name and mix images and other fields in your Twitter scene',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('twitter')\n },\n 6050: {\n name: 'Instagram',\n app_id: '12060',\n color: '#E5E5E5',\n acronym: 'Instagram',\n description: 'Instagram',\n mimeType: 'Json.instagram.feed',\n jsonItemLongDescription: 'Get a live feed from your favorite Instagram account. Load data in real time and watch your posts come to life inside your digital signage presentation',\n svg: new String(''),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('instagram')\n },\n 6000: {\n name: 'Digg',\n app_id: '12000',\n color: '#E5E5E5',\n acronym: 'Digg',\n description: 'Digg',\n mimeType: 'Json.digg',\n jsonItemLongDescription: 'In one click add live content from Digg.com and keep your screen always fresh with live a feed that includes images and news',\n svg: new String(' '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('digg')\n },\n 3340: {\n name: 'Multimedia RSS',\n //color: '#AAE4E0',\n color: '#E5E5E5',\n acronym: 'mrss',\n description: 'multimedia video stream',\n svg: new String('background Layer 1 '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('mrss')\n },\n 3235: {\n name: 'HTML Website content',\n //color: '#FD6060',\n color: '#E5E5E5',\n acronym: 'web',\n description: 'HTML5 web integration',\n svg: new String('background Layer 1 '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('html5')\n },\n 3320: {\n name: 'Clock Date/Time',\n //color: '#8AC697',\n color: '#E5E5E5',\n acronym: 'clock',\n description: 'Set live local date and time',\n svg: new String('backgroundLayer 1'),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('clock'),\n getDateTimeMask: function (i_mask) {\n switch (i_mask) {\n case 'longDateAndTime': {\n return 'EEEE, MMM. D, YYYY at L:NN A';\n }\n case 'longDate': {\n return 'EEEE, MMM. D, YYYY';\n }\n case 'shortDayTime': {\n return 'EEEE L:NN A';\n }\n case 'date': {\n return 'MM/DD/YY';\n }\n case 'time': {\n return 'J:NN:SS A';\n }\n }\n }\n },\n 3241: {\n name: 'Label text',\n //color: '#B3F26A',\n color: '#E5E5E5',\n acronym: 'text',\n description: 'Label editor with custom text properties',\n svg: new String('backgroundLayer 1'),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('label')\n },\n\n 3510: {\n name: 'Scene',\n //color: '#BCDEB1',\n color: '#E5E5E5',\n acronym: 'scene',\n description: 'A Scene editor',\n svg: new String('backgroundLayer 1'),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonSceneDefaultXML() +\n self.getCommonSceneLayout(i_placement, 600, 400) +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('scene')\n },\n 3345: {\n name: 'Really Simple Syndication',\n //color: '#FDA401',\n color: '#E5E5E5',\n acronym: 'rss',\n description: 'RSS for daily fresh scrolling news feed',\n svg: new String('background Layer 1 '),\n getDefaultPlayerData: function (i_placement) {\n return '' +\n '' +\n self.getCommonDefaultXML() +\n self.getCommonSceneLayout(i_placement) +\n '' +\n '' +\n '<Font fontSize=\"16\" fontColor=\"65280\" fontFamily=\"Arial\" fontWeight=\"normal\" fontStyle=\"normal\" textDecoration=\"none\" textAlign=\"left\" />' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n ''\n },\n fontAwesome: self.getFontAwesome('rss')\n }\n };\n\n this.commBroker.setService(BLOCK_SERVICE, this)\n }\n\n getBlockNameByCode(i_blockCode: number): string {\n return this.m_blockCodes[i_blockCode];\n }\n\n /**\n Get the common layout which only applies when block is inside a scene\n @method getCommonSceneLayout\n @param {string} i_placement\n @return {String} common xml\n **/\n getCommonSceneLayout(i_placement, w ?, h ?) {\n w = w == undefined ? 100 : w;\n h = h == undefined ? 100 : h;\n if (i_placement == PLACEMENT_CHANNEL)\n return '';\n return '';\n }\n\n /**\n Get the common properties XML with all default values\n @method getCommonDefaultXML\n @return {String} common xml\n **/\n getCommonDefaultXML() {\n var self = this;\n var common = '' + self.getCommonBackgroundXML() + self.getCommonBorderXML();\n return common;\n }\n\n /**\n Get the common properties Scene XML with all default values\n @method getCommonSceneDefaultXML\n @return {String} common xml\n **/\n getCommonSceneDefaultXML() {\n var self = this;\n var common = '' + self.getCommonBorderXML();\n return common;\n }\n\n /**\n Get the common border XML with all default values\n @method getCommonBorderXML\n @return {String} common xml\n **/\n getCommonBorderXML() {\n return '';\n }\n\n /**\n Get the common properties XML with all default values\n @method getCommonBackgroundXML\n @return {String} common xml\n **/\n getCommonBackgroundXML() {\n var common = `\n \n \n \n \n \n `\n return common;\n }\n\n /**\n Get a component data structure and properties for a particular component id.\n @method getBlockBoilerplate\n @param {Number} i_blockID\n @return {Object} return the data structure of a specific component\n **/\n getBlockBoilerplate(i_blockID) {\n var self = this;\n return self.m_components[i_blockID];\n }\n\n /**\n Translate a mimeType to a font-awesome icon of generic icons if does not exist\n @method getIconFromMimeType\n @param {Number} i_playerData\n @return {String} foundMimeIcon\n **/\n getIconFromMimeType(i_mimeType) {\n var self = this;\n var foundMimeIcon = 'fa-star';\n var blocks = self.getBlocks();\n _.forEach(blocks, function (block: any) {\n if (block.mimeType && block.mimeType == i_mimeType)\n foundMimeIcon = block.fontAwesome;\n });\n return foundMimeIcon\n }\n\n /**\n Get the entire set data structure for all components.\n @method getBlocks\n @return {Object} return all data structure\n **/\n getBlocks() {\n var self = this;\n return self.m_components;\n }\n\n /**\n Retrieve a component code from a file extension type (i.e.: flv > 3100).\n @method getBlockCodeFromFileExt\n @param {String} i_fileExtension\n @return {Number} return component code\n **/\n getBlockCodeFromFileExt(i_fileExtension) {\n var self = this;\n for (var code in self.m_components) {\n if (self.m_components[code]['ext'] != undefined) {\n for (var i = 0; i < self.m_components[code]['ext'].length; i++) {\n if (self.m_components[code]['ext'][i] == i_fileExtension) {\n return code;\n }\n }\n }\n }\n return -1;\n }\n\n /**\n Get the font awesome path\n @method getFontAwesome\n @param {String} i_fontName\n @return {String} url path\n **/\n getFontAwesome(i_fontName) {\n var self = this;\n if (_.isUndefined((self.m_fontAwesome[i_fontName])))\n return undefined;\n return self.m_fontAwesome[i_fontName]['image'];\n }\n\n \n /**\n Get the entire font awesome set\n @method getFontsAwesome\n @return {Object} data set\n **/\n getFontsAwesome() {\n var self = this;\n return self.m_fontAwesome;\n }\n\n /**\n Convert player data to json format\n @method playerDataTojson\n @param {String} i_playerData\n @return {Json} jPlayerData\n **/\n playerDataTojson(i_playerData) {\n // var x2js = BB.comBroker.getService('compX2JS');\n // var jPlayerData = x2js.xml_str2json(i_playerData);\n // return jPlayerData;\n }\n\n /**\n Convert player data to xml format\n @method playerDataToxml\n @param {String} i_playerData\n @return {XML} xml data\n **/\n playerDataToxml(i_playerData) {\n // var x2js = BB.comBroker.getService('compX2JS');\n // var xPlayerData = x2js.json2xml_str(i_playerData);\n // return xPlayerData;\n }\n\n public getServiceType(): string {\n return this.blockPlacement;\n }\n\n public getBlockDataInScene(i_sceneData: ISceneData): Observable {\n let domPlayerData = i_sceneData.domPlayerData\n let playerMimeScene = i_sceneData.mimeType;\n let playerDataJson = this.parser.xml2js(i_sceneData.domPlayerDataXml);\n let code = playerDataJson['Player']['_player'];\n let blockType: any = this.getBlockNameByCode(code)\n var sceneData = {\n name: '',\n handle: i_sceneData.scene_id,\n playerDataJson: null,\n playerDataDom: null\n }\n var data: IBlockData = {\n blockID: i_sceneData.block_pseudo_id,\n blockType: blockType,\n blockCode: code,\n blockName: this.getBlockBoilerplate(code).name,\n blockDescription: this.getBlockBoilerplate(code).description,\n blockIcon: this.getBlockBoilerplate(code).icon,\n blockFontAwesome: this.getBlockBoilerplate(code).fontAwesome,\n blockAcronym: this.getBlockBoilerplate(code).acronym,\n blockMinWidth: this.m_minSize.w,\n blockMinHeight: this.m_minSize.h,\n playerDataDom: domPlayerData,\n playerDataJson: playerDataJson,\n playerMimeScene: playerMimeScene,\n playerDataJsonHandle: null,\n duration: -1,\n offset: -1,\n campaignTimelineChanelPlayersModelExt: null,\n scene: sceneData\n };\n return Observable.of(data);\n }\n\n public getBlockData(blockId): Observable {\n\n return this.yp.getChannelBlockRecord(blockId)\n .mergeMap((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModelExt) => {\n // var t0 = performance.now();\n var xml = i_campaignTimelineChanelPlayersModel.getPlayerData();\n var code: any;\n var playerMimeScene;\n var playerDataJsonHandle;\n var playerDataDom = $.parseXML(xml);\n let playerDataJson = this.parser.xml2js(xml);\n if (playerDataJson['Player']['_player']) {\n\n /************************************\n * Block\n ************************************/\n\n code = playerDataJson['Player']['_player'];\n var blockType = this.getBlockNameByCode(code)\n playerMimeScene = playerDataJson.Player.Data.Json ? `Json.${playerDataJson.Player.Data.Json._providerType}` : null;\n playerDataJsonHandle = (playerDataJson.Player.Data.Json && playerDataJson.Player.Data.Json.Player) ? playerDataJson.Player.Data.Json.Player : null;\n\n if (_.isUndefined(blockType)) {\n var e = `Panic using a component / block which is not supported yet ${code} ${blockType}`;\n throw new Error(e)\n }\n // console.log(`Serialization of block ${code} took ${(performance.now() - t0)} milliseconds`)\n\n } else {\n\n /************************************\n * Block is a scene\n ************************************/\n\n code = BlockLabels['BLOCKCODE_SCENE'];\n var blockType = this.getBlockNameByCode(code)\n var sceneData = {\n name: '',\n handle: jXML(playerDataDom).find('Player').attr('hDataSrc'),\n playerDataJson: null,\n playerDataDom: null\n }\n }\n\n var data: IBlockData = {\n blockID: blockId,\n blockType: blockType,\n blockCode: code,\n blockName: this.getBlockBoilerplate(code).name,\n blockDescription: this.getBlockBoilerplate(code).description,\n blockIcon: this.getBlockBoilerplate(code).icon,\n blockFontAwesome: this.getBlockBoilerplate(code).fontAwesome,\n blockAcronym: this.getBlockBoilerplate(code).acronym,\n blockMinWidth: this.m_minSize.w,\n blockMinHeight: this.m_minSize.h,\n playerDataDom: playerDataDom,\n playerDataJson: playerDataJson,\n playerMimeScene: playerMimeScene,\n playerDataJsonHandle: playerDataJsonHandle,\n duration: i_campaignTimelineChanelPlayersModel.getPlayerDurationInt(),\n offset: i_campaignTimelineChanelPlayersModel.getPlayerOffsetTimeInt(),\n campaignTimelineChanelPlayersModelExt: i_campaignTimelineChanelPlayersModel,\n scene: sceneData\n };\n return Observable.of(data)\n\n }).mergeMap((blockData: any) => {\n\n /** additional data for: scenes **/\n if (blockData.scene) {\n return this.yp.getScenePlayerdataDom(blockData.scene.handle)\n .map((xml: string) => {\n var domPlayerData = $.parseXML(xml)\n blockData.scene.name = jXML(domPlayerData).find('Player').eq(0).attr('label');\n blockData.scene.playerDataDom = domPlayerData;\n blockData.scene.playerDataJson = this.parser.xml2js(xml);\n return blockData;\n })\n } else {\n return Observable.of(blockData);\n }\n\n /** additional data for: resources (images, videos, svg ) fill additional data (make exception for collection | location) **/\n }).mergeMap((blockData: IBlockData) => {\n\n if (Number(blockData.blockCode) == BlockLabels.BLOCKCODE_COLLECTION || Number(blockData.blockCode) == BlockLabels.LOCATION)\n return Observable.of(blockData);\n\n var domPlayerData = blockData.playerDataDom;\n var xSnippet = jXML(domPlayerData).find('Resource');\n if (xSnippet.length > 0) {\n blockData.resource = {\n handle: jXML(xSnippet).attr('hResource'),\n name: '',\n type: ''\n };\n return this.yp.getResourceRecord(blockData.resource.handle)\n .map((i_resourcesModel: ResourcesModel) => {\n // todo: temp hack till resolved\n if (_.isUndefined(i_resourcesModel)) {\n blockData.resource.name = '???';\n blockData.resource.type = '';\n } else {\n blockData.resource.name = i_resourcesModel.getResourceName()\n blockData.resource.type = i_resourcesModel.getResourceType()\n }\n return blockData;\n })\n }\n return Observable.of(blockData);\n })\n }\n\n /**\n Help method to get the proper playerDataDom depending of we are dealing with a regular block or a scene block\n **/\n getBlockPlayerData(i_blockData: IBlockData): XMLDocument {\n\n\n switch (this.blockPlacement) {\n\n case PLACEMENT_CHANNEL: {\n switch (Number(i_blockData.blockCode)) {\n case BlockLabels.BLOCKCODE_SCENE: {\n return i_blockData.scene.playerDataDom;\n }\n default: {\n return i_blockData.playerDataDom;\n }\n }\n }\n\n case PLACEMENT_SCENE: {\n\n switch (Number(i_blockData.blockCode)) {\n case BlockLabels.BLOCKCODE_SCENE: {\n return i_blockData.playerDataDom;\n }\n default: {\n return i_blockData.playerDataDom;\n }\n }\n\n }\n }\n }\n\n notifySceneBgChanged() {\n this.commBroker.fire({event: 'SCENE_CHANGE', fromInstance: this, message: []});\n }\n\n notifySceneBlockChanged(i_block: string | IBlockData) {\n if (i_block['blockID']) i_block = i_block['blockID'];\n this.commBroker.fire({event: 'SCENE_BLOCK_CHANGE', fromInstance: this, message: [i_block]});\n }\n\n notifyReloadScene(i_sceneId) {\n var uiState: IUiState = {scene: {sceneSelected: -1, blockSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n var uiState: IUiState = {scene: {sceneSelected: i_sceneId, blockSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n // if (i_block['blockID']) i_block = i_block['blockID'];\n // this.commBroker.fire({event: 'LOAD_SCENE', fromInstance: this, message: [i_block]});\n }\n\n /**\n Update the msdb for the block with new values inside its player_data\n **/\n setBlockPlayerData(blockData: IBlockData, i_xmlDoc: XMLDocument | string) {\n var player_data: string, player_data_json;\n\n if (i_xmlDoc instanceof XMLDocument) {\n player_data = (new XMLSerializer()).serializeToString(i_xmlDoc as XMLDocument);\n } else {\n player_data = i_xmlDoc as string;\n }\n player_data_json = this.parser.xml2js(player_data);\n player_data = this.rp.ieFixEscaped(player_data);\n var playerCode = Number(player_data_json.Player._player);\n switch (this.blockPlacement) {\n\n case PLACEMENT_CHANNEL: {\n switch (playerCode) {\n /***** scene *****/\n case BlockLabels.BLOCKCODE_SCENE: {\n this.yp.getChannelBlockRecord(blockData.blockID)\n .subscribe((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModelExt) => {\n var domPlayerData = $.parseXML(i_campaignTimelineChanelPlayersModel.getPlayerData());\n var scene_id = jXML(domPlayerData).find('Player').attr('hDataSrc');\n this.rp.setScenePlayerData(scene_id, player_data);\n })\n break;\n }\n /***** all block *****/\n default: {\n this.rp.setCampaignTimelineChannelPlayerRecord(blockData.blockID, 'player_data', player_data);\n }\n }\n break;\n }\n\n case PLACEMENT_SCENE: {\n switch (playerCode) {\n /***** scene *****/\n case BlockLabels.BLOCKCODE_SCENE: {\n this.rp.setScenePlayerData(blockData.blockID, player_data);\n break;\n }\n /***** all blocks *****/\n default: {\n this.rp.setScenePlayerdataBlock(blockData.scene.handle, blockData.blockID, player_data);\n }\n }\n break;\n }\n }\n this.rp.reduxCommit();\n }\n\n\n}\n\n\n// export const MapMimeProviders = {\n// 'weather': 'Json.weather',\n// 'instagram.feed': 'Json.instagram.feed',\n// }\n//instagram.media\n" }, { "path": "src/app/blocks/json-event-grid.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, Input, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ISimpleGridEdit} from \"../../comps/simple-grid-module/SimpleGrid\";\nimport {StoreModel} from \"../../store/model/StoreModel\";\nimport {BlockService, IBlockData} from \"./block-service\";\nimport {SimpleGridRecord} from \"../../comps/simple-grid-module/SimpleGridRecord\";\nimport {SimpleGridTable} from \"../../comps/simple-grid-module/SimpleGridTable\";\nimport {List} from \"immutable\";\nimport * as _ from \"lodash\";\n\n\nexport class JsonEventResourceModel extends StoreModel {\n constructor(data: {\n rowIndex: number;\n checkbox: boolean;\n event: string;\n pageName: string;\n action: string;\n }) {\n super(data);\n }\n}\n\n@Component({\n selector: 'json-event-grid',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n

    \n \n \n

    \n
    \n
    \n \n \n \n event\n action\n go to\n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n `\n})\nexport class JsonEventGrid extends Compbaser implements AfterViewInit {\n\n m_blockData: IBlockData;\n m_events: List;\n m_actions: List;\n m_collectionList: List;\n m_mode: 'url' | 'page';\n m_jsonEventResources: Array;\n\n constructor(private yp: YellowPepperService, private bs: BlockService) {\n super();\n this.m_actions = List([\n new StoreModel({name: 'firstPage'}),\n new StoreModel({name: 'nextPage'}),\n new StoreModel({name: 'prevPage'}),\n new StoreModel({name: 'lastPage'}),\n new StoreModel({name: 'loadUrl'}),\n new StoreModel({name: 'selectPage'})\n ]);\n }\n\n @ViewChild('simpleGrid')\n simpleGrid: SimpleGridTable;\n\n @Input()\n set setBlockData(i_blockData) {\n this.m_blockData = i_blockData;\n this._render();\n }\n\n @Input()\n set resources(i_jsonEventResources: Array) {\n this.m_jsonEventResources = i_jsonEventResources;\n }\n\n @Input()\n set collectionList(i_collectionList) {\n this.m_collectionList = i_collectionList;\n }\n\n @Input()\n set showOption(i_value: 'url' | 'page') {\n this.m_mode = i_value;\n if (i_value == 'url') {\n this.m_actions = this.m_actions.filter((v: StoreModel) => {\n return v.getKey('name') != 'selectPage';\n }) as List;\n return;\n }\n if (i_value == 'page') {\n this.m_actions = this.m_actions.filter((v: StoreModel) => {\n return v.getKey('name') != 'loadUrl';\n }) as List;\n return;\n }\n }\n\n _render() {\n this._initEventTable();\n }\n\n /**\n Load event list to block props UI\n @method _initEventTable\n **/\n _initEventTable() {\n var rowIndex = 0;\n var domPlayerData = this.m_blockData.playerDataDom;\n var events = [];\n jXML(domPlayerData).find('EventCommands').children().each((k, eventCommand) => {\n var url = '';\n if (jXML(eventCommand).attr('command') == 'loadUrl')\n url = jXML(eventCommand).find('Url').attr('name');\n if (jXML(eventCommand).attr('command') == 'selectPage')\n url = jXML(eventCommand).find('Page').attr('name');\n if (_.isUndefined(url) || _.isEmpty(url))\n url = '---';\n var storeModel = new StoreModel({\n id: rowIndex,\n event: jXML(eventCommand).attr('from'),\n url: url,\n action: jXML(eventCommand).attr('command')\n });\n events.push(storeModel)\n rowIndex++;\n });\n this.m_events = List(events)\n }\n\n _setAction(event: ISimpleGridEdit, index: number) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('EventCommands').children().get(index);\n jXML(target).attr('command', event.value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onRemoveEvent() {\n var record: SimpleGridRecord = this.simpleGrid.getSelected();\n if (_.isUndefined(record)) return;\n var domPlayerData = this.m_blockData.playerDataDom;\n jXML(domPlayerData).find('EventCommands').children().eq(record.index).remove();\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData)\n }\n\n _onAddNewEvent() {\n var domPlayerData = this.m_blockData.playerDataDom;\n var buff = '';\n jXML(domPlayerData).find('EventCommands').append(jXML(buff));\n // domPlayerData = this.rp.xmlToStringIEfix(domPlayerData)\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _selectedAction() {\n return (a: StoreModel, b: StoreModel) => {\n return a.getKey('name') == b.getKey('action') ? 'selected' : '';\n }\n }\n\n _selectedResource() {\n return (a: StoreModel, b: StoreModel) => {\n return a.getKey('name') == b.getKey('url') ? 'selected' : '';\n }\n }\n\n _onUrlEdited(event: ISimpleGridEdit, index) {\n var url = event.value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('EventCommands').children().get(parseInt(index));\n jXML(target).find('Params').remove();\n jXML(target).append(' ');\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onPageEdited(event: ISimpleGridEdit, index) {\n var page = event.value;\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('EventCommands').children().get(parseInt(index));\n jXML(target).find('Params').remove();\n jXML(target).append('');\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n _onLabelEdited(event: ISimpleGridEdit, index) {\n var domPlayerData = this.m_blockData.playerDataDom;\n var target = jXML(domPlayerData).find('EventCommands').children().get(index);\n jXML(target).attr('from', event.value);\n this.bs.setBlockPlayerData(this.m_blockData, domPlayerData);\n }\n\n ngAfterViewInit() {\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/add-content.ts", "content": "import {AfterViewInit, Component, EventEmitter, Inject, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {BlockService, ISceneData} from \"../blocks/block-service\";\nimport {UserModel} from \"../../models/UserModel\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {BlockTypeEnum} from \"../../interfaces/BlockTypeEnum\";\nimport {BlockLabels, Consts, PLACEMENT_CHANNEL, PLACEMENT_LISTS, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {CommBroker} from \"../../services/CommBroker\";\nimport {ADD_NEW_BLOCK_SCENE} from \"../scenes/scene-editor\";\nimport {Lib} from \"../../Lib\";\nimport {List} from \"immutable\";\nimport * as _ from \"lodash\";\nimport {BehaviorSubject} from \"rxjs/BehaviorSubject\";\nimport {Subject} from \"rxjs/Subject\";\nimport {Observer} from \"rxjs/Observer\";\nimport {Observable} from \"rxjs/Observable\";\n\n@Component({\n selector: 'add-content',\n styles: [`\n .nowAllowed {\n opacity: 0.4;\n }\n\n .btn-primary {\n position: relative;\n top: -45px\n }\n\n li:hover {\n background-color: #dadada;\n cursor: pointer;\n }\n `],\n template: `\n {{me}}\n \n \n \n \n
    \n
    \n
    \n

    \n \n Components\n \n

    \n
    \n
    \n
    \n
      \n
    • \n \n

      {{component.name}}

      \n
      {{component.description}}
      \n \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n Resources\n \n

    \n
    \n
    \n
    \n
      \n
    • \n \n

      {{resource.name}}

      \n
      {{resource.description}}
      \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n Scenes\n \n

    \n
    \n
    \n
    \n
      \n
    • \n \n

      {{scene.name}}

      \n
      • \n
    \n
    \n
    \n
    \n
    \n\n \n \n \n \n \n \n \n \n \n \n\n `\n})\nexport class AddContent extends Compbaser implements AfterViewInit {\n m_placement;\n m_sceneMime;\n m_filter;\n m_userModel: UserModel;\n m_resourceModels: List;\n m_sceneDatas: Array;\n m_componentList: Array = [];\n m_resourceList: Array = [];\n m_sceneList: Array = [];\n m_PLACEMENT_SCENE = PLACEMENT_SCENE;\n m_PLACEMENT_LISTS = PLACEMENT_LISTS;\n m_PLACEMENT_CHANNEL = PLACEMENT_CHANNEL;\n\n constructor(@Inject('HYBRID_PRIVATE') private hybrid_private: boolean,\n private commBroker: CommBroker,\n private yp: YellowPepperService,\n private bs: BlockService) {\n super();\n\n this.cancelOnDestroy(\n //\n this.yp.getUserModel()\n .subscribe((i_userModel: UserModel) => {\n this.m_userModel = i_userModel;\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.listenResources()\n .subscribe((i_resources: List) => {\n this.m_resourceModels = i_resources;\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.getScenes()\n .subscribe((i_playerDatas: Array) => {\n this.m_sceneDatas = i_playerDatas;\n }, (e) => console.error(e))\n )\n }\n\n @Input()\n set placement(i_value) {\n this.m_placement = i_value;\n switch (i_value) {\n case PLACEMENT_LISTS: {\n break;\n }\n case PLACEMENT_CHANNEL: {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n break;\n }\n case PLACEMENT_SCENE: {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n break;\n }\n }\n this._render();\n }\n\n // @Output()\n // onAddContentSelected: EventEmitter = new EventEmitter();\n\n // @Output()\n // onClosed: EventEmitter = new EventEmitter();\n\n @Output()\n onClosed: Observable = new Subject().debounceTime(200).delay(333);\n\n @Output()\n onAddContentSelected: Observable = new Subject().debounceTime(200);\n\n _addBlock(i_addContents: IAddContents) {\n switch (this.m_placement) {\n case PLACEMENT_CHANNEL: {\n (this.onAddContentSelected as Subject).next(i_addContents)\n // this.onAddContentSelected.emit(i_addContents)\n break;\n }\n\n case PLACEMENT_LISTS: {\n (this.onAddContentSelected as Subject).next(i_addContents)\n // this.onAddContentSelected.emit(i_addContents)\n break;\n }\n\n case PLACEMENT_SCENE: {\n this.commBroker.fire({event: ADD_NEW_BLOCK_SCENE, fromInstance: this, message: i_addContents});\n break;\n }\n }\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n _onUpgEnterprise(event: MouseEvent) {\n event.stopImmediatePropagation();\n event.preventDefault();\n this.commBroker.fire({event: Consts.Events().UPGRADE_ENTERPRISE, fromInstance: this, message: ''});\n }\n\n _onComponentSelected(i_component) {\n if (!i_component.allow)\n return bootbox.alert('Please upgrade to the Enterprise edition')\n this._addBlock(i_component);\n this._close();\n }\n\n _onResourceSelected(i_resource) {\n this._addBlock(i_resource);\n this._close();\n }\n\n _onSceneSelected(i_scene) {\n this._addBlock(i_scene);\n this._close();\n }\n\n _close() {\n (this.onClosed as Subject).next();\n }\n\n /**\n Build lists of components, resources and scenes (respectively showing what's needed per placement mode)\n Once an LI is selected proper event fired to announce block is added.\n @method _render\n @return none\n **/\n _render() {\n this.m_componentList = [];\n this.m_sceneList = []\n\n\n /////////////////////////////////////////////////////////\n // component selection list\n /////////////////////////////////////////////////////////\n var components = this.bs.getBlocks();\n var specialJsonItemName = '';\n var specialJsonItemColor = '';\n //var sceneHasMimeType = '';\n\n for (var i_componentID in components) {\n var componentID: any = i_componentID;\n\n if (componentID == BlockLabels.BLOCKCODE_IMAGE ||\n componentID == BlockLabels.BLOCKCODE_SVG ||\n componentID == BlockLabels.BLOCKCODE_TWITTER ||\n componentID == BlockLabels.BLOCKCODE_TWITTER_ITEM ||\n componentID == BlockLabels.BLOCKCODE_VIDEO ||\n componentID == BlockLabels.BLOCKCODE_SCENE ||\n (this.m_placement == PLACEMENT_CHANNEL && componentID == BlockLabels.BLOCKCODE_JSON_ITEM) ||\n (this.m_placement == PLACEMENT_CHANNEL && componentID == BlockLabels.BLOCKCODE_TWITTER_ITEM) ||\n (this.m_placement == PLACEMENT_SCENE && componentID == BlockLabels.BLOCKCODE_JSON) ||\n (this.m_placement == PLACEMENT_SCENE && componentID == BlockLabels.BLOCKCODE_WORLD_WEATHER) ||\n (this.m_placement == PLACEMENT_SCENE && componentID == BlockLabels.BLOCKCODE_GOOGLE_SHEETS) ||\n (this.m_placement == PLACEMENT_SCENE && componentID == BlockLabels.BLOCKCODE_TWITTER)) {\n continue;\n }\n\n // if PLACEMENT_SCENE and mimetype is set to specific, don't show any JSON based players\n if (this.m_sceneMime && this.m_placement == PLACEMENT_SCENE) {\n var jsonBasedPlayerXML = this.bs.getBlockBoilerplate(componentID).getDefaultPlayerData(PLACEMENT_SCENE);\n jsonBasedPlayerXML = $.parseXML(jsonBasedPlayerXML);\n if ($(jsonBasedPlayerXML).find('Json').length > 0)\n continue;\n }\n\n // if PLACEMENT_SCENE and mimetype is set on scene, give special attention to JSON_ITEM component since it will often be the one user needs\n if (this.m_sceneMime && this.m_placement == PLACEMENT_SCENE && componentID == BlockLabels.BLOCKCODE_JSON_ITEM) {\n specialJsonItemName = Lib.CapitaliseFirst(this.m_sceneMime.split('.')[1]);\n // specialJsonItemColor = BB.CONSTS['THEME'] === 'light' ? '#A9CFFA' : '#262627';\n } else {\n specialJsonItemName = '';\n specialJsonItemColor = '';\n }\n\n // check if and how to render components depending on user account type\n var status = this._checkAllowedComponent(componentID)\n switch (status) {\n case 0: {\n continue;\n }\n case 1:\n case 2: {\n this.m_componentList.push({\n blockId: componentID,\n type: BlockTypeEnum.COMPONENT,\n allow: status == 1 ? true : false,\n blockCode: componentID,\n name: components[componentID].name,\n fa: components[componentID].fontAwesome,\n specialJsonItemName: specialJsonItemName,\n specialJsonItemColor: specialJsonItemColor,\n description: components[componentID].description\n\n })\n break;\n }\n }\n }\n\n\n /////////////////////////////////////////////////////////\n // show resource selection list\n /////////////////////////////////////////////////////////\n\n // var recResources = pepper.listenResources();\n this.m_resourceModels.forEach((i_resourcesModel: ResourcesModel) => {\n var size = (i_resourcesModel.getResourceBytesTotal() / 1000).toFixed(2);\n var resourceDescription = 'size: ' + size;\n this.m_resourceList.push({\n resourceId: i_resourcesModel.getResourceId(),\n type: BlockTypeEnum.RESOURCE,\n name: i_resourcesModel.getResourceName(),\n blockCode: this.bs.getBlockCodeFromFileExt(i_resourcesModel.getResourceType()) as number,\n size: size,\n allow: true,\n fa: this.bs.getFontAwesome(i_resourcesModel.getResourceType()),\n description: resourceDescription\n })\n })\n\n /////////////////////////////////////////////////////////\n // show scene selection list in Scene or block list modes\n /////////////////////////////////////////////////////////\n\n if (this.m_placement == PLACEMENT_CHANNEL || this.m_placement == PLACEMENT_LISTS) {\n this.m_sceneDatas.forEach((i_sceneData: ISceneData) => {\n var label = $(i_sceneData.domPlayerData).find('Player').eq(0).attr('label');\n var mimeType = $(i_sceneData.domPlayerData).find('Player').eq(0).attr('mimeType');\n\n // don't allow adding mimetype scenes to channels directly as needs to be added via Player block\n if (this.m_placement == PLACEMENT_CHANNEL) {\n if (!_.isUndefined(mimeType))\n return;\n }\n this.m_sceneList.push({\n sceneData: i_sceneData,\n type: BlockTypeEnum.SCENE,\n blockCode: 3510,\n name: label,\n fa: this.bs.getFontAwesome('scene'),\n allow: true,\n description: 'scene'\n })\n })\n }\n\n //reset mimetype\n this.m_sceneMime = undefined;\n }\n\n\n /**\n Check if component is allowed under enterprise / prime membership\n Note that if running under Hybrid or Private server default is to always allow\n all components\n @method _checkAllowedComponent\n @param {Number} i_componentID\n @return {Number} 0 = hide, 1 = show, 2 = upgradable\n **/\n _checkAllowedComponent(i_componentID) {\n // include all\n if (this.hybrid_private)\n return 1;\n\n // FasterQ, open to all\n if (i_componentID == 6100) {\n return 1;\n }\n\n var appID = this.bs.getBlockBoilerplate(i_componentID).app_id;\n if (_.isUndefined(appID))\n return 1;\n\n // component is prime, account is free type, upgradable\n if (this.m_userModel.getKey('resellerId') == 1)\n return 2;\n\n // account is under a reseller and component not available, hide it\n if (this.m_userModel.getKey('resellerId') != 1 && _.isUndefined(this.m_userModel.getKey('components')[appID]))\n return 0;\n\n // account is under a reseller and component is available, show it\n return 1;\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/campaigns/campaign-channels.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, Input, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {CampaignTimelineBoardViewerChanelsModel, CampaignTimelineChanelPlayersModel, CampaignTimelineChanelsModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {BlockService, IBlockData} from \"../blocks/block-service\";\nimport {Observable, Subject} from \"rxjs\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {List} from \"immutable\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {DraggableList} from \"../../comps/draggable-list/draggable-list\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Lib} from \"../../Lib\";\n\n\n@Component({\n selector: 'campaign-channels',\n styles: [`\n * {\n font-size: 1.1em !important;\n }\n\n .dragch {\n float: right;\n padding-right: 10px;\n position: relative;\n top: 5px;\n }\n\n .lengthTimer {\n float: right;\n padding-right: 10px;\n }\n\n .listItems {\n cursor: pointer;\n }\n\n .listItems a i {\n display: inline;\n font-size: 40px;\n padding-right: 20px;\n }\n\n .listItems a span {\n display: inline;\n font-size: 1.5em;\n position: relative;\n top: -12px;\n }\n `],\n template: `\n {{me}}\n \n \n `\n})\n\nexport class CampaignChannels extends Compbaser implements AfterViewInit {\n\n private selected_campaign_timeline_id: number = -1;\n private selected_campaign_timeline_chanel_id: number = -1;\n private durationChanged$ = new Subject();\n m_blockList: List = List([]);\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private bs: BlockService, private cd:ChangeDetectorRef) {\n super();\n }\n\n @ViewChild(DraggableList)\n draggableList: DraggableList;\n\n ngAfterViewInit() {\n this.listenChannelSelected();\n this.preventRedirect(true);\n\n }\n\n @timeout()\n private listenChannelSelected() {\n this.cd.markForCheck();\n this.cancelOnDestroy(\n this.yp.listenCampaignTimelineBoardViewerSelected(true)\n .skip(1)\n .distinctUntilChanged()\n .subscribe(() => {\n this.draggableList.deselect();\n })\n )\n\n this.cancelOnDestroy(\n this.yp.listenCampaignTimelineBoardViewerSelected(true)\n .combineLatest(\n this.durationChanged$,\n this.yp.ngrxStore.select(store => store.msDatabase.sdk.table_campaign_timeline_chanel_players)\n )\n .filter((v) => {\n var campaignTimelineBoardViewerChanelsModel: CampaignTimelineBoardViewerChanelsModel = v[0];\n var totalDuration = v[1];\n var campaignTimelineChanelPlayersModel = v[2];\n if (campaignTimelineBoardViewerChanelsModel == null) this.m_blockList = List([]);\n return campaignTimelineBoardViewerChanelsModel != null;\n\n })\n .withLatestFrom(this.yp.listenTimelineSelected(), (i_channelModel: CampaignTimelineBoardViewerChanelsModel, i_timelinesModel: CampaignTimelinesModel) => {\n this.selected_campaign_timeline_chanel_id = i_channelModel[0].getCampaignTimelineChanelId();\n this.selected_campaign_timeline_id = i_timelinesModel.getCampaignTimelineId();\n return i_channelModel[0].getCampaignTimelineBoardViewerChanelId()\n\n })\n .mergeMap(i_boardViewerChanelId => {\n return this.yp.getChannelFromCampaignTimelineBoardViewer(i_boardViewerChanelId)\n\n })\n .mergeMap((i_campaignTimelineChanelsModel: CampaignTimelineChanelsModel) => {\n return this.yp.getChannelBlocks(i_campaignTimelineChanelsModel.getCampaignTimelineChanelId())\n\n })\n .mergeMap(blockIds => {\n if (blockIds.length == 0)\n return Observable.of([])\n\n return Observable.from(blockIds)\n .map((blockId) => this.bs.getBlockData(blockId))\n .combineAll()\n\n })\n .subscribe((i_blockList: Array) => {\n this.m_blockList = List(this._sortBlock(i_blockList));\n // this.draggableList.createSortable()\n }, e => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenTimelineDurationChanged()\n .subscribe((totalDuration) => {\n this.durationChanged$.next(totalDuration);\n })\n )\n }\n\n _onItemSelected(event) {\n var blockData: IBlockData = event.item;\n var uiState: IUiState = {\n campaign: {\n blockChannelSelected: blockData.blockID\n },\n uiSideProps: SideProps.channelBlock\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onDragComplete(i_blocks) {\n this._reOrderChannelBlocks(i_blocks);\n }\n\n private _sortBlock(i_blockList: Array): Array {\n\n var sorted = i_blockList.sort((a, b) => {\n if (a.offset < b.offset)\n return -1;\n if (a.offset > b.offset)\n return 1;\n if (a.offset === b.offset)\n return 0;\n })\n return sorted;\n }\n\n /**\n Update the blocks offset times according to current order of LI elements and reorder accordingly in msdb.\n @method _reOrderChannelBlocks\n @return none\n **/\n _reOrderChannelBlocks(i_blocks) {\n var self = this\n var blocks = i_blocks;\n var playerOffsetTime: any = 0;\n jQuery(blocks).each(function (i) {\n var block_id = jQuery('[data-block_id]', this).data('block_id');\n self._getBlockRecord(block_id, (i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModel) => {\n var playerDuration = i_campaignTimelineChanelPlayersModel.getPlayerDuration();\n self.rp.setBlockRecord(block_id, 'player_offset_time', Lib.ToValidNumber(playerOffsetTime));\n // console.log('player ' + block_id + ' offset ' + playerOffsetTime + ' playerDuration ' + playerDuration);\n playerOffsetTime = parseFloat(playerOffsetTime) + parseFloat(playerDuration);\n })\n }); \n self.rp.updateTotalTimelineDuration(this.selected_campaign_timeline_id);\n self.rp.reduxCommit();\n }\n\n @Once()\n private _getBlockRecord(i_blockId, i_cb: (i_blockId: CampaignTimelineChanelPlayersModel) => void) {\n return this.yp.getChannelBlockRecord(i_blockId)\n .subscribe((block: CampaignTimelineChanelPlayersModel) => {\n i_cb(block);\n }, (e) => console.error(e));\n }\n\n\n ngOnInit() {\n }\n\n destroy() {\n this.selected_campaign_timeline_chanel_id = -1;\n this.selected_campaign_timeline_id = -1;\n }\n}\n\n\n// var campaign_timeline_chanel_player_id = jData['campaign_timeline_chanel_player_id'];\n// var campaign_timeline_chanel_player_data = jData['campaign_timeline_chanel_player_data'];\n// var timeline = BB.comBroker.getService(BB.SERVICES.CAMPAIGN_VIEW).getTimelineInstance(self.selected_campaign_timeline_id);\n// var channel = timeline.getChannelInstance(self.selected_campaign_timeline_chanel_id);\n// channel.createChannelBlock(campaign_timeline_chanel_player_id, campaign_timeline_chanel_player_data);\n//\n// var campaign_timeline_board_viewer_id = self.selected_campaign_timeline_board_viewer_id;\n// var campaign_timeline_id = self.selected_campaign_timeline_id;\n// var campaign_timeline_chanel_id = self.selected_campaign_timeline_chanel_id;\n//\n// // self._resetChannel();\n// $(Elements.SORTABLE).empty();\n// self._loadChannelBlocks(campaign_timeline_id, campaign_timeline_chanel_id);\n// self._listenBlockSelected();\n// // self._deselectBlocksFromChannel();\n// self._selectLastBlockOnChannel();\n// self._reOrderChannelBlocks();\n// var blocksSorted = {};\n// _.forEach(i_blockList, (i_block: IBlockData) => {\n// var player_data = i_block.campaignTimelineChanelPlayersModelExt.getPlayerData();\n// var domPlayerData = $.parseXML(player_data);\n// var sceneHandle = jQuery(domPlayerData).find('Player').attr('player');\n// // workaround to remove scenes listed inside table campaign_timeline_chanel_players\n// if (sceneHandle == '3510')\n// return;\n// var a = i_block.campaignTimelineChanelPlayersModelExt.getKey('player_offset_time');\n// var offsetTime = i_block.campaignTimelineChanelPlayersModelExt.getPlayerOffsetTimeInt();\n// console.log(i_block.blockName + ' duration: ' + i_block.length + ' offset: ' + offsetTime);\n// blocksSorted[offsetTime] = i_block;\n// });\n// return _.values(blocksSorted) as Array;" }, { "path": "src/app/campaigns/campaign-duration.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Observable} from \"rxjs\";\n\n@Component({\n selector: 'campaign-duration',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n campaign length:\n {{m_duration$ | async | FormatSecondsPipe}} \n `\n})\nexport class CampaignDuration extends Compbaser implements AfterViewInit {\n\n m_duration$:Observable;\n\n constructor(private yp: YellowPepperService, private cd:ChangeDetectorRef) {\n super();\n }\n\n ngAfterViewInit() {\n this.m_duration$ = this.yp.listenTimelineDurationChanged()\n this.cd.markForCheck()\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-editor-props.ts", "content": "import {Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {Observable} from \"rxjs\";\n\n\n@Component({\n selector: 'campaign-editor-props',\n host: {\n '(input-blur)': 'onFormChange($event)'\n },\n template: `\n
    \n
    \n
    \n
    \n
    \n editor properties\n \n \n {{me}}\n
    \n
      \n
    • \n

      {{(m_campaignModel$ | async)?.getCampaignName() }}

      \n
      • \n
    • \n
      \n

      playback mode: scheduler

      \n
      \n
      \n

      playback mode: sequencer

      \n
      \n
      • \n
    \n
    \n
    \n
    \n
    \n `,\n styles: [`\n i {\n width: 20px;\n }\n `]\n\n})\nexport class CampaignEditorProps extends Compbaser {\n m_campaignModel$: Observable;\n\n constructor(private yp: YellowPepperService) {\n super();\n this.m_campaignModel$ = this.yp.listenCampaignValueChanged()\n }\n\n destroy() {\n }\n}\n\n\n\n" }, { "path": "src/app/campaigns/campaign-editor.ts", "content": "import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Output, ViewChild} from \"@angular/core\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {Compbaser} from \"ng-mslib\";\nimport {CampaignsModelExt, CampaignTimelineChanelPlayersModelExt} from \"../../store/model/msdb-models-extended\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {CampaignTimelineChanelsModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {List} from \"immutable\";\nimport {ACTION_UISTATE_UPDATE, AppdbAction, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState, StoryBoardListViewModeEnum} from \"../../store/store.data\";\nimport {PreviewModeEnum} from \"../live-preview/live-preview\";\nimport * as _ from \"lodash\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {Lib} from \"../../Lib\";\nimport {CampaignStoryTimeline, ITimelineState} from \"./campaign-story-timeline\";\n\n// https://github.com/AlexWD/ds-timeline-widget\n\n@Component({\n selector: 'campaign-editor',\n templateUrl: './campaign-editors.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {\n outline: 0;\n }\n\n label {\n border-radius: 0px;\n }\n `],\n animations: [\n trigger('visibilityChanged', [\n state('on', style({transform: 'rotate(0deg)'})),\n state('off', style({transform: 'rotate(180deg)'})),\n transition('* => *', animate('300ms'))\n ]),\n\n trigger('fadeInOut', [\n transition(':enter', [\n style({opacity: 0}),\n animate('400ms', style({opacity: 1}))\n ]),\n transition(':leave', [\n style({opacity: 1}),\n animate('200ms', style({opacity: 0}))\n ])\n ])\n\n ]\n})\n\nexport class CampaignEditor extends Compbaser {\n\n campaignModel: CampaignsModelExt;\n campaignTimelinesModel: CampaignTimelinesModel;\n channelModel: CampaignTimelineChanelsModel;\n m_campaignTimelinesModels: List;\n m_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModelExt;\n m_isVisible1 = 'off';\n zoom = 1;\n loginState: string = '';\n m_inDevMode = Lib.DevMode();\n m_storyBoardListViewModeEnum = StoryBoardListViewModeEnum;\n m_storyBoardListViewModeSelection = StoryBoardListViewModeEnum.ListMode;\n m_switchMode = false;\n m_duration:number = 0;\n\n constructor(private yp: YellowPepperService, private actions: AppdbAction, private rp: RedPepperService, private cd: ChangeDetectorRef) {\n super();\n\n this.cancelOnDestroy(\n this.yp.listenStoryBoardListViewModeSelected()\n .subscribe((v) => {\n this._onTimelineViewMode(v);\n }, (e) => console.error(e))\n );\n\n this.cancelOnDestroy(\n this.yp.listenCampaignSelected()\n .switchMap((i_campaignsModelExt: CampaignsModelExt) => {\n this.campaignModel = i_campaignsModelExt;\n return this.yp.listenCampaignTimelines(i_campaignsModelExt.getCampaignId())\n })\n .subscribe((i_campaignTimelinesModel: List) => {\n this.m_campaignTimelinesModels = i_campaignTimelinesModel;\n }, (e) => console.error(e))\n );\n\n this.cancelOnDestroy(\n this.yp.listenTimelineSelected(true)\n .subscribe((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n this.campaignTimelinesModel = i_campaignTimelinesModel;\n if (this.campaignTimelinesModel){\n this.m_duration = this.campaignTimelinesModel.getTimelineDuration();\n console.log('duration ' + this.m_duration);\n //todo: error when enabled but need for Duration component\n // this.cd.detectChanges();\n }\n\n }, (e) => console.error(e))\n );\n this.cancelOnDestroy(\n this.yp.listenChannelSelected(true)\n .subscribe((channel: CampaignTimelineChanelsModel) => {\n this.channelModel = channel;\n }, (e) => {\n console.error(e)\n })\n );\n this.cancelOnDestroy(\n this.yp.listenBlockChannelSelected(true)\n .subscribe((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModelExt) => {\n this.m_campaignTimelineChanelPlayersModel = i_campaignTimelineChanelPlayersModel;\n }, (e) => console.error(e))\n )\n }\n\n @ViewChild(CampaignStoryTimeline)\n campaignStoryTimeline:CampaignStoryTimeline;\n\n @Output()\n onToScreenLayoutEditor: EventEmitter = new EventEmitter();\n\n @Output()\n onToAddContent: EventEmitter = new EventEmitter();\n\n @Output()\n onToAddTimeline: EventEmitter = new EventEmitter();\n\n @Output()\n onGoBack: EventEmitter = new EventEmitter();\n\n _onAddContent() {\n if (!this.channelModel)\n return bootbox.alert('Select channel to add content to. First be sure to select a timeline and next, click the [Next Channel] button');\n this.onToAddContent.emit();\n }\n\n _timelineDurationChange(i_duration) {\n this.m_duration = i_duration;\n console.log('CampaignEditor db total new duration ' + i_duration + ' ' + this.campaignTimelinesModel.getCampaignTimelineId());\n this.rp.setTimelineTotalDuration(this.campaignTimelinesModel.getCampaignTimelineId(), i_duration);\n this.rp.reduxCommit();\n this.cd.markForCheck();\n }\n\n _campaignStoryTimelineCmd(i_cmd){\n this.campaignStoryTimeline[i_cmd]();\n }\n\n _onStateChanged(state:ITimelineState){\n // this.m_duration = state.duration;\n }\n\n _onRemoveTimeline() {\n if (!this.campaignTimelinesModel)\n return bootbox.alert('you must first select a timeline to remove');\n if (this.rp.getCampaignTimelines(this.campaignTimelinesModel.getCampaignId()).length == 1)\n return bootbox.alert('you must keep at least one Timeline')\n\n bootbox.confirm('are you sure you want to remove the selected timeline?', (i_result) => {\n if (i_result == true) {\n var boardTemplateID = this.rp.getGlobalTemplateIdOfTimeline(this.campaignTimelinesModel.getCampaignTimelineId());\n this.rp.removeTimelineFromCampaign(this.campaignTimelinesModel.getCampaignTimelineId());\n this.rp.removeSchedulerFromTime(this.campaignTimelinesModel.getCampaignTimelineId());\n var campaignTimelineBoardTemplateID = this.rp.removeBoardTemplateFromTimeline(this.campaignTimelinesModel.getCampaignTimelineId());\n this.rp.removeBoardTemplate(boardTemplateID);\n this.rp.removeTimelineBoardViewerChannels(campaignTimelineBoardTemplateID);\n this.rp.removeBoardTemplateViewers(boardTemplateID);\n this.rp.getChannelsOfTimeline(this.campaignTimelinesModel.getCampaignTimelineId()).forEach(i_campaign_timeline_chanel_id => {\n this.rp.removeChannelFromTimeline(i_campaign_timeline_chanel_id);\n this.rp.getChannelBlocks(i_campaign_timeline_chanel_id).forEach((i_block_id) => {\n this.rp.removeBlockFromTimelineChannel(i_block_id);\n })\n });\n var uiState: IUiState = {\n uiSideProps: SideProps.miniDashboard,\n campaign: {\n timelineSelected: -1,\n campaignTimelineChannelSelected: -1,\n campaignTimelineBoardViewerSelected: -1\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.rp.reduxCommit();\n }\n });\n }\n\n _changeZoom(value) {\n // console.log(value);\n }\n\n _onTimelineViewMode(i_mode: StoryBoardListViewModeEnum) {\n var uiState: IUiState = {\n campaign: {\n storyBoardListViewModeSelected: i_mode\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.m_storyBoardListViewModeSelection = i_mode;\n }\n\n _onAddTimeline() {\n this.onToAddTimeline.emit();\n }\n\n _onEditScreenLayout() {\n if (!this.campaignTimelinesModel)\n return bootbox.alert('no timeline selected')\n var uiState: IUiState = {uiSideProps: SideProps.screenLayoutEditor}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onToScreenLayoutEditor.emit();\n }\n\n /**\n Delete the selected block from the channel\n @method _deleteChannelBlock\n @return none\n **/\n _onRemoveContent() {\n if (!this.m_campaignTimelineChanelPlayersModel)\n return bootbox.alert('No item selected');\n this.rp.removeBlockFromTimelineChannel(this.m_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId());\n this.rp.reduxCommit();\n let uiState: IUiState = {\n uiSideProps: SideProps.miniDashboard,\n campaign: {\n blockChannelSelected: -1\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onCampaignPreview() {\n return bootbox.alert('HTML preview coming soon! for now preview using Desktop Signage Player');\n // let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE_AND_PREVIEW, previewMode: PreviewModeEnum.CAMPAIGN}\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onTimelinePreview() {\n return bootbox.alert('HTML preview coming soon! for now preview using Desktop Signage Player');\n // if (_.isUndefined(this.campaignTimelinesModel))\n // return bootbox.alert('No timeline selected');\n // let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE_AND_PREVIEW, previewMode: PreviewModeEnum.TIMELINE}\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onGoBack() {\n this.actions.resetCampaignSelection();\n this.onGoBack.emit()\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/campaigns/campaign-editors.html", "content": "{{me}}\n

    campaign editor

    \n\n\n
    \n
    \n\n
    \n
    \n

    \n \n \n \n \n\n \n \n \n \n\n
    \n \n
    \n

    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n Timeline\n \n \n \n \n\n
    \n\n \n\n \n
    \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

    \n
    \n
    \n \n \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n\n\n\n" }, { "path": "src/app/campaigns/campaign-layout.ts", "content": "import {Component, EventEmitter, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport * as screenTemplates from \"../../libs/screen-templates.json\";\nimport * as _ from \"lodash\";\nimport {OrientationEnum} from \"./campaign-orientation\";\nimport {Observable, Observer} from \"rxjs\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {IUiStateCampaign} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {IScreenTemplateData} from \"../../interfaces/IScreenTemplate\";\nimport {ACTION_LIVELOG_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\n\n@Component({\n selector: 'campaign-layout',\n styles: [`\n :host /deep/ .svgSD {\n cursor: pointer;\n }\n `],\n template: `\n {{me}}\n

    screen layout

    \n
    \n
    \n \n
    \n
    \n `\n})\nexport class CampaignLayout extends Compbaser {\n\n private m_resolution: string;\n private m_screenTemplateData: IScreenTemplateData;\n private m_orientation: OrientationEnum;\n _nextClick: Observer;\n m_addToExistingCampaignMode = false;\n m_screenLayouts: Array;\n m_campaignName: string;\n m_onNewCampaignMode: boolean;\n m_mouseHoverEffect:boolean = false;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n }\n\n ngAfterViewInit() {\n this.getNewCampaignParams();\n this.cancelOnDestroy(\n Observable.create(observer => {\n this._nextClick = observer\n }).map((i_screenTemplateData: IScreenTemplateData) => {\n this.m_screenTemplateData = i_screenTemplateData;\n return i_screenTemplateData;\n })\n .debounceTime(200)\n .do(() => {\n this.onSelection.emit(this.m_screenTemplateData)\n }).subscribe(() => {\n }, (e) => console.error(e))\n )\n }\n\n @Input()\n set mouseHoverEffect(i_value) {\n this.m_mouseHoverEffect = i_value;\n }\n\n @Input()\n set onNewCampaignMode(i_value: boolean) {\n this.m_onNewCampaignMode = i_value;\n }\n\n @Once()\n private getNewCampaignParams() {\n return this.yp.getNewCampaignParmas()\n .subscribe((value: IUiStateCampaign) => {\n if (this.m_onNewCampaignMode) {\n this.m_addToExistingCampaignMode = false;\n this.m_resolution = value.campaignCreateResolution;\n this.m_orientation = value.campaignCreateOrientation;\n this.m_campaignName = value.campaignCreateName;\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'campaign created ' + this.m_campaignName})}));\n } else {\n this.m_addToExistingCampaignMode = true;\n var recBoard = this.rp.getGlobalBoardFromCampaignId(value.campaignSelected)\n var h = parseInt(recBoard.board_pixel_height);\n var w = parseInt(recBoard.board_pixel_width);\n this.m_resolution = `${w}x${h}`;\n this.m_orientation = w > h ? OrientationEnum.HORIZONTAL : OrientationEnum.VERTICAL;\n this.m_campaignName = '';\n }\n this._render();\n }, (e) => console.error(e))\n }\n\n\n @Output()\n onSelection: EventEmitter = new EventEmitter();\n\n\n private _render() {\n if (_.isUndefined(this.m_orientation) || _.isUndefined(this.m_resolution))\n return;\n this.m_screenLayouts = [];\n for (var screenType in screenTemplates[this.m_orientation][this.m_resolution]) {\n var screenTemplateData: IScreenTemplateData = {\n orientation: this.m_orientation,\n resolution: this.m_resolution,\n screenType: screenType,\n screenProps: screenTemplates[this.m_orientation][this.m_resolution][screenType],\n scale: 14,\n name: this.m_campaignName\n };\n this.m_screenLayouts.push(screenTemplateData);\n }\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-list.ts", "content": "import {Component, ChangeDetectionStrategy, Input, Output, EventEmitter} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {List} from \"immutable\";\nimport {IUiState} from \"../../store/store.data\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\n\n@Component({\n selector: 'campaign-list',\n template: `\n {{me}}\n \n `,\n})\nexport class CampaignList extends Compbaser {\n selectedIdx = -1;\n m_campaigns: List;\n m_selectedCampaign: CampaignsModelExt;\n\n constructor() {\n super();\n }\n\n @Input()\n set campaigns(i_campaigns: List) {\n this.m_campaigns = i_campaigns;\n }\n\n @Output()\n slideToCampaignEditor: EventEmitter = new EventEmitter();\n\n @Output()\n slideToCampaignName: EventEmitter = new EventEmitter();\n\n @Output()\n onCampaignSelected: EventEmitter = new EventEmitter();\n\n _onCampaignSelected(event: MouseEvent, campaign: CampaignsModelExt, index) {\n // event.stopPropagation();\n // event.preventDefault();\n this.selectedIdx = index;\n let uiState: IUiState;\n if (jQuery(event.target).hasClass('props')) {\n uiState = {\n uiSideProps: SideProps.campaignProps,\n campaign: {\n campaignSelected: campaign.getCampaignId()\n }\n }\n this.onCampaignSelected.emit(uiState)\n } else {\n uiState = {\n uiSideProps: SideProps.campaignEditor,\n campaign: {\n campaignSelected: campaign.getCampaignId()\n }\n }\n this.slideToCampaignEditor.emit();\n this.onCampaignSelected.emit(uiState)\n }\n this.m_selectedCampaign = campaign;\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-manager.html", "content": "{{me}}\n\n
    \n campaign selection\n
    \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n\n\n\n\n\n\n\n\n\n\n\n
    \n
    \n \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    \n" }, { "path": "src/app/campaigns/campaign-manager.ts", "content": "import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Output} from \"@angular/core\";\nimport {Observable} from \"rxjs\";\nimport {List} from \"immutable\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Router} from \"@angular/router\";\nimport {UserModel} from \"../../models/UserModel\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {WizardService} from \"../../services/wizard-service\";\n\n@Component({\n // changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'campaign-manager',\n styles: [`\n button {\n width: 160px;\n }\n\n /*.selectedItem {*/\n /*background-color: green !important*/\n /*}*/\n /*a.list-group-item:focus, button.list-group-item:focus {*/\n /*background-color: pink !important;*/\n /*}*/\n\n `],\n templateUrl: './campaign-manager.html'\n})\nexport class CampaignManager extends Compbaser {\n\n // public userModel$: Observable;\n\n public campaigns$: Observable>;\n public timelineSelected$: Observable;\n\n constructor(private el: ElementRef, private yp: YellowPepperService, private redPepperService: RedPepperService, private router: Router, private wizardService: WizardService) {\n super();\n this.preventRedirect(true);\n this.timelineSelected$ = this.yp.ngrxStore.select(store => store.appDb.uiState.campaign.timelineSelected).map(v => v);\n\n // this.userModel$ = this.yp.ngrxStore.select(store => store.appDb.userModel);\n\n this.campaigns$ = this.yp.ngrxStore.select(store => store.msDatabase.sdk.table_campaigns)\n .map((list: List) => list);\n // this.yp.ngrxStore.select(store => store.msDatabase.sdk.table_resources).subscribe((resourceModels: List) => {\n // // console.log(resourceModels.first().getResourceName());\n // // console.log(resourceModels.first().getResourceBytesTotal());\n // })\n }\n\n // @once(6000)\n // private testListen() {\n // return this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps).map((v) => {\n // console.log(v);\n // }).subscribe((e) => {\n // console.log(e);\n // });\n // }\n\n @Output()\n slideToCampaignEditor: EventEmitter = new EventEmitter();\n\n @Output()\n slideToCampaignName: EventEmitter = new EventEmitter();\n\n // m_selectedCampaign: CampaignsModelExt;\n\n // _onCampaignSelected(event: MouseEvent, campaign: CampaignsModelExt) {\n // let uiState: IUiState;\n // if (jQuery(event.target).hasClass('props')) {\n // uiState = {\n // uiSideProps: SideProps.campaignProps,\n // campaign: {\n // campaignSelected: campaign.getCampaignId()\n // }\n // }\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n // } else {\n // uiState = {\n // uiSideProps: SideProps.campaignEditor,\n // campaign: {\n // campaignSelected: campaign.getCampaignId()\n // }\n // }\n // this.slideToCampaignEditor.emit();\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n // }\n // this.m_selectedCampaign = campaign;\n // }\n\n onRoute1() {\n this.router.navigate(['/App1/Campaigns'])\n }\n\n onRoute2() {\n this.router.navigate(['/App1/Fasterq'])\n }\n\n onRoute3() {\n this.router.navigate(['/App1/Resources'])\n }\n\n onRoute4() {\n this.router.navigate(['/App1/Settings'])\n }\n\n onRoute5() {\n this.router.navigate(['/App1/Stations'])\n }\n\n onRoute6() {\n this.router.navigate(['/App1/StudioPro'])\n }\n\n // save() {\n // let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE}\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n // }\n\n _onCampaignSelected(i_uiState: IUiState) {\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: i_uiState}))\n }\n\n _createCampaign() {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.slideToCampaignName.emit();\n }\n\n _onWizard() {\n this.wizardService.start();\n }\n\n destroy() {\n // var uiState: IUiState = {uiSideProps: SideProps.none}\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n}\n\n\n// let uiState: IUiState = {\n// campaign: {\n// campaignSelected: 123\n// }\n// };\n// uiState.campaign.campaignSelected = _.random(1,1999);\n// this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n\n// var b: IUiState = {\n// uiSideProps: _.random(1,1222)\n// }\n// this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: b}))\n\n" }, { "path": "src/app/campaigns/campaign-name.ts", "content": "import {Component, ChangeDetectionStrategy, Output, EventEmitter} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\n\n@Component({\n selector: 'campaign-name',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n

    Select your campaign name

    \n \n `,\n})\nexport class CampaignName extends Compbaser {\n\n constructor(private yp: YellowPepperService) {\n super();\n }\n\n @Output()\n onNext:EventEmitter = new EventEmitter();\n\n\n m_campaignName: string = '';\n\n public get getCampaignNameChanged(): string {\n return this.m_campaignName;\n }\n\n _onKeyDown(event:KeyboardEvent){\n if (event.keyCode==13){\n this.onNext.emit();\n }\n }\n\n ngOnInit() {\n }\n\n destroy() {\n var uiState:IUiState = {\n campaign: {\n campaignCreateName: this.m_campaignName\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n\n}" }, { "path": "src/app/campaigns/campaign-orientation.ts", "content": "import {Component, EventEmitter, forwardRef, Inject, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable, Observer} from \"rxjs\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\nexport enum OrientationEnum {\n HORIZONTAL,\n VERTICAL\n}\n\n// export type OrientationConst = \"HORIZONTAL\" | \"VERTICAL\";\n\n\n@Component({\n selector: 'campaign-orientation',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .defaultOpacity {\n opacity: 0.6;\n cursor: pointer;\n }\n\n .selectedOrientation {\n opacity: 1 !important;\n }\n `],\n template: `\n {{me}}\n

    screen orientation

    \n
    \n \n \n \n \n \n
    \n \n \n \n
    \n
    \n `\n})\n\nexport class CampaignOrientation extends Compbaser {\n\n m_orientation: OrientationEnum;\n OrientationEnum = OrientationEnum;\n _nextClick: Observer;\n\n constructor(@Inject(forwardRef(() => YellowPepperService)) private yp: YellowPepperService) {\n super();\n this.cancelOnDestroy(\n Observable.create(observer => {\n this._nextClick = observer\n }).map((i_orientation) => {\n this.m_orientation = i_orientation;\n return i_orientation;\n }).debounceTime(100)\n .subscribe(() => {\n var uiState: IUiState = {\n campaign: {\n campaignCreateOrientation: this.m_orientation\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onSelection.emit(this.m_orientation)\n }, (e) => {\n console.error(e)\n })\n )\n }\n\n @Output()\n onSelection: EventEmitter = new EventEmitter();\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-props-manager.ts", "content": "import {Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable} from \"rxjs\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n selector: 'campaign-props-manager',\n styles: [`\n ul {\n padding: 0\n }\n `],\n template: `\n {{me}}\n
      \n
      \n \n
      \n
      \n \n
      \n \n \n \n
      \n \n
      \n
      \n \n
      \n
      \n \n
      \n
      \n \n
      \n \n \n \n
      \n \n
      \n
    \n `,\n})\nexport class CampaignPropsManager extends Compbaser {\n\n constructor(private yp: YellowPepperService) {\n super();\n this.m_uiUserFocusItem$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n }\n\n m_uiUserFocusItemEnum = SideProps;\n m_uiUserFocusItem$: Observable;\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-props.ts", "content": "import {Component, Input} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Observable} from \"rxjs\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport * as _ from \"lodash\";\nimport {simpleRegExp} from \"../../Lib\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\n\nenum CampaignPlaylistModeEnum {\n SEQUENCER,\n SCHEDULER\n}\n\n@Component({\n selector: 'campaign-props',\n host: {\n '(input-blur)': 'listenUpdatedFormBlur($event)'\n },\n template: `\n
    \n
    \n
    \n
    \n
    \n
    \n campaign properties\n \n \n {{me}}\n
    \n
      \n
    • \n campaign id: \n {{m_campaignModel?.getCampaignId()}}\n
      • \n
    • \n kiosk mode\n
      \n \n \n
      \n
      • \n
    • \n
      \n \n \n
      \n
      • \n
    • \n Campaign playback mode:\n
      \n
      \n \n \n
      \n
      \n
      \n

      Sequencer (simple mode):

      \n

      Play timelines for this campaign in a continuous loop. It is easy to setup and simple to use

      \n
      \n
      \n

      Scheduler (advanced mode):

      \n

      Play timelines for this campaign only on specific times. For example, play Timeline A in the morning and Timeline B at night.

      \n
      \n
      • \n
    • \n
      \n \n
      \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n `,\n styles: [`\n .faded {\n opacity: 0.4;\n }\n\n .campaignPlayMode {\n font-size: 4em;\n width: 118px;\n }\n\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n\n i {\n width: 20px;\n }\n `]\n})\nexport class CampaignProps extends Compbaser {\n\n /**\n * In this example we demonstrate two ways we can bind to the store values:\n *\n * 1. m_campaignModel$ via Observable subscription using async into the template: [ngClass]=\"{faded: ((m_campaignModel$ | async)?.getCampaignPlaylistMode() == 1)}\" ...\n * 2. campaignModel direct grabbing the campaignModel from the store and doing a loop over keys: _.forEach(this.formInputs, (value, key: string) => { ...\n *\n * We also demoing here two ways of upding store:\n * 1. reacting to input changes both via blur\n * 2. reacting to the Observable of statusChanges\n **/\n\n m_campaignModel: CampaignsModelExt;\n m_campaignModel$: Observable;\n private formInputs = {};\n m_contGroup: FormGroup;\n CampaignPlaylistModeEnum = CampaignPlaylistModeEnum;\n\n constructor(private fb: FormBuilder, private ngmslibService: NgmslibService, private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_contGroup = fb.group({\n 'campaign_name': ['', [Validators.required, Validators.pattern(simpleRegExp)]],\n 'campaign_playlist_mode': [0],\n 'kiosk_mode': [0]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n\n this.listenUpdatedFormReactive();\n\n // example 1: subscribe to store slice via subscription and and set to local member campaignModel\n this.cancelOnDestroy(\n this.yp.listenCampaignSelected()\n .subscribe((campaign: CampaignsModelExt) => {\n this.m_campaignModel = campaign;\n this.renderFormInputs();\n this.renderFormInputsReactive();\n }, (e) => {\n console.error(e)\n })\n );\n\n // example 2: hook to store slice observable and pipe to async in template\n this.m_campaignModel$ = this.yp.listenCampaignValueChanged()\n\n }\n\n _onChangePlaylistMode(mode: number) {\n switch (mode) {\n case CampaignPlaylistModeEnum.SEQUENCER: {\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'campaign_playlist_mode', String(mode));\n break;\n }\n case CampaignPlaylistModeEnum.SCHEDULER: {\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'campaign_playlist_mode', String(mode));\n this.rp.checkAndCreateCampaignTimelineScheduler(this.m_campaignModel.getCampaignId());\n break;\n }\n }\n\n this.rp.reduxCommit();\n\n }\n\n // example 1 on input update via manually for looping\n private renderFormInputs() {\n if (!this.m_campaignModel)\n return;\n _.forEach(this.formInputs, (value, key: string) => {\n let data = this.m_campaignModel.getKey(key);\n data = StringJS(data).booleanToNumber();\n this.formInputs[key].setValue(data)\n });\n };\n\n // example 2 on input update via observable and patch value\n private renderFormInputsReactive() {\n this.cancelOnDestroy(\n this.yp.listenCampaignSelected()\n .subscribe((i_campaignModel: CampaignsModelExt) => {\n this.m_campaignModel = i_campaignModel;\n // var bb = this.m_campaignModel.toPureJs();\n // this.m_contGroup.patchValue(bb);\n }, (e) => console.error(e))\n );\n };\n\n // example on changes 1 blur\n listenUpdatedFormBlur(event) {\n this.saveToStore();\n }\n\n // example 2 on changes observable\n private listenUpdatedFormReactive() {\n this.cancelOnDestroy(\n this.m_contGroup.statusChanges\n .filter(valid => valid === 'VALID')\n .withLatestFrom(this.m_contGroup.valueChanges, (valid, value) => value)\n .debounceTime(100)\n .subscribe(value => {\n // console.log('res ' + JSON.stringify(value) + ' ' + Math.random())\n this.saveToStore();\n }, (e) => console.error(e))\n )\n }\n\n @timeout()\n private saveToStore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n if (this.m_contGroup.status != 'VALID')\n return;\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'campaign_name', this.m_contGroup.value.campaign_name);\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'campaign_playlist_mode', this.m_contGroup.value.campaign_playlist_mode);\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'kiosk_timeline_id', 0); //todo: you need to fix this as zero is arbitrary number right now\n this.rp.setCampaignRecord(this.m_campaignModel.getCampaignId(), 'kiosk_mode', this.m_contGroup.value.kiosk_mode);\n this.rp.reduxCommit()\n }\n\n removeCampaign() {\n var campaignId = this.m_campaignModel.getCampaignId();\n var allCampaignIDs = this.rp.getStationCampaignIDs();\n if (_.indexOf(allCampaignIDs, campaignId) > -1)\n return bootbox.alert('Cannot remove this campaign as one or more stations are associated with it, be sure to remove them first.');\n bootbox.confirm({\n message: \"Are you sure you want to delete the campaign, there is NO WAY BACK?\",\n buttons: {\n confirm: {\n label: 'Yes',\n className: 'btn-success'\n },\n cancel: {\n label: 'No',\n className: 'btn-danger'\n }\n },\n callback: (result) => {\n if (result == true) {\n var campaignId = this.m_campaignModel.getCampaignId();\n this.rp.removeCampaignKeepBoards(campaignId);\n this.rp.reduxCommit();\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'campaign deleted ' + campaignId})}));\n }\n }\n });\n }\n\n destroy() {\n }\n}\n\n" }, { "path": "src/app/campaigns/campaign-resolution.ts", "content": "import {Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport * as screenTemplates from \"../../libs/screen-templates.json\";\nimport {OrientationEnum} from \"./campaign-orientation\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Observable, Observer} from \"rxjs\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {IUiState, IUiStateCampaign} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\n\n@Component({\n selector: 'campaign-resolution',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n

    screen resolution

    \n \n `,\n})\nexport class CampaignResolution extends Compbaser {\n\n m_screens: Array = [];\n private m_resolution: string;\n _nextClick: Observer;\n\n constructor(private yp: YellowPepperService) {\n super();\n this.getNewCampaignParams();\n\n this.cancelOnDestroy(\n Observable.create(observer => {\n this._nextClick = observer\n }).map((i_resolution) => {\n this.m_resolution = i_resolution;\n return i_resolution;\n }).debounceTime(100)\n .subscribe(() => {\n var uiState: IUiState = {\n campaign: {\n campaignCreateResolution: this.m_resolution\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onSelection.emit(this.m_resolution);\n }, (e) => {\n console.error(e)\n })\n )\n }\n\n @Once()\n private getNewCampaignParams() {\n return this.yp.getNewCampaignParmas()\n .subscribe((value: IUiStateCampaign) => {\n this.m_screens = [];\n var orientation:OrientationEnum = value.campaignCreateOrientation;\n for (var screenResolution in screenTemplates[orientation]) {\n this.m_screens.push(screenResolution)\n }\n }, (e) => {\n console.error(e)\n })\n }\n\n @Output()\n onSelection: EventEmitter = new EventEmitter();\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaign-sched-props.css", "content": ".carousel-control.left, .carousel-control.right {\n background-image: none;\n\n}\n\n#schedulePriority img:first-child {\n position: relative;\n top: 5px;\n left: 1px;\n}\n\n#schedulePriority img:last-child {\n position: relative;\n top: -4px;\n left: -2px;\n}\n\n#schedulePriority img:hover {\n cursor: pointer;\n}\n\n.offsetDurations {\n float: right;\n position: relative;\n top: -10px;\n}\n\n.carousel-control.left span, .carousel-control.right span {\n background-image: none;\n color: gray;\n font-size: 0.8em;\n}\n\n.carousel-control {\n height: 30px;\n}\n\n.carousel-control.left {\n position: absolute;\n left: -15px;\n top: 0px;\n\n}\n\n.carousel-control.right {\n position: absolute;\n top: 0px;\n}\n\ninput.ng-invalid {\n border-right: 10px solid red;\n}\n\n.material-switch {\n position: relative;\n padding-top: 10px;\n}\n\n.input-group {\n padding-top: 10px;\n}\n\ni {\n width: 20px;\n}" }, { "path": "src/app/campaigns/campaign-sched-props.html", "content": "
    \n
    \n
    \n
    \n
    \n
    \n scheduler properties\n \n \n {{me}}\n
    \n
    \n
    \n
    \n Conflict priority:\n
    \n \n \n \n
    \n
    \n\n Duration: \n \n \n \n\n \n \n \n
    \n
    \n Start time:\n \n \n \n \n\n \n \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n

    play once

    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n

    play daily

    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n

    play weekly

    \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n Select the days:\n\n
    \n \n \n \n \n
    \n \n {{day.day}} \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n
    \n\n
    \n
    \n\n
    \n\n
    \n
    " }, { "path": "src/app/campaigns/campaign-sched-props.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, ViewChild} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport * as _ from \"lodash\";\nimport {CampaignTimelineSchedulesModel} from \"../../store/imsdb.interfaces_auto\";\n\n\n@Component({\n selector: 'campaign-sched-props',\n //changeDetection: ChangeDetectionStrategy.OnPush,\n // host: {'(input-blur)': '_saveToStore($event)'},\n templateUrl: './campaign-sched-props.html',\n styleUrls: ['./campaign-sched-props.css']\n})\nexport class CampaignSchedProps extends Compbaser implements AfterViewInit {\n\n private m_campaignTimelineSchedulesModel: CampaignTimelineSchedulesModel;\n m_days: Array = [];\n m_startTime = 0;\n m_duration = 0;\n private formInputs = {};\n contGroup: FormGroup;\n private m_ONCE = '0';\n private m_DAILY = '1';\n private m_WEEKLY = '2';\n private m_PRIORITY_LOW = 2;\n private m_PRIORITY_MEDIUM = 1;\n private m_PRIORITY_HIGH = 0;\n private m_WEEKDAYS = [1, 2, 4, 8, 16, 32, 64];\n private m_WEEKDAYS_NAME = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\n\n constructor(private fb: FormBuilder, private el: ElementRef, private yp: YellowPepperService, private rp: RedPepperService, private cd: ChangeDetectorRef, private ngmslibService: NgmslibService) {\n super();\n this.contGroup = this.fb.group({\n 'once': [],\n 'weekly_start': ['1/1/2020'],\n 'weekly_end': ['1/1/2020'],\n 'daily_start': ['1/1/2020'],\n 'daily_end': ['1/1/2020']\n });\n _.forEach(this.contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.contGroup.controls[key] as FormControl;\n })\n }\n\n ngAfterViewInit() {\n this.cancelOnDestroy(\n this.yp.listenSchedulerValueChanged()\n .subscribe(i_campaignTimelineSchedulesModel => {\n this.m_campaignTimelineSchedulesModel = i_campaignTimelineSchedulesModel;\n this._renderConflictPriority();\n this._renderCarouselPosition();\n this._initTimePicker();\n this._initDays();\n this._renderFormInputs();\n }, (e) => {\n console.error(e)\n })\n )\n }\n\n _setPriority(i_value: number) {\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'priorty', i_value);\n this.rp.reduxCommit();\n }\n\n _onDurationChanged(i_value) {\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'duration', i_value);\n this.rp.reduxCommit();\n }\n\n _onStartTimeChanged(i_value) {\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'start_time', i_value);\n this.rp.reduxCommit();\n }\n\n private _renderCarouselPosition() {\n jQuery('#schedulerRepeatMode', this.el.nativeElement).carousel(Number(this.m_campaignTimelineSchedulesModel.getRepeatType()));\n }\n\n private _renderConflictPriority() {\n if (this.m_campaignTimelineSchedulesModel.getPriorty() == this.m_PRIORITY_LOW) {\n jQuery('#schedulePriority', this.el.nativeElement).find('img').eq(1).fadeTo('fast', 0.5).end().eq(2).fadeTo('fast', 0.5);\n } else if (this.m_campaignTimelineSchedulesModel.getPriorty() == this.m_PRIORITY_MEDIUM) {\n jQuery('#schedulePriority', this.el.nativeElement).find('img').eq(1).fadeTo('fast', 1).end().eq(2).fadeTo('fast', 0.5);\n } else {\n jQuery('#schedulePriority', this.el.nativeElement).find('img').eq(1).fadeTo('fast', 1).end().eq(2).fadeTo('fast', 1);\n }\n }\n\n private _renderFormInputs() {\n\n this.m_startTime = this.m_campaignTimelineSchedulesModel.getStartTime();\n this.m_duration = this.m_campaignTimelineSchedulesModel.getDuration();\n\n _.forEach(this.formInputs, (value, key: string) => {\n switch (key) {\n case 'once': {\n break;\n }\n case 'daily_start': {\n }\n case 'daily_end': {\n }\n case 'weekly_start': {\n }\n case 'weekly_end': {\n\n var startDate = this.m_campaignTimelineSchedulesModel.getStartDate().split(' ')[0];\n var endDate = this.m_campaignTimelineSchedulesModel.getEndDate().split(' ')[0];\n var xStart = new XDate(startDate).toString('yyyy-MM-dd');\n var xEnd = new XDate(endDate).toString('yyyy-MM-dd');\n this.formInputs['weekly_start'].setValue(xStart)\n this.formInputs['weekly_end'].setValue(xEnd)\n this.formInputs['daily_start'].setValue(xStart)\n this.formInputs['daily_end'].setValue(xEnd)\n this.formInputs['once'].setValue(xStart)\n return;\n }\n\n default: {\n }\n }\n let data = this.m_campaignTimelineSchedulesModel.getKey(key);\n data = StringJS(data).booleanToNumber();\n this.formInputs[key].setValue(data)\n });\n };\n\n private _initDays() {\n this.m_days = [];\n var weekDays = this.m_campaignTimelineSchedulesModel.getWeekDays();\n this.m_WEEKDAYS.forEach((v, i) => {\n var n = weekDays & v;\n this.m_days.push({\n day: this.m_WEEKDAYS_NAME[i],\n checked: n == v ? true : false\n })\n });\n this.cd.detectChanges()\n }\n\n private _initTimePicker() {\n jQuery('#timepickerDurationInput', this.el.nativeElement).timepicker({\n showSeconds: true,\n showMeridian: false,\n defaultTime: false,\n minuteStep: 1,\n secondStep: 1\n });\n jQuery('#timepickerTimeInput', this.el.nativeElement).timepicker({\n showSeconds: true,\n showMeridian: false,\n defaultTime: false,\n minuteStep: 1,\n secondStep: 1\n });\n }\n\n _onDaysChanged(checked, day: {}, i: number) {\n var weekBitsTotal = 0;\n this.m_days[i] = {\n day: this.m_WEEKDAYS_NAME[i],\n checked: checked\n }\n this.m_days.forEach((day, i) => {\n if (day.checked)\n weekBitsTotal = weekBitsTotal + this.m_WEEKDAYS[i]\n });\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'week_days', weekBitsTotal);\n this.rp.reduxCommit()\n }\n\n _saveDates(key, event: MouseEvent) {\n switch (key) {\n case 'daily_start':\n case 'weekly_start':\n case 'once': {\n var value = event.target['value'];\n var date = new XDate(value).toString('MM/dd/yyyy') + ' 12:00:00 AM'\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'start_date', date);\n return;\n }\n case 'weekly_end':\n case 'daily_end': {\n var value = event.target['value'];\n var date = new XDate(value).toString('MM/dd/yyyy') + ' 12:00:00 AM'\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'end_date', date);\n return;\n }\n }\n this.rp.reduxCommit()\n }\n\n @timeout(1000)\n _saveRepeat() {\n this._saveToStore();\n }\n\n @timeout()\n private _saveToStore(key?: string, event?: MouseEvent) {\n var carouselIndex = jQueryAny('#schedulerRepeatMode .active', this.el.nativeElement).index('#schedulerRepeatMode .item', this.el.nativeElement);\n this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'repeat_type', carouselIndex);\n this.rp.reduxCommit()\n }\n\n destroy() {\n jQuery('#timepickerDurationInput', this.el.nativeElement).off(\"hide.timepicker\");\n jQuery('#timepickerTimeInput', this.el.nativeElement).off(\"hide.timepicker\");\n }\n}\n\n\n\n// _listenTimepickerChanges() {\n// jQuery('#timepickerDurationInput', this.el.nativeElement).on(\"hide.timepicker\", (e:any) => {\n// var totalSeconds = this.rp.formatObjectToSeconds({\n// hours: e.time.hours,\n// minutes: e.time.minutes,\n// seconds: e.time.seconds\n// });\n// this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'duration', totalSeconds);\n// this.rp.reduxCommit();\n// });\n// jQuery('#timepickerTimeInput', this.el.nativeElement).on(\"hide.timepicker\", (e:any) => {\n// var totalSeconds = this.rp.formatObjectToSeconds({\n// hours: e.time.hours,\n// minutes: e.time.minutes,\n// seconds: e.time.seconds\n// });\n// this.rp.setCampaignsSchedule(this.m_campaignTimelineSchedulesModel.getCampaignTimelineId(), 'start_time', totalSeconds);\n// this.rp.reduxCommit();\n// });\n// }\n\n// var startTime = this.rp.formatSecondsToObject(this.m_campaignTimelineSchedulesModel.getStartTime());\n// var startTimeFormatted = `${startTime.hours}:${startTime.minutes}:${startTime.seconds}`;\n// this.formInputs['start_time'].setValue(startTimeFormatted);\n// jQuery('#timepickerTimeInput', this.el.nativeElement).timepicker('setTime', startTimeFormatted);\n// var duration = this.rp.formatSecondsToObject(this.m_campaignTimelineSchedulesModel.getDuration());\n// var durationFormatted = `${duration.hours}:${duration.minutes}:${duration.seconds}`;\n// this.formInputs['duration'].setValue(durationFormatted);\n// jQuery('#timepickerDurationInput', this.el.nativeElement).timepicker('setTime', durationFormatted);\n " }, { "path": "src/app/campaigns/campaign-story-timeline.ts", "content": "/**\n Github repo: https://github.com/AlexWD/ds-timeline-widget\n **/\n\nimport {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {CampaignTimelineBoardViewerChanelsModel, CampaignTimelineChanelsModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Observable} from \"rxjs/Observable\";\nimport {BlockService, IBlockData} from \"../blocks/block-service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {TimelineComponent} from \"./timeline/timeline.component\";\nimport {EventManager} from \"@angular/platform-browser\";\nimport {Lib} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {List, Map} from \"immutable\";\n\ninterface IChannelCollection {\n blocks: Array;\n channelId: number;\n}\n\ninterface IOutputs {\n id: number;\n name: string;\n color: string;\n selected: boolean;\n}\n\ninterface IChannels {\n id: number;\n viewerId: number;\n name: string;\n type: 'common' | 'normal';\n color: string;\n selected: boolean;\n}\n\ninterface IItem {\n id: number;\n type: 'output' | 'channel';\n resource: Object;\n title: string;\n start: number;\n duration: number;\n channel: number;\n selected: boolean;\n}\n\nexport interface ITimelineState {\n zoom: number;\n switch: boolean;\n duration: number;\n channels: Array;\n outputs: Array;\n items: Array;\n}\n\n@Component({\n selector: 'campaign-story-timeline',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(document:keyup)': 'handleKeyboardEvents($event,\"up\")',\n '(document:keydown)': 'handleKeyboardEvents($event,\"down\")',\n '(window:mouseup)': 'handleMouseEvents($event,\"up\")',\n '(window:mousedown)': 'handleMouseEvents($event,\"down\")'\n },\n template: `\n {{me}}\n
    \n 0\"\n [resources]=\"resources\"\n [state]=\"state\"\n (channelClicked)=\"onChannelClicked($event)\"\n (closedGaps)=\"itemsChanged($event)\"\n (alignedRight)=\"itemsChanged($event)\"\n (alignedLeft)=\"itemsChanged($event)\"\n (itemsClicked)=\"itemsClicked($event)\"\n (itemsResized)=\"itemsChanged($event)\"\n (itemAdded)=\"itemAdded($event)\"\n (channelAdded)=\"channelAdded($event)\"\n (resizedToLargest)=\"itemsChanged($event)\"\n (itemsMoved)=\"itemsMoved($event)\">\n \n
    \n `\n})\nexport class CampaignStoryTimeline extends Compbaser implements AfterViewInit {\n\n m_campaignTimelinesModels: List;\n campaignTimelinesModel: CampaignTimelinesModel;\n m_contPressed: 'down' | 'up' = 'up';\n m_selectedItems: Array = [];\n m_zoom = 1;\n\n // @Output()\n // stateChanged:EventEmitter = new EventEmitter();\n\n resources = {\n items: [\n {\n id: 1,\n name: 'logo',\n type: 'png',\n time: '0',\n size: '110KB',\n src: 'assets/img/doc-13-128.png'\n },\n {\n id: 2,\n name: 'samplesvg',\n type: 'svg',\n time: '0',\n size: '110KB',\n src: 'assets/img/svgexample.svg'\n }\n ],\n outputs: [\n {\n id: 1,\n name: 'logo',\n type: 'png',\n time: '0',\n size: '110KB',\n src: 'assets/img/doc-13-128.png'\n },\n {\n id: 2,\n name: 'samplesvg',\n type: 'svg',\n time: '0',\n size: '110KB',\n src: 'assets/img/svgexample.svg'\n }\n ]\n };\n state: Map;\n // = Map({\n // zoom: 1,\n // duration: -1,\n // channels: [],\n // outputs: [],\n // items: []\n // });\n\n stateTemp: ITimelineState = {\n zoom: 1,\n switch: false,\n duration: -1,\n channels: [],\n outputs: [],\n items: []\n }\n\n\n // id = 0\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private cd: ChangeDetectorRef, private bs: BlockService, private eventManager: EventManager) {\n super();\n\n this.cancelOnDestroy(\n this.yp.listenTimelineSelected()\n .map((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n this.campaignTimelinesModel = i_campaignTimelinesModel;\n console.log('selected timeline ' + i_campaignTimelinesModel.getCampaignTimelineId());\n return i_campaignTimelinesModel;\n })\n .mergeMap((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n return this.yp.listenChannelsOfTimeline(i_campaignTimelinesModel.getCampaignTimelineId())\n })\n .do((i_channels: List) => {\n return this.updateStateChannels(i_channels);\n })\n .combineLatest(\n this.yp.listenCampaignTimelineBoardViewerSelected(true),\n this.yp.listenSelectedTimelineChanged(),\n this.yp.ngrxStore.select(store => store.msDatabase.sdk.table_campaign_timeline_chanel_players))\n .map((i_data): List => {\n var i_campaignTimelinesModel = i_data[2];\n this.updateStateDuration(i_campaignTimelinesModel.getTimelineDuration());\n var i_campaignTimelineBoardViewerChanelsModel: CampaignTimelineBoardViewerChanelsModel = i_data[\"1\"]\n if (i_campaignTimelineBoardViewerChanelsModel)\n this.updateStateChannelSelection(i_campaignTimelineBoardViewerChanelsModel.getCampaignTimelineChanelId());\n return i_data[0];\n })\n .mergeMap((i_campaignTimelineChanelModels: List) => {\n var channelIds = [];\n i_campaignTimelineChanelModels.forEach((i_campaignTimelineChanelModel: CampaignTimelineChanelsModel) => {\n channelIds.push(i_campaignTimelineChanelModel.getCampaignTimelineChanelId());\n })\n return Observable.from(channelIds)\n .map((channelId) => {\n return this.yp.getChannelBlocks(channelId)\n .map((blocks) => {\n if (blocks.length > 0) {\n return {channelId, blocks};\n } else {\n return {channelId, blocks: [-1]};\n }\n })\n })\n .combineAll()\n })\n .mergeMap((i_channelArray: Array) => {\n return Observable.from(i_channelArray)\n .map((i_channelCollection: IChannelCollection) => {\n return Observable.from(i_channelCollection.blocks)\n .map((i_block) => {\n if (i_block == -1) return Observable.of(-1);\n return this.bs.getBlockData(i_block).map((block) => {\n return {block, channelId: i_channelCollection.channelId}\n })\n })\n .combineAll()\n })\n .combineAll()\n })\n .withLatestFrom(\n this.yp.ngrxStore.select(store => store.appDb.uiState.campaign.blockChannelSelected),\n (i_channels, i_blockIdSelected) => ({i_channels, i_blockIdSelected})\n )\n .subscribe(({i_channels, i_blockIdSelected}) => {\n this.updateStateBlocks(i_channels, i_blockIdSelected);\n this.applyState();\n this.cd.markForCheck();\n }, e => console.error(e))\n );\n }\n\n @ViewChild(TimelineComponent)\n timelineComponent: TimelineComponent;\n\n // @Input()\n // set duration(i_duration:number) {\n // this.stateTemp.duration = i_duration;\n // this.applyState();\n // }\n\n @Input()\n set zoom(i_zoom: number) {\n this.stateTemp.zoom = i_zoom;\n if (!this.timelineComponent) return;\n this.applyState();\n this.cd.detectChanges();\n this.timelineComponent.changeZoom(null);\n }\n\n @Input()\n set switchMode(i_mode: boolean) {\n this.stateTemp.switch = i_mode;\n this.applyState();\n }\n\n private updateStateChannelSelection(i_channelSelectedId: number) {\n this.stateTemp.channels.forEach((ch, index) => {\n if (ch.id == i_channelSelectedId) {\n ch.selected = true;\n } else {\n ch.selected = false;\n }\n this.stateTemp.channels[index] = ch;\n })\n }\n\n private updateStateDuration(i_duration: number) {\n console.log('CampaignStoryTimeline: upd duration ' + i_duration);\n this.stateTemp.duration = i_duration;\n }\n\n private updateStateChannels(i_channels: List) {\n var channels = []\n i_channels.forEach((i_channel: CampaignTimelineChanelsModel) => {\n var channel: IChannels = {\n id: i_channel.getCampaignTimelineChanelId(),\n viewerId: this.rp.getAssignedViewerIdFromChannelId(i_channel.getCampaignTimelineChanelId()),\n name: i_channel.getChanelName(),\n color: '#' + Lib.DecimalToHex(i_channel.getChanelColor()),\n type: 'normal',\n selected: false\n }\n channels.push(channel);\n });\n this.stateTemp.channels = channels;\n }\n\n private updateStateBlocks(i_channels, i_blockIdSelected) {\n var items = []\n _.forEach(i_channels, (i_channel) => {\n var channelId = i_channel[\"0\"].channelId;\n var blockList = this._sortBlock(i_channel);\n blockList.forEach((i_block) => {\n if (i_block == -1) return;\n var name;\n if (i_block.block.scene) {\n name = i_block.block.scene.name;\n } else if (i_block.block.resource) {\n name = i_block.block.resource.name;\n } else {\n name = i_block.block.blockName;\n }\n var block: IBlockData = i_block.block\n var item: IItem = {\n id: block.blockID,\n type: 'channel',\n channel: channelId,\n duration: block.duration,\n selected: i_blockIdSelected == block.blockID,\n title: name,\n start: block.offset,\n // uncomment for svg or png support\n // resource: {\n // type: 'svg',\n // src: \"assets/sample3.svg\"\n // }\n resource: {\n type: 'fa',\n src: i_block.block.blockFontAwesome\n }\n }\n items.push(item);\n });\n this.stateTemp.items = items;\n\n })\n\n }\n\n private applyState() {\n // if (this.stateTemp.duration == -1)\n // return;\n if (!this.state)\n return this.state = Map(this.stateTemp);\n const currentState = this.state.toJS();\n var equal = _.isEqual(currentState, this.stateTemp);\n if (equal) return;\n this.state = Map(this.stateTemp);\n // this.stateChanged.emit(currentState);\n }\n\n private _sortBlock(i_blockList) {\n var sorted = i_blockList.sort((a, b) => {\n if (a.block.offset < b.block.offset)\n return -1;\n if (a.block.offset > b.block.offset)\n return 1;\n if (a.block.offset === b.block.offset)\n return 0;\n })\n return sorted;\n }\n\n public closedGaps(){\n this.timelineComponent.closeGaps();\n }\n\n public resizeToLargest(){\n this.timelineComponent.resizeToLargest();\n }\n\n public alignLeft(){\n this.timelineComponent.alignLeft();\n }\n\n public alignRight(){\n this.timelineComponent.alignRight();\n }\n\n remove(id) {\n // let index = this.items.findIndex(item => item.id === id)\n // this.items.splice(index, 1)\n }\n\n reset() {\n // this.items = []\n }\n\n add() {\n // this.items.unshift({id: this.id++, name: 'item'})\n }\n\n itemsMoved(event) {\n event.forEach((item) => {\n // console.log(\"Item moved\", item);\n this.rp.setBlockTimelineChannelBlockNewPosition(item.channel, item.id, \"player_offset_time\", item.start);\n\n })\n this.rp.reduxCommit();\n }\n\n channelAdded(event) {\n // console.log(\"Channel added\", event);\n }\n\n onChannelClicked(event) {\n var uiState: IUiState = {\n campaign: {\n campaignTimelineChannelSelected: event.id,\n campaignTimelineBoardViewerSelected: event.id\n }\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n handleMouseEvents(event: KeyboardEvent, direction) {\n // con(event + ' ' + direction);\n }\n\n handleKeyboardEvents(event: KeyboardEvent, direction) {\n var key = event.which || event.keyCode;\n if (key != 17) return;\n this.m_contPressed = direction;\n return true;\n }\n\n itemsClicked(event) {\n // con('Total items clicks ' + event.length);\n if (this.m_contPressed == 'down' || event.length == 0) return;\n const item = event[event.length - 1];\n var uiState: IUiState = {\n campaign: {\n campaignTimelineBoardViewerSelected: item.channel,\n campaignTimelineChannelSelected: item.channel,\n blockChannelSelected: item.id\n },\n uiSideProps: SideProps.channelBlock\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n itemsChanged(event) {\n event.forEach((item) => {\n this.rp.setBlockTimelineChannelBlockNewPosition(item.channel, item.id, \"player_offset_time\", Math.round(item.start));\n this.rp.setBlockTimelineChannelBlockNewPosition(item.channel, item.id, \"player_duration\", Math.round(item.duration));\n })\n this.rp.reduxCommit();\n }\n\n itemAdded(event) {\n // console.log(\"Item Added\", event);\n }\n\n ngAfterViewInit() {\n\n\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/campaigns-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {Compbaser} from \"ng-mslib\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {AppdbAction, AuthenticateFlags} from \"../../store/actions/appdb.actions\";\nimport {PLACEMENT_CHANNEL} from \"../../interfaces/Consts\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {UserModel} from \"../../models/UserModel\";\n\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n // new animation, can't add due to aot limitation and angular language service bug\n // host: {\n // '[@routerTransition]': '',\n // '[style.display]': \"'block'\"\n // },\n // animations: [routerTransition()],\n providers: [BlockService, {\n provide: \"BLOCK_PLACEMENT\",\n useValue: PLACEMENT_CHANNEL\n }],\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n\n template: `\n campaigns-navigation\n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n `\n})\nexport class CampaignsNavigation extends Compbaser {\n userModel$;\n m_AuthenticateFlags = AuthenticateFlags;\n constructor(private actions: AppdbAction, private yp: YellowPepperService) {\n super();\n this.userModel$ = this.yp.listenUserModel();\n }\n\n destroy() {\n this.actions.resetCampaignSelection();\n }\n}\n\n" }, { "path": "src/app/campaigns/campaigns.ts", "content": "import {ChangeDetectionStrategy, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {ISliderItemData, Slideritem} from \"../../comps/sliderpanel/Slideritem\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState, IUiStateCampaign} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {PLACEMENT_CHANNEL} from \"../../interfaces/Consts\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {CampaignTimelineBoardViewerChanelsModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {IScreenTemplateData} from \"../../interfaces/IScreenTemplate\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'campaigns',\n template: `\n {{me}}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n})\n\nexport class Campaigns extends Compbaser {\n\n m_PLACEMENT_CHANNEL = PLACEMENT_CHANNEL;\n private m_selected_campaign_timeline_chanel_id = -1;\n private m_selected_campaign_timeline_id = -1;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private bs: BlockService) {\n super();\n\n this.cancelOnDestroy(\n //\n this.yp.listenTimelineSelected(true)\n .subscribe((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n if (!i_campaignTimelinesModel)\n return this.m_selected_campaign_timeline_id = -1;\n this.m_selected_campaign_timeline_id = i_campaignTimelinesModel.getCampaignTimelineId();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.listenCampaignTimelineBoardViewerSelected()\n .subscribe((i_campaignTimelineBoardViewerChanelsModel: CampaignTimelineBoardViewerChanelsModel) => {\n this.m_selected_campaign_timeline_chanel_id = i_campaignTimelineBoardViewerChanelsModel.getCampaignTimelineChanelId();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMapLoad()\n .subscribe((v) => {\n if (v && this.sliderItemCampaignEditor){\n this.sliderItemCampaignEditor.slideTo('locationMap','right');\n }\n }, (e) => console.error(e))\n\n )\n\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n @ViewChild('sliderItemCampaignEditor')\n sliderItemCampaignEditor:Slideritem;\n\n _onOpenScreenLayoutEditor() {\n }\n\n _onAddedContent(i_addContents: IAddContents) {\n this.cancelOnDestroy(\n //\n this.yp.getTotalDurationChannel(this.m_selected_campaign_timeline_chanel_id)\n .subscribe((i_totalChannelLength) => {\n var boilerPlate = this.bs.getBlockBoilerplate(i_addContents.blockCode);\n this.rp.createNewChannelPlayer(this.m_selected_campaign_timeline_chanel_id, i_addContents, boilerPlate, i_totalChannelLength);\n this.rp.updateTotalTimelineDuration(this.m_selected_campaign_timeline_id);\n this.rp.reduxCommit();\n }, (e) => console.error(e))\n )\n }\n\n _onLocationMapClosed(){\n this.sliderItemCampaignEditor.slideTo('campaignEditor','left')\n \n }\n \n _onAddedContentClosed(){\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onSlideChange(event: ISliderItemData) {\n if (event.direction == 'left' && event.to == 'campaignList') {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n return this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n // if (event.direction == 'right' && event.to == 'campaignEditor')\n // return this._createCampaign();\n }\n\n @Once()\n private _addTimelineToCampaign(i_screenTemplateData: IScreenTemplateData) {\n return this.yp.getNewCampaignParmas()\n .subscribe((value: IUiStateCampaign) => {\n var campaign_board_id = this.rp.getFirstBoardIDofCampaign(value.campaignSelected);\n var board_id = this.rp.getBoardFromCampaignBoard(campaign_board_id);\n var newTemplateData = this.rp.createNewTemplate(board_id, i_screenTemplateData.screenProps);\n var board_template_id = newTemplateData['board_template_id']\n var viewers = newTemplateData['viewers'];\n var campaign_timeline_id = this.rp.createNewTimeline(value.campaignSelected);\n this.rp.setCampaignTimelineSequencerIndex(value.campaignSelected, campaign_timeline_id, 0);\n this.rp.setTimelineTotalDuration(campaign_timeline_id, '0');\n this.rp.createCampaignTimelineScheduler(value.campaignSelected, campaign_timeline_id);\n var campaign_timeline_board_template_id = this.rp.assignTemplateToTimeline(campaign_timeline_id, board_template_id, campaign_board_id);\n var channels = this.rp.createTimelineChannels(campaign_timeline_id, viewers);\n this.rp.assignViewersToTimelineChannels(campaign_timeline_board_template_id, viewers, channels);\n this.rp.reduxCommit();\n }, (e) => {\n console.error(e)\n })\n }\n\n @Once()\n private _createCampaign(i_screenTemplateData: IScreenTemplateData) {\n return this.yp.getNewCampaignParmas()\n .subscribe((value: IUiStateCampaign) => {\n var campaignId = this.rp.createCampaignEntire(i_screenTemplateData.screenProps, i_screenTemplateData.name, value.campaignCreateResolution);\n var uiState: IUiState = {campaign: {campaignSelected: campaignId}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }, (e) => {\n console.error(e)\n })\n }\n}\n\n" }, { "path": "src/app/campaigns/channel-block-props.ts", "content": "import {AfterViewInit, Component, ElementRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {CampaignTimelineChanelPlayersModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {Lib} from \"../../Lib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {List} from \"immutable\";\nimport {CampaignTimelineChanelPlayersModelExt} from \"../../store/model/msdb-models-extended\";\nimport {StoryBoardListViewModeEnum} from \"../../store/store.data\";\n\n@Component({\n selector: 'channel-block-props',\n template: `\n {{me}}\n
    \n
    hours / minutes /seconds
    \n \n \n \n
    \n \n `,\n})\nexport class ChannelBlockProps extends Compbaser implements AfterViewInit {\n\n m_blockLengthHours = 0;\n m_blockLengthMinutes = 0;\n m_blockLengthSeconds = 0;\n\n private m_selectedCampaignTimelinesModel: CampaignTimelinesModel;\n private m_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModel\n\n constructor(private rp: RedPepperService, private yp: YellowPepperService, private el: ElementRef) {\n super();\n }\n\n ngAfterViewInit() {\n\n this.cancelOnDestroy(\n this.yp.listenTimelineSelected()\n .subscribe((i_selectedCampaignTimelinesModel) => {\n this.m_selectedCampaignTimelinesModel = i_selectedCampaignTimelinesModel;\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenBlockChannelSelected()\n .subscribe((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModel) => {\n this.m_campaignTimelineChanelPlayersModel = i_campaignTimelineChanelPlayersModel;\n var totalSeconds = this.m_campaignTimelineChanelPlayersModel.getPlayerDuration()\n var totalSecondsObj = Lib.FormatSecondsToObject(totalSeconds);\n this.m_blockLengthHours = totalSecondsObj.hours;\n this.m_blockLengthMinutes = totalSecondsObj.minutes;\n this.m_blockLengthSeconds = totalSecondsObj.seconds;\n jQuery('#blockLengthHours', this.el.nativeElement).val(this.m_blockLengthHours).trigger('change');\n jQuery('#blockLengthMinutes', this.el.nativeElement).val(this.m_blockLengthMinutes).trigger('change');\n jQuery('#blockLengthSeconds', this.el.nativeElement).val(this.m_blockLengthSeconds).trigger('change');\n }, (e) => console.error(e))\n )\n this._propLengthKnobsInit()\n }\n\n /**\n Update the blocks offset times according to current order of LI elements and reorder accordingly in msdb.\n @method _reOrderChannelBlocks\n @return none\n **/\n _reOrderChannelBlocks() {\n var self = this\n this.cancelOnDestroy(\n this.yp.getChannelBlockModels(this.m_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelId())\n .withLatestFrom(this.yp.ngrxStore.select(store => store.appDb.uiState.campaign.storyBoardListViewModeSelected))\n .filter(v => v[1] == StoryBoardListViewModeEnum.ListMode)\n .subscribe((v: any) => {\n var i_campaignTimelineChanelPlayersModels: List = v[0];\n var sorted = i_campaignTimelineChanelPlayersModels.sort((a, b) => {\n if (a.getPlayerOffsetTimeInt() < b.getPlayerOffsetTimeInt())\n return -1;\n if (a.getPlayerOffsetTimeInt() > b.getPlayerOffsetTimeInt())\n return 1;\n if (a.getPlayerOffsetTimeInt() === b.getPlayerOffsetTimeInt())\n return 0;\n })\n var playerOffsetTime: any = 0;\n sorted.forEach((i_campaignTimelineChanelPlayersModel) => {\n console.log(i_campaignTimelineChanelPlayersModel.getPlayerDuration() + ' ' + i_campaignTimelineChanelPlayersModel.getPlayerOffsetTime());\n var playerDuration = i_campaignTimelineChanelPlayersModel.getPlayerDuration();\n self.rp.setBlockRecord(i_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId(), 'player_offset_time', Lib.ToValidNumber(playerOffsetTime));\n console.log('player ' + i_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId() + ' offset ' + playerOffsetTime + ' playerDuration ' + playerDuration);\n playerOffsetTime = parseFloat(playerOffsetTime) + parseFloat(playerDuration);\n })\n self.rp.updateTotalTimelineDuration(this.m_selectedCampaignTimelinesModel.getCampaignTimelineId());\n self.rp.reduxCommit();\n\n }, (e) => console.error(e))\n )\n }\n\n\n /**\n Create the block length knobs so a user can set the length of the block with respect to timeline_channel\n @method _propLengthKnobsInit\n @return none\n **/\n _propLengthKnobsInit() {\n var self = this;\n jQuery('.knob', this.el.nativeElement).knob({\n /*change: function (value) {\n console.log(\"change : \" + value);\n var caller = this['i'][0].id;\n },*/\n release: function (value) {\n // console.log(this.$.attr('value'));\n // console.log(\"release : \" + value + ' ' + this['i'][0].id);\n var caller = this['i'][0].id;\n\n switch (caller) {\n case 'blockLengthHours': {\n self.m_blockLengthHours = parseInt(value)\n break;\n }\n case 'blockLengthMinutes': {\n self.m_blockLengthMinutes = parseInt(value)\n break;\n }\n case 'blockLengthSeconds': {\n self.m_blockLengthSeconds = parseInt(value)\n break;\n }\n }\n\n // log('upd: ' + self.m_block_id + ' ' + hours + ' ' + minutes + ' ' + seconds);\n if (self.m_blockLengthHours == 0 && self.m_blockLengthMinutes == 0 && self.m_blockLengthSeconds < 5)\n return;\n self.rp.setBlockTimelineChannelBlockLength(self.m_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId(), self.m_blockLengthHours, self.m_blockLengthMinutes, self.m_blockLengthSeconds);\n self.rp.reduxCommit();\n self._reOrderChannelBlocks();\n\n },\n /*cancel: function () {\n console.log(\"cancel : \", this);\n },*/\n draw: function () {\n if (this.$.data('skin') == 'tron') {\n\n var a = this.angle(this.cv) // Angle\n , sa = this.startAngle // Previous start angle\n , sat = this.startAngle // Start angle\n , ea // Previous end angle\n , eat = sat + a // End angle\n , r = 1;\n\n this.g.lineWidth = this.lineWidth;\n\n this.o.cursor\n && (sat = eat - 0.3)\n && (eat = eat + 0.3);\n\n if (this.o.displayPrevious) {\n ea = this.startAngle + this.angle(this.v);\n this.o.cursor\n && (sa = ea - 0.3)\n && (ea = ea + 0.3);\n this.g.beginPath();\n this.g.strokeStyle = this.pColor;\n this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);\n this.g.stroke();\n }\n\n this.g.beginPath();\n this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;\n this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);\n this.g.stroke();\n\n this.g.lineWidth = 2;\n this.g.beginPath();\n this.g.strokeStyle = this.o.fgColor;\n this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);\n this.g.stroke();\n\n return false;\n }\n }\n });\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/channel-props.ts", "content": "import {Component} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport * as _ from \"lodash\";\nimport {CampaignTimelineChanelsModel} from \"../../store/imsdb.interfaces_auto\";\nimport {Lib} from \"../../Lib\";\nimport {Subject} from \"rxjs/Subject\";\n\n@Component({\n selector: 'channel-props',\n host: {\n '(input-blur)': 'onFormChange($event)'\n },\n template: `\n
    \n
    \n
    \n
    \n
    \n
    \n channel properties\n \n \n {{me}}\n
    \n
      \n
    • \n Name:\n \n \n
      \n
      • \n
    • \n Channel Color:\n \n \n \n\n
      \n
      • \n\n
    • \n repeat to fit\n
      \n \n \n
      \n
      • \n
    • \n random order\n
      \n \n \n
      \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n `,\n styles: [`\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n\n i {\n width: 20px;\n }\n `]\n})\nexport class ChannelProps extends Compbaser {\n\n private channelModel: CampaignTimelineChanelsModel;\n private formInputs = {};\n // m_channel$: Observable;\n m_contGroup: FormGroup;\n m_color;\n m_channelColorChanged = new Subject();\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_contGroup = fb.group({\n 'repeat_to_fit': [0],\n 'chanel_name': [''],\n 'chanel_color': ['#000'],\n 'random_order': [0]\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n this.cancelOnDestroy(\n this.yp.listenChannelSelected()\n .subscribe((channel: CampaignTimelineChanelsModel) => {\n this.channelModel = channel;\n this.renderFormInputs();\n }, (e) => {\n console.error(e)\n })\n );\n this.cancelOnDestroy(\n //\n this.m_channelColorChanged\n .debounceTime(1000)\n .filter(v => v != '#123')\n .subscribe((i_color: any) => {\n this.updateSore()\n }, (e) => console.error(e))\n )\n\n }\n\n onFormChange(event) {\n this.updateSore();\n }\n\n @timeout()\n private updateSore() {\n // console.log(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n this.rp.setCampaignTimelineChannelRecord(this.channelModel.getCampaignTimelineChanelId(), 'random_order', this.m_contGroup.value.random_order);\n this.rp.setCampaignTimelineChannelRecord(this.channelModel.getCampaignTimelineChanelId(), 'repeat_to_fit', this.m_contGroup.value.repeat_to_fit);\n this.rp.setCampaignTimelineChannelRecord(this.channelModel.getCampaignTimelineChanelId(), 'chanel_name', this.m_contGroup.value.chanel_name);\n this.rp.setCampaignTimelineChannelRecord(this.channelModel.getCampaignTimelineChanelId(), 'chanel_color', Lib.ColorToDecimal(this.m_color));\n this.rp.reduxCommit()\n }\n\n private renderFormInputs() {\n if (!this.channelModel)\n return;\n _.forEach(this.formInputs, (value, key: string) => {\n let data = this.channelModel.getKey(key);\n data = StringJS(data).booleanToNumber();\n if (key == 'chanel_color')\n this.m_color = '#' + Lib.DecimalToHex(data);\n this.formInputs[key].setValue(data)\n });\n };\n\n destroy() {\n }\n}\n" }, { "path": "src/app/campaigns/dashboard-props.ts", "content": "import {Component, Input, ChangeDetectionStrategy} from \"@angular/core\";\nimport {FormControl, FormGroup, FormBuilder} from \"@angular/forms\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport * as _ from \"lodash\";\nimport {Observable} from \"rxjs\";\nimport {UserModel} from \"../../models/UserModel\";\n\n@Component({\n selector: 'dashboard-props',\n host: {\n '(input-blur)': 'onFormChange($event)'\n },\n template: `\n \n \n \n \n \n \n \n \n \n `\n\n})\nexport class DashboardProps extends Compbaser {\n\n // options: Object;\n // public userModel$: Observable;\n\n constructor(private yp: YellowPepperService) {\n super();\n // this.userModel$ = this.yp.ngrxStore.select(store => store.appDb.userModel);\n // this.options = {\n // chart: {\n // plotBackgroundColor: null,\n // plotBorderWidth: null,\n // plotShadow: false,\n // type: 'pie',\n // height: '250'\n // },\n // title : { text : 'simple chart' },\n // series: [{\n // data: [29.9, 71.5, 106.4, 129.2],\n // }]\n // };\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/campaigns/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {CampaignsNavigation} from \"./campaigns-navigation\";\nimport {DropdownModule, DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {Campaigns} from \"./campaigns\";\nimport {OrderListModule} from \"primeng/components/orderlist/orderlist\";\nimport {CampaignManager} from \"./campaign-manager\";\nimport {CampaignName} from \"./campaign-name\";\nimport {CampaignOrientation} from \"./campaign-orientation\";\nimport {CampaignLayout} from \"./campaign-layout\";\nimport {CampaignEditor} from \"./campaign-editor\";\nimport {CampaignResolution} from \"./campaign-resolution\";\nimport {CampaignList} from \"./campaign-list\";\nimport {Sequencer} from \"./sequencer\";\nimport {ScreenLayoutEditor} from \"./screen-layout-editor\";\nimport {ScreenLayoutEditorProps} from \"./screen-layout-editor-props\";\nimport {CampaignProps} from \"./campaign-props\";\nimport {TimelineProps} from \"./timeline-props\";\nimport {ChannelProps} from \"./channel-props\";\nimport {DashboardProps} from \"./dashboard-props\";\nimport {CampaignEditorProps} from \"./campaign-editor-props\";\nimport {CampaignSchedProps} from \"./campaign-sched-props\";\nimport {CampaignPropsManager} from \"./campaign-props-manager\";\nimport {CampaignChannels} from \"./campaign-channels\";\nimport {ChannelBlockProps} from \"./channel-block-props\";\nimport {CampaignDuration} from \"./campaign-duration\";\nimport {Ng2Bs3ModalModule} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {TimelineComponent} from \"./timeline/timeline.component\";\nimport {TimelineRulerComponent} from \"./timeline-ruler/timeline-ruler.component\";\nimport {CampaignStoryTimeline} from \"./campaign-story-timeline\";\nimport {HourCounter} from \"../../comps/hour-counter/hour-counter\";\nimport {DurationInputComponent} from \"../../comps/duration-input/duration-input.component\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: CampaignsNavigation},\n {path: ':folder/:id', component: CampaignsNavigation},\n {path: '**', component: CampaignsNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, DropdownModule, OrderListModule, Ng2Bs3ModalModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [CampaignsNavigation, Campaigns, CampaignManager, CampaignName, CampaignOrientation, CampaignLayout, TimelineComponent, TimelineRulerComponent, HourCounter,\n CampaignEditor, CampaignResolution, CampaignList, Sequencer, ScreenLayoutEditor, ScreenLayoutEditorProps, CampaignChannels, CampaignDuration, CampaignStoryTimeline, DurationInputComponent,\n CampaignPropsManager, CampaignProps, TimelineProps, ChannelProps, DashboardProps, CampaignEditorProps, CampaignSchedProps, ChannelBlockProps]\n})\nexport class CampaignsLazyModule {\n}" }, { "path": "src/app/campaigns/screen-layout-editor-props.ts", "content": "import {Component} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup} from \"@angular/forms\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport * as _ from \"lodash\";\nimport {BoardTemplateViewersModel} from \"../../store/imsdb.interfaces_auto\";\n\n@Component({\n selector: 'screen-layout-editor-props',\n //changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '(input-blur)': '_saveToStore($event)'\n },\n styles: [`\n /*:host > > > .ui-spinner-input {*/\n /*width: 60px;*/\n /*}*/\n\n input {\n width: 70px;\n }\n\n .spinLabel {\n display: inline-block;\n width: 70px;\n }\n `],\n template: `\n
    \n
    \n
    \n
    \n
    \n
    \n layout properties\n \n \n {{me}}\n
    \n
      \n
    • \n
      top:
      \n \n
      • \n
    • \n
      left:
      \n \n
      • \n
    • \n
      width:
      \n \n
      • \n
    • \n
      height:
      \n \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n `\n\n})\nexport class ScreenLayoutEditorProps extends Compbaser {\n\n private boardTemplateModel: BoardTemplateViewersModel;\n private formInputs = {};\n contGroup: FormGroup;\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n\n this.contGroup = fb.group({\n 'pixel_height': [0],\n 'pixel_width': [0],\n 'pixel_x': [0],\n 'pixel_y': [0]\n });\n _.forEach(this.contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.contGroup.controls[key] as FormControl;\n })\n this.cancelOnDestroy(\n this.yp.listenGlobalBoardSelectedChanged(true)\n .subscribe((boardTemplateModel: BoardTemplateViewersModel) => {\n if (!boardTemplateModel) {\n _.forEach(this.formInputs, (value, key: string) => {\n this.formInputs[key].disable();\n this.formInputs[key].setValue(0);\n });\n return;\n }\n _.forEach(this.formInputs, (value, key: string) => {\n this.formInputs[key].enable();\n });\n this.boardTemplateModel = boardTemplateModel;\n this.renderFormInputs();\n }, (e) => console.error(e))\n )\n }\n\n _saveToStore() {\n // console.log(this.contGroup.status + ' ' + JSON.stringify(this.contGroup.value));\n if (this.contGroup.status != 'VALID' || !this.boardTemplateModel)\n return;\n var props = {\n x: this.contGroup.value.pixel_x,\n y: this.contGroup.value.pixel_y,\n w: this.contGroup.value.pixel_width,\n h: this.contGroup.value.pixel_height\n }\n this.rp.setBoardTemplateViewer(-1, this.boardTemplateModel.getBoardTemplateViewerId(), props);\n this.rp.reduxCommit()\n }\n\n private renderFormInputs() {\n _.forEach(this.formInputs, (value, key: string) => {\n let data = this.boardTemplateModel.getKey(key);\n data = StringJS(data).booleanToNumber();\n this.formInputs[key].setValue(data)\n });\n };\n\n destroy() {\n }\n}" }, { "path": "src/app/campaigns/screen-layout-editor.ts", "content": "import {AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, ElementRef, EventEmitter, Output, ViewChild, ViewContainerRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {BoardTemplateViewersModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {Observable} from \"rxjs\";\nimport {OrientationEnum} from \"./campaign-orientation\";\nimport {ScreenTemplate} from \"../../comps/screen-template/screen-template\";\nimport * as _ from \"lodash\";\nimport {Lib} from \"../../Lib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport Any = jasmine.Any;\nimport {IScreenTemplateData} from \"../../interfaces/IScreenTemplate\";\n\ninterface selectTimelineBoardIdResult {\n campaignTimelinesModel: CampaignTimelinesModel,\n campaign_timeline_board_template_ids: number[]\n}\n\n@Component({\n selector: 'screen-layout-editor',\n template: `\n {{me}}\n
    \n \n
    \n
    \n \n

    Edit screen layout

    \n\n
    \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n `,\n})\nexport class ScreenLayoutEditor extends Compbaser implements AfterViewInit {\n\n RATIO = 4;\n m_canvas;\n m_canvasID;\n m_onOverlap;\n m_selectedViewerID;\n m_bgSelectedHandler;\n m_orientation: OrientationEnum;\n m_objectMovingHandler;\n m_resolution: string;\n m_screenTemplateData: IScreenTemplateData;\n m_global_board_template_id: number = -1;\n m_campaign_timeline_id: number = -1;\n m_campaign_timeline_board_template_id: number = -1;\n\n private boardTemplateModel: BoardTemplateViewersModel;\n private componentRef: ComponentRef;\n\n constructor(private yp: YellowPepperService, private componentFactoryResolver: ComponentFactoryResolver, private rp: RedPepperService, private el: ElementRef) {\n super();\n }\n\n @ViewChild('container', {read: ViewContainerRef})\n container: ViewContainerRef;\n\n /**\n Constructor\n @method initialize\n **/\n ngAfterViewInit() {\n this.cancelOnDestroy(\n this.yp.listenTimelineSelected()\n .concatMap((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n return this.yp.getTemplatesOfTimeline(i_campaignTimelinesModel.getCampaignTimelineId())\n .flatMap((i_campaign_timeline_board_template_ids) => {\n return Observable.of({\n campaign_timeline_board_template_ids: i_campaign_timeline_board_template_ids,\n campaignTimelinesModel: i_campaignTimelinesModel\n })\n })\n }).subscribe((result: selectTimelineBoardIdResult) => {\n this.m_campaign_timeline_id = result.campaignTimelinesModel.getCampaignTimelineId();\n this.m_campaign_timeline_board_template_id = result.campaign_timeline_board_template_ids[0];\n this.selectView(result.campaignTimelinesModel.getCampaignTimelineId(), this.m_campaign_timeline_board_template_id);\n }, (e) => {\n console.error(e)\n })\n )\n\n this.cancelOnDestroy(\n this.yp.listenGlobalBoardSelectedChanged()\n .subscribe((boardTemplateModel: BoardTemplateViewersModel) => {\n this.boardTemplateModel = boardTemplateModel;\n var props = {\n h: boardTemplateModel.getPixelHeight(),\n w: boardTemplateModel.getPixelWidth(),\n x: boardTemplateModel.getPixelX(),\n y: boardTemplateModel.getPixelY()\n }\n this._moveViewer(props)\n }, (e) => {\n console.error(e)\n })\n )\n }\n\n /**\n Move the object / viewer to new set of coords\n @method _moveViewer\n @param {Object} i_props\n **/\n _moveViewer(i_props) {\n var self = this;\n var viewer = self.m_canvas.getActiveObject();\n if (viewer) {\n viewer.setWidth(i_props.w / self.RATIO);\n viewer.setHeight(i_props.h / self.RATIO);\n viewer.set('left', i_props.x / self.RATIO);\n viewer.set('top', i_props.y / self.RATIO);\n self._enforceViewerMinimums(viewer);\n self._enforceViewerVisible();\n viewer.setCoords();\n self.m_canvas.renderAll();\n }\n }\n\n /**\n Listen to the removal of an existing screen division\n @method _listenRemoveDivision\n **/\n _onRemoveDivision() {\n var self = this;\n if (_.isUndefined(self.m_canvas))\n return;\n var totalViews = self.m_canvas.getObjects().length;\n if (totalViews < 2) {\n bootbox.alert('you must keep at least one viewable screen division');\n return;\n }\n var campaign_timeline_chanel_id = this.rp.removeTimelineBoardViewerChannel(self.m_selectedViewerID);\n this.rp.removeBoardTemplateViewer(self.m_campaign_timeline_board_template_id, self.m_selectedViewerID);\n this.rp.removeChannelFromTimeline(campaign_timeline_chanel_id);\n this.rp.removeBlocksFromTimelineChannel(campaign_timeline_chanel_id);\n self.m_canvas.remove(self.m_canvas.getActiveObject());\n self.m_canvas.renderAll();\n this.rp.reduxCommit();\n /*var viewer = self.m_canvas.item(0);\n var props = {\n y: viewer.get('top'),\n x: viewer.get('left'),\n w: viewer.get('width') * self.RATIO,\n h: viewer.get('height') * self.RATIO\n };\n self._saveToStore(viewer, props);\n BB.comBroker.fire(BB.EVENTS.VIEWER_REMOVED, this, this, {\n campaign_timeline_chanel_id: campaign_timeline_chanel_id\n });\n pepper.announceTemplateViewerEdited(self.m_campaign_timeline_board_template_id);\n */\n }\n\n /**\n Listen to the addition of a new viewer\n @method (totalViews - i)\n **/\n _onAddDivision() {\n var self = this;\n this.m_selectedViewerID = -1;\n self.m_canvas.deactivateAll().renderAll();\n var props = {\n x: 0,\n y: 0,\n w: 100,\n h: 100\n }\n var board_viewer_id = this.rp.createViewer(self.m_global_board_template_id, props);\n var campaign_timeline_chanel_id = this.rp.createTimelineChannel(self.m_campaign_timeline_id);\n this.rp.assignViewerToTimelineChannel(self.m_campaign_timeline_board_template_id, board_viewer_id, campaign_timeline_chanel_id);\n var viewer = new fabric.Rect({\n left: 0,\n top: 0,\n fill: '#ececec',\n id: board_viewer_id,\n hasRotatingPoint: false,\n borderColor: '#5d5d5d',\n stroke: 'black',\n strokeWidth: 1,\n borderScaleFactor: 0,\n lineWidth: 1,\n width: 100,\n height: 100,\n cornerColor: 'black',\n cornerSize: 5,\n lockRotation: true,\n transparentCorners: false\n });\n self.m_canvas.add(viewer);\n\n var props = {\n x: 0,\n y: 0,\n w: viewer.get('width') * self.RATIO,\n h: viewer.get('height') * self.RATIO\n }\n self._saveToStore(viewer, props);\n self.rp.reduxCommit();\n }\n\n /**\n Load the editor into DOM using the StackView using animation slider\n @method selectView\n **/\n selectView(i_campaign_timeline_id, i_campaign_timeline_board_template_id) {\n this.cancelOnDestroy(\n this.yp.getGlobalTemplateIdOfTimeline(i_campaign_timeline_board_template_id)\n .concatMap((i_board_template_id) => {\n this.m_global_board_template_id = i_board_template_id[0];\n return this.yp.getTemplateViewersScreenProps(i_campaign_timeline_id, i_campaign_timeline_board_template_id)\n })\n .subscribe((screenTemplateData: IScreenTemplateData) => {\n this.m_orientation = screenTemplateData.orientation;\n this.m_resolution = screenTemplateData.resolution;\n this.m_screenTemplateData = screenTemplateData;\n var w = parseInt(this.m_resolution.split('x')[0]) / this.RATIO;\n var h = parseInt(this.m_resolution.split('x')[1]) / this.RATIO;\n this._canvasFactory(w, h);\n this._listenObjectChanged();\n this._listenObjectsOverlap();\n this._listenBackgroundSelected();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Listen to re-order of screen division, putting selected on top\n @method _listenPushToTopDivision\n **/\n _onPushTop() {\n var self = this;\n var viewer = self.m_canvas.getActiveObject();\n if (!viewer)\n return;\n self.m_canvas.bringToFront(viewer);\n self._updateZorder();\n }\n\n /**\n Change the z-order of viewers in pepper\n @method _updateZorder\n **/\n _updateZorder() {\n var self = this;\n var viewers = self.m_canvas.getObjects();\n for (var i in viewers) {\n // log(viewers[i].get('id') + ' ' + i);\n this.rp.updateTemplateViewerOrder(viewers[i].get('id'), i);\n }\n var active = self.m_canvas.getActiveObject();\n self.m_canvas.setActiveObject(active);\n this.rp.reduxCommit();\n }\n\n /**\n Listen to re-order of screen division, putting selected at bottom\n @method _listenPushToBottomDivision\n **/\n _onPushBottom() {\n var self = this;\n var viewer = self.m_canvas.getActiveObject();\n if (!viewer)\n return;\n self.m_canvas.sendToBack(viewer);\n self._updateZorder();\n }\n\n /**\n Listen to changes on selecting the background canvas\n @method _listenBackgroundSelected\n **/\n _listenBackgroundSelected() {\n var self = this;\n self.m_bgSelectedHandler = function (e) {\n var uiState: IUiState = {campaign: {campaignTimelineBoardViewerSelected: -1}}\n self.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n };\n self.m_canvas.on('selection:cleared', self.m_bgSelectedHandler);\n }\n\n /**\n Listen to changes in viewer overlaps\n @method _listenObjectsOverlap\n **/\n _listenObjectsOverlap() {\n var self = this;\n self.m_onOverlap = function (options) {\n options.target.setCoords();\n self.m_canvas.forEachObject(function (obj) {\n if (obj === options.target) return;\n obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);\n });\n }\n\n self.m_canvas.on({\n 'object:moving': self.m_onOverlap,\n 'object:scaling': self.m_onOverlap,\n 'object:rotating': self.m_onOverlap\n });\n }\n\n /**\n Create the canvas to render the screen division\n @method _canvasFactory\n @param {Number} i_width\n @param {Number} i_height\n **/\n _canvasFactory(i_width, i_height) {\n var self = this;\n var offsetH = i_height / 2;\n var offsetW = (i_width / 2) + 30;\n this.m_canvasID = _.uniqueId('screenLayoutEditorCanvas');\n jQuery('#screenLayoutEditorCanvasWrap', this.el.nativeElement).append(`\n
    \n ${this.m_resolution.split('x')[0]}px x ${this.m_resolution.split('x')[1]}px \n \n \n \n
    `);\n this.m_canvas = new fabric.Canvas(this.m_canvasID);\n this.m_canvas.selection = false;\n let factory = this.componentFactoryResolver.resolveComponentFactory(ScreenTemplate);\n this.componentRef = this.container.createComponent(factory);\n this.m_screenTemplateData.scale = 4;\n this.componentRef.instance.setTemplate = this.m_screenTemplateData;\n var rects = this.componentRef.instance.getDivisions();\n\n for (var i = 0; i < rects.length; i++) {\n var rectProperties: any = rects[i];\n var rect: any = new fabric.Rect({\n left: rectProperties.x.baseVal.value,\n top: rectProperties.y.baseVal.value,\n fill: '#ececec',\n id: jQuery(rectProperties).data('campaign_timeline_board_viewer_id'),\n hasRotatingPoint: false,\n borderColor: '#5d5d5d',\n stroke: 'black',\n strokeWidth: 1,\n borderScaleFactor: 0,\n width: rectProperties.width.baseVal.value,\n height: rectProperties.height.baseVal.value,\n cornerColor: 'black',\n cornerSize: 5,\n lockRotation: true,\n transparentCorners: false\n });\n this.m_canvas.add(rect);\n\n //rect.on('selected', function () {\n // log('object selected a rectangle');\n //});\n }\n\n //this.m_canvas.on('object:moving', function (e) {\n // log('savings: ' + this.m_global_board_template_id);\n //});\n\n setTimeout(function () {\n if (!self.m_canvas)\n return;\n self.m_canvas.setHeight(i_height);\n self.m_canvas.setWidth(i_width);\n self.m_canvas.renderAll();\n }, 500);\n\n }\n\n /**\n Make sure that at least one screen division is visible within the canvas\n @method _enforceViewerVisible\n **/\n _enforceViewerVisible() {\n var self = this;\n var pass = 0;\n var viewer;\n self.m_canvas.forEachObject(function (o) {\n viewer = o;\n if (pass)\n return;\n if (o.get('left') < (0 - o.get('width')) + 20) {\n } else if (o.get('left') > self.m_canvas.getWidth() - 20) {\n } else if (o.get('top') < (0 - o.get('height') + 20)) {\n } else if (o.get('top') > self.m_canvas.getHeight() - 20) {\n } else {\n pass = 1;\n }\n });\n if (!pass && viewer) {\n viewer.set({left: 0, top: 0}).setCoords();\n viewer.setCoords();\n self.m_canvas.renderAll();\n bootbox.alert({\n message: \"you must keep at least one viewable screen division\",\n title: \"screen division position reset\"\n });\n var props = {\n x: viewer.get('top'),\n y: viewer.get('left'),\n w: viewer.get('width') * self.RATIO,\n h: viewer.get('height') * self.RATIO\n }\n self._saveToStore(viewer, props);\n }\n }\n\n /**\n Enforce minimum x y w h props\n @method this._enforceViewerMinimums(i_viewer);\n @param {Object} i_rect\n **/\n _enforceViewerMinimums(i_viewer) {\n var MIN_SIZE = 50;\n if ((i_viewer.width * this.RATIO) < MIN_SIZE || (i_viewer.height * this.RATIO) < MIN_SIZE) {\n i_viewer.width = MIN_SIZE / this.RATIO;\n i_viewer.height = MIN_SIZE / this.RATIO;\n var props = {\n x: i_viewer.get('top'),\n y: i_viewer.get('left'),\n w: MIN_SIZE,\n h: MIN_SIZE\n }\n this._saveToStore(i_viewer, props);\n }\n }\n\n /**\n Listen to changes in a viewer changes in cords and update pepper\n @method i_props\n **/\n _listenObjectChanged() {\n var self = this;\n self.m_objectMovingHandler = function (e) {\n\n var o = e.target;\n if (o.width != o.currentWidth || o.height != o.currentHeight) {\n o.width = o.currentWidth;\n o.height = o.currentHeight;\n o.scaleX = 1;\n o.scaleY = 1;\n }\n\n self._enforceViewerMinimums(o);\n self._enforceViewerVisible();\n\n var x = Lib.ParseToFloatDouble(o.left) * self.RATIO;\n var y = Lib.ParseToFloatDouble(o.top) * self.RATIO;\n var w = Lib.ParseToFloatDouble(o.currentWidth) * self.RATIO;\n var h = Lib.ParseToFloatDouble(o.currentHeight) * self.RATIO;\n // var a = o.get('angle');\n var props = {\n w: w,\n h: h,\n x: x,\n y: y\n };\n // self.m_property.viewPanel(Elements.VIEWER_EDIT_PROPERTIES);\n //todo: props\n //self.m_dimensionProps.setValues(props);\n self.m_selectedViewerID = o.id;\n self._saveToStore(o, props);\n\n };\n\n // old code was wrapped in debouncer\n // self.m_objectMovingHandler = _.debounce(function (e) {\n // ...\n // }, 2000);\n\n self.m_canvas.on({\n // 'object:moving': self.m_objectMovingHandler,\n // 'object:scaling': self.m_objectMovingHandler,\n 'object:selected': self.m_objectMovingHandler,\n 'object:modified': self.m_objectMovingHandler\n });\n }\n\n /**\n Update Pepper with latest object dimensions\n @method _saveToStore\n @param {Object} i_props\n **/\n _saveToStore(i_viewer, i_props) {\n var uiState: IUiState = {campaign: {campaignTimelineBoardViewerSelected: i_viewer.get('id')}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n // console.log('Pepper ' + i_viewer.get('id') + ' ' + JSON.stringify(i_props));\n this.rp.setBoardTemplateViewer(this.m_campaign_timeline_board_template_id, i_viewer.get('id'), i_props);\n i_viewer.setCoords();\n this.m_canvas.renderAll();\n this.rp.reduxCommit();\n }\n\n /**\n Listen to selection of next viewer\n @method _listenSelectNextDivision\n **/\n _selectNextDivision() {\n var self = this;\n var viewer = self.m_canvas.getActiveObject();\n var viewIndex = self.m_canvas.getObjects().indexOf(viewer);\n var totalViews = self.m_canvas.getObjects().length;\n if (viewIndex == totalViews - 1) {\n self.m_canvas.setActiveObject(self.m_canvas.item(0));\n } else {\n self.m_canvas.setActiveObject(self.m_canvas.item(viewIndex + 1));\n }\n }\n\n @Output()\n onGoBack: EventEmitter = new EventEmitter();\n\n _goBack() {\n var uiState: IUiState = {\n uiSideProps: SideProps.miniDashboard,\n campaign: {\n campaignTimelineBoardViewerSelected: -1\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onGoBack.emit();\n }\n\n ngOnInit() {\n }\n\n destroy() {\n console.log('dest screen-layout-editor');\n var self = this;\n if (!_.isUndefined(self.m_canvas)) {\n self.m_canvas.off('selection:cleared', self.m_bgSelectedHandler);\n self.m_canvas.off({\n 'object:moving': self.m_objectMovingHandler,\n 'object:scaling': self.m_objectMovingHandler,\n 'object:selected': self.m_objectMovingHandler,\n 'object:modified': self.m_objectMovingHandler\n });\n self.m_canvas.off({\n 'object:moving': self.m_onOverlap,\n 'object:scaling': self.m_onOverlap,\n 'object:rotating': self.m_onOverlap\n });\n self.m_canvas.clear().renderAll();\n }\n // $('#screenLayoutEditorCanvasWrap').empty()\n self.m_canvasID = undefined;\n self.m_canvas = undefined;\n self.m_campaign_timeline_id = undefined;\n self.m_campaign_timeline_board_template_id = undefined;\n self.m_orientation = undefined;\n self.m_resolution = undefined;\n self.m_global_board_template_id = undefined;\n self.m_selectedViewerID = undefined;\n }\n}\n\n// this._listenPushToTopDivision();\n// this._listenPushToBottomDivision();\n// this._listenSelectNextDivision();\n// this.listenTo(this.options.stackView, BB.EVENTS.SELECTED_STACK_VIEW, function (e) {\n// if (e == this) {\n// if (this.m_dimensionProps == undefined) {\n// require(['DimensionProps'], function (DimensionProps) {\n// this.m_dimensionProps = new DimensionProps({\n// appendTo: Elements.VIEWER_DIMENSIONS,\n// showAngle: false\n// });\n// $(this.m_dimensionProps).on('changed', function (e) {\n// var props = e.target.getValues();\n// this._saveToStore(this.m_canvas.getActiveObject(), props);\n// this._moveViewer(props);\n// });\n// this._render();\n// });\n// } else {\n// this._render();\n// }\n// }\n// });" }, { "path": "src/app/campaigns/sequencer.ts", "content": "import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChildren} from \"@angular/core\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {CampaignTimelineBoardViewerChanelsModel, CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {ScreenTemplate} from \"../../comps/screen-template/screen-template\";\nimport {Observable, Subscriber, Subscription} from \"rxjs\";\nimport {IUiState, IUiStateCampaign} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {List} from \"immutable\";\nimport * as _ from \"lodash\";\nimport {ContextMenuService} from \"ngx-contextmenu\";\nimport {Once} from \"../../decorators/once-decorator\";\nimport {IScreenTemplateData} from \"../../interfaces/IScreenTemplate\";\nimport {Compbaser} from \"ng-mslib\";\n// import TweenLite = gsap.TweenLite;\n\n@Component({\n selector: 'sequencer',\n styles: [`\n #dragcontainer {\n padding-left: 0;\n margin-left: 0;\n vertical-align: middle;\n width: 2500px;\n overflow-y: hidden;\n }\n\n .dottedHR {\n height: 6px;\n width: 2500px;\n opacity: 0.6;\n position: relative;\n border-top: 12px dotted #c1c1c1;\n padding-bottom: 7px;\n top: 20px;\n }\n\n .draggableTimeline {\n float: left;\n margin: 10px;\n overflow-y: hidden;\n }\n\n `],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
    \n {{me}}\n

    total timelines: {{m_campaignTimelinesModels?.size}}

    \n
    \n
    \n \n \n
    \n \n \n timeline properties for {{item?.name}}\n \n \n edit layout\n next channel\n \n
    \n `\n})\nexport class Sequencer extends Compbaser {\n\n m_campaignTimelinesModels: List;\n m_screenTemplates$: Observable;\n private m_draggables;\n private m_thumbsContainer;\n private target;\n private x: number;\n private m_selectedScreenTemplate: ScreenTemplate;\n private m_selectedTimelineId: number;\n private m_campaignTimelineBoardViewerSelected: number = -1;\n private m_campaignTimelineChannelSelected: number = -1;\n private m_selectedCampaignId: number = -1;\n\n constructor(private el: ElementRef, private yp: YellowPepperService, private pepper: RedPepperService, private contextMenuService: ContextMenuService) {\n super();\n this.m_thumbsContainer = el.nativeElement;\n }\n\n @ViewChildren(ScreenTemplate)\n screenTemplatesQueryList: QueryList;\n\n\n trackByFn(index, item) {\n return item.campaignTimelineId;\n }\n\n ngAfterViewInit() {\n // auto select the timeline / division on component creation if need to\n\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.uiState.campaign.campaignTimelineChannelSelected)\n .filter(channelId => channelId != -1 && !_.isUndefined(this.m_selectedScreenTemplate))\n .subscribe((i_channelId) => {\n this._onDivisionDoubleClicked(i_channelId);\n })\n )\n\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.uiState.campaign)\n .take(1)\n .subscribe((i_campaign: IUiStateCampaign) => {\n if (i_campaign.timelineSelected != -1 && i_campaign.campaignTimelineBoardViewerSelected != -1) {\n this.tmpScreenTemplates.forEach((i_screenTemplate) => {\n if (i_screenTemplate.campaignTimelineId == i_campaign.timelineSelected) {\n this.m_selectedScreenTemplate = i_screenTemplate;\n this.m_selectedTimelineId = i_campaign.timelineSelected;\n this.m_campaignTimelineBoardViewerSelected = i_campaign.campaignTimelineBoardViewerSelected;\n this.m_campaignTimelineChannelSelected = i_campaign.campaignTimelineChannelSelected;\n this.m_selectedCampaignId = i_campaign.campaignSelected;\n i_screenTemplate.selectFrame();\n i_screenTemplate.selectDivison(i_campaign.campaignTimelineBoardViewerSelected)\n }\n })\n }\n }, (e) => console.error(e))\n )\n }\n\n _onContextClicked(cmd: string, screenTemplateData: IScreenTemplateData) {\n switch (cmd) {\n case 'edit': {\n this.onEditLayout.emit();\n break;\n }\n case 'nextch': {\n this.onSelectNextChannel()\n break;\n }\n }\n }\n\n public onContextMenu($event: MouseEvent, item: any): void {\n this.contextMenuService.show.next({\n event: $event,\n item: item,\n });\n $event.preventDefault();\n $event.stopPropagation();\n }\n\n @ViewChildren(ScreenTemplate) tmpScreenTemplates: QueryList;\n\n @Input()\n set setCampaignTimelinesModels(i_campaignTimelinesModels: List) {\n if (!i_campaignTimelinesModels)\n return;\n this.m_campaignTimelinesModels = i_campaignTimelinesModels;\n this.m_selectedCampaignId = this.m_campaignTimelinesModels.first().getCampaignId();\n\n this._sortTimelines((sortedTimelines: Array) => {\n this.m_screenTemplates$ = Observable.from(sortedTimelines)\n .map(i_campaignTimelinesModelsOrdered => {\n return this._getScreenTemplate(i_campaignTimelinesModelsOrdered)\n }).combineAll();\n\n setTimeout(() => {\n this._createSortable('#dragcontainer');\n }, 300)\n\n });\n }\n\n @Output()\n onEditLayout: EventEmitter = new EventEmitter();\n\n @Once()\n private _sortTimelines(i_cb: (sortedTimelines: Array) => void) {\n return Observable.from(this.m_campaignTimelinesModels.toArray())\n .switchMap((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n return this.yp.getCampaignTimelineSequencerIndex(i_campaignTimelinesModel.getCampaignTimelineId())\n .filter(v => v != -1)\n .map((index) => {\n return Observable.of({\n index: index,\n campaign: i_campaignTimelinesModel\n })\n })\n })\n .combineAll()\n .subscribe((i_orderedTimelines: any) => {\n var orderedTimelines = _.sortBy(i_orderedTimelines, [function (o) {\n return o.index;\n }]);\n i_cb(\n _.toArray(_.map(orderedTimelines, function (o) {\n return o['campaign'];\n }))\n );\n }, (e) => {\n console.error(e)\n })\n }\n\n _getScreenTemplate(i_campaignTimelinesModel: CampaignTimelinesModel): Observable {\n return this.yp.getTemplatesOfTimeline(i_campaignTimelinesModel.getCampaignTimelineId())\n .map((campaignTimelineBoardTemplateIds: Array) => {\n // for now return zero as we don't support multiple divisions per single timeline, yet\n return campaignTimelineBoardTemplateIds[0];\n }).switchMap((campaignTimelineBoardTemplateId) => {\n return this.yp.getTemplateViewersScreenProps(\n i_campaignTimelinesModel.getCampaignTimelineId(), campaignTimelineBoardTemplateId, i_campaignTimelinesModel.getTimelineName()\n );\n })\n }\n\n _onScreenTemplateSelected(event, screenTemplate: ScreenTemplate) {\n this.tmpScreenTemplates.forEach((i_screenTemplate) => {\n if (i_screenTemplate == screenTemplate) {\n if (this.m_selectedTimelineId != i_screenTemplate.m_screenTemplateData.campaignTimelineId) {\n i_screenTemplate.selectFrame();\n this.m_selectedScreenTemplate = i_screenTemplate;\n this.m_selectedTimelineId = i_screenTemplate.m_screenTemplateData.campaignTimelineId;\n this.m_campaignTimelineChannelSelected = -1;\n this.m_campaignTimelineBoardViewerSelected = -1;\n this._setAndNotifyIds();\n } else {\n i_screenTemplate.deselectDivisons();\n }\n var uiState: IUiState = {\n campaign: {\n campaignTimelineChannelSelected: -1,\n campaignTimelineBoardViewerSelected: -1\n }\n }\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this._notifyPropertySelect(SideProps.timeline);\n } else {\n i_screenTemplate.deSelectFrame();\n i_screenTemplate.deselectDivisons();\n }\n })\n\n }\n\n\n private _setAndNotifyIds() {\n var uiState: IUiState = {\n campaign: {\n campaignTimelineChannelSelected: this.m_campaignTimelineChannelSelected,\n campaignTimelineBoardViewerSelected: this.m_campaignTimelineBoardViewerSelected,\n timelineSelected: this.m_selectedTimelineId\n }\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n\n /**\n Create a sortable channel list\n @method _createSortable\n @param {Element} i_selector\n **/\n private _createSortable(i_selector) {\n var self = this;\n if (jQuery(i_selector).children().length == 0) return;\n var sortable = document.querySelector(i_selector);\n self.m_draggables = Draggable.create(sortable.children, {\n type: \"x\",\n bounds: sortable,\n edgeResistance: 1,\n dragResistance: 0,\n onPress: self._sortablePress,\n onDragStart: self._sortableDragStart,\n onDrag: self._sortableDrag,\n liveSnap: self._sortableSnap,\n zIndexBoost: true,\n onDragEnd () {\n var t = this.target,\n max = t.kids.length - 1,\n newIndex = Math.round(this.x / t.currentWidth);\n //newIndex += (newIndex < 0 ? -1 : 0) + t.currentIndex;\n var preIndex = newIndex;\n //alert(this.x);\n newIndex += t.originalIndex;\n if (newIndex === max) {\n t.parentNode.appendChild(t);\n } else {\n if (preIndex >= 0) t.parentNode.insertBefore(t, t.kids[newIndex + 1]);\n else t.parentNode.insertBefore(t, t.kids[newIndex]);\n }\n TweenLite.set(t.kids, {xPercent: 0, overwrite: \"all\"});\n TweenLite.set(t, {x: 0, color: \"\"});\n\n var orderedTimelines = self.reSequenceTimelines();\n // jQuery(self.m_thumbsContainer).empty();\n // BB.comBroker.getService(BB.SERVICES.CAMPAIGN_VIEW).populateTimelines(orderedTimelines);\n // var campaign_timeline_id = BB.comBroker.getService(BB.SERVICES.CAMPAIGN_VIEW).getSelectedTimeline();\n // self.selectTimeline(campaign_timeline_id);\n }\n }\n );\n }\n\n /**\n Reorder the timeline in the local msdb to match the UI order of the timeline thumbnails in the Sequencer\n @method reSequenceTimelines\n @return {Array} order of timelines ids\n **/\n reSequenceTimelines() {\n var self = this;\n var order = [];\n var timelines = jQuery('#dragcontainer', self.el.nativeElement).children().each(function (sequenceIndex) {\n var element = jQuery(this).find('[data-campaign_timeline_id]').eq(0);\n var campaign_timeline_id = jQuery(element).data('campaign_timeline_id');\n order.push(campaign_timeline_id);\n self.pepper.setCampaignTimelineSequencerIndex(self.m_selectedCampaignId, campaign_timeline_id, sequenceIndex);\n });\n this.pepper.reduxCommit();\n return order;\n }\n\n /**\n Sortable channel list on press\n @method _sortablePress\n **/\n private _sortablePress() {\n var t = this.target,\n i = 0,\n child = t;\n while (child = child.previousSibling)\n if (child.nodeType === 1) i++;\n t.originalIndex = i;\n t.currentWidth = jQuery(t).outerWidth();\n t.kids = [].slice.call(t.parentNode.children); // convert to array\n }\n\n /**\n Sortable drag channel list on press\n @method _sortableDragStart\n **/\n private _sortableDragStart() {\n TweenLite.set(this.target, {color: \"#88CE02\"});\n }\n\n /**\n Sortable drag channel list\n @method _sortableDrag\n **/\n private _sortableDrag() {\n var t = this.target,\n elements = t.kids.slice(), // clone\n // indexChange = Math.round(this.x / t.currentWidth), // round flawed on large values\n indexChange = Math.ceil(this.x / t.currentWidth),\n srcIndex = t.originalIndex,\n dstIndex = srcIndex + indexChange;\n // console.log('k ' + t.kids.length + ' s:' + srcIndex + ' d:' + indexChange + ' t:' + (dstIndex - srcIndex));\n if (srcIndex < dstIndex) { // moved right\n TweenLite.to(elements.splice(srcIndex + 1, dstIndex - srcIndex), 0.15, {xPercent: -140}); // 140 = width of screen layout widget\n TweenLite.to(elements, 0.15, {xPercent: 0});\n } else if (srcIndex === dstIndex) {\n elements.splice(srcIndex, 1);\n TweenLite.to(elements, 0.15, {xPercent: 0});\n } else { // moved left\n // ignore if destination > source index\n if ((indexChange < 0 ? indexChange * -1 : indexChange) > srcIndex)\n return;\n TweenLite.to(elements.splice(dstIndex, srcIndex - dstIndex), 0.15, {xPercent: 140}); // 140 = width of screen layout widget\n TweenLite.to(elements, 0.15, {xPercent: -10});\n }\n }\n\n /**\n snap channels to set rounder values\n @method _sortableSnap\n **/\n private _sortableSnap(y) {\n return y;\n /* enable code below to use live drag snapping */\n // var h = this.target.currentHeight;\n // return Math.round(y / h) * h;\n }\n\n @Once()\n _onDivisionDoubleClicked(i_campaign_timeline_board_viewer_id) {\n this.m_campaignTimelineBoardViewerSelected = i_campaign_timeline_board_viewer_id;\n this.m_selectedScreenTemplate.selectDivison(i_campaign_timeline_board_viewer_id)\n return this.yp.getChannelFromViewer(this.m_selectedTimelineId, i_campaign_timeline_board_viewer_id)\n .subscribe((result: any) => {\n this.m_campaignTimelineChannelSelected = result.channel;\n this._setAndNotifyIds()\n this._notifyPropertySelect(SideProps.channel);\n\n }, (e) => {\n console.error(e)\n })\n }\n\n private _notifyPropertySelect(i_type) {\n var uiState: IUiState = {uiSideProps: i_type}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n /**\n Select next channel\n @method selectNextChannel\n **/\n @Once()\n public onSelectNextChannel(): Subscription {\n if (!this.m_selectedScreenTemplate && this.screenTemplatesQueryList)\n this._onScreenTemplateSelected(null, this.screenTemplatesQueryList.first)\n var timeline_channel_id;\n return this.yp.getChannelsOfTimeline(this.m_selectedTimelineId)\n .subscribe((channelsIDs) => {\n if (this.m_campaignTimelineChannelSelected == -1) {\n timeline_channel_id = channelsIDs[0];\n } else {\n for (var ch in channelsIDs) {\n if (channelsIDs[ch] == this.m_campaignTimelineChannelSelected) {\n if (_.isUndefined(channelsIDs[parseInt(ch) + 1])) {\n timeline_channel_id = channelsIDs[0];\n } else {\n timeline_channel_id = channelsIDs[parseInt(ch) + 1];\n }\n }\n }\n }\n this.m_campaignTimelineChannelSelected = timeline_channel_id;\n this.getAssignedViewerIdFromChannelId(timeline_channel_id);\n }, (e) => {\n console.error(e)\n });\n }\n\n @Once()\n private getAssignedViewerIdFromChannelId(timeline_channel_id) {\n return this.yp.getAssignedViewerIdFromChannelId(timeline_channel_id)\n .subscribe((i_campaign_timeline_board_viewer_id) => {\n // note: workaround for when viewer is unassigned, need to investigate\n if (_.isUndefined(i_campaign_timeline_board_viewer_id))\n return;\n this.m_campaignTimelineBoardViewerSelected = i_campaign_timeline_board_viewer_id;\n this.m_selectedScreenTemplate.selectDivison(i_campaign_timeline_board_viewer_id)\n this._setAndNotifyIds();\n this._notifyPropertySelect(SideProps.channel);\n\n // self._removeBlockSelection();\n // self._addChannelSelection(timeline_channel_id);\n // BB.comBroker.getService(BB.SERVICES['SEQUENCER_VIEW']).selectViewer(screenData.campaign_timeline_id, screenData.campaign_timeline_board_viewer_id);\n // BB.comBroker.fire(BB.EVENTS.ON_VIEWER_SELECTED, this, screenData);\n // BB.comBroker.fire(BB.EVENTS.CAMPAIGN_TIMELINE_CHANNEL_SELECTED, this, null, self.m_selectedChannel);\n }, (e) => console.error(e));\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n\n\n" }, { "path": "src/app/campaigns/timeline/timeline.component.css", "content": "#container {\n height: 801px;\n overflow: visible;\n padding: 0;\n position: relative;\n}\n\n:host /deep/ .box {\n background-color: #a9a9a9;\n text-align: center;\n font-family: Asap, Avenir, Arial, sans-serif;\n width: 196px;\n height: 50px;\n line-height: 50px;\n color: black;\n position: absolute;\n top: 0;\n border: 1px solid black;\n z-index: 1000;\n list-style: none;\n display: flex;\n align-items: center;\n}\n\n:host /deep/ .fa-item {\n float: left;\n padding: 0 16px 0 10px;\n opacity: 0.8;\n}\n\n.box-image {\n user-drag: none;\n user-select: none;\n -moz-user-select: none;\n -webkit-user-drag: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n.item-title {\n white-space: nowrap;\n overflow: hidden;\n}\n\n:host /deep/ .ui-selected { background: #c7c7c7; }\n\n.ruler {\n height: 50px;\n}\n\n.ruler-container {\n padding-left: 0px;\n}\n\n.channel-titles {\n padding-right: 0px;\n /*width: 97px;*/\n}\n\n.channel-title {\n height: 50px;\n border: 1px solid black;\n background-color: #2d2d2d;\n color: #e0e0e0;\n font-weight: bold;\n line-height: 50px;\n padding-left: 10px;\n cursor: pointer;\n text-overflow: clip;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.common-channel {\n text-decoration: underline;\n}\n\n.channel-color {\n width: 10px;\n height: 10px;\n display: inline-block;\n}\n\n.channel-selected {\n background: #656565;\n}\n\n.timeline {\n padding-left: 0px;\n /*max-width: 1200px;*/\n overflow-x: auto;\n}\n\n:host /deep/ .timeline-row {\n position: absolute;\n border: 1px solid #454545;\n width: 100%;\n}\n\n:host /deep/ .output-row {\n background-color: #adadad;\n border: 1px solid #454545;\n width: 100%;\n}\n\n.timeline-container {\n\n}\n" }, { "path": "src/app/campaigns/timeline/timeline.component.html", "content": "
    \n
    \n \n \n \n \n Magnetic\n \n \n \n Switch\n Frozen\n \n\n
    \n
    \n \n \n \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n {{ output.name }}\n
    \n
    \n {{ channel.name }}\n
    \n
    \n
    \n\n
    \n \n
  • \n\n \n\n \n\n
    {{ item.title }}
    \n
    • \n     \n \n
  • \n\n \n\n \n\n
    {{ item.title }}
    \n
    • \n     \n
    \n
    \n
    \n
    \n
    \n

    Resources

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    NameTypeTotal timesize
    {{ resource.name }}{{ resource.type }}{{ resource.time }}{{ resource.size }}
    \n\n

    Outputs

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    NameTypeTotal timesize
    {{ resource.name }}{{ resource.type }}{{ resource.time }}{{ resource.size }}
    \n
    \n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n
    \n
    \n     \n \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n \n
    \n
    \n     \n \n
    \n
    \n
    \n \n \n
    \n \n
    \n
    \n     \n
    \n
    \n
    \n" }, { "path": "src/app/campaigns/timeline/timeline.component.spec.ts", "content": "/* tslint:disable:no-unused-variable */\nimport { async, ComponentFixture, TestBed } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { DebugElement } from '@angular/core';\n\nimport { TimelineComponent } from './timeline.component';\n\ndescribe('TimelineComponent', () => {\n let component: TimelineComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [ TimelineComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(TimelineComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/campaigns/timeline/timeline.component.ts", "content": "import { Component, OnInit, Input, AfterViewChecked, OnChanges, EventEmitter, Output } from '@angular/core';\n\ndeclare let $: any;\ndeclare let Draggable: any;\ndeclare let TweenLite: any;\n\n@Component({\n selector: 'app-timeline',\n templateUrl: './timeline.component.html',\n styleUrls: ['./timeline.component.css']\n})\nexport class TimelineComponent implements OnInit, AfterViewChecked, OnChanges {\n $container;\n\n ruler = undefined;\n dev = false;\n draggingItem;\n scrollPosition = 0;\n\n defaultState = {\n duration: 3600,\n gridWidth: 36000,\n gridHeight: 50,\n items: [],\n channels: [],\n outputs: [],\n selectedChannel: undefined,\n selectedItem: undefined,\n selectedOutput: undefined,\n frozen: false,\n magnetic: false,\n switch: false,\n zoom: 1\n };\n\n @Input() resources;\n @Input() state;\n\n @Output() itemsMoved = new EventEmitter();\n @Output() itemAdded = new EventEmitter();\n @Output() itemsClicked = new EventEmitter();\n @Output() itemsResized = new EventEmitter();\n\n @Output() channelAdded = new EventEmitter();\n @Output() channelClicked = new EventEmitter();\n\n @Output() outputAdded = new EventEmitter();\n @Output() outputClicked = new EventEmitter();\n\n @Output() closedGaps = new EventEmitter();\n @Output() resizedToLargest = new EventEmitter();\n @Output() alignedLeft = new EventEmitter();\n @Output() alignedRight = new EventEmitter();\n\n\n constructor() { }\n\n ngOnInit() {\n // reset item selection when the container is clicked\n this.$container.click((e) => {\n if (!$(e.target).hasClass('box') && !$(e.target).hasClass('box-image') && !$(e.target).hasClass('item-title')) {\n this.resetSelection();\n }\n });\n }\n\n ngOnChanges() {\n // ngOnChanges gets called first, so initialize here\n this.$container = $('#container');\n\n this.state = Object.assign({}, this.defaultState, this.state.toJS());\n\n this.initializeStateChanges();\n }\n\n initializeStateChanges() {\n // draw channels\n this.drawChannels();\n\n // initialize item positions\n this.state.items.map((item) => {\n item.left = item.start * (10 / this.state.zoom);\n item.width = item.duration * (10 / this.state.zoom);\n item.top = this.getChannelById(item.channel).top;\n item.overlapsLeft = [];\n item.overlapsRight = [];\n });\n }\n\n ngAfterViewChecked() {\n var self = this;\n this.state.items.map((item, i) => {\n if (item.$el === undefined) {\n\n\n var startX, startY;\n var companions;\n var lastOverlap = 0;\n\n item.$el = $(\"li[data-bid='\" + i + \"']\");\n\n if (item.selected) {\n item.$el.addClass('ui-selected');\n }\n\n var container = this.$container;\n\n item.draggable = Draggable.create(item.$el, {\n bounds: self.$container,\n edgeResistance: 1.0,\n type: \"x,y\",\n throwProps: false,\n lockAxis: false,\n x: 0,\n y: 0,\n liveSnap: {\n y: function(endValue) { return Math.round(endValue / self.state.gridHeight) * self.state.gridHeight; },\n x: function(endValue) {\n // magnetic snapping\n if (self.state.magnetic) {\n self.state.items.filter(filterItem => filterItem != item && filterItem.channel == item.channel).map((otherItem) => {\n if (endValue >= otherItem.left + otherItem.width - 5 &&\n endValue <= otherItem.left + otherItem.width + 5) {\n endValue = otherItem.left + otherItem.width;\n }\n\n if (endValue + item.width >= otherItem.left - 5 &&\n endValue + item.width <= otherItem.left + 5) {\n endValue = otherItem.left - item.width;\n }\n });\n }\n\n // only allow objects to stop at positions that represent whole numbers of seconds\n var timeValue = Math.round(endValue * self.state.zoom / 10);\n return timeValue * (10 / self.state.zoom);\n }\n },\n onRelease: function () {\n // emit click event for selected items on release\n var selectedItems = self.state.items.filter(i => i.selected);\n self.itemsClicked.emit(selectedItems);\n // console.log(\"Item clicked: \", selectedItems);\n },\n onPress: function(e) {\n // mutli-select functionality\n if (!e.ctrlKey && $(\".box.ui-selected\").length == 1) {\n self.resetSelection();\n }\n self.selectItem(item);\n e.stopPropagation();\n\n //when the user presses, we'll create an array (\"companions\") and populate it with all the OTHER elements that have the \".ui-selected\" class applied (excluding the one that's being dragged). We also record their x and y position so that we can apply the delta to it in the onDrag.\n var boxes = $(\".box.ui-selected\"),\n i = boxes.length;\n\n companions = [];\n startX = this.x;\n startY = this.y;\n\n while (--i > -1) {\n var boxId = $(boxes[i]).data('bid');\n if (boxes[i] !== this.target) {\n companions.push({\n e: e,\n selfId: self.state.items.indexOf(item),\n item: self.state.items[boxId],\n itemId: boxId,\n element: boxes[i],\n x: boxes[i]._gsTransform.x,\n y: boxes[i]._gsTransform.y,\n lastX: boxes[i]._gsTransform.x,\n lastY: boxes[i]._gsTransform.y\n });\n } else {\n self.state.items[boxId].selected = true;\n }\n }\n TweenLite.killTweensOf(\".box\");\n },\n onDrag: function() {\n\n // mutliselect movement\n var i = companions.length,\n deltaX = this.x - startX,\n deltaY = this.y - startY,\n companion;\n\n while (--i > -1) {\n companion = companions[i];\n\n self.moveItem(companion.item, companion.x + deltaX, companion.y + deltaY);\n\n if (!companion.item.draggable.hitTest('#container', \"100%\")) { // if the item is moved outside of the bounds, move it back\n self.moveItem(companion.item, companion.lastX, companion.lastY);\n } else {\n companion.lastX = companion.x + deltaX;\n companion.lastY = companion.y + deltaY;\n }\n\n // start the companion dragging with the original event\n self.state.items[companion.selfId].draggable.startDrag(companion.e);\n }\n\n // switch\n if (self.state.switch) {\n // self.state.items.filter(item => item.selected).map((selectedItem) => {\n // self.state.items.filter(item => !item.selected).map((otherItem) => {\n // if (selectedItem.channel == otherItem.channel) {\n // var selectedItemId = self.state.items.indexOf(selectedItem);\n //\n // var min = 0,\n // max = (selectedItem.channel.type == \"common\" ? 13000 : self.state.gridWidth) - otherItem.width;\n //\n // if (selectedItem.left >= otherItem.left + otherItem.width / 2 - 10 &&\n // selectedItem.left <= otherItem.left + otherItem.width / 2 + 10) {\n // self.moveItem(otherItem, Math.min(max, Math.max(min, selectedItem.left + selectedItem.width)), otherItem.top, 100);\n // }\n //\n // if (selectedItem.left + selectedItem.width >= otherItem.left + otherItem.width / 2 - 10 &&\n // selectedItem.left + selectedItem.width <= otherItem.left + otherItem.width / 2 + 10) {\n // self.moveItem(otherItem, Math.min(max, Math.max(min, selectedItem.left - otherItem.width)), otherItem.top, 100);\n // }\n // }\n // });\n // });\n\n self.state.items.filter(item => item.selected).map((selectedItem) => {\n self.state.items.filter(item => !item.selected).map((otherItem) => {\n if (selectedItem.channel == otherItem.channel) {\n if (selectedItem.overlapsLeft == undefined) {\n selectedItem.overlapsLeft = [];\n }\n\n if (selectedItem.overlapsRight == undefined) {\n selectedItem.overlapsRight = [];\n }\n\n if (selectedItem.draggable.hitTest(otherItem.$el)) {\n if (selectedItem.left <= otherItem.left &&\n selectedItem.overlapsLeft.indexOf(otherItem) === -1 &&\n selectedItem.overlapsRight.indexOf(otherItem) === -1\n ) {\n selectedItem.overlapsLeft.push(otherItem);\n }\n if (selectedItem.left > otherItem.left &&\n selectedItem.overlapsRight.indexOf(otherItem) === -1 &&\n selectedItem.overlapsLeft.indexOf(otherItem) === -1) {\n selectedItem.overlapsRight.push(otherItem);\n }\n }\n }\n });\n selectedItem.overlapsLeft.map((otherItem, idx) => {\n if (!selectedItem.draggable.hitTest(otherItem.$el, \"5%\")) {\n selectedItem.overlapsLeft.splice(idx, 1);\n }\n });\n selectedItem.overlapsRight.map((otherItem, idx) => {\n if (!selectedItem.draggable.hitTest(otherItem.$el, \"5%\")) {\n selectedItem.overlapsRight.splice(idx, 1);\n }\n });\n });\n\n self.state.items.filter(item => item.selected).map((selectedItem) => {\n selectedItem.overlapsLeft.map(otherItem => {\n var min = 0,\n max = (self.getChannelById(selectedItem.channel).type == \"common\" ? 13000 : self.state.gridWidth) - otherItem.width;\n\n if (selectedItem.left + selectedItem.width >= otherItem.left + otherItem.width - 10 &&\n selectedItem.left + selectedItem.width <= otherItem.left + otherItem.width + 10) {\n self.moveItem(otherItem, Math.min(max, Math.max(min, otherItem.left - selectedItem.width)), otherItem.top, 100);\n selectedItem.overlapsLeft = [];\n }\n });\n\n selectedItem.overlapsRight.map(otherItem => {\n var min = 0,\n max = (self.getChannelById(selectedItem.channel).type == \"common\" ? 13000 : self.state.gridWidth) - otherItem.width;\n if (selectedItem.left >= otherItem.left - 10 &&\n selectedItem.left <= otherItem.left + 10) {\n\n var newPos = otherItem.left + selectedItem.width;\n\n self.moveItem(otherItem, Math.min(max, Math.max(min, newPos)), otherItem.top, 100);\n selectedItem.overlapsRight = [];\n }\n });\n });\n }\n }\n })[0];\n\n //connect object to drag event listener to update position\n item.draggable.addEventListener(\"drag\", function() {\n item.left = this._gsTransform.x;\n item.start = item.left * self.state.zoom / 10;\n item.top = this._gsTransform.y;\n\n self.updateItemChannel(item);\n });\n\n item.draggable.addEventListener(\"dragend\", function() {\n var selectedItems = self.state.items.filter(i => i.selected);\n self.itemsMoved.emit(selectedItems);\n // console.log(\"Item Moved: \", selectedItems);\n });\n\n // set item initial position\n this.moveItem(item, item.left, item.top);\n\n // resize functionality\n var startWidth; // define a start width to calculate deltas for multi-resize\n $('.resizable').resizable({\n handles: 'e, w',\n start: function (event, ui) {\n var id = ui.originalElement.data('bid');\n var resizingItem = self.state.items[id];\n\n startWidth = resizingItem.width;\n // console.log('start: ' + startWidth);\n },\n resize: function (event, ui) {\n // var newWidth = Math.round(ui.size.width / 10) * 10;\n // $(this).width(newWidth);\n var id = ui.originalElement.data('bid');\n var resizingItem = self.state.items[id];\n\n resizingItem.width = ui.size.width;\n resizingItem.duration = ui.size.width * self.state.zoom / 10;\n var widthDelta = resizingItem.width - startWidth;\n\n // resizingItem.width = newWidth;\n // resizingItem.duration = newWidth * (self.state.zoom / 10);\n // var widthDelta = newWidth - startWidth;\n\n // move any companions\n self.state.items.filter((item) => item.selected).map((selectedItem) => {\n if (selectedItem != resizingItem) {\n selectedItem.width += widthDelta;\n selectedItem.duration = selectedItem.width * self.state.zoom / 10;\n }\n });\n // console.log('newWidth: ' + resizingItem.width);\n\n startWidth = resizingItem.width;\n },\n stop: function (event, ui) {\n // resizable modifies the left which messes with things, so we undo it and calculate the offsets\n var left = parseInt($(this).css('left'));\n var id = ui.originalElement.data('bid');\n var resizingItem = self.state.items[id];\n\n $(this).css({ left: 0 });\n\n self.moveItem(resizingItem, resizingItem.left + left, resizingItem.top);\n\n var selectedItems = self.state.items.filter(i => i.selected);\n\n self.itemsResized.emit(selectedItems);\n // console.log(\"Item resized: \" + selectedItems);\n }\n });\n\n // makes GSAP Draggable avoid clicks on the resize handles\n $('.ui-resizable-handle').attr('data-clickable', true);\n\n this.applyItemBounds();\n }\n });\n }\n\n timelineDurationChange(dur) {\n this.state.duration = dur;\n // console.log('new timeline duration: ', dur);\n this.updateContainerSize();\n }\n\n resetSelection() {\n $('.resizable').removeClass('ui-selected');\n this.state.items.map((item) => {\n item.selected = false;\n })\n }\n\n drawChannels() {\n this.$container.find(\".timeline-row\").remove();\n\n this.state.outputs.concat(this.state.channels).map((channel, i) => {\n var type = this.state.channels.indexOf(channel) !== -1 ? \"channel\" : \"output\";\n var resources;\n\n if (type == \"channel\") {\n resources = this.resources.items;\n } else {\n resources = this.resources.outputs;\n }\n // create element for channel and append it to the container\n\n channel.top = i * this.state.gridHeight;\n channel.$el = $(\"
    \").css({\n height: this.state.gridHeight - 1,\n top: channel.top,\n left: 0\n }).addClass('timeline-row').appendTo(this.$container);\n\n //add ondrop event listener for accepting item drops\n channel.$el[0].ondrop = (e) => {\n e.preventDefault();\n\n var data = resources[e.dataTransfer.getData(\"text\")];\n var offset = this.$container.offset();\n var left = e.x - offset.left;\n var top = i * this.state.gridHeight;\n\n this.addItem({\n resource: {\n src: data.src,\n type: data.type\n },\n title: data.name,\n type: type,\n left: left,\n width: 60 * (10 / this.state.zoom),\n channel: channel.id,\n top: top,\n draggable: undefined,\n $el: undefined,\n selected: false\n });\n };\n\n channel.$el[0].ondragover = (e) => {\n if (type == this.draggingItem) {\n e.preventDefault();\n }\n };\n });\n\n //set the container's size to match the grid, and ensure that the box widths/heights reflect the variables above\n this.updateContainerSize();\n\n this.applyItemBounds();\n }\n\n applyItemBounds() {\n this.state.items.map((item) => {\n if (item.draggable !== undefined) {\n if (item.type == 'output') {\n var bounds = {\n left: 0,\n top: 0,\n width: this.state.gridWidth,\n height: this.state.outputs.length * this.state.gridHeight\n };\n item.draggable.applyBounds(bounds);\n } else if (item.type == 'channel') {\n if (this.getChannelById(item.channel).type == \"common\") {\n item.draggable.applyBounds({\n top: 0,\n left: 0,\n width: 13000,\n height: this.$container.height()\n });\n } else {\n var bounds = {\n left: 0,\n top: this.state.outputs.length * this.state.gridHeight,\n width: this.state.gridWidth,\n height: this.state.channels.length * this.state.gridHeight\n };\n item.draggable.applyBounds(bounds);\n }\n }\n }\n });\n }\n\n onScroll(e) {\n this.scrollPosition = e.target.scrollLeft;\n }\n\n drag(e, type, resourceIndex) {\n e.dataTransfer.setData(\"text\", resourceIndex);\n this.draggingItem = type;\n }\n\n resizeToLargest() {\n var largest = this.state.items.reduce((accum, item) => {\n return Math.max(accum, item.width);\n }, 0);\n\n var resizedItems = this.state.items.filter(item => item.selected)\n .map((item) => {\n item.width = largest;\n item.duration = largest * this.state.zoom / 10;\n item.$el.css({ width: largest });\n return item;\n });\n\n this.resizedToLargest.emit(resizedItems);\n // console.log(\"Resized to largest\", resizedItems);\n }\n\n closeGaps() {\n var channel;\n this.state.channels.concat(this.state.outputs).map((c) => {\n if (c.selected) {\n channel = c.id;\n }\n });\n for (var i = 0; i < this.state.items.length; ++i) {\n var item = this.state.items[i];\n if (item.selected) {\n channel = item.channel;\n }\n }\n if (channel !== undefined) {\n // get the items in this channel and sort them left to right\n var groupedItems = this.state.items.filter((item) => {\n return item.channel == channel;\n }).sort((a, b) => {\n return a.left - b.left;\n });\n\n // place the channels\n var nextStartPos = 0;\n groupedItems.map((item, i) => {\n this.moveItem(item, nextStartPos, item.top);\n nextStartPos += item.width;\n });\n this.closedGaps.emit(groupedItems);\n // console.log(\"Closed gaps\", groupedItems);\n }\n }\n\n alignLeft() {\n var leftAlign = this.state.items.filter((item) => item.selected)\n .reduce((accum, item) => Math.min(accum, item.left), Infinity);\n\n var alignedItems = this.state.items.filter(item => item.selected)\n .map((item, i) => {\n this.moveItem(item, leftAlign, item.top);\n return item;\n });\n\n this.alignedLeft.emit(alignedItems);\n // console.log(\"Aligned Left\", alignedItems);\n }\n\n alignRight() {\n var rightAlign = this.state.items.filter((item) => item.selected)\n .reduce((accum, item) => Math.max(accum, item.left + item.width), 0);\n\n var alignedItems = this.state.items.filter(item => item.selected)\n .map((item, i) => {\n this.moveItem(item, rightAlign - item.width, item.top);\n return item;\n });\n\n this.alignedRight.emit(alignedItems);\n // console.log(\"Aligned Right\", alignedItems);\n }\n\n changeZoom(e) {\n if (!this.state) return;\n var zoomFactor = 10 / this.state.zoom;\n\n this.state.items.map((item) => {\n item.width = item.duration * zoomFactor;\n this.moveItem(item, item.start * zoomFactor, item.top);\n });\n\n this.updateContainerSize();\n this.applyItemBounds();\n }\n\n toggleFrozen(e) {\n this.state.frozen = !this.state.frozen;\n\n if (this.state.frozen) {\n this.state.items.map((item) => {\n item.draggable.disable();\n });\n } else {\n this.state.items.map((item) => {\n item.draggable.enable();\n });\n }\n }\n\n updateItemChannel(item) {\n var newChannel = this.state.channels.filter((c) => c.top == item.top)[0];\n if (newChannel) {\n item.channel = newChannel.id;\n this.applyItemBounds();\n }\n }\n\n moveItem(item, x, y, dur = 0) {\n if (item) {\n x = (x === undefined) ? item.left : x;\n y = (y === undefined) ? item.top : y;\n\n TweenLite.to(item.$el[0], dur / 1000, { x: x, y: y });\n item.draggable.update(); // update the draggable position\n item.left = x;\n item.start = item.left * this.state.zoom / 10;\n item.top = y;\n\n this.updateItemChannel(item);\n }\n }\n\n addChannel(channel) {\n var newChannel = Object.assign(\n {},\n {\n id: -1,\n $el: undefined,\n name: \"CH\" + this.state.channels.length,\n type: \"normal\",\n color: '#00FFFF'\n },\n channel\n );\n this.state.channels.push(newChannel);\n this.drawChannels();\n\n this.channelAdded.emit(newChannel);\n // console.log(\"Channel Added: \" + newChannel);\n }\n\n addCommonChannel(channel) {\n var newChannel = Object.assign(\n {},\n {\n id: -1,\n $el: undefined,\n name: \"CH\" + this.state.channels.length,\n type: \"common\",\n color: '#0000FF'\n },\n channel\n );\n this.state.channels.push(newChannel);\n this.drawChannels();\n\n this.channelAdded.emit(newChannel);\n // console.log(\"Channel added: \" + newChannel);\n }\n\n addOutput(output) {\n var newOutput = Object.assign(\n {},\n {\n id: -1,\n name: \"Output\",\n color: \"#000\"\n },\n output\n );\n\n this.state.outputs.push(newOutput);\n\n // move all existing items on channels down one row\n this.state.items.filter((item) => item.type == 'channel').map((item) => {\n this.moveItem(item, item.left, item.top + this.state.gridHeight);\n });\n this.drawChannels();\n\n this.outputAdded.emit(newOutput);\n // console.log(\"Output added: \" + newOutput);\n }\n\n addItem(item) {\n var newItem = Object.assign(\n {},\n {\n id: -1,\n duration: item.width,\n start: item.left,\n overlapsLeft: [],\n overlapsRight: []\n },\n item\n );\n this.state.items.push(newItem);\n\n this.itemAdded.emit(newItem);\n // console.log(\"Item added: \" + newItem);\n }\n\n getChannelById(id) {\n for (var i = 0; i < this.state.channels.length; ++i) {\n if (this.state.channels[i].id == id)\n return this.state.channels[i];\n }\n return false;\n }\n\n updateContainerSize() {\n this.state.gridWidth = this.state.duration * (10 / this.state.zoom);\n TweenLite.set(\n this.$container, {\n height: (this.state.channels.length + this.state.outputs.length) * this.state.gridHeight + 1,\n width: this.state.gridWidth\n }\n );\n }\n\n selectChannel(i) {\n var channel = this.state.channels[i];\n this.resetObjectSelection();\n channel.selected = true;\n this.channelClicked.emit(channel);\n // console.log(\"Channel clicked: \" + channel);\n }\n\n selectItem(item) {\n //this.resetObjectSelection();\n this.state.channels\n .concat(this.state.outputs).map((o) => {\n o.selected = false;\n });\n item.selected = true;\n item.$el.addClass('ui-selected');\n }\n\n selectOutput(i) {\n var output = this.state.outputs[i];\n this.resetObjectSelection();\n output.selected = true;\n\n this.outputClicked.emit(output);\n // console.log(\"Output clicked: \" + output);\n }\n\n resetObjectSelection() {\n this.state.channels\n .concat(this.state.outputs)\n .map((o) => {\n o.selected = false;\n });\n\n this.resetSelection();\n }\n\n deleteChannel(i) {\n var deleted = this.state.channels.splice(i, 1)[0];\n deleted.$el.remove();\n\n this.drawChannels();\n }\n\n deleteOutput(i) {\n var deleted = this.state.outputs.splice(i, 1)[0];\n deleted.$el.remove();\n\n // move all existing items on channels up one row\n this.state.items.filter((item) => item.type == 'channel').map((item) => {\n this.moveItem(item, item.left, item.top - this.state.gridHeight);\n });\n\n this.drawChannels();\n }\n\n deleteItem(i) {\n var deleted = this.state.items.splice(i, 1)[0];\n }\n\n}\n" }, { "path": "src/app/campaigns/timeline-props.ts", "content": "import {ChangeDetectorRef, Component} from \"@angular/core\";\nimport {FormBuilder, FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport * as _ from \"lodash\";\nimport {CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {Observable} from \"rxjs\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {simpleRegExp} from \"../../Lib\";\n\n@Component({\n selector: 'timeline-props',\n host: {\n '(input-blur)': 'onFormChange($event)'\n },\n template: `\n
    \n
    \n
    \n
    \n
    \n
    \n timeline properties\n \n \n {{me}}\n
    \n
      \n
    • \n
      \n

      playback mode: scheduler

      \n
      \n
      \n

      playback mode: sequencer

      \n
      \n
      • \n
    • \n

      timeline length: {{m_duration}}

      \n
      • \n
    • \n
      \n \n \n
      \n
      \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n `,\n styles: [`\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n\n i {\n width: 20px;\n }\n `]\n})\nexport class TimelineProps extends Compbaser {\n\n private timelineModel: CampaignTimelinesModel;\n private formInputs = {};\n m_duration: string = '00:00:00'\n m_contGroup: FormGroup;\n m_campaignModel$: Observable;\n\n constructor(private fb: FormBuilder, private ngmslibService: NgmslibService, private yp: YellowPepperService, private rp: RedPepperService, private cd: ChangeDetectorRef) {\n super();\n this.m_contGroup = fb.group({\n 'timeline_name': ['', [Validators.required, Validators.pattern(simpleRegExp)]],\n });\n _.forEach(this.m_contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.m_contGroup.controls[key] as FormControl;\n })\n this.m_campaignModel$ = this.yp.listenCampaignValueChanged()\n\n this.cancelOnDestroy(\n this.yp.listenTimelineSelected()\n .subscribe((i_timelineModel: CampaignTimelinesModel) => {\n this.timelineModel = i_timelineModel;\n var totalDuration = parseInt(i_timelineModel.getTimelineDuration())\n var xdate = new XDate();\n this.m_duration = xdate.clearTime().addSeconds(totalDuration).toString('HH:mm:ss');\n this.renderFormInputs();\n this.cd.markForCheck();\n }, (e) => console.error(e))\n );\n\n }\n\n private onFormChange(event) {\n this.updateSore();\n }\n\n @timeout()\n private updateSore() {\n // con(this.m_contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.m_contGroup.value)));\n this.rp.setCampaignTimelineRecord(this.timelineModel.getCampaignTimelineId(), 'timeline_name', this.m_contGroup.value.timeline_name);\n this.rp.reduxCommit()\n }\n\n private renderFormInputs() {\n if (!this.timelineModel)\n return;\n _.forEach(this.formInputs, (value, key: string) => {\n let data = this.timelineModel.getKey(key);\n data = StringJS(data).booleanToNumber();\n this.formInputs[key].setValue(data)\n });\n };\n\n destroy() {\n }\n}\n" }, { "path": "src/app/campaigns/timeline-ruler/timeline-ruler.component.css", "content": "#ruler {\n border: 1px solid black;\n}\n\n#ruler-container {\n height: 50px;\n}\n" }, { "path": "src/app/campaigns/timeline-ruler/timeline-ruler.component.html", "content": "
    \n \n
    \n" }, { "path": "src/app/campaigns/timeline-ruler/timeline-ruler.component.spec.ts", "content": "/* tslint:disable:no-unused-variable */\nimport { async, ComponentFixture, TestBed } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { DebugElement } from '@angular/core';\n\nimport { TimelineRulerComponent } from './timeline-ruler.component';\n\ndescribe('TimelineRulerComponent', () => {\n let component: TimelineRulerComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [ TimelineRulerComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(TimelineRulerComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/app/campaigns/timeline-ruler/timeline-ruler.component.ts", "content": "import { Component, OnInit, Input, OnChanges } from '@angular/core';\n\n@Component({\n selector: 'app-timeline-ruler',\n templateUrl: './timeline-ruler.component.html',\n styleUrls: ['./timeline-ruler.component.css']\n})\nexport class TimelineRulerComponent implements OnInit, OnChanges {\n @Input() width;\n @Input() height;\n @Input() scale : number = 1.0 / 10;\n @Input() position : number;\n\n canvas : any;\n ctx;\n\n constructor() { }\n\n ngOnInit() {\n this.drawScale();\n\n window.onresize = () => this.drawScale();\n }\n\n ngOnChanges() {\n this.drawScale();\n }\n\n drawScale() {\n this.canvas = document.getElementById('ruler');\n this.ctx = this.canvas.getContext('2d');\n\n this.width = parseInt(this.width);\n\n this.canvas.width = Math.min(document.getElementById(\"ruler-container\").offsetWidth, this.width);\n this.canvas.height = this.height;\n\n this.ctx.fillStyle = 'rgb(50, 50, 50)';\n this.ctx.fillRect(0, 0, this.width, this.height);\n\n var minorStep = 10;\n var majorStep = 100;\n var minorLineHeight = 10;\n var majorLineHeight = 25;\n\n var pos = Number(this.position);\n\n var startPos;\n\n for (let i = -100; i <= 0;++i) {\n if ((pos + i) % majorStep == 0 || (pos + i) % minorStep == 0) {\n startPos = i;\n break;\n }\n }\n\n this.ctx.fillStyle = 'rgb(250, 250, 250)';\n this.ctx.font = '12px verdana';\n\n for (let i = startPos; i <= startPos + this.width + 100; i += minorStep) {\n var realPosition = pos + i;\n\n if (realPosition % majorStep == 0) { // draw major step\n this.ctx.fillRect(i, 50 - majorLineHeight, 1, majorLineHeight);\n var totalSeconds = realPosition * this.scale;\n var hours = Math.floor(totalSeconds / 60 / 60);\n totalSeconds -= hours * 3600;\n var minutes = Math.floor(totalSeconds / 60);\n totalSeconds -= minutes * 60;\n var seconds = totalSeconds;\n\n var displayHours = hours,\n displayMinutes = minutes < 10 ? \"0\" + +minutes : minutes,\n displaySeconds = seconds < 10 ? \"0\" + +seconds : seconds;\n\n // draw text\n\n this.ctx.fillText(`${displayHours}:${displayMinutes}:${displaySeconds}`, i, 15);\n } else if (realPosition % minorStep == 0) { // draw minor step\n\n this.ctx.fillRect(i, 50 - minorLineHeight, 1, minorLineHeight);\n }\n }\n }\n\n}\n" }, { "path": "src/app/dashboard/dash-panel-mini.html", "content": "{{me}}\n
    \n\n\n{{resellerName}}\n
    \n
    \n

    {{clock$ | async | date:'medium'}}

    \n
    \n

    mode: online

    \n
    \n
    \n
    Quick help:
    \n \n
    \n
    \n
    User: {{(m_userModel$ | async).getUser()}}
    \n
    Business id: {{(m_userModel$ | async).businessId()}}
    \n
    server : {{(m_userModel$ | async).getPartialDomain()}}
    \n
    app version: {{version}}
    \n
    framework version: {{ngVersion}}
    \n
    \n" }, { "path": "src/app/dashboard/dash-panel-mini.ts", "content": "import {AfterViewInit, Component, VERSION} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Observable} from \"rxjs/Observable\";\nimport * as packageJson from \"../../../package.json\";\n\n@Component({\n selector: 'dash-panel-mini',\n styles: [`\n a {\n font-size: 1.1em;\n }\n\n li {\n list-style-type: none;\n }\n\n `],\n templateUrl: './dash-panel-mini.html'\n})\nexport class DashPanelMini extends Compbaser implements AfterViewInit {\n clock$;\n m_userModel$;\n offlineDevMode: any = window['offlineDevMode'];\n version = packageJson.version;\n isBrandingDisabled: boolean = false;\n ngVersion = VERSION.full;\n resellerName = 'MediasSignage Inc.';\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n\n this.clock$ = Observable\n .interval(300)\n .startWith(1)\n .map(() => new Date());\n\n this.m_userModel$ = this.yp.listenUserModel();\n this.cancelOnDestroy(\n this.yp.isBrandingDisabled()\n .subscribe((v) => {\n this.isBrandingDisabled = v;\n if (!this.isBrandingDisabled)\n this.resellerName = this.rp.getUserData().resellerName;\n }, (e) => console.error(e))\n )\n }\n\n ngAfterViewInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/dashboard/dash-panel.html", "content": "{{me}}\n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n Tweets by @MediaSignage\n \n
    \n
    \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n time\n action\n \n \n \n \n \n \n \n \n \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n" }, { "path": "src/app/dashboard/dash-panel.ts", "content": "import {AfterViewInit, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {EFFECT_LOAD_FASTERQ_LINES, EFFECT_LOAD_STATIONS} from \"../../store/effects/appdb.effects\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {List} from \"immutable\";\nimport {StationModel} from \"../../models/StationModel\";\nimport {Observable} from \"rxjs/Observable\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\nimport {ACTION_LIVELOG_UPDATE} from \"../../store/actions/appdb.actions\";\n\n@Component({\n selector: 'dash-panel',\n styles: [`\n .twitter-timeline {\n width: 100% !important;\n }\n\n iframe {\n width: 100% !important;\n }\n `],\n templateUrl: './dash-panel.html'\n})\nexport class DashPanel extends Compbaser implements AfterViewInit {\n m_totalStationsConnected = 0;\n m_totalStationsDisconnected = 0;\n m_lastSave$;\n m_userModel$;\n m_scenes$;\n m_campaigns$;\n m_resources$;\n m_lines$;\n m_timelines$;\n m_liveLog:List;\n isBrandingDisabled: Observable;\n\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_lastSave$ = this.yp.ngrxStore.select(store => store.appDb.uiState.appSaved)\n this.m_userModel$ = this.yp.listenUserModel();\n this.m_scenes$ = this.yp.getScenes();\n this.m_campaigns$ = this.yp.getCampaigns();\n this.m_resources$ = this.yp.getResources();\n this.m_lines$ = this.yp.listenFasterqLines();\n this.m_timelines$ = this.yp.getTimelines();\n this.isBrandingDisabled = this.yp.isBrandingDisabled();\n this._listenStationsConnection();\n this._listenLoadLines();\n this._listenLiveLog();\n }\n\n _listenLiveLog() {\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.liveLog)\n .subscribe((i_liveLog) => {\n this.m_liveLog = i_liveLog;\n }, (e) => console.error(e))\n )\n }\n\n _listenLoadLines() {\n this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_FASTERQ_LINES, payload: {}})\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'updating remote stations status'})}));\n }\n\n _listenStationsConnection() {\n this.cancelOnDestroy(\n this.yp.listenStations()\n .map((i_stationModels: List) => {\n i_stationModels.forEach(i_stationModel => {\n if (i_stationModel.connection == 0) {\n this.m_totalStationsDisconnected++;\n } else {\n this.m_totalStationsConnected++;\n }\n });\n return i_stationModels;\n }).subscribe(() => {\n }, (e) => console.error(e))\n );\n this._loadStationData();\n }\n\n ngAfterViewInit() {\n var twitter = function (d: any, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';\n // if (!d.getElementById(id)) {\n js = d.createElement(s);\n js.id = id;\n js.src = p + \"://platform.twitter.com/widgets.js\";\n js.setAttribute('onload', \"twttr.events.bind('rendered',function(e) {});\");\n fjs.parentNode.insertBefore(js, fjs);\n // }\n }(document, \"script\", \"twitter-wjs\");\n this.setTwitterWidth();\n\n }\n\n _loadStationData() {\n this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_STATIONS, payload: {userData: this.rp.getUserData()}});\n }\n\n setTwitterWidth() {\n Observable.interval(400)\n .take(5)\n .subscribe(() => {\n jQuery('.twitter-timeline').css({width: '100%'});\n })\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/dashboard/dashboard-navigation.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'Dashboard',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n

    account dashboard

    \n \n `\n})\nexport class Dashboard implements AfterViewInit {\n\n constructor(private toastr: ToastsManager) {\n }\n\n ngAfterViewInit(){\n this.clearToasts();\n }\n\n @timeout(1000)\n clearToasts(){\n this.toastr.clearAllToasts();\n }\n}" }, { "path": "src/app/dashboard/server-avg.ts", "content": "import {ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {Http} from \"@angular/http\";\nimport * as _ from 'lodash';\nimport {Observable} from \"rxjs/Observable\";\nimport {Compbaser} from \"ng-mslib\";\n\n@Component({\n selector: 'server-avg',\n styles: [`\n chart {\n width: 100% !important;\n margin: 0 auto;\n display: block;\n }\n `],\n template: `\n
    \n \n
    \n >\n
    \n
    \n `\n})\nexport class ServerAvg extends Compbaser {\n _options;\n _chart: any;\n _ready = false;\n\n constructor(private _http: Http, private cd:ChangeDetectorRef) {\n super();\n this.serverStatus();\n this._options = {\n chart: {\n type: 'spline',\n height: 228,\n borderColor: '#d9d9d9',\n borderWidth: 1,\n marginRight: 10,\n },\n responsive: {\n rules: [{\n condition: {\n maxWidth: 500\n },\n chartOptions: {\n legend: {\n align: 'center',\n verticalAlign: 'bottom',\n layout: 'horizontal'\n },\n yAxis: {\n labels: {\n align: 'left',\n x: 0,\n y: -5\n },\n title: {\n text: null\n }\n },\n subtitle: {\n text: null\n },\n credits: {\n enabled: false\n }\n }\n }]\n },\n title: {\n text: ''\n },\n\n xAxis: {\n labels: {\n enabled: false\n },\n categories: []\n },\n credits: {\n enabled: false\n },\n yAxis: [{\n min: 0,\n title: { \n text: 'average cloud response'\n }\n }, {\n title: {\n text: 'measured in milliseconds'\n },\n opposite: true\n }],\n legend: {\n enabled: false,\n shadow: false\n },\n tooltip: {\n shared: true\n },\n plotOptions: {\n column: {\n grouping: false,\n shadow: false,\n borderWidth: 0\n }\n },\n series: [{data: [0]}]\n };\n }\n\n saveInstance(chartInstance) {\n this._chart = chartInstance;\n }\n\n public serverStatus() {\n this.cancelOnDestroy(\n Observable.interval(2000)\n .startWith(0)\n .switchMap(() =>\n this._http.get(`https://secure.digitalsignage.com/msPingServersGuest`)\n .map(result => {\n this._ready = true;\n this.cd.markForCheck();\n result = result.json();\n var avg = 0, t = 0;\n _.forEach(result, (stats) => {\n t++;\n avg = Number(stats) + avg;\n });\n if (!this._chart)\n return 0;\n return avg / t;\n })\n )\n .subscribe((value) => {\n if (!this._chart)\n return;\n var series = this._chart.series[0],\n shift = series.data.length > 20;\n this._chart.series[0].addPoint(value, true, shift);\n }, (e) => console.error(e))\n );\n }\n}" }, { "path": "src/app/dashboard/storage-used.ts", "content": "import {ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {Http} from \"@angular/http\";\nimport * as _ from 'lodash';\nimport {Observable} from \"rxjs/Observable\";\nimport {Compbaser} from \"ng-mslib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Lib} from \"../../Lib\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\nimport {ACTION_LIVELOG_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n selector: 'storage-used',\n styles: [`\n chart {\n width: 100% !important;\n margin: 0 auto;\n display: block;\n }\n `],\n template: `\n
    \n \n
    \n >\n
    \n
    \n `\n})\nexport class StorageUsed extends Compbaser {\n _options;\n _chart: any;\n _ready = false;\n\n\n constructor(private yp: YellowPepperService, private cd:ChangeDetectorRef, private rp:RedPepperService) {\n super();\n var totalCapacity = this.rp.getUserData().resellerID == 1 ? 1000 : 25000;\n var gigs = totalCapacity / 1000 + 'GB';\n var bytesTotal = 0;\n this.rp.getResources().forEach((recResources)=>{\n if (recResources['change_type'] != 3)\n bytesTotal = bytesTotal + parseInt(recResources['resource_bytes_total']);\n });\n var used = Lib.ParseToFloatDouble((Math.ceil(bytesTotal / 1000000) / totalCapacity) * 100);\n var free = 100 - used;\n\n // if (String(mbTotalPercentRounded).length == 1 && String(mbTotalPercentRounded) != '0')\n // mbTotalPercentRounded = '0' + mbTotalPercentRounded;\n // console.log(`Used %${mbTotalPercentRounded} of ${gigs}gb` );\n this._options = {\n chart: {\n type: 'pie',\n height: 228,\n borderColor: '#d9d9d9',\n borderWidth: 1,\n marginRight: 10,\n },\n responsive: {\n rules: [{\n condition: {\n maxWidth: 500\n },\n chartOptions: {\n legend: {\n align: 'center',\n verticalAlign: 'bottom',\n layout: 'horizontal'\n },\n yAxis: {\n labels: {\n align: 'left',\n x: 0,\n y: -5\n },\n title: {\n text: null\n }\n },\n subtitle: {\n text: null\n },\n credits: {\n enabled: false\n }\n }\n }]\n },\n title: {\n text: ''\n },\n\n xAxis: {\n labels: {\n enabled: false\n },\n categories: []\n },\n credits: {\n enabled: false\n },\n yAxis: [{\n min: 0,\n title: {\n text: 'average response time'\n }\n }, {\n title: {\n text: 'measured in milliseconds'\n },\n opposite: true\n }],\n legend: {\n enabled: false,\n shadow: false\n },\n tooltip: {\n shared: true\n },\n plotOptions: {\n column: {\n grouping: false,\n shadow: false,\n borderWidth: 0\n }\n },\n series: [{\n name: 'cloud storage',\n colorByPoint: true,\n data: [{\n name: '% storage used',\n y: used\n }, {\n name: '% storage free',\n y: free,\n sliced: true,\n selected: true\n }]\n }]\n };\n this._ready = true;\n }\n\n saveInstance(chartInstance) {\n this._chart = chartInstance;\n this.cd.markForCheck();\n\n }\n\n // public serverStatus() {\n // this.cancelOnDestroy(\n // Observable.interval(2000)\n // .startWith(0)\n // .switchMap(() =>\n // this._http.get(`https://secure.digitalsignage.com/msPingServersGuest`)\n // .map(result => {\n // this._ready = true;\n // this.cd.markForCheck();\n // result = result.json();\n // var avg = 0, t = 0;\n // _.forEach(result, (stats) => {\n // t++;\n // avg = Number(stats) + avg;\n // });\n // if (!this._chart)\n // return 0;\n // return avg / t;\n // })\n // )\n // .subscribe((value) => {\n // if (!this._chart)\n // return;\n // var series = this._chart.series[0],\n // shift = series.data.length > 20;\n // this._chart.series[0].addPoint(value, true, shift);\n // }, (e) => console.error(e))\n // );\n // }\n}" }, { "path": "src/app/fasterq/fasterq-editor.html", "content": "{{me}}\n
    \n \n
    Line: {{m_fasterqLineModel?.lineName}}
    \n
    Service id: {{m_selectedServiceId > 0 ? m_selectedServiceId : 'none'}}
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n called customer:
    \n {{m_stopTimer}}\n
    \n
    \n
    \n
    \n last you serviced
    \n {{m_fqLastServiced}}\n
    \n
    \n
    \n
    \n last you called
    \n {{m_lastCalled}}\n
    \n
    \n
    \n
    \n total to be serviced
    \n {{m_totalToBeServiced}}\n
    \n
    \n
    \n
    \n
    \n
    \n avg customer service time (minutes):
    \n

    {{m_avgServiceTimeCalc}}

    \n
    \n
    \n
    \n
    \n avg customer wait time (minutes):
    \n

    {{m_avgCalledTimeCalc}}

    \n
    \n
    \n
    \n
    \n now servicing:
    \n

    Latest: {{m_nowServicing}}

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n \n

    {{queue.serviceId}}

    \n
    \n
    \n
    \n
    \n
    \n
    \n \n \n \n \n \n \n \n
    \n
    \n
    " }, { "path": "src/app/fasterq/fasterq-editor.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, ElementRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {FasterqQueueModel} from \"../../models/fasterq-queue-model\";\nimport {FasterqLineModel} from \"../../models/fasterq-line-model\";\nimport {FasterqAnalyticsModel} from \"../../models/fasterq-analytics\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {EFFECT_LOAD_FASTERQ_ANALYTICS, EFFECT_LOAD_FASTERQ_QUEUES, EFFECT_QUEUE_CALL_SAVE, EFFECT_QUEUE_POLL_SERVICE, EFFECT_QUEUE_SERVICE_SAVE} from \"../../store/effects/appdb.effects\";\nimport {CommBroker} from \"../../services/CommBroker\";\nimport {FASTERQ_QUEUE_CALL_CANCLED} from \"../../interfaces/Consts\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {List} from \"immutable\";\nimport {Lib} from \"../../Lib\";\nimport * as _ from \"lodash\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\nexport interface IQueueSave {\n queue_id: number;\n queue: FasterqQueueModel;\n serviced?: string;\n called?: string;\n called_by?: string;\n called_by_override?: boolean;\n}\n\n@Component({\n selector: 'fasterq-editor',\n styles: [`\n .personInLine {\n margin: 10px;\n padding: 0;\n float: left;\n width: 40px;\n height: 100px;\n cursor: pointer;\n color: #D0D0D0;\n }\n\n .called {\n color: #BE6734;\n }\n\n .serviced {\n color: #ACFD89;\n }\n `],\n templateUrl: './fasterq-editor.html'\n})\nexport class FasterqEditor extends Compbaser {\n\n QUEUE_OFFSET = 8;\n m_gotoModel = 0;\n m_stopWatchHandle: any = new Stopwatch();\n m_stopTimer = '00:00:00';\n m_fasterqLineModel: FasterqLineModel;\n m_selectedServiceId = -1;\n m_queues: List = List([]);\n m_analytics: List = List([]);\n m_offsetPosition = 0;\n m_avgServiceTimeCalc: any = '00:00:00';\n m_avgCalledTimeCalc: any = '00:00:00';\n m_lastCalled: any = 0;\n m_nowServicing: any = 0;\n m_totalToBeServiced = 0;\n m_fqLastServiced = '';\n m_liveUpdateHandler;\n appBaseUrlServices;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private commBroker: CommBroker, private el: ElementRef, private cd: ChangeDetectorRef) {\n super();\n this._pollServices();\n\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.appBaseUrlServices)\n .subscribe((i_appBaseUrlServices) => {\n this.appBaseUrlServices = i_appBaseUrlServices;\n })\n )\n\n this.cancelOnDestroy(\n this.commBroker.onEvent(FASTERQ_QUEUE_CALL_CANCLED)\n .subscribe((data: any) => {\n bootbox.confirm('Customer already called by user' + data.message.called_by + '

    Would you like to call the customer again?', (result) => {\n if (result) {\n data.message['called_by_override'] = true;\n this.yp.ngrxStore.dispatch({type: EFFECT_QUEUE_CALL_SAVE, payload: data.message})\n }\n });\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqQueueLastServicedPolled()\n .subscribe((i_fasterqNowServicing) => {\n this.m_nowServicing = i_fasterqNowServicing;\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqQueueSelected()\n .subscribe((i_serviceId) => {\n this.m_selectedServiceId = i_serviceId\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqLineSelected()\n .subscribe((i_fasterqLineModel) => {\n this.m_fasterqLineModel = i_fasterqLineModel;\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqQueues()\n .subscribe((i_queues: List) => {\n this.m_queues = List([]);\n for (var i = (0 - this.QUEUE_OFFSET); i < 0; i++) {\n i_queues = i_queues.unshift(new FasterqQueueModel({line_id: -1}))\n }\n this.m_queues = i_queues;\n this._selectFirst();\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqAnalytics()\n .subscribe((i_analytics: List) => {\n this.m_analytics = i_analytics;\n this._calcAverages();\n this.cd.markForCheck();\n }, (e) => console.error(e))\n )\n\n this._selectFirst();\n }\n\n _openRemoteStatus() {\n window.open(this._buildURL(), \"_blank\", \"toolbar=yes, scrollbars=yes, resizable=yes, top=10, left=10, width=400, height=400\");\n }\n\n /**\n Create URL string to load customer terminal UI for FasterQ queue generation\n @method _buildURL\n @return {String} URL\n **/\n _buildURL() {\n var data = {\n line_id: this.m_fasterqLineModel.lineId,\n business_id: this.m_fasterqLineModel.businessId,\n call_type: 'QR'\n };\n data = $.base64.encode(JSON.stringify(data));\n return `${this.appBaseUrlServices}/studioweb/index.html?mode=remoteStatus¶m=${data}`;\n }\n\n @timeout(1000)\n _selectFirst() {\n if (this.m_queues.size != this.QUEUE_OFFSET + 1)\n return;\n this.m_selectedServiceId = this.m_queues.get(this.QUEUE_OFFSET).serviceId;\n this._onQueueSelected(this.m_queues.get(this.QUEUE_OFFSET));\n }\n\n _pollServices() {\n this.m_liveUpdateHandler = setInterval(() => {\n this.yp.ngrxStore.dispatch({type: EFFECT_QUEUE_POLL_SERVICE, payload: {business_id: this.rp.getUserData().businessID, line_id: this.m_fasterqLineModel.lineId}})\n this.yp.ngrxStore.dispatch(({type: EFFECT_LOAD_FASTERQ_QUEUES, payload: {line_id: this.m_fasterqLineModel.lineId}}))\n this.yp.ngrxStore.dispatch(({type: EFFECT_LOAD_FASTERQ_ANALYTICS, payload: {line_id: this.m_fasterqLineModel.lineId}}))\n this._updateTotalToBeServiced();\n // todo: increase from 5 sec to 25sec 7-6-2018\n }, 25000);\n }\n\n /**\n Update the total number of queues left to be serviced\n @method _updateTotalToBeServiced\n **/\n _updateTotalToBeServiced() {\n var total = 0;\n this.m_queues.forEach((i_asterqQueueModel: FasterqQueueModel) => {\n if (_.isNull(i_asterqQueueModel.serviced))\n total++;\n this.m_totalToBeServiced = total;\n });\n }\n\n _onQueueSelected(i_queue: FasterqQueueModel) {\n this.m_selectedServiceId = i_queue.serviceId;\n var index = this._getQueueIndexByServiceId();\n var uiState: IUiState = {\n uiSideProps: SideProps.fasterqQueueProps,\n fasterq: {\n fasterqQueueSelected: this.m_selectedServiceId\n }\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this._scrollTo(index);\n }\n\n _getQueueIndexByServiceId(): number {\n if (this.m_selectedServiceId == -1)\n return this.m_selectedServiceId;\n return this.m_queues.findIndex((i_fasterqQueueModel) => {\n return i_fasterqQueueModel.serviceId == this.m_selectedServiceId;\n })\n }\n\n /**\n Scroll to position of selected queue / UI person\n @method _scrollTo\n @param {Element} i_element\n **/\n _scrollTo(i_index) {\n this._watchStop();\n var el = $('#fqLineQueueComponent', this.el.nativeElement).children().eq(i_index);\n var scrollXPos = $(el).position().left;\n // console.log('current offset ' + scrollXPos + ' ' + 'going to index ' + $(i_element).index() + ' service_id ' + i_serviceId);\n this.m_offsetPosition = $('#fqLineQueueComponentContainer', this.el.nativeElement).scrollLeft();\n scrollXPos += this.m_offsetPosition;\n var final = scrollXPos - 480;\n TweenLite.to('#fqLineQueueComponentContainer', 2, {\n scrollTo: {x: final, y: 0},\n ease: Power4['easeOut']\n });\n }\n\n _getQueueFromSelectedIndex(): FasterqQueueModel {\n return this.m_queues.find(i_fasterqQueueModel => {\n return i_fasterqQueueModel.serviceId == this.m_selectedServiceId;\n })\n }\n\n _selectIfDefault() {\n if (this.m_queues.size >= this.QUEUE_OFFSET + 1 && this.m_selectedServiceId == -1)\n this.m_selectedServiceId = this.m_queues.get(this.QUEUE_OFFSET).serviceId;\n }\n\n /**\n Listen to queue being called, mark on UI and post to server\n @method _listenCalled\n **/\n _onCall() {\n this._selectIfDefault();\n if (this.m_queues.size == this.QUEUE_OFFSET) return;\n if (!_.isNull(this._getQueueFromSelectedIndex().serviced))\n return bootbox.alert('customer has already been serviced');\n this._watchStart();\n this.m_lastCalled = this._getQueueFromSelectedIndex().serviceId;\n var d = new XDate();\n var payload: IQueueSave = {\n queue_id: this._getQueueFromSelectedIndex().queueId,\n called: d.toString('M/d/yyyy hh:mm:ss TT'),\n called_by: this.rp.getUserData().userName,\n called_by_override: false,\n queue: this._getQueueFromSelectedIndex()\n }\n this.yp.ngrxStore.dispatch({type: EFFECT_QUEUE_CALL_SAVE, payload: payload})\n }\n\n /**\n Listen to queue being serviced, mark on UI and post to server\n @method _listenServiced\n **/\n _onService() {\n this._selectIfDefault();\n if (this.m_queues.size == this.QUEUE_OFFSET) return;\n this._watchStop();\n if (_.isNull(this._getQueueFromSelectedIndex().called)) {\n bootbox.alert('customer has not been called yet');\n return;\n }\n if (!_.isNull(this._getQueueFromSelectedIndex().serviced)) {\n bootbox.alert('customer has already been serviced');\n return;\n }\n this.m_fqLastServiced = this._getQueueFromSelectedIndex().serviceId;\n var d = new XDate();\n var payload: IQueueSave = {\n queue_id: this._getQueueFromSelectedIndex().queueId,\n serviced: d.toString('M/d/yyyy hh:mm:ss TT'),\n queue: this._getQueueFromSelectedIndex()\n }\n this.yp.ngrxStore.dispatch({type: EFFECT_QUEUE_SERVICE_SAVE, payload: payload})\n }\n\n /**\n Calculate average respond and service line times\n @method _calcAverages\n **/\n _calcAverages() {\n var avgServiceTime = [];\n var avgCalledTime = [];\n this.m_analytics.forEach((i_model: FasterqAnalyticsModel) => {\n var entered = i_model.entered;\n var serviced = i_model.serviced;\n var called = i_model.called;\n if (_.isNull(called)) {\n // customer not called, do nothing\n } else if (!_.isNull(serviced)) {\n // customer called & serviced\n var xEntered = new XDate(entered);\n var minFromEnteredToCalled = xEntered.diffMinutes(called);\n if (minFromEnteredToCalled < 0)\n minFromEnteredToCalled = 1;\n avgCalledTime.push(minFromEnteredToCalled);\n\n var xCalled = new XDate(called);\n var minFromCalledToServiced = xCalled.diffMinutes(serviced);\n avgServiceTime.push(minFromCalledToServiced);\n\n } else {\n\n // customer called not serviced\n var xEntered = new XDate(entered);\n var minFromEnteredToCalled = xEntered.diffMinutes(called);\n if (minFromEnteredToCalled < 0)\n minFromEnteredToCalled = 1;\n avgCalledTime.push(minFromEnteredToCalled);\n }\n });\n\n this.m_avgServiceTimeCalc = _.reduce(avgServiceTime, function (memo, num) {\n return memo + num;\n }, 0) / (avgServiceTime.length === 0 ? 1 : avgServiceTime.length);\n this.m_avgServiceTimeCalc = Lib.ParseToFloatDouble(this.m_avgServiceTimeCalc);\n\n this.m_avgCalledTimeCalc = _.reduce(avgCalledTime, function (memo, num) {\n return memo + num;\n }, 0) / (avgCalledTime.length === 0 ? 1 : avgCalledTime.length);\n this.m_avgCalledTimeCalc = Lib.ParseToFloatDouble(this.m_avgCalledTimeCalc)\n }\n\n _onPrev() {\n if (this._getQueueIndexByServiceId() == this.QUEUE_OFFSET)\n return;\n this._onQueueSelected(this.m_queues.get(this._getQueueIndexByServiceId() - 1));\n }\n\n _onNext() {\n if (this._getQueueIndexByServiceId() + 1 == this.m_queues.size || this.m_queues.size <= this.QUEUE_OFFSET + 1)\n return;\n if (this._getQueueIndexByServiceId() == -1)\n return this._onQueueSelected(this.m_queues.get(this.QUEUE_OFFSET));\n this._onQueueSelected(this.m_queues.get(this._getQueueIndexByServiceId() + 1));\n }\n\n _onGoTo() {\n var queue = this.m_queues.find((i_fasterqQueueModel: FasterqQueueModel) => {\n var serviceId = i_fasterqQueueModel.serviceId;\n var selectedId = Lib.PadZeros(this.m_gotoModel, 3, 0);\n return serviceId == selectedId;\n })\n if (queue)\n this._onQueueSelected(queue);\n }\n\n /**\n Start the stop watch UI\n @method _watchStart\n **/\n _watchStart() {\n this.m_stopWatchHandle.setListener((e) => {\n this.m_stopTimer = this.m_stopWatchHandle.toString();\n this.cd.markForCheck();\n });\n this.m_stopWatchHandle.start();\n }\n\n /**\n Stop the stop watch UI\n @method _watchStop\n **/\n _watchStop() {\n this.m_stopWatchHandle.stop();\n this.m_stopWatchHandle.reset();\n this.m_stopTimer = '00:00:00';\n }\n\n destroy() {\n clearInterval(this.m_liveUpdateHandler);\n var uiState: IUiState = {\n uiSideProps: SideProps.miniDashboard,\n fasterq: {\n fasterqQueueSelected: -1\n }\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n}\n" }, { "path": "src/app/fasterq/fasterq-line-props.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {FasterqLineModel} from \"../../models/fasterq-line-model\";\nimport {FormBuilder, FormGroup} from \"@angular/forms\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\nimport {Observable} from \"rxjs/Observable\";\nimport {EFFECT_RESET_FASTERQ_LINE, EFFECT_UPDATE_FASTERQ_LINE} from \"../../store/effects/appdb.effects\";\nimport * as _ from 'lodash';\nimport {FasterqQueueModel} from \"../../models/fasterq-queue-model\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Lib} from \"../../Lib\";\n\n@Component({\n selector: 'fasterq-line-props',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n styles: [`\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n `],\n template: `\n {{me}}\n
    \n
    \n
    \n
    \n
    \n
      \n \n \n \n \n
    • \n selected line\n
      \n \n \n
      \n
      • \n
    • \n reminder ahead of people\n
      \n \n \n
      \n
      • \n
    • \n \n
      • \n
    • \n \n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n \n
    \n
    \n
    \n

    Queue properties

    \n
      \n
    • \n selected customer: {{m_customer}}\n
      • \n
    • \n verification: {{m_verification}}\n
      • \n
    • \n called by: {{m_calledBy}}\n
      • \n
    \n
    \n
    \n
    \n `,\n})\nexport class FasterqLineProps extends Compbaser implements AfterViewInit {\n\n m_selectedLine: FasterqLineModel;\n m_selectedQueue: FasterqQueueModel;\n m_contGroup: FormGroup;\n m_sideProps$: Observable;\n m_sidePropsEnum = SideProps;\n m_customer = '';\n m_verification = '';\n m_calledBy: ''\n appBaseUrlServices\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_sideProps$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n this.m_contGroup = fb.group({\n 'line_name': [''],\n 'reminder': [0]\n });\n\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.appBaseUrlServices)\n .subscribe((i_appBaseUrlServices) => {\n this.appBaseUrlServices = i_appBaseUrlServices;\n })\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqLineSelected()\n .subscribe((i_lineSelected: FasterqLineModel) => {\n this.m_selectedLine = i_lineSelected;\n this.m_contGroup.controls.line_name.setValue(this.m_selectedLine.lineName)\n this.m_contGroup.controls.reminder.setValue(this.m_selectedLine.reminder)\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.listenFasterqQueueModelSelected()\n .subscribe((i_queueSelected: FasterqQueueModel) => {\n this.m_selectedQueue = i_queueSelected;\n this.m_customer = this.m_selectedQueue.serviceId;\n this.m_verification = this.m_selectedQueue.verification == -1 ? 'print out' : this.m_selectedQueue.verification;\n this.m_calledBy = (_.isNull(this.m_selectedQueue.calledBy) ? 'none' : this.m_selectedQueue.calledBy);\n }, (e) => console.error(e))\n )\n }\n\n saveToStore() {\n this.yp.ngrxStore.dispatch({\n type: EFFECT_UPDATE_FASTERQ_LINE,\n payload: {\n id: this.m_selectedLine.lineId,\n name: this.m_contGroup.controls.line_name.value,\n reminder: _.isNumber(this.m_contGroup.controls.reminder.value) ? this.m_contGroup.controls.reminder.value : 1\n }\n })\n }\n\n _onResetLine() {\n bootbox.prompt('are you sure you want to reset the counter? (enter YES)', (i_password) => {\n if (i_password != 'YES') return;\n this.yp.ngrxStore.dispatch({\n type: EFFECT_RESET_FASTERQ_LINE,\n payload: {\n business_id: this.rp.getUserData().businessID,\n line_id: this.m_selectedLine.lineId,\n counter: 1\n }\n });\n });\n }\n\n /**\n Listen to open customer terminal\n @method _listenOpenCustomerTerminal\n **/\n _onOpenTerminal() {\n var data = {\n call_type: 'CUSTOMER_TERMINAL',\n business_id: this.rp.getUserData().businessID,\n line_id: this.m_selectedLine.lineId,\n line_name: this.m_selectedLine.lineName\n };\n var rc4v2 = new RC4V2();\n var rcData: any = rc4v2.encrypt(JSON.stringify(data), '8547963624824263');\n var url;\n if (Lib.DevMode()) {\n url = `http://localhost:4208/index.html?data=${rcData}`;\n } else {\n url = `${this.appBaseUrlServices}/studioweb/index.html?data=${rcData}`;\n }\n\n window.open(url, '_blank');\n }\n\n ngAfterViewInit() {\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/fasterq/fasterq-manager.ts", "content": "import {Component, EventEmitter, Output} from \"@angular/core\";\nimport {Observable} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {EFFECT_ADD_FASTERQ_LINE, EFFECT_LOAD_FASTERQ_ANALYTICS, EFFECT_LOAD_FASTERQ_LINES, EFFECT_LOAD_FASTERQ_QUEUES, EFFECT_REMOVE_FASTERQ_LINE} from \"../../store/effects/appdb.effects\";\nimport {FasterqLineModel} from \"../../models/fasterq-line-model\";\nimport {List} from \"immutable\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\n\n@Component({\n selector: 'fasterq-manager',\n template: `\n {{me}}\n
    \n scene selection\n
    \n
    \n
    \n \n \n
    \n
    \n \n
    \n \n
    \n `\n})\nexport class FasterqManager extends Compbaser {\n\n selectedIdx = -1;\n m_selectedLine: FasterqLineModel;\n lines$: Observable>\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private toastr: ToastsManager) {\n super();\n this.preventRedirect(true);\n this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_FASTERQ_LINES, payload: {}})\n this.lines$ = this.yp.listenFasterqLines();\n var uiState: IUiState = {fasterq: {fasterqLineSelected: -1}};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n @Output()\n slideToFasterqEditor: EventEmitter = new EventEmitter();\n\n @Output()\n onLineSelected: EventEmitter = new EventEmitter();\n\n _onLineSelected(event: MouseEvent, i_fasterqLineModel: FasterqLineModel, index) {\n // event.stopPropagation();\n // event.preventDefault();\n this.selectedIdx = index;\n let uiState: IUiState;\n if (jQuery(event.target).hasClass('props')) {\n uiState = {\n uiSideProps: SideProps.fasterqLineProps,\n fasterq: {\n fasterqLineSelected: i_fasterqLineModel.lineId\n }\n }\n this.onLineSelected.emit(uiState)\n } else {\n uiState = {\n fasterq: {\n fasterqLineSelected: i_fasterqLineModel.lineId\n }\n }\n this.slideToFasterqEditor.emit();\n // this.onCampaignSelected.emit(uiState)\n }\n this.m_selectedLine = i_fasterqLineModel;\n this.yp.ngrxStore.dispatch(({type: EFFECT_LOAD_FASTERQ_QUEUES, payload: {line_id: i_fasterqLineModel.lineId}}))\n this.yp.ngrxStore.dispatch(({type: EFFECT_LOAD_FASTERQ_ANALYTICS, payload: {line_id: i_fasterqLineModel.lineId}}))\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _createNew() {\n this.yp.ngrxStore.dispatch({\n type: EFFECT_ADD_FASTERQ_LINE,\n payload: {name: 'new line', business_id: this.rp.getUserData().businessID}\n })\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'created new fasterq line'})}));\n }\n\n _remove() {\n bootbox.confirm(\"Are you sure you want to remove the Line and associated queues?\", (result) => {\n if (!result)\n return;\n this.yp.ngrxStore.dispatch({\n type: EFFECT_REMOVE_FASTERQ_LINE,\n payload: {id: this.m_selectedLine.lineId}\n })\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.m_selectedLine = null;\n this.selectedIdx = -1;\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'removed fasterq line id: ' + this.m_selectedLine.lineId})}));\n });\n }\n\n destroy() {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n}\n" }, { "path": "src/app/fasterq/fasterq-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n providers: [],\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n scene-navigation\n \n \n \n \n \n \n \n \n `\n})\n\nexport class FasterqNavigation extends Compbaser {\n}\n\n" }, { "path": "src/app/fasterq/fasterq-terminal.ts", "content": "import {AfterViewInit, Component, ElementRef, NgZone} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ActivatedRoute} from \"@angular/router\";\nimport {FasterqLineModel} from \"../../models/fasterq-line-model\";\nimport {EFFECT_LOAD_FASTERQ_LINE, EFFECT_LOADED_FASTERQ_LINE, EFFECT_QUEUE_CALL_SAVE} from \"../../store/effects/appdb.effects\";\nimport * as _ from 'lodash';\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Http, RequestMethod, RequestOptionsArgs, Response} from \"@angular/http\";\nimport {Lib} from \"../../Lib\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {LocalStorage} from \"../../services/LocalStorage\";\n\n@Component({\n selector: 'fasterq-terminal',\n styles: [`\n .largeFont2em {\n font-size: 2em;\n }\n\n .lPad {\n padding-left: 20px;\n }\n\n .carousel-inner {\n height: 400px;\n }\n `],\n template: `\n {{me}}\n\n
    \n

    now serving {{m_currentlyServing}}

    \n\n

    you are {{m_fasterqLineModel.serviceId}} in line

    \n\n

    line name: {{m_fasterqLineModel?.lineName}}

    \n\n

    your verification number is {{m_fasterqLineModel?.verification}}

    \n\n \n \n
    \n\n
    \n
    \n

    {{m_fasterqLineModel?.lineName}}

    \n
    \n\n
    \n

    \n
    \n\n
    \n

    You number is 123

    \n

    Oct 1 1973

    \n
    \n\n
    \n
    \n \n \n \n \n
    \n
    \n \n Print your queue number\n
    \n
    \n
    \n \n \n PRINT IT\n \n
    \n

    Your line#: {{m_displayServiceId}}

    \n

    Line name: {{m_lineName}}

    \n
    \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n \n Scan with your mobile device\n
    \n\n
    \n
    \n
    \n
    \n
    \n
    \n\n
    \n
    \n \n Notify via email\n
    \n
    \n\n
    \n \n
    \n
    \n \n SEND IT\n \n
    \n\n

    \n
    \n
    \n
    \n\n
    \n
    \n \n Notify via Text Message\n
    \n
    \n\n
    \n \n
    \n
    \n
    \n \n CALL IT\n\n \n\n

    \n
    \n
    \n
    \n
    \n \n
    \n
    \n `\n})\nexport class FasterqTerminal extends Compbaser implements AfterViewInit {\n\n m_fasterqLineModel: FasterqLineModel;\n m_displayServiceId = '';\n appBaseUrlServices;\n emailAddress = ''\n m_appMode = '';\n m_baseUrl\n sms = ''\n m_remoteStatusServiceId;\n m_remoteStatusVerification;\n m_statusHandler;\n m_currentlyServing = 0;\n m_printing = false;\n m_serviceId = 0;\n m_lineName = '';\n\n constructor(private toastr: ToastsManager, private http: Http, private yp: YellowPepperService, private router: ActivatedRoute, private el: ElementRef, private zone: NgZone, private simplestorage: LocalStorage) {\n super();\n // this.preventRedirect(true);\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.fasterq.terminal)\n .filter(v => !_.isNull(v))\n .subscribe((i_fasterqLineModel: FasterqLineModel) => {\n this.m_fasterqLineModel = i_fasterqLineModel;\n switch (this.m_appMode) {\n case 'CUSTOMER_TERMINAL': {\n this._createQRcode();\n break;\n }\n case 'REMOTE_STATUS': {\n this.m_baseUrl = `${this.appBaseUrlServices}?mode=remoteStatus¶m=`;\n this._getServerDateTime(this._initServices);\n // this._releaseSpot();\n // this._getNewSpot();\n break;\n }\n default: {\n console.log('fasterq problem, did not get line id');\n }\n }\n\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.appBaseUrlServices)\n .subscribe((i_appBaseUrlServices) => {\n this.appBaseUrlServices = i_appBaseUrlServices;\n })\n )\n }\n\n ngOnInit() {\n this.cancelOnDestroy(\n this.router.params\n .take(1)\n .subscribe(i_params => {\n if (i_params.id.indexOf('data') > -1) {\n /** Terminal mode, coming from Studio link **/\n var params = i_params['id'].split('=')[1] + '==';\n var rc4v2 = new RC4V2();\n var rcData: any = rc4v2.decrypt(params.replace(/=/ig, ''), '8547963624824263');\n var data = JSON.parse(rcData);\n this.m_appMode = 'CUSTOMER_TERMINAL';\n this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_FASTERQ_LINE, payload: {lineId: data.line_id, businessId: data.business_id}})\n } else {\n /** Remote status mode, coming server short url **/\n var params: string = i_params['id'].split('=')[2].replace(/%3D/ig, '=');\n var rcData = $.base64.decode(params);\n var data = JSON.parse(rcData);\n this.m_appMode = 'REMOTE_STATUS';\n this.yp.ngrxStore.dispatch({type: EFFECT_LOADED_FASTERQ_LINE, payload: new FasterqLineModel(data)})\n\n }\n }, (e) => console.error(e))\n )\n }\n\n ngAfterViewInit() {\n }\n\n /**\n Get current server date / time\n @method _getServerDateTime server:getDateTime\n @param {Function} i_cb\n **/\n _getServerDateTime(i_cb) {\n var self = this;\n $.ajax({\n url: `${self.appBaseUrlServices}/GetDateTime`,\n success: function (dateTime) {\n $.proxy(i_cb, self)(dateTime);\n },\n error: function (e) {\n console.log('error ajax ' + e);\n },\n dataType: 'json'\n });\n }\n\n /**\n Check if service id exists in local storage, if not get one from server\n @method _initServices\n **/\n _initServices(i_dateTime) {\n // STORAGE FIRST\n\n //debug; //this.simplestorage.removeItem('data');\n var storage = this.simplestorage.getItem('data');\n if (!_.isUndefined(storage)) {\n var storedDate = storage.date;\n if (storedDate != i_dateTime.date) {\n this.simplestorage.removeItem('data');\n } else {\n this.m_remoteStatusServiceId = storage.service_id;\n this.m_remoteStatusVerification = storage.verification;\n this._pollNowServicing();\n return;\n }\n }\n\n // EMAIL OR SMS\n var call_type = this.m_fasterqLineModel.callType;\n\n if (call_type == 'SMS' || call_type == 'EMAIL') {\n if (i_dateTime.date != this.m_fasterqLineModel.date) {\n bootbox.alert('your number expired on ' + this.m_fasterqLineModel.date + ', so we generated a new number for you...');\n this._getServiceID();\n return;\n }\n this._createStorage(this.m_fasterqLineModel.serviceId, this.m_fasterqLineModel.verification, this.m_fasterqLineModel.date);\n this._pollNowServicing();\n }\n\n // QR\n if (call_type == 'QR') {\n this._getServiceID();\n }\n }\n\n _createStorage(i_service_id, i_verification, i_date) {\n this.simplestorage.setItem('data', {\n service_id: i_service_id,\n date: i_date,\n verification: i_verification\n });\n }\n\n /**\n Forget spot in line\n @method _getNewSpot\n **/\n _getNewSpot() {\n bootbox.prompt('are you sure you want to get a new number (type yes or no)?', (i_answer) => {\n if (i_answer) {\n if (i_answer.toLowerCase() == 'yes') {\n this.simplestorage.removeItem('data');\n window.clearInterval(this.m_statusHandler);\n var url = this._buildURL();\n jQuery(location).attr('href', url);\n }\n }\n })\n }\n\n /**\n Forget spot in line\n @method _releaseSpot\n **/\n _releaseSpot() {\n bootbox.prompt('are you sure you want to let go of your spot (type yes or no)?', (i_answer) => {\n if (i_answer) {\n if (i_answer.toLowerCase() == 'yes') {\n jQuery('#appEntry').html('

    have a nice day

    ');\n this.simplestorage.removeItem('data');\n window.clearInterval(this.m_statusHandler);\n }\n }\n })\n }\n\n /**\n Create queue in table as well as matching data in analytics\n @method _getServiceID server:setQueue\n **/\n _getServiceID() {\n var options: RequestOptionsArgs = this.createOptionArgs('/Queue', RequestMethod.Post, {\n line_id: this.m_fasterqLineModel.lineId,\n business_id: this.m_fasterqLineModel.businessId,\n email: this.m_fasterqLineModel.email,\n call_type: this.m_fasterqLineModel.callType,\n })\n return this.http.get(options.url, options)\n .catch((err) => {\n // return Observable.throw(err);\n return err;\n })\n .finally(() => {\n }).take(1)\n .subscribe((i_response: Response) => {\n var jData = i_response.json()\n var fasterqLineModel: FasterqLineModel = new FasterqLineModel(jData)\n this._createStorage(fasterqLineModel.serviceId, fasterqLineModel.verification, fasterqLineModel.date);\n this.yp.ngrxStore.dispatch({type: EFFECT_LOADED_FASTERQ_LINE, payload: fasterqLineModel})\n // this._populateCustomerInfo();\n this._pollNowServicing();\n }, (e) => console.error(e));\n }\n\n /**\n Get the last called service_id for line\n @method _pollNowServicing server:LastCalledQueue\n **/\n _pollNowServicing() {\n var self = this;\n var lastCalledQueue = () => {\n $.ajax({\n url: `${this.appBaseUrlServices}/LastCalledQueue`,\n data: {\n business_id: this.m_fasterqLineModel.businessId,\n line_id: this.m_fasterqLineModel.lineId\n },\n success: function (i_model) {\n self.m_currentlyServing = i_model.service_id;\n\n },\n error: function (e) {\n console.log('error ajax ' + e);\n },\n dataType: 'json'\n });\n };\n this.m_statusHandler = setInterval(function () {\n lastCalledQueue();\n }, 5000);\n lastCalledQueue();\n }\n\n _isValidEmail(email) {\n var re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(email);\n }\n\n /**\n Listen to custom selection on queue id creator via QR scan\n @method _createQRcode\n **/\n @timeout(1000)\n _createQRcode() {\n jQuery('.carousel').carousel()\n var q: any = jQuery(\"#qrcode\", this.el.nativeElement);\n q = q[0];\n var qrcode = new QRCode(q, {width: 200, height: 200});\n var url = this._buildURL();\n qrcode.makeCode(url);\n }\n\n _onCall($event) {\n event.stopImmediatePropagation();\n event.preventDefault();\n const baseUrl = `${this.appBaseUrlServices}/studioweb/index.html?mode=remoteStatus¶m=`;\n if (this.sms.length < 6)\n return this.toastr.error('The phone number entered is invalid');\n $.ajax({\n url: `${this.appBaseUrlServices}/SendQueueSMSEmail`,\n data: {\n business_id: this.m_fasterqLineModel.businessId,\n line_id: this.m_fasterqLineModel.lineId,\n line_name: this.m_fasterqLineModel.lineName,\n sms: this.sms,\n call_type: 'SMS',\n url: baseUrl\n },\n success: (e) => {\n this.toastr.info('Thank you')\n setTimeout(() => {\n this.sms = ''\n }, 4000)\n },\n error: (e) => {\n console.log('error ajax ' + e);\n },\n dataType: 'json'\n });\n }\n\n _onSend($event) {\n event.stopImmediatePropagation();\n event.preventDefault();\n const baseUrl = `${this.appBaseUrlServices}/studioweb/index.html?mode=remoteStatus¶m=`;\n if (!this._isValidEmail(this.emailAddress))\n return this.toastr.error('The email address entered is invalid');\n $.ajax({\n url: `${this.appBaseUrlServices}/SendQueueSMSEmail`,\n data: {\n business_id: this.m_fasterqLineModel.businessId,\n line_id: this.m_fasterqLineModel.lineId,\n line_name: this.m_fasterqLineModel.lineName,\n email: this.emailAddress,\n call_type: 'EMAIL',\n url: baseUrl\n },\n success: (e) => {\n this.toastr.info('Thank you')\n setTimeout(() => {\n this.emailAddress = ''\n }, 4000)\n },\n error: (e) => {\n console.log('error ajax ' + e);\n },\n dataType: 'json'\n });\n\n }\n\n _onPrint(event) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n // this.printToCart('printSectionId');\n // urlRoot: BB.CONSTS.ROOT_URL + '/',\n // idAttribute: 'queue_id'\n // var url = `${this.appBaseUrlServices}/`;\n\n var options: RequestOptionsArgs = this.createOptionArgs('/Queue', RequestMethod.Post, {line_id: this.m_fasterqLineModel.lineId, business_id: this.m_fasterqLineModel.businessId})\n return this.http.get(options.url, options)\n .catch((err) => {\n // return Observable.throw(err);\n return err;\n })\n .finally(() => {\n }).take(1)\n .subscribe((i_response: Response) => {\n var jData = i_response.json()\n this.m_displayServiceId = jData.service_id;\n this.m_serviceId = jData.service_id;\n this.m_lineName = jData.name;\n this.m_printing = true;\n setTimeout(()=>{\n printJS('printArea', 'html')\n },1000);\n setTimeout(()=>{\n this.m_printing = false;\n },2000)\n\n return;\n\n // this._printNumber(jData.service_id, jData.name);\n }, (e) => console.error(e));\n }\n\n\n /**\n Print current customer service id\n @method _printNumber\n @param {Number} i_service_id\n **/\n _printNumber(i_service_id, name) {\n this.zone.runOutsideAngular(() => {\n var $printDiag = jQuery('#printDiag');\n //var div = document.getElementById(\"printerDiv\");\n var p = function () {\n jQuery('body').append('

    ')\n }\n var arg = Lib.Base64Encode(i_service_id + ':_:' + name)\n // $printDiag.html('');\n $printDiag.html('');\n })\n\n // $printDiag.find('h1').text('your number is ' + i_service_id);\n // $printDiag.find('h3').text('created on ' + moment().format('MMMM Do YYYY, h:mm:ss a'));\n // var divContents = jQuery(Elements.PRINT_DIAG).html();\n // var printWindow = window.open('', '', 'height=250,width=450');\n // printWindow.document.write('' + self.model.get('name') + '');\n // printWindow.document.write('
    ');\n // printWindow.document.write(divContents);\n // printWindow.document.write('
    ');\n // printWindow.document.close();\n // printWindow.print();\n }\n\n private createOptionArgs(i_urlEndPoint, i_method, i_body): RequestOptionsArgs {\n var url = `${this.appBaseUrlServices}${i_urlEndPoint}`;\n return {\n url: url,\n method: i_method,\n body: i_body\n };\n }\n\n /**\n Create URL string to load customer terminal UI for FasterQ queue generation\n @method _buildURL\n @return {String} URL\n **/\n _buildURL() {\n var data = {\n line_id: this.m_fasterqLineModel.lineId,\n business_id: this.m_fasterqLineModel.businessId,\n call_type: 'QR'\n };\n data = $.base64.encode(JSON.stringify(data));\n return `${this.appBaseUrlServices}/studioweb/index.html?mode=remoteStatus¶m=${data}`;\n }\n\n\n}\n" }, { "path": "src/app/fasterq/fasterq.ts", "content": "import {ChangeDetectionStrategy, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {ISliderItemData, Slideritem} from \"../../comps/sliderpanel/Slideritem\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'fasterq',\n template: `\n {{me}}\n \n \n \n \n \n \n \n \n \n \n \n \n `\n})\nexport class Fasterq extends Compbaser {\n\n private m_placement = PLACEMENT_SCENE;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMapLoad()\n .subscribe((v) => {\n if (v){\n this.sliderSceneCreator.slideTo('locationMap','right')\n }\n }, (e) => console.error(e))\n\n )\n\n }\n\n @ViewChild('sliderSceneCreator')\n sliderSceneCreator:Slideritem;\n\n\n _onLocationMapClosed(){\n this.sliderSceneCreator.slideTo('fqEditor','left')\n\n }\n\n _onSlideChange(event: ISliderItemData) {\n if (event.direction == 'left' && event.to == 'fqList') {\n var uiState:IUiState = {\n uiSideProps: SideProps.miniDashboard,\n scene: {sceneSelected: -1}\n }\n return this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n // if (event.direction == 'right' && event.to == 'campaignEditor')\n // return this._createCampaign();\n }\n}\n\n" }, { "path": "src/app/fasterq/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {FasterqNavigation} from \"./fasterq-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {Fasterq} from \"./fasterq\";\nimport {FasterqManager} from \"./fasterq-manager\";\nimport {FasterqEditor} from \"./fasterq-editor\";\nimport {FasterqLineProps} from \"./fasterq-line-props\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: FasterqNavigation},\n {path: ':folder/:id', component: FasterqNavigation},\n {path: '**', component: FasterqNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [FasterqNavigation, Fasterq, FasterqManager, FasterqEditor, FasterqLineProps]\n})\nexport class FasterqLazyModule {\n}" }, { "path": "src/app/help/help-navigation.ts", "content": "import {ChangeDetectionStrategy, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {MediaPlayer} from \"../../comps/media-player/media-player\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Observable} from \"rxjs/Observable\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n button {\n padding: 8px;\n margin: 8px;\n width: 200px\n }\n `],\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n
    \n \n

    Video tutorial

    \n \n \n \n \n \n \n \n \n
    \n
    \n
    \n

    links

    \n \n
  • \n Setting up FasterQ printer\n
    • \n
    \n
    \n
    \n

    Contact us

    \n \n
    \n
    \n
    \n
    \n
    \n
    Powered by Google's Angular framework
    \n \n \n \n
    \n\n
    \n \n \n \n \n \n \n \n \n `\n})\nexport class HelpNavigation extends Compbaser {\n\n m_playResource\n m_playing = false;\n isBrandingDisabled: Observable;\n\n @ViewChild('modal')\n modal: ModalComponent;\n\n @ViewChild('mediaPlayer')\n media: MediaPlayer;\n\n constructor(private yp: YellowPepperService) {\n super();\n this.isBrandingDisabled = this.yp.isBrandingDisabled()\n }\n\n _onClose() {\n this.m_playing = false;\n }\n\n _onPlay(i_path) {\n this.m_playResource = i_path;\n this.modal.open('lg')\n this.m_playing = true;\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/help/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {HelpNavigation} from \"./help-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {ContactUs} from \"../../comps/contact-us/contact-us\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: HelpNavigation},\n {path: ':folder/:id', component: HelpNavigation},\n {path: '**', component: HelpNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [HelpNavigation, ContactUs]\n})\nexport class HelpLazyModule {\n}" }, { "path": "src/app/index.ts", "content": "export * from './app-component';\nexport * from './app-module';\n" }, { "path": "src/app/install/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {InstallNavigation} from \"./install-navigation\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: InstallNavigation},\n {path: ':folder/:id', component: InstallNavigation},\n {path: '**', component: InstallNavigation}\n];\n\n@NgModule({\n imports: [SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [InstallNavigation]\n})\nexport class InstallLazyModule {\n}" }, { "path": "src/app/install/install-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {BlockFactoryService} from \"../../services/block-factory-service\";\nimport {PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n providers: [BlockService, BlockFactoryService, {\n provide: \"BLOCK_PLACEMENT\",\n useValue: PLACEMENT_SCENE\n }],\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n
    \n

    Install the Signage Player

    \n
    \n Choose which version of the SignagePlayer you would like to get\n
    \n We recommend that you purchase our device as it is optimized for the signage software. It also has a built in watch-dog and the software comes pre-installed, so you will not need to download anything at all.
    \n
    \n\n
    \n
    \n
    \n
    \n

    \n \n SignagePlayer pre-installed\n

    \n
    \n
    \n
    \n
      \n
    • \n Step 1: purchase one of our devices: \n \n
      • \n
    • \n Step 2: register the device with your user    and password \n
      • \n
    • \n Step 3: begin remote managing your device from the   Stations   section of this application\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n SignagePlayer for Android\n

    \n
    \n
    \n
    \n
      \n
    • \n Step 1: download player from Google play store: \n \n
      • \n
    • \n Step 2: register the device with your user    and password \n
      • \n
    • \n Step 3: begin remote managing your device from the   Stations   section of this application\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n SignagePlayer for Windows\n

    \n
    \n
    \n
    \n
      \n
    • \n Step 1: download the SignagePlayer EXE app: \n \n
      • \n
    • \n Step 2: register the device with your user    and password \n
      • \n
    • \n Step 3: begin remote managing your device from the   Stations   section of this application\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n SignagePlayer for Mac\n

    \n
    \n
    \n
    \n
      \n
    • \n Step 1: download Adobe AIR runtime: \n \n
      • \n
    • \n Step 2: download the SignagePlayer AIR app: \n \n
      • \n
    • \n Step 3: register the device with your user    and password \n
      • \n
    • \n Step 4: begin remote managing your device from the   Stations   section of this application\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n

    \n \n SignagePlayer for iOS\n

    \n
    \n
    \n
    \n
      \n
    • \n Step 1: download player from the App store: \n \n
      • \n
    • \n Step 2: register the device with your user    and password \n
      • \n
    • \n Step 3: begin remote managing your device from the   Stations   section of this application\n
      • \n
    \n
    \n
    \n
    \n
    \n
    \n `\n})\nexport class InstallNavigation extends Compbaser {\n\n _openInNewTab(url, event?:MouseEvent) {\n if (event){\n event.stopImmediatePropagation();\n event.preventDefault();\n }\n var win = window.open(url, '_blank');\n win.focus();\n }\n\n}\n\n" }, { "path": "src/app/live-preview/live-preview.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {CampaignTimelinesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {ISceneData} from \"../blocks/block-service\";\nimport {CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {MainAppShowStateEnum} from \"../app-component\";\n\nexport enum PreviewModeEnum {\n NONE,\n SCENE,\n CAMPAIGN,\n TIMELINE\n}\n\n@Component({\n selector: 'live-preview',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .btn-group {\n position: relative;\n top: -25px;\n left: 20px;\n }\n\n #iFramePreview {\n width: 100%;\n height: 100%;\n float: left;\n text-align: center;\n background-color: #222222;\n }\n\n #iFrameEmbedded {\n width: 1920px;\n height: 1080px;\n margin: 0 auto;\n }\n `],\n template: `\n
    \n \n
    \n
    \n \n
    \n `,\n})\nexport class LivePreview extends Compbaser implements AfterViewInit {\n\n constructor(private cd:ChangeDetectorRef, private yp: YellowPepperService, private rp: RedPepperService, private el: ElementRef) {\n super();\n cd.detach();\n }\n\n ngAfterViewInit() {\n if (!this.checkFlash())\n return;\n this.yp.getPreviewMode()\n .mergeMap((i_previewMode: PreviewModeEnum) => {\n switch (i_previewMode) {\n case PreviewModeEnum.SCENE: {\n return this.yp.listenSceneSelected()\n .map((i_sceneData: ISceneData) => {\n return this.launchScene(i_sceneData.scene_id);\n })\n }\n case PreviewModeEnum.TIMELINE: {\n return this.yp.listenTimelineSelected()\n .take(1)\n .map((i_campaignTimelinesModel: CampaignTimelinesModel) => {\n return this.launchTimeline(i_campaignTimelinesModel.getCampaignId(), i_campaignTimelinesModel.getCampaignTimelineId());\n })\n }\n case PreviewModeEnum.CAMPAIGN: {\n return this.yp.listenCampaignSelected()\n .take(1)\n .map((i_campaignsModelExt: CampaignsModelExt) => {\n return this.launchCampaign(i_campaignsModelExt.getCampaignId());\n })\n }\n }\n }).subscribe((v) => {\n console.log(v);\n }, (e) => console.error(e))\n }\n\n _onExit() {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.NORMAL, previewMode: PreviewModeEnum.NONE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n checkFlash() {\n if (!FlashDetect.installed || !FlashDetect.versionAtLeast(13)) {\n bootbox.alert({\n message: 'Flash is not enabled, in Chrome go to the URL: chrome://settings/content to enable'\n });\n return false;\n } else {\n return true;\n }\n }\n\n /**\n Listen to live preview launch\n @method launch\n **/\n launchScene(i_sceneId) {\n var url = this.rp.livePreviewScene(i_sceneId, 0);\n $('#iFrameEmbedded').attr('src', url);\n }\n\n /**\n Listen to live preview launch\n @method launch i_campaignTimelineNativeID\n **/\n launchTimeline(i_campaignID, i_campaignTimelineID) {\n var url = this.rp.livePreviewTimeline(i_campaignID, i_campaignTimelineID, 0);\n $('#iFrameEmbedded').attr('src', url);\n }\n\n /**\n Listen to live view launch\n @method launch\n **/\n launchCampaign(i_campaignID) {\n var url = this.rp.livePreviewCampaign(i_campaignID, 0);\n $('#iFrameEmbedded').attr('src', url);\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/locale-selector/local-selector.css", "content": "ul {\n width: 290px;\n padding-left: 0px;\n padding-top: 50px;\n}\n\ntr {\n cursor: pointer;\n opacity: 1;\n}\n\ntr:hover {\n opacity: 0.8;\n}\n\n.f32 {\n cursor: pointer;\n}\n\nli {\n opacity: 0.3;\n}\n\nli:hover {\n opacity: 1;\n}\n\n.f32 .flag {\n display: inline-block;\n height: 32px;\n width: 32px;\n vertical-align: text-top;\n line-height: 32px;\n background: url(../../assets/flags32.png) no-repeat;\n}\n\n.f32 .flag2 {\n height: 32px;\n width: 32px;\n vertical-align: text-top;\n line-height: 32px;\n background: url(../../assets/flags32.png) no-repeat;\n}\n\n\n.f32 ._African_Union {\n background-position: 0 -32px;\n}\n\n.f32 ._Arab_League {\n background-position: 0 -64px;\n}\n\n.f32 ._ASEAN {\n background-position: 0 -96px;\n}\n\n.f32 ._CARICOM {\n background-position: 0 -128px;\n}\n\n.f32 ._CIS {\n background-position: 0 -160px;\n}\n\n.f32 ._Commonwealth {\n background-position: 0 -192px;\n}\n\n.f32 ._England {\n background-position: 0 -224px;\n}\n\n.f32 ._European_Union, .f32 .eu {\n background-position: 0 -256px;\n}\n\n.f32 ._Islamic_Conference {\n background-position: 0 -288px;\n}\n\n.f32 ._Kosovo {\n background-position: 0 -320px;\n}\n\n.f32 ._NATO {\n background-position: 0 -352px;\n}\n\n.f32 ._Northern_Cyprus {\n background-position: 0 -384px;\n}\n\n.f32 ._Northern_Ireland {\n background-position: 0 -416px;\n}\n\n.f32 ._Olimpic_Movement {\n background-position: 0 -448px;\n}\n\n.f32 ._OPEC {\n background-position: 0 -480px;\n}\n\n.f32 ._Red_Cross {\n background-position: 0 -512px;\n}\n\n.f32 ._Scotland {\n background-position: 0 -544px;\n}\n\n.f32 ._Somaliland {\n background-position: 0 -576px;\n}\n\n.f32 ._Tibet {\n background-position: 0 -608px;\n}\n\n.f32 ._United_Nations {\n background-position: 0 -640px;\n}\n\n.f32 ._Wales {\n background-position: 0 -672px;\n}\n\n.f32 .ad {\n background-position: 0 -704px;\n}\n\n.f32 .ae {\n background-position: 0 -736px;\n}\n\n.f32 .af {\n background-position: 0 -768px;\n}\n\n.f32 .ag {\n background-position: 0 -800px;\n}\n\n.f32 .ai {\n background-position: 0 -832px;\n}\n\n.f32 .al {\n background-position: 0 -864px;\n}\n\n.f32 .am {\n background-position: 0 -896px;\n}\n\n.f32 .ao {\n background-position: 0 -928px;\n}\n\n.f32 .aq {\n background-position: 0 -960px;\n}\n\n.f32 .ar {\n background-position: 0 -992px;\n}\n\n.f32 .as {\n background-position: 0 -1024px;\n}\n\n.f32 .at {\n background-position: 0 -1056px;\n}\n\n.f32 .au {\n background-position: 0 -1088px;\n}\n\n.f32 .aw {\n background-position: 0 -1120px;\n}\n\n.f32 .ax {\n background-position: 0 -1152px;\n}\n\n.f32 .az {\n background-position: 0 -1184px;\n}\n\n.f32 .ba {\n background-position: 0 -1216px;\n}\n\n.f32 .bb {\n background-position: 0 -1248px;\n}\n\n.f32 .bd {\n background-position: 0 -1280px;\n}\n\n.f32 .be {\n background-position: 0 -1312px;\n}\n\n.f32 .bf {\n background-position: 0 -1344px;\n}\n\n.f32 .bg {\n background-position: 0 -1376px;\n}\n\n.f32 .bh {\n background-position: 0 -1408px;\n}\n\n.f32 .bi {\n background-position: 0 -1440px;\n}\n\n.f32 .bj {\n background-position: 0 -1472px;\n}\n\n.f32 .bm {\n background-position: 0 -1504px;\n}\n\n.f32 .bn {\n background-position: 0 -1536px;\n}\n\n.f32 .bo {\n background-position: 0 -1568px;\n}\n\n.f32 .br {\n background-position: 0 -1600px;\n}\n\n.f32 .bs {\n background-position: 0 -1632px;\n}\n\n.f32 .bt {\n background-position: 0 -1664px;\n}\n\n.f32 .bw {\n background-position: 0 -1696px;\n}\n\n.f32 .by {\n background-position: 0 -1728px;\n}\n\n.f32 .bz {\n background-position: 0 -1760px;\n}\n\n.f32 .ca {\n background-position: 0 -1792px;\n}\n\n.f32 .cd {\n background-position: 0 -1824px;\n}\n\n.f32 .cf {\n background-position: 0 -1856px;\n}\n\n.f32 .cg {\n background-position: 0 -1888px;\n}\n\n.f32 .ch {\n background-position: 0 -1920px;\n}\n\n.f32 .ci {\n background-position: 0 -1952px;\n}\n\n.f32 .ck {\n background-position: 0 -1984px;\n}\n\n.f32 .cl {\n background-position: 0 -2016px;\n}\n\n.f32 .cm {\n background-position: 0 -2048px;\n}\n\n.f32 .cn {\n background-position: 0 -2080px;\n}\n\n.f32 .co {\n background-position: 0 -2112px;\n}\n\n.f32 .cr {\n background-position: 0 -2144px;\n}\n\n.f32 .cu {\n background-position: 0 -2176px;\n}\n\n.f32 .cv {\n background-position: 0 -2208px;\n}\n\n.f32 .cy {\n background-position: 0 -2240px;\n}\n\n.f32 .cz {\n background-position: 0 -2272px;\n}\n\n.f32 .de {\n background-position: 0 -2304px;\n}\n\n.f32 .dj {\n background-position: 0 -2336px;\n}\n\n.f32 .dk {\n background-position: 0 -2368px;\n}\n\n.f32 .dm {\n background-position: 0 -2400px;\n}\n\n.f32 .do {\n background-position: 0 -2432px;\n}\n\n.f32 .dz {\n background-position: 0 -2464px;\n}\n\n.f32 .ec {\n background-position: 0 -2496px;\n}\n\n.f32 .ee {\n background-position: 0 -2528px;\n}\n\n.f32 .eg {\n background-position: 0 -2560px;\n}\n\n.f32 .eh {\n background-position: 0 -2592px;\n}\n\n.f32 .er {\n background-position: 0 -2624px;\n}\n\n.f32 .es {\n background-position: 0 -2656px;\n}\n\n.f32 .et {\n background-position: 0 -2688px;\n}\n\n.f32 .fi {\n background-position: 0 -2720px;\n}\n\n.f32 .fj {\n background-position: 0 -2752px;\n}\n\n.f32 .fm {\n background-position: 0 -2784px;\n}\n\n.f32 .fo {\n background-position: 0 -2816px;\n}\n\n.f32 .fr {\n background-position: 0 -2848px;\n}\n\n.f32 .bl, .f32 .cp, .f32 .mf, .f32 .yt {\n background-position: 0 -2848px;\n}\n\n.f32 .ga {\n background-position: 0 -2880px;\n}\n\n.f32 .gb {\n background-position: 0 -2912px;\n}\n\n.f32 .sh {\n background-position: 0 -2912px;\n}\n\n.f32 .gd {\n background-position: 0 -2944px;\n}\n\n.f32 .ge {\n background-position: 0 -2976px;\n}\n\n.f32 .gg {\n background-position: 0 -3008px;\n}\n\n.f32 .gh {\n background-position: 0 -3040px;\n}\n\n.f32 .gi {\n background-position: 0 -3072px;\n}\n\n.f32 .gl {\n background-position: 0 -3104px;\n}\n\n.f32 .gm {\n background-position: 0 -3136px;\n}\n\n.f32 .gn {\n background-position: 0 -3168px;\n}\n\n.f32 .gp {\n background-position: 0 -3200px;\n}\n\n.f32 .gq {\n background-position: 0 -3232px;\n}\n\n.f32 .gr {\n background-position: 0 -3264px;\n}\n\n.f32 .gt {\n background-position: 0 -3296px;\n}\n\n.f32 .gu {\n background-position: 0 -3328px;\n}\n\n.f32 .gw {\n background-position: 0 -3360px;\n}\n\n.f32 .gy {\n background-position: 0 -3392px;\n}\n\n.f32 .hk {\n background-position: 0 -3424px;\n}\n\n.f32 .hn {\n background-position: 0 -3456px;\n}\n\n.f32 .hr {\n background-position: 0 -3488px;\n}\n\n.f32 .ht {\n background-position: 0 -3520px;\n}\n\n.f32 .hu {\n background-position: 0 -3552px;\n}\n\n.f32 .id {\n background-position: 0 -3584px;\n}\n\n.f32 .mc {\n background-position: 0 -3584px;\n}\n\n.f32 .ie {\n background-position: 0 -3616px;\n}\n\n.f32 .il {\n background-position: 0 -3648px;\n}\n\n.f32 .im {\n background-position: 0 -3680px;\n}\n\n.f32 .in {\n background-position: 0 -3712px;\n}\n\n.f32 .iq {\n background-position: 0 -3744px;\n}\n\n.f32 .ir {\n background-position: 0 -3776px;\n}\n\n.f32 .is {\n background-position: 0 -3808px;\n}\n\n.f32 .it {\n background-position: 0 -3840px;\n}\n\n.f32 .je {\n background-position: 0 -3872px;\n}\n\n.f32 .jm {\n background-position: 0 -3904px;\n}\n\n.f32 .jo {\n background-position: 0 -3936px;\n}\n\n.f32 .jp {\n background-position: 0 -3968px;\n}\n\n.f32 .ke {\n background-position: 0 -4000px;\n}\n\n.f32 .kg {\n background-position: 0 -4032px;\n}\n\n.f32 .kh {\n background-position: 0 -4064px;\n}\n\n.f32 .ki {\n background-position: 0 -4096px;\n}\n\n.f32 .km {\n background-position: 0 -4128px;\n}\n\n.f32 .kn {\n background-position: 0 -4160px;\n}\n\n.f32 .kp {\n background-position: 0 -4192px;\n}\n\n.f32 .kr {\n background-position: 0 -4224px;\n}\n\n.f32 .kw {\n background-position: 0 -4256px;\n}\n\n.f32 .ky {\n background-position: 0 -4288px;\n}\n\n.f32 .kz {\n background-position: 0 -4320px;\n}\n\n.f32 .la {\n background-position: 0 -4352px;\n}\n\n.f32 .lb {\n background-position: 0 -4384px;\n}\n\n.f32 .lc {\n background-position: 0 -4416px;\n}\n\n.f32 .li {\n background-position: 0 -4448px;\n}\n\n.f32 .lk {\n background-position: 0 -4480px;\n}\n\n.f32 .lr {\n background-position: 0 -4512px;\n}\n\n.f32 .ls {\n background-position: 0 -4544px;\n}\n\n.f32 .lt {\n background-position: 0 -4576px;\n}\n\n.f32 .lu {\n background-position: 0 -4608px;\n}\n\n.f32 .lv {\n background-position: 0 -4640px;\n}\n\n.f32 .ly {\n background-position: 0 -4672px;\n}\n\n.f32 .ma {\n background-position: 0 -4704px;\n}\n\n.f32 .md {\n background-position: 0 -4736px;\n}\n\n.f32 .me {\n background-position: 0 -4768px;\n}\n\n.f32 .mg {\n background-position: 0 -4800px;\n}\n\n.f32 .mh {\n background-position: 0 -4832px;\n}\n\n.f32 .mk {\n background-position: 0 -4864px;\n}\n\n.f32 .ml {\n background-position: 0 -4896px;\n}\n\n.f32 .mm {\n background-position: 0 -4928px;\n}\n\n.f32 .mn {\n background-position: 0 -4960px;\n}\n\n.f32 .mo {\n background-position: 0 -4992px;\n}\n\n.f32 .mq {\n background-position: 0 -5024px;\n}\n\n.f32 .mr {\n background-position: 0 -5056px;\n}\n\n.f32 .ms {\n background-position: 0 -5088px;\n}\n\n.f32 .mt {\n background-position: 0 -5120px;\n}\n\n.f32 .mu {\n background-position: 0 -5152px;\n}\n\n.f32 .mv {\n background-position: 0 -5184px;\n}\n\n.f32 .mw {\n background-position: 0 -5216px;\n}\n\n.f32 .mx {\n background-position: 0 -5248px;\n}\n\n.f32 .my {\n background-position: 0 -5280px;\n}\n\n.f32 .mz {\n background-position: 0 -5312px;\n}\n\n.f32 .na {\n background-position: 0 -5344px;\n}\n\n.f32 .nc {\n background-position: 0 -5376px;\n}\n\n.f32 .ne {\n background-position: 0 -5408px;\n}\n\n.f32 .ng {\n background-position: 0 -5440px;\n}\n\n.f32 .ni {\n background-position: 0 -5472px;\n}\n\n.f32 .nl {\n background-position: 0 -5504px;\n}\n\n.f32 .bq {\n background-position: 0 -5504px;\n}\n\n.f32 .no {\n background-position: 0 -5536px;\n}\n\n.f32 .bv, .f32 .nq, .f32 .sj {\n background-position: 0 -5536px;\n}\n\n.f32 .np {\n background-position: 0 -5568px;\n}\n\n.f32 .nr {\n background-position: 0 -5600px;\n}\n\n.f32 .nz {\n background-position: 0 -5632px;\n}\n\n.f32 .om {\n background-position: 0 -5664px;\n}\n\n.f32 .pa {\n background-position: 0 -5696px;\n}\n\n.f32 .pe {\n background-position: 0 -5728px;\n}\n\n.f32 .pf {\n background-position: 0 -5760px;\n}\n\n.f32 .pg {\n background-position: 0 -5792px;\n}\n\n.f32 .ph {\n background-position: 0 -5824px;\n}\n\n.f32 .pk {\n background-position: 0 -5856px;\n}\n\n.f32 .pl {\n background-position: 0 -5888px;\n}\n\n.f32 .pr {\n background-position: 0 -5920px;\n}\n\n.f32 .ps {\n background-position: 0 -5952px;\n}\n\n.f32 .pt {\n background-position: 0 -5984px;\n}\n\n.f32 .pw {\n background-position: 0 -6016px;\n}\n\n.f32 .py {\n background-position: 0 -6048px;\n}\n\n.f32 .qa {\n background-position: 0 -6080px;\n}\n\n.f32 .re {\n background-position: 0 -6112px;\n}\n\n.f32 .ro {\n background-position: 0 -6144px;\n}\n\n.f32 .rs {\n background-position: 0 -6176px;\n}\n\n.f32 .ru {\n background-position: 0 -6208px;\n}\n\n.f32 .rw {\n background-position: 0 -6240px;\n}\n\n.f32 .sa {\n background-position: 0 -6272px;\n}\n\n.f32 .sb {\n background-position: 0 -6304px;\n}\n\n.f32 .sc {\n background-position: 0 -6336px;\n}\n\n.f32 .sd {\n background-position: 0 -6368px;\n}\n\n.f32 .se {\n background-position: 0 -6400px;\n}\n\n.f32 .sg {\n background-position: 0 -6432px;\n}\n\n.f32 .si {\n background-position: 0 -6464px;\n}\n\n.f32 .sk {\n background-position: 0 -6496px;\n}\n\n.f32 .sl {\n background-position: 0 -6528px;\n}\n\n.f32 .sm {\n background-position: 0 -6560px;\n}\n\n.f32 .sn {\n background-position: 0 -6592px;\n}\n\n.f32 .so {\n background-position: 0 -6624px;\n}\n\n.f32 .sr {\n background-position: 0 -6656px;\n}\n\n.f32 .st {\n background-position: 0 -6688px;\n}\n\n.f32 .sv {\n background-position: 0 -6720px;\n}\n\n.f32 .sy {\n background-position: 0 -6752px;\n}\n\n.f32 .sz {\n background-position: 0 -6784px;\n}\n\n.f32 .tc {\n background-position: 0 -6816px;\n}\n\n.f32 .td {\n background-position: 0 -6848px;\n}\n\n.f32 .tg {\n background-position: 0 -6880px;\n}\n\n.f32 .th {\n background-position: 0 -6912px;\n}\n\n.f32 .tj {\n background-position: 0 -6944px;\n}\n\n.f32 .tl {\n background-position: 0 -6976px;\n}\n\n.f32 .tm {\n background-position: 0 -7008px;\n}\n\n.f32 .tn {\n background-position: 0 -7040px;\n}\n\n.f32 .to {\n background-position: 0 -7072px;\n}\n\n.f32 .tr {\n background-position: 0 -7104px;\n}\n\n.f32 .tt {\n background-position: 0 -7136px;\n}\n\n.f32 .tv {\n background-position: 0 -7168px;\n}\n\n.f32 .tw {\n background-position: 0 -7200px;\n}\n\n.f32 .tz {\n background-position: 0 -7232px;\n}\n\n.f32 .ua {\n background-position: 0 -7264px;\n}\n\n.f32 .ug {\n background-position: 0 -7296px;\n}\n\n.f32 .us {\n background-position: 0 -7328px;\n}\n\n.f32 .uy {\n background-position: 0 -7360px;\n}\n\n.f32 .uz {\n background-position: 0 -7392px;\n}\n\n.f32 .va {\n background-position: 0 -7424px;\n}\n\n.f32 .vc {\n background-position: 0 -7456px;\n}\n\n.f32 .ve {\n background-position: 0 -7488px;\n}\n\n.f32 .vg {\n background-position: 0 -7520px;\n}\n\n.f32 .vi {\n background-position: 0 -7552px;\n}\n\n.f32 .vn {\n background-position: 0 -7584px;\n}\n\n.f32 .vu {\n background-position: 0 -7616px;\n}\n\n.f32 .ws {\n background-position: 0 -7648px;\n}\n\n.f32 .ye {\n background-position: 0 -7680px;\n}\n\n.f32 .za {\n background-position: 0 -7712px;\n}\n\n.f32 .zm {\n background-position: 0 -7744px;\n}\n\n.f32 .zw {\n background-position: 0 -7776px;\n}\n\n.f32 .sx {\n background-position: 0 -7808px;\n}\n\n.f32 .cw {\n background-position: 0 -7840px;\n}\n\n.f32 .ss {\n background-position: 0 -7872px;\n}\n\n.f32 .nu {\n background-position: 0 -7904px;\n}" }, { "path": "src/app/locale-selector/local-selector.ts", "content": "import {ChangeDetectionStrategy, EventEmitter, Component, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n selector: 'locale-selector',\n styleUrls: ['./local-selector.css'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
    \n
      \n
    • \n
      • \n
    \n
    \n
    \n

    Selected language: {{m_selectedLocale?.name}}

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    {{locale.name}}
    \n
    \n `\n})\nexport class LocaleSelector extends Compbaser {\n\n m_selectedLocale;\n m_orientation;\n\n /**\n locale info:\n\n project: https://github.com/lafeber/world-flags-sprite\n flags codes: https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2\n google codes: https://cloud.google.com/translate/docs/languages\n docs: https://angular.io/docs/ts/latest/cookbook/i18n.html\n\n **/\n\n locales = [\n {flag: 'us', locale: 'en', name: 'English'},\n {flag: 'cn', locale: 'zh-CN', name: 'Chinese'},\n {flag: 'in', locale: 'bn', name: 'Bengali'},\n {flag: 'es', locale: 'es', name: 'Spanish'},\n {flag: 'in', locale: 'hi', name: 'Hindi'},\n {flag: 'jo', locale: 'ar', name: 'Arabic'},\n {flag: 'il', locale: 'iw', name: 'Hebrew'},\n {flag: 'br', locale: 'pt', name: 'Portuguese'},\n {flag: 'de', locale: 'de', name: 'German'},\n {flag: 'jp', locale: 'ja', name: 'Japanese'},\n {flag: 'ru', locale: 'ru', name: 'Russian'},\n {flag: 'ph', locale: 'tl', name: 'Filipino'},\n {flag: 'fr', locale: 'fr', name: 'French'},\n {flag: 'gr', locale: 'el', name: 'Greek'},\n {flag: 'kr', locale: 'ko', name: 'Korean'},\n {flag: 'th', locale: 'th', name: 'Thai'},\n {flag: 'my', locale: 'ms', name: 'Malay'},\n {flag: 'it', locale: 'it', name: 'Italian'}\n ]\n\n constructor(private yp: YellowPepperService) {\n super();\n }\n\n @Input()\n set orientation(i_orientation: 'inline' | 'modal') {\n this.m_orientation = i_orientation;\n }\n\n @Output()\n onLocaleChanged: EventEmitter = new EventEmitter();\n\n _saveAndReload() {\n this.onLocaleChanged.emit(this.m_selectedLocale);\n }\n\n _onSelected(i_locale) {\n this.m_selectedLocale = i_locale;\n }\n\n public redirect(i_locale) {\n window.onbeforeunload = () => {\n };\n window.location.replace(`https://secure.digitalsignage.com/studioweb/locale/${i_locale.locale}/`);\n }\n\n destroy() {\n }\n}\n\n" }, { "path": "src/app/location/location-map.html", "content": "{{me}}\n\n
    \n
    \n
    \n
    \n
    \n \n \n
    \n simulation mode\n
    \n
    \n \n \n \n
    {{m_simStatus}}
    \n
    Latitude: {{m_simulatedLat}}
    \n
    longitude: {{m_simulatedLng}}
    \n
    {{m_simUrl}}
    \n
    \n
    \n \n
    \n\n
    \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n\n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "src/app/location/location-map.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Inject, NgZone, Output, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {SebmGoogleMap} from \"angular2-google-maps/esm/core\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {MapsAPILoader} from \"angular2-google-maps/core\";\nimport {BlockService, IBlockData, ISceneData} from \"../blocks/block-service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {PLACEMENT_CHANNEL, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {CampaignTimelineChanelPlayersModel} from \"../../store/imsdb.interfaces_auto\";\nimport {LocationMarkModel} from \"../../models/LocationMarkModel\";\nimport {FormBuilder, FormGroup} from \"@angular/forms\";\nimport * as _ from 'lodash';\n\nexport declare var google: any;\n\n/**\n * examples:\n * http://embed.plnkr.co/YX7W20/\n * http://plnkr.co/edit/NtfCPol50mlwGoiB8UZu?p=preview\n *\n * **/\n\n@Component({\n selector: 'location-map',\n styles: [`\n .sebm-google-map-container {\n height: 700px;\n width: 1700px;\n }\n\n .green {\n background-color: green;\n color: white;\n }\n\n .locationSimulationProps {\n width: 420px;\n height: 160px;\n border: 1px dotted gray;\n padding: 6px;\n }\n\n #simModeContainer {\n padding: 0 20px 20px 0;\n position: relative;\n top: -20px;\n }\n\n #addressLookup {\n z-index: 1;\n position: relative;\n top: 50px;\n width: 300px;\n }\n\n #refresh {\n position: relative;\n top: -1px;\n height: 31px;\n }\n\n `],\n templateUrl: './location-map.html'\n})\nexport class LocationMap extends Compbaser implements AfterViewInit {\n\n zoom: any = 8;\n lat: any = 51.673858;\n lng: any = 7.815982;\n markers: LocationMarkModel[] = [];\n m_stations = [];\n inSimMode = false;\n m_inRange = false;\n m_simStatus = 'status: waiting...'\n m_simulatedLat = 0;\n m_simulatedLng = 0;\n m_simUrl = '';\n m_blockData: IBlockData;\n contGroup: FormGroup;\n\n\n constructor(private yp: YellowPepperService, private cd: ChangeDetectorRef, private m_mapsAPILoader: MapsAPILoader, private fb: FormBuilder,\n private zone: NgZone, private bs: BlockService, @Inject('BLOCK_PLACEMENT') private blockPlacement: string, private rp: RedPepperService) {\n super();\n this.contGroup = fb.group({\n 'stations': [],\n 'postMode': []\n });\n }\n\n @ViewChild('address')\n address;\n\n @ViewChild('googleMaps')\n googleMaps: SebmGoogleMap;\n\n @Output()\n onClose: EventEmitter = new EventEmitter();\n\n ngAfterViewInit() {\n\n // Google Place Autocomplete\n var autocomplete: any;\n // var inputAddress = document.getElementById(\"address\");\n\n this.m_mapsAPILoader.load().then(() => {\n console.log('google script loaded');\n\n autocomplete = new google.maps.places.Autocomplete(this.address.nativeElement, {});\n google.maps.event.addListener(autocomplete, 'place_changed', () => {\n\n this.zone.run(() => {\n /*\n \"Zone.run\" allows the map to be immediately updated.\n Without it, you would have to click the map to observe\n the new lat and lng\n */\n var place = autocomplete.getPlace();\n if (!place || !place.geometry) return;\n var lat = place.geometry.location.lat();\n var lng = place.geometry.location.lng();\n this.setCenter(lat, lng)\n });\n\n });\n\n // var geocoder = new google.maps.Geocoder();\n });\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMarkerSelected()\n .subscribe((i_marker: LocationMarkModel) => {\n this.setCenter(i_marker.lat, i_marker.lng)\n }, (e) => console.error(e))\n )\n\n if (this.blockPlacement == PLACEMENT_CHANNEL)\n this._listenOnChannels();\n if (this.blockPlacement == PLACEMENT_SCENE)\n this._listenOnScenes();\n }\n\n _toggleSimMode() {\n this.inSimMode = !this.inSimMode;\n if (!this.inSimMode) {\n this.m_simulatedLat = 0;\n this.m_simulatedLng = 0;\n this.m_inRange = false;\n } else {\n this._loadStationList();\n this.contGroup.controls.postMode.setValue('local');\n }\n this.cd.markForCheck();\n }\n\n /**\n Load and refresh the station list so we can pull station id for simulation\n @method _loadStationList\n **/\n _loadStationList() {\n var self = this;\n this.m_stations = [];\n this.contGroup.controls.stations.setValue('');\n var userData = this.rp.getUserData();\n var url = window.g_protocol + userData.domain + '/WebService/getStatus.ashx?user=' + userData.userName + '&password=' + userData.userPass + '&callback=?';\n $.getJSON(url, (data) => {\n var s64 = data['ret'];\n var str = jQuery.base64.decode(s64);\n var xml = jXML.parseXML(str);\n $(xml).find('Station').each((key, value) => {\n var stationId = $(value).attr('id');\n var stationName = $(value).attr('name');\n var stationPort = $(value).attr('localPort') || 9999;\n var stationIp = $(value).attr('localAddress');\n self.m_stations.push({stationIp, stationId, stationName, stationPort});\n });\n self.cd.markForCheck();\n });\n }\n\n _onStationSelected(event) {\n console.log(this.contGroup.value);\n }\n\n /**\n Simulate a trigger event of GPS coordinates by user clicks within the google map\n @method _simulateEvent\n @param {Number} lat\n @param {Number} lng\n @param {Boolean} inRange true if clicked within a marked circle radius\n **/\n private _simulateEvent(i_marker: LocationMarkModel, i_inRange) {\n this.m_inRange = i_inRange;\n this.m_simulatedLat = i_marker.lat;\n this.m_simulatedLng = i_marker.lng;\n\n var selected = this.contGroup.value.stations;\n if (_.isNull(selected) || _.isEmpty(selected))\n return bootbox.alert('no station selected...');\n var postMode = this.contGroup.value.postMode;\n var msg = (postMode == 'local') ? 'click link below to send post...' : 'sending post...';\n\n var id = this.contGroup.value.stations.stationId;\n var ip = this.contGroup.value.stations.stationIp;\n var stationRecord = this.rp.getStationRecord(id);\n var port = stationRecord.lan_server_port;\n var url = this.rp.sendLocalEventGPS(postMode, this.m_simulatedLat, this.m_simulatedLng, id, ip, port, function (e) {\n console.log(e);\n });\n this.m_simStatus = msg;\n this.m_simUrl = url;\n }\n\n _openSimUrl() {\n if (this.contGroup.value.postMode != 'local') return;\n var id = this.contGroup.value.stations.stationId;\n var ip = this.contGroup.value.stations.stationIp;\n var stationRecord = this.rp.getStationRecord(id);\n var port = stationRecord.lan_server_port;\n var url = this.rp.sendLocalEventGPS('local', this.m_simulatedLat, this.m_simulatedLng, id, ip, port, function (e) {\n console.log(e);\n });\n window.open(url, '_blank');\n }\n\n private _listenOnChannels() {\n this.cancelOnDestroy(\n //\n this.yp.listenBlockChannelSelectedOrChanged()\n .mergeMap((i_campaignTimelineChanelPlayersModel: CampaignTimelineChanelPlayersModel) => {\n return this.bs.getBlockData(i_campaignTimelineChanelPlayersModel.getCampaignTimelineChanelPlayerId())\n })\n .subscribe((blockData: IBlockData) => {\n this.m_blockData = blockData;\n this.render();\n\n }, (e) => console.error(e))\n )\n }\n\n private _listenOnScenes() {\n this.cancelOnDestroy(\n //\n this.yp.listenSceneOrBlockSelectedChanged()\n .mergeMap((i_sceneData: ISceneData) => {\n return this.bs.getBlockDataInScene(i_sceneData)\n })\n .subscribe((blockData: IBlockData) => {\n this.m_blockData = blockData;\n this.render();\n }, (e) => console.error(e))\n )\n }\n\n render() {\n this.markers = [];\n var domPlayerData = this.bs.getBlockPlayerData(this.m_blockData)\n $(domPlayerData).find('GPS').children().each((k, v) => {\n var marker: LocationMarkModel = new LocationMarkModel({\n draggable: false,\n label: '',\n lat: parseFloat(jXML(v).attr('lat')),\n lng: parseFloat(jXML(v).attr('lng')),\n radius: parseFloat(jXML(v).attr('radios')) * 1000, // convert to meters\n });\n this.markers.push(marker);\n //map.points.push(point);\n\n });\n if (this.markers.length > 0)\n this.setCenter(this.markers[0].lat, this.markers[0].lng);\n this.forceUpdateUi()\n }\n\n clickedMarker(i_marker: LocationMarkModel, index: number) {\n if (this.inSimMode)\n return this._simulateEvent(i_marker, true);\n // con(`clicked the marker: ${i_marker.label || index}`)\n var uiState: IUiState = {locationMap: {locationMarkerSelected: i_marker}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n mapClicked($event: MouseEvent) {\n let marker: LocationMarkModel = new LocationMarkModel({\n id: Math.random(),\n radius: 10000,\n lat: $event['coords'].lat,\n lng: $event['coords'].lng,\n draggable: true,\n new: true\n });\n\n if (this.inSimMode)\n return this._simulateEvent(marker, false);\n\n // enable code below if you wish to add new marker and not through reactive\n // this.markers.push(marker);\n // this.forceUpdateUi();\n var uiState: IUiState = {locationMap: {locationMarkerSelected: marker}}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n markerDragEnd(m: LocationMarkModel, $event: MouseEvent) {\n console.log('dragEnd', m, $event);\n }\n\n _close() {\n var uiState: IUiState = {\n locationMap: {\n loadLocationMap: false\n }\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onClose.emit()\n }\n\n public forceUpdateUi() {\n this.cd.detach();\n setTimeout(() => {\n this.cd.reattach();\n this.googleMaps.triggerResize();\n this.cd.markForCheck();\n }, 300)\n }\n\n public setCenter(lat, lng) {\n // for private access to all APIs do:\n this.googleMaps['_mapsWrapper'].setCenter({\n lat: lat,\n lng: lng,\n });\n this.forceUpdateUi();\n }\n\n destroy() {\n }\n}\n\n\n/**\n Create the google map and listen to corresponding events such map clicks (not within a circle or marker)\n as well as the Search box find input etc\n @method _createMap\n **/\n// _createMap() {\n// var self = this;\n// google.maps.LatLng.prototype.destinationPoint = function (brng, dist) {\n// dist = dist / 6371;\n// brng = brng.toRad();\n//\n// var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();\n//\n// var lat2:any = Math.asin(Math.sin(lat1) * Math.cos(dist) +\n// Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));\n//\n// var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *\n// Math.cos(lat1),\n// Math.cos(dist) - Math.sin(lat1) *\n// Math.sin(lat2));\n//\n// if (isNaN(lat2) || isNaN(lon2)) return null;\n//\n// return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());\n// };\n//\n// var pointA = new google.maps.LatLng(34.155260, -118.787163); // Circle center\n// var radius = 1; // 10km\n//\n// var mapOpt = {\n// mapTypeId: google.maps.MapTypeId.TERRAIN,\n// center: pointA,\n// zoom: 10\n// };\n// var map = $('.map', self.el.nativeElement);\n// // self.m_map = new google.maps.Map(map[0], mapOpt);\n// console.log(this.googleMaps);\n\n/*\n\n // Create the search box and link it to the UI element.\n //var input = $('#pac-input', self.el)[0];\n var c = $('.inputPlacement', self.el);\n $(c).append('');\n var input = $(c).find('input')[0];\n\n\n var searchBox = new google.maps.places.SearchBox(input);\n self.m_map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);\n\n // Bias the SearchBox results towards current map's viewport.\n self.m_map.addListener('bounds_changed', function () {\n searchBox.setBounds(self.m_map.getBounds());\n });\n\n var markers = [];\n // Listen for the event fired when the user selects a prediction and retrieve details for location\n searchBox.addListener('places_changed', function () {\n var places = searchBox.getPlaces();\n\n if (places.length == 0) {\n return;\n }\n\n // Clear out the old markers.\n markers.forEach(function (marker) {\n marker.setMap(null);\n });\n markers = [];\n\n // For each place, get the icon, name and location.\n var bounds = new google.maps.LatLngBounds();\n places.forEach(function (place) {\n var icon = {\n url: place.icon,\n size: new google.maps.Size(71, 71),\n origin: new google.maps.Point(0, 0),\n anchor: new google.maps.Point(17, 34),\n scaledSize: new google.maps.Size(25, 25)\n };\n\n // Create a marker for each place.\n markers.push(new google.maps.Marker({\n map: self.m_map,\n icon: icon,\n title: place.name,\n position: place.geometry.location\n }));\n\n if (place.geometry.viewport) {\n // Only geocodes have viewport.\n bounds.union(place.geometry.viewport);\n } else {\n bounds.extend(place.geometry.location);\n }\n });\n self.m_map.fitBounds(bounds);\n });\n\n google.maps.event.addListener(self.m_map, 'click', function (event) {\n var lat = event.latLng.lat();\n var lng = event.latLng.lng();\n if (self._getSimulationMode()) {\n console.log('out of range ' + lat + ' ' + lng);\n self._simulateEvent(lat, lng, false);\n return;\n }\n if (self.m_markerOnClick) {\n self.addPoint(event.latLng, 0.10);\n self.m_markerOnClick = false;\n BB.comBroker.fire(BB.EVENTS.ADD_LOCATION_POINT, self, null, {lat: lat, lng: lng});\n }\n });\n */\n//}\n\n\n// export interface IMarker {\n// lat: number;\n// lng: number;\n// radius: number;\n// draggable: boolean;\n// new:boolean;\n// }\n\n" }, { "path": "src/app/resources/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {ResourcesNavigation} from \"./resources-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {Orders} from \"./orders\";\nimport {ResourcePropsManager} from \"./resource-props-manager\";\nimport {Resources} from \"./resources\";\nimport {ResourcesList} from \"./resources-list\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: ResourcesNavigation},\n {path: ':folder/:id', component: ResourcesNavigation},\n {path: '**', component: ResourcesNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [ResourcesNavigation, Orders, ResourcePropsManager, Resources, ResourcesList]\n})\nexport class ResourcesLazyModule {\n}" }, { "path": "src/app/resources/orders.ts", "content": "import {Component, ChangeDetectionStrategy} from \"@angular/core\";\n\n@Component({\n selector: 'orders',\n styles: [`\n .page {\n padding-left: 100px;\n padding-top: 40px;\n }\n `],\n template: `\n \n
    \n \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n

    Order 1

    \n     \n \n

    Order 2

    \n     \n \n

    Order 3

    \n     \n
    \n     \n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n\nexport class Orders {\n}\n\n" }, { "path": "src/app/resources/resource-props-manager.ts", "content": "import {Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable} from \"rxjs\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {Lib} from \"../../Lib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\n\n@Component({\n selector: 'resource-props-manager',\n styles: [`\n ul {\n padding: 0\n }\n `],\n template: `\n {{me}}\n
    \n
      \n
      \n
      resource property
      \n \n
      \n
      \n
      \n \n
      \n
      \n \n \n
      \n
      \n
      \n
      \n
      \n \n
      \n
      \n
      \n
      \n
      \n

      Flash swf content

      \n
      \n \n
      \n
      \n
      \n\n
      \n\n
      \n \n
      \n\n
    \n\n\n\n `,\n})\nexport class ResourcePropsManager extends Compbaser {\n\n m_resourceType;\n m_sideProps$: Observable;\n m_sidePropsEnum = SideProps;\n m_uiUserFocusItem$: Observable;\n m_formatIcon = '';\n m_resourceName = '';\n m_selectedResource: ResourcesModel;\n m_playResource = '';\n m_svgPath = '';\n m_imagePath = '';\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_uiUserFocusItem$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n this.m_sideProps$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n\n this.cancelOnDestroy(\n //\n this.yp.listenResourceSelected()\n .subscribe((i_resource: ResourcesModel) => {\n this.m_selectedResource = i_resource;\n this.m_resourceName = this.m_selectedResource.getResourceName();\n switch (this.m_selectedResource.getResourceType()) {\n case 'svg':{\n this.m_formatIcon = 'spinner';\n this.m_resourceType = 'svg';\n\n\n path = window['g_protocol'] + this.rp.getUserData().domain + '/Resources/business' + this.rp.getUserData().businessID + '/resources/' + this.rp.getResourceNativeID(this.m_selectedResource.getResourceId()) + '.' + 'svg';\n path = $.base64.encode(path);\n // var path = window['g_protocol'] + 's3.signage.me/business' + this.rp.getUserData().businessID + '/resources/' + this.rp.getResourceNativeID(this.m_selectedResource.getResourceId()) + '.' + this.m_selectedResource.getResourceType();\n // var urlPath = $.base64.encode(path);\n // this.m_svgPath = 'https://secure.digitalsignage.com/proxyRequest/' + path;\n // console.log(this.m_svgPath);\n this.m_svgPath = 'https://secure.digitalsignage.com/proxyRequest/' + path;\n // this.m_svgPath = 'https://secure.digitalsignage.com/proxyRequest/aHR0cHM6Ly9wbHV0by5zaWduYWdlLm1lL1Jlc291cmNlcy9idXNpbmVzczM1ODYxMy9yZXNvdXJjZXMvMzQuc3Zn';\n break;\n }\n case 'jpg':\n case 'png': {\n this.m_formatIcon = 'image';\n this.m_resourceType = 'image';\n var path = 'http://' + 's3.signage.me/business' + this.rp.getUserData().businessID + '/resources/' + this.rp.getResourceNativeID(this.m_selectedResource.getResourceId()) + '.' + this.m_selectedResource.getResourceType();\n this.m_imagePath = path;\n break;\n }\n case 'm4v':\n case 'mp4':\n case 'flv': {\n this.m_formatIcon = 'video-camera';\n this.m_resourceType = 'video';\n var path = 'http://' + 's3.signage.me/business' + this.rp.getUserData().businessID + '/resources/' + this.rp.getResourceNativeID(this.m_selectedResource.getResourceId()) + '.' + this.m_selectedResource.getResourceType();\n this.m_playResource = path;\n // path = window['g_protocol'] + BB.Pepper.getUserData().domain + '/Resources/business' + BB.Pepper.getUserData().businessID + '/resources/' + BB.Pepper.getResourceNativeID(i_recResource['resource_id']) + '.' + ext;\n console.log(path);\n break;\n }\n case 'swf': {\n this.m_formatIcon = 'bolt';\n this.m_resourceType = 'swf';\n break;\n }\n }\n }, (e) => console.error(e))\n )\n\n }\n\n _onUpdateResourceName(event) {\n var text = Lib.CleanProbCharacters(this.m_resourceName, 1);\n this.rp.setResourceRecord(this.m_selectedResource.getResourceId(), 'resource_name', text);\n this.rp.reduxCommit();\n // var elem = self.$el.find('[data-resource_id=\"' + this.m_selectedResource.getResourceId() + '\"]');\n // elem.find('span').text(text);\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/resources/resources-list.ts", "content": "import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {List} from \"immutable\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {IUiState} from \"../../store/store.data\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\n\n@Component({\n selector: 'resources-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n `,\n})\nexport class ResourcesList extends Compbaser {\n selectedIdx = -1;\n m_resources: List;\n m_selected;\n\n constructor(public bs: BlockService, private el: ElementRef) {\n super();\n }\n\n @Input()\n set resources(i_resources: List) {\n this.m_resources = i_resources;\n }\n\n \n @Input() filter;\n\n @Input()\n set setViewMode(i_viewMode: 'grid' | 'list') {\n if (i_viewMode == 'list') {\n var query = $('.resourcesListItems', this.el.nativeElement);\n $(query).addClass('col-xs-12');\n $(query).removeClass('col-xs-3');\n }\n\n if (i_viewMode == 'grid') {\n var query = $('.resourcesListItems', this.el.nativeElement);\n $(query).addClass('col-xs-3');\n $(query).removeClass('col-xs-12');\n }\n }\n\n\n @Output()\n onSelected: EventEmitter = new EventEmitter();\n\n _onSelected(event: MouseEvent, i_resource: ResourcesModel, index) {\n this.selectedIdx = index;\n this.onSelected.emit(i_resource)\n this.m_selected = i_resource;\n }\n\n resetSelection() {\n this.selectedIdx = -1;\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/resources/resources-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {Compbaser} from \"ng-mslib\";\nimport {BlockService} from \"../blocks/block-service\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n providers: [BlockService, {\n provide: \"BLOCK_PLACEMENT\",\n useValue: ''\n }\n ],\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n resource-navigation\n \n \n \n \n \n \n \n \n \n `,\n})\nexport class ResourcesNavigation extends Compbaser {\n\n constructor() {\n super();\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/resources/resources.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {List} from \"immutable\";\nimport {Observable} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\n\n@Component({\n // changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'resources',\n template: `\n {{me}}\n
    \n \n
    \n \n \n \n \n
    \n
    supported files: flv, mp4, jpg, png, swf and svg
    \n
    \n
      \n
      \n
      \n \n
      \n
      \n \n \n
      \n
      \n `,\n styles: [`\n\n /*:host /deep/ vg-player {*/\n /*background-color: transparent;*/\n /*margin: 30px;*/\n /*width: 30%;*/\n /*height: calc(100% - 60px);*/\n /*}*/\n\n /*:host /deep/ vg-player {*/\n /*background-color: transparent;*/\n /*margin: 30px;*/\n /*width: 30%;*/\n /*height: calc(100% - 60px);*/\n /*}*/\n\n * {\n border-radius: 0 !important;\n }\n\n vg-player {\n background-color: transparent;\n margin: 30px;\n width: 30%;\n height: calc(100% - 60px);\n }\n\n vg-controls {\n padding: 30px;\n transition: all 1s;\n }\n\n #resourcesPanel {\n padding: 10px;\n }\n\n .myFile {\n position: relative;\n overflow: hidden;\n float: left;\n clear: left;\n }\n\n .myFile input[type=\"file\"] {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n opacity: 0;\n font-size: 100px;\n filter: alpha(opacity=0);\n cursor: pointer;\n }\n `]\n})\n\nexport class Resources extends Compbaser {\n\n m_filter;\n m_resourceModel: ResourcesModel;\n m_viewMode = 'list';\n m_resourceModels$: Observable>;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private bs: BlockService) {\n super();\n this.m_resourceModels$ = this.yp.listenResources();\n this.cancelOnDestroy(\n //\n this.yp.listenResourceSelected()\n .subscribe((i_resources: ResourcesModel) => {\n this.m_resourceModel = i_resources;\n }, (e) => console.error(e))\n )\n }\n\n _onRemove() {\n bootbox.confirm(`are you sure you want to remove ${this.m_resourceModel.getResourceName()}`, (i_result) => {\n if (!i_result) return;\n this.rp.removeResource(this.m_resourceModel.getResourceId());\n this.rp.removeBlocksWithResourceID(this.m_resourceModel.getResourceId());\n this.rp.removeResourceFromBlockCollectionInScenes(this.m_resourceModel.getResourceId());\n this.rp.removeResourceFromBlockLocationInScenes(this.m_resourceModel.getResourceId());\n this.rp.removeResourceFromBlockCollectionsInChannel(this.m_resourceModel.getResourceId());\n this.rp.removeResourceFromBlockLocationInChannel(this.m_resourceModel.getResourceId());\n this.rp.removeAllScenePlayersWithResource(this.m_resourceModel.getResourceId());\n this.rp.reduxCommit();\n let uiState: IUiState = {\n uiSideProps: SideProps.miniDashboard,\n resources: {resourceSelected: -1}\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n });\n }\n\n _onFileUpload(event) {\n var status: any = this.rp.uploadResources('file', this.bs);\n if (status.length == 0) {\n bootbox.alert('The file format is not supported');\n return -1;\n }\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'uploaded resource'})}));\n }\n\n _onSelected(i_resource: ResourcesModel) {\n let uiState: IUiState = {\n uiSideProps: SideProps.resourceProps,\n resources: {resourceSelected: i_resource.getResourceId()}\n }\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n}\n\n" }, { "path": "src/app/route-animation.ts", "content": "// import {trigger, state, animate, style, transition} from '@angular/core';\n//\n// export function routerTransition() {\n// return animateRoute();\n// }\n//\n// function animateRoute() {\n// return trigger('routerTransition', [\n// state('*', style({opacity: 1})),\n// transition('void => *', [\n// style({opacity: 0}),\n// animate(333)\n// ]),\n// transition('* => void', animate(333, style({opacity: 0})))\n// ]);\n// }" }, { "path": "src/app/scenes/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {ScenesNavigation} from \"./scenes-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {ScenePropsManager} from \"./scene-props-manager\";\nimport {SceneList} from \"./scene-list\";\nimport {SceneManager} from \"./scene-manager\";\nimport {Scenes} from \"./scenes\";\nimport {SceneEditor} from \"./scene-editor\";\nimport {SceneToolbar} from \"./scene-toolbar\";\nimport {BlockPropPosition} from \"../blocks/block-prop-position\";\nimport {Ng2Bs3ModalModule} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {SceneCreator} from \"./scene-creator\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: ScenesNavigation},\n {path: ':folder/:id', component: ScenesNavigation},\n {path: '**', component: ScenesNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, Ng2Bs3ModalModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [Scenes, SceneEditor, SceneCreator, SceneToolbar, ScenesNavigation, ScenePropsManager, SceneManager, SceneList, BlockPropPosition]\n})\nexport class ScenesLazyModule {\n}" }, { "path": "src/app/scenes/scene-creator.css", "content": "\n.profileCard {\n margin-bottom: 20px;\n}\n\n.profileCard {\n border-radius: 2px;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n padding: 15px;\n margin-top: 60px;\n float: left;\n height: 333px;\n background-color: #FFF;\n cursor: pointer;\n position: relative;\n top:0;\n left: 0;\n /*transition-property: top, left, box-shadow;*/\n transition-property: top;\n transition-duration: 0.3s;\n}\n\n.sceneImportThumb {\n width: 139px;\n height: 78px;\n border: solid 2px gray;\n cursor: pointer;\n transition: all .2s ease-in-out;\n}\n\n.sceneImportThumb:hover {\n transform: scale(1.1);\n}\n\n\n.profileCard:hover {\n top: -7px;\n /*left: 4px;*/\n /*z-index: 200;*/\n /*-webkit-box-shadow: 18px 24px 16px -3px rgba(0,0,0,0.25);*/\n /*-moz-box-shadow: 18px 24px 16px -3px rgba(0,0,0,0.25);*/\n /*box-shadow: 18px 24px 16px -3px rgba(0,0,0,0.25);*/\n\n}\n\n.profileCard .pImg {\n background-color: #40a5ec;\n border-radius: 50% !important;\n display: table;\n height: 100px;\n margin: 0 auto;\n width: 100px;\n margin-top: -60px;\n}\n\n.profileCard .pImg span {\n color: #fff;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n}\n\n.profileCard1 .pDes > p {\n color: #717171;\n font-size: 13px;\n padding-top: 10px;\n text-align: justify;\n}\n\n.profileCard1 .pDes > a {\n background-color: #03a9f4;\n border-radius: 2px;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n color: #fff;\n transition: all 0.5s ease 0s;\n position: absolute;\n top: 285px;\n opacity: 0.3;\n\n\n}\n\n.profileCard1 .pDes > a {\n background-color: #03a9f4;\n border-radius: 2px;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);\n color: #fff;\n transition: all 0.5s ease 0s;\n}\n\n.profileCard1 .pDes > a:hover {\n background-color: #0288d1;\n box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);\n color: #fff;\n transition: all 0.5s ease 0s;\n}\n" }, { "path": "src/app/scenes/scene-creator.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit, Output, EventEmitter, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {BlockService} from \"../blocks/block-service\";\nimport * as _ from 'lodash';\nimport {Lib} from \"../../Lib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {PLACEMENT_IS_SCENE} from \"../../interfaces/Consts\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\n\n@Component({\n selector: 'scene-creator',\n styleUrls: ['./scene-creator.css'],\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n
      \n
      \n
      \n
      \n
      \n \n
      \n
      \n

      {{category.name}}

      \n

      {{category.description}}

      \n \n \n \n
      \n
      \n
      \n
      \n
      \n
      \n \n \n
      \n
      \n \n \n

      import template

      \n       \n \n \n \n \n       \n `,\n})\nexport class SceneCreator extends Compbaser implements AfterViewInit {\n\n m_selectedAccount;\n m_largePreview = '';\n m_sceneCategories = [];\n m_sceneAccounts = [];\n m_selectTypeMode = true;\n m_sceneTemplates;\n m_selectedSceneMime: string;\n\n constructor(private yp: YellowPepperService, private bs: BlockService, private rp: RedPepperService, private toastr: ToastsManager) {\n super();\n this._initSceneTemplates();\n }\n\n @ViewChild(ModalComponent)\n modal: ModalComponent;\n\n @Output()\n onGoBack: EventEmitter = new EventEmitter();\n\n ngAfterViewInit() {\n\n this.m_sceneCategories = [\n {\n name: 'from empty',\n mimeType: 'blank',\n icon: 'fa-star',\n description: 'Create your own design, simply start with a blank scene and mix in your favorite images, videos, SVG graphics and even smart components. Get all the power to design your own custom scene.'\n },\n {\n name: 'from template',\n mimeType: 'template',\n icon: 'fa-paint-brush',\n description: 'With hundreds of beautiful pre-made designs you are sure to find something you like. The scene templates are preloaded with images and labels so its a great way to get started'\n }\n ];\n\n var blocks = (this.bs.getBlocks());\n _.forEach(blocks, (block: any) => {\n if (block.mimeType) {\n this.m_sceneCategories.push({\n name: block.description,\n mimeType: block.mimeType,\n icon: block.fontAwesome,\n description: block.jsonItemLongDescription\n });\n }\n });\n\n this.cancelOnDestroy(\n this.yp.listenMainAppState()\n .skip(1)\n .subscribe(i_status => {\n if (i_status == MainAppShowStateEnum.SAVED) {\n this.toastr.info('scene imported and is available in scene list');\n this._goBack();\n }\n })\n )\n\n }\n\n _onSceneImport() {\n this.rp.loaderManager.importScene(this.m_selectedAccount.businessId, this.m_selectedAccount.nativeId, (i_SceneId) => {\n this.rp.injectPseudoScenePlayersIDs(i_SceneId);\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'scene imported id: ' + i_SceneId})}));\n });\n }\n\n _onTemplateSelected(account) {\n this.m_selectedAccount = account;\n this.m_largePreview = `http://s3.signage.me/business1000/resources/scenes_snaps/${account.sceneName}.png`\n this.modal.open();\n }\n\n private _getTemplates() {\n this.m_sceneAccounts = [];\n for (var sceneName in this.m_sceneTemplates) {\n var sceneConfig = this.m_sceneTemplates[sceneName];\n\n switch (this.m_selectedSceneMime) {\n case 'Json.digg': {\n if (sceneName.indexOf('Digg') == -1)\n continue;\n break;\n }\n case 'Json.twitter': {\n if (sceneName.indexOf('Twitter') == -1)\n continue;\n break;\n }\n case 'Json.instagram': {\n if (sceneName.indexOf('Instagram') == -1)\n continue;\n break;\n }\n case 'Json.calendar': {\n if (sceneName.indexOf('Calendar') == -1)\n continue;\n break;\n }\n case 'Json.spreadsheet': {\n if (sceneName.indexOf('Sheet') == -1)\n continue;\n break;\n }\n case 'Json.weather': {\n if (sceneName.indexOf('Weather') == -1)\n continue;\n break;\n }\n default: {\n }\n }\n this.m_sceneAccounts.push({\n nativeId: sceneConfig[2],\n sceneName: sceneName,\n businessId: sceneConfig[0],\n src: `_assets/scenes/'${sceneName}.jpg`\n })\n }\n this.m_sceneAccounts.pop();\n }\n\n _onAddScene(category) {\n switch (category.mimeType) {\n case 'blank': {\n this._nameScene((i_name) => {\n if (_.isUndefined(i_name) || i_name.length == 0)\n return;\n var player_data = this.bs.getBlockBoilerplate('3510').getDefaultPlayerData(PLACEMENT_IS_SCENE);\n var sceneId = this.rp.createScene(player_data, '', i_name);\n this.rp.reduxCommit();\n this.toastr.info('scene imported and is available in scene list');\n this._goBack();\n });\n return;\n }\n case 'template': {\n\n this.m_selectedSceneMime = 'all';\n break;\n }\n case 'Json.digg': {\n this.m_selectedSceneMime = 'Json.digg';\n break;\n }\n case 'Json.twitter': {\n this.m_selectedSceneMime = 'Json.twitter';\n break;\n }\n case 'Json.instagram.feed': {\n this.m_selectedSceneMime = 'Json.instagram';\n break;\n }\n case 'Json.calendar': {\n this.m_selectedSceneMime = 'Json.calendar';\n break;\n }\n case 'Json.weather': {\n this.m_selectedSceneMime = 'Json.weather';\n break;\n }\n case 'Json.spreadsheet': {\n this.m_selectedSceneMime = 'Json.spreadsheet';\n break;\n }\n\n }\n this._getTemplates();\n this.m_selectTypeMode = false;\n\n\n }\n\n _goBack() {\n this.onGoBack.emit()\n }\n\n private _nameScene(i_cb) {\n bootbox.prompt(\"Give your scene a name:\", (result) => {\n if (result === null) {\n i_cb();\n } else {\n result = Lib.CleanChar(result);\n i_cb(result);\n }\n });\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n\n private _initSceneTemplates() {\n this.m_sceneTemplates = {\n Template21: [396594, 'ida.signage.me', 50],\n Template18: [396594, 'ida.signage.me', 47],\n Template23: [396594, 'ida.signage.me', 52],\n Template24: [396594, 'ida.signage.me', 53],\n Template22: [396594, 'ida.signage.me', 51],\n Template6: [396594, 'ida.signage.me', 34],\n Template13: [396594, 'ida.signage.me', 42],\n Template8: [396594, 'ida.signage.me', 36],\n Template10: [396594, 'ida.signage.me', 39],\n Template12: [396594, 'ida.signage.me', 41],\n Template1: [396594, 'ida.signage.me', 29],\n Template4: [396594, 'ida.signage.me', 32],\n Template5: [396594, 'ida.signage.me', 33],\n Template7: [396594, 'ida.signage.me', 35],\n Template3: [396594, 'ida.signage.me', 31],\n Template9: [396594, 'ida.signage.me', 38],\n Template2: [396594, 'ida.signage.me', 30],\n Template11: [396594, 'ida.signage.me', 40],\n Template15: [396594, 'ida.signage.me', 44],\n Template16: [396594, 'ida.signage.me', 45],\n Template14: [396594, 'ida.signage.me', 43],\n Template17: [396594, 'ida.signage.me', 46],\n Template19: [396594, 'ida.signage.me', 48],\n Template20: [396594, 'ida.signage.me', 49],\n Template26: [396595, 'ida.signage.me', 4],\n Template40: [396595, 'ida.signage.me', 18],\n Template42: [396595, 'ida.signage.me', 21],\n Template34: [396595, 'ida.signage.me', 12],\n Template27: [396595, 'ida.signage.me', 5],\n Template38: [396595, 'ida.signage.me', 16],\n Template35: [396595, 'ida.signage.me', 13],\n Template37: [396595, 'ida.signage.me', 15],\n Template39: [396595, 'ida.signage.me', 17],\n Template36: [396595, 'ida.signage.me', 14],\n Template29: [396595, 'ida.signage.me', 7],\n Template44: [396595, 'ida.signage.me', 23],\n Template43: [396595, 'ida.signage.me', 22],\n Template32: [396595, 'ida.signage.me', 10],\n Template46: [396595, 'ida.signage.me', 24],\n Template41: [396595, 'ida.signage.me', 19],\n Template45: [396595, 'ida.signage.me', 25],\n Template47: [396595, 'ida.signage.me', 20],\n Template48: [396595, 'ida.signage.me', 26],\n Template25: [396595, 'ida.signage.me', 3],\n Template28: [396595, 'ida.signage.me', 6],\n Template30: [396595, 'ida.signage.me', 8],\n Template31: [396595, 'ida.signage.me', 9],\n Template33: [396595, 'ida.signage.me', 11],\n Template57: [396596, 'ida.signage.me', 14],\n Template59: [396596, 'ida.signage.me', 16],\n Template58: [396596, 'ida.signage.me', 15],\n Template62: [396596, 'ida.signage.me', 19],\n Template61: [396596, 'ida.signage.me', 18],\n Template53: [396596, 'ida.signage.me', 10],\n Template65: [396596, 'ida.signage.me', 22],\n Template63: [396596, 'ida.signage.me', 20],\n Template66: [396596, 'ida.signage.me', 23],\n Template67: [396596, 'ida.signage.me', 24],\n Template64: [396596, 'ida.signage.me', 21],\n Template68: [396596, 'ida.signage.me', 25],\n Template70: [396596, 'ida.signage.me', 27],\n Template72: [396596, 'ida.signage.me', 29],\n Template51: [396596, 'ida.signage.me', 8],\n Template52: [396596, 'ida.signage.me', 9],\n Template50: [396596, 'ida.signage.me', 7],\n Template71: [396596, 'ida.signage.me', 28],\n Template49: [396596, 'ida.signage.me', 6],\n Template54: [396596, 'ida.signage.me', 11],\n Template55: [396596, 'ida.signage.me', 12],\n Template56: [396596, 'ida.signage.me', 13],\n Template60: [396596, 'ida.signage.me', 17],\n Template69: [396596, 'ida.signage.me', 26],\n Template81: [396597, 'ida.signage.me', 25],\n Template73: [396597, 'ida.signage.me', 17],\n Template78: [396597, 'ida.signage.me', 22],\n Template79: [396597, 'ida.signage.me', 23],\n Template84: [396597, 'ida.signage.me', 28],\n Template76: [396597, 'ida.signage.me', 20],\n Template77: [396597, 'ida.signage.me', 21],\n Template86: [396597, 'ida.signage.me', 30],\n Template87: [396597, 'ida.signage.me', 31],\n Template85: [396597, 'ida.signage.me', 29],\n Template83: [396597, 'ida.signage.me', 27],\n Template90: [396597, 'ida.signage.me', 34],\n Template91: [396597, 'ida.signage.me', 35],\n Template92: [396597, 'ida.signage.me', 36],\n Template89: [396597, 'ida.signage.me', 33],\n Template95: [396597, 'ida.signage.me', 40],\n Template94: [396597, 'ida.signage.me', 38],\n Template88: [396597, 'ida.signage.me', 32],\n Template75: [396597, 'ida.signage.me', 19],\n Template93: [396597, 'ida.signage.me', 37],\n Template74: [396597, 'ida.signage.me', 18],\n Template82: [396597, 'ida.signage.me', 26],\n Template80: [396597, 'ida.signage.me', 24],\n Template96: [396598, 'ida.signage.me', 12],\n Template98: [396598, 'ida.signage.me', 14],\n Template99: [396598, 'ida.signage.me', 15],\n Template100: [396598, 'ida.signage.me', 16],\n Template97: [396598, 'ida.signage.me', 13],\n Template116: [401213, 'ida.signage.me', 21],\n Template117: [401213, 'ida.signage.me', 22],\n Template102: [401213, 'ida.signage.me', 6],\n Template105: [401213, 'ida.signage.me', 9],\n Template109: [401213, 'ida.signage.me', 13],\n Template101: [401213, 'ida.signage.me', 5],\n Template108: [401213, 'ida.signage.me', 12],\n Template111: [401213, 'ida.signage.me', 15],\n Template110: [401213, 'ida.signage.me', 14],\n Template113: [401213, 'ida.signage.me', 17],\n Template112: [401213, 'ida.signage.me', 16],\n Template115: [401213, 'ida.signage.me', 20],\n Template119: [401213, 'ida.signage.me', 24],\n Template114: [401213, 'ida.signage.me', 19],\n Template106: [401213, 'ida.signage.me', 10],\n Template103: [401213, 'ida.signage.me', 7],\n Template104: [401213, 'ida.signage.me', 8],\n Template107: [401213, 'ida.signage.me', 11],\n Template120: [401213, 'ida.signage.me', 25],\n Template118: [401213, 'ida.signage.me', 23],\n Template127: [402393, 'ida.signage.me', 13],\n Template123: [402393, 'ida.signage.me', 9],\n Template122: [402393, 'ida.signage.me', 8],\n Template121: [402393, 'ida.signage.me', 7],\n Template124: [402393, 'ida.signage.me', 10],\n Template125: [402393, 'ida.signage.me', 11],\n Template126: [402393, 'ida.signage.me', 12],\n Template128: [402393, 'ida.signage.me', 14],\n Template130: [402393, 'ida.signage.me', 16],\n Template129: [402393, 'ida.signage.me', 15],\n Template140: [402394, 'ida.signage.me', 13],\n Template132: [402394, 'ida.signage.me', 5],\n Template137: [402394, 'ida.signage.me', 10],\n Template138: [402394, 'ida.signage.me', 11],\n Template135: [402394, 'ida.signage.me', 8],\n Template136: [402394, 'ida.signage.me', 9],\n Template131: [402394, 'ida.signage.me', 4],\n Template133: [402394, 'ida.signage.me', 6],\n Template134: [402394, 'ida.signage.me', 7],\n Template139: [402394, 'ida.signage.me', 12],\n Template142: [402395, 'ida.signage.me', 10],\n Template146: [402395, 'ida.signage.me', 14],\n Template141: [402395, 'ida.signage.me', 9],\n Template144: [402395, 'ida.signage.me', 12],\n Template145: [402395, 'ida.signage.me', 13],\n Template143: [402395, 'ida.signage.me', 11],\n Template148: [402395, 'ida.signage.me', 16],\n Template147: [402395, 'ida.signage.me', 15],\n Template149: [402395, 'ida.signage.me', 17],\n Template150: [402395, 'ida.signage.me', 18],\n Template155: [402397, 'ida.signage.me', 22],\n Template154: [402397, 'ida.signage.me', 21],\n Template151: [402397, 'ida.signage.me', 18],\n Template152: [402397, 'ida.signage.me', 19],\n Template153: [402397, 'ida.signage.me', 20],\n Template156: [402397, 'ida.signage.me', 23],\n Template157: [402397, 'ida.signage.me', 24],\n Template158: [402397, 'ida.signage.me', 25],\n Template159: [402397, 'ida.signage.me', 26],\n Template160: [402397, 'ida.signage.me', 27],\n Template168: [402398, 'ida.signage.me', 25],\n Template169: [402398, 'ida.signage.me', 26],\n Template161: [402398, 'ida.signage.me', 18],\n Template162: [402398, 'ida.signage.me', 19],\n Template164: [402398, 'ida.signage.me', 20],\n Template163: [402398, 'ida.signage.me', 21],\n Template165: [402398, 'ida.signage.me', 22],\n Template167: [402398, 'ida.signage.me', 24],\n Template166: [402398, 'ida.signage.me', 23],\n Template170: [402398, 'ida.signage.me', 27],\n Template171: [402399, 'ida.signage.me', 12],\n Template174: [402399, 'ida.signage.me', 15],\n Template172: [402399, 'ida.signage.me', 13],\n Template176: [402399, 'ida.signage.me', 17],\n Template173: [402399, 'ida.signage.me', 14],\n Template178: [402399, 'ida.signage.me', 19],\n Template177: [402399, 'ida.signage.me', 18],\n Template179: [402399, 'ida.signage.me', 20],\n Template180: [402399, 'ida.signage.me', 21],\n Template175: [402399, 'ida.signage.me', 16],\n Template187: [402400, 'ida.signage.me', 16],\n Template188: [402400, 'ida.signage.me', 17],\n Template181: [402400, 'ida.signage.me', 10],\n Template182: [402400, 'ida.signage.me', 11],\n Template183: [402400, 'ida.signage.me', 12],\n Template184: [402400, 'ida.signage.me', 13],\n Template185: [402400, 'ida.signage.me', 14],\n Template186: [402400, 'ida.signage.me', 15],\n Template190: [402400, 'ida.signage.me', 19],\n Template189: [402400, 'ida.signage.me', 18],\n Template192: [402401, 'ida.signage.me', 9],\n Template193: [402401, 'ida.signage.me', 11],\n Template194: [402401, 'ida.signage.me', 12],\n Template197: [402401, 'ida.signage.me', 16],\n Template198: [402401, 'ida.signage.me', 17],\n Template199: [402401, 'ida.signage.me', 18],\n Template200: [402401, 'ida.signage.me', 19],\n Template191: [402401, 'ida.signage.me', 8],\n Template195: [402401, 'ida.signage.me', 13],\n Template196: [402401, 'ida.signage.me', 14],\n Template204: [402402, 'ida.signage.me', 20],\n Template206: [402402, 'ida.signage.me', 22],\n Template201: [402402, 'ida.signage.me', 17],\n Template202: [402402, 'ida.signage.me', 18],\n Template203: [402402, 'ida.signage.me', 19],\n Template205: [402402, 'ida.signage.me', 21],\n Template207: [402402, 'ida.signage.me', 23],\n Template208: [402402, 'ida.signage.me', 24],\n Template209: [402402, 'ida.signage.me', 25],\n Template210: [402402, 'ida.signage.me', 26],\n Template214: [402444, 'ida.signage.me', 13],\n Template213: [402444, 'ida.signage.me', 12],\n Template212: [402444, 'ida.signage.me', 11],\n Template219: [402444, 'ida.signage.me', 18],\n Template211: [402444, 'ida.signage.me', 10],\n Template215: [402444, 'ida.signage.me', 14],\n Template216: [402444, 'ida.signage.me', 15],\n Template217: [402444, 'ida.signage.me', 16],\n Template218: [402444, 'ida.signage.me', 17],\n Template220: [402444, 'ida.signage.me', 19],\n Template227: [402446, 'ida.signage.me', 16],\n Template222: [402446, 'ida.signage.me', 11],\n Template224: [402446, 'ida.signage.me', 13],\n Template230: [402446, 'ida.signage.me', 19],\n Template221: [402446, 'ida.signage.me', 10],\n Template223: [402446, 'ida.signage.me', 12],\n Template225: [402446, 'ida.signage.me', 14],\n Template226: [402446, 'ida.signage.me', 15],\n Template228: [402446, 'ida.signage.me', 17],\n Template229: [402446, 'ida.signage.me', 18],\n Template238: [405214, 'ida.signage.me', 10],\n Template231: [405214, 'ida.signage.me', 3],\n Template232: [405214, 'ida.signage.me', 4],\n Template233: [405214, 'ida.signage.me', 5],\n Template236: [405214, 'ida.signage.me', 8],\n Template237: [405214, 'ida.signage.me', 9],\n Template239: [405214, 'ida.signage.me', 11],\n Template240: [405214, 'ida.signage.me', 12],\n Template235: [405214, 'ida.signage.me', 7],\n Template234: [405214, 'ida.signage.me', 6],\n Template241: [405215, 'ida.signage.me', 10],\n Template247: [405215, 'ida.signage.me', 16],\n Template248: [405215, 'ida.signage.me', 17],\n Template242: [405215, 'ida.signage.me', 11],\n Template243: [405215, 'ida.signage.me', 12],\n Template244: [405215, 'ida.signage.me', 13],\n Template245: [405215, 'ida.signage.me', 14],\n Template246: [405215, 'ida.signage.me', 15],\n Template249: [405215, 'ida.signage.me', 18],\n Template250: [405215, 'ida.signage.me', 19],\n Template258: [405216, 'ida.signage.me', 14],\n Template253: [405216, 'ida.signage.me', 9],\n Template256: [405216, 'ida.signage.me', 12],\n Template257: [405216, 'ida.signage.me', 13],\n Template251: [405216, 'ida.signage.me', 7],\n Template254: [405216, 'ida.signage.me', 10],\n Template255: [405216, 'ida.signage.me', 11],\n Template259: [405216, 'ida.signage.me', 15],\n Template252: [405216, 'ida.signage.me', 8],\n Template260: [405216, 'ida.signage.me', 16],\n Template267: [405217, 'ida.signage.me', 20],\n Template261: [405217, 'ida.signage.me', 14],\n Template262: [405217, 'ida.signage.me', 15],\n Template268: [405217, 'ida.signage.me', 21],\n Template266: [405217, 'ida.signage.me', 19],\n Template265: [405217, 'ida.signage.me', 18],\n Template270: [405217, 'ida.signage.me', 23],\n Template263: [405217, 'ida.signage.me', 16],\n Template264: [405217, 'ida.signage.me', 17],\n Template269: [405217, 'ida.signage.me', 22],\n Template273: [405218, 'ida.signage.me', 20],\n Template274: [405218, 'ida.signage.me', 21],\n Template275: [405218, 'ida.signage.me', 22],\n Template279: [405218, 'ida.signage.me', 26],\n Template271: [405218, 'ida.signage.me', 18],\n Template272: [405218, 'ida.signage.me', 19],\n Template278: [405218, 'ida.signage.me', 25],\n Template276: [405218, 'ida.signage.me', 23],\n Template277: [405218, 'ida.signage.me', 24],\n Template280: [405218, 'ida.signage.me', 27],\n Template283: [405219, 'ida.signage.me', 19],\n Template284: [405219, 'ida.signage.me', 20],\n Template286: [405219, 'ida.signage.me', 22],\n Template281: [405219, 'ida.signage.me', 17],\n Template282: [405219, 'ida.signage.me', 18],\n Template285: [405219, 'ida.signage.me', 21],\n Template287: [405219, 'ida.signage.me', 23],\n Template288: [405219, 'ida.signage.me', 24],\n Template289: [405219, 'ida.signage.me', 25],\n Template290: [405219, 'ida.signage.me', 26],\n Template294: [405220, 'ida.signage.me', 15],\n Template295: [405220, 'ida.signage.me', 16],\n Template293: [405220, 'ida.signage.me', 14],\n Template297: [405220, 'ida.signage.me', 18],\n Template291: [405220, 'ida.signage.me', 12],\n Template292: [405220, 'ida.signage.me', 13],\n Template296: [405220, 'ida.signage.me', 17],\n Template298: [405220, 'ida.signage.me', 19],\n Template299: [405220, 'ida.signage.me', 20],\n Template300: [405220, 'ida.signage.me', 21],\n Template306: [405221, 'ida.signage.me', 10],\n Template307: [405221, 'ida.signage.me', 11],\n Template309: [405221, 'ida.signage.me', 13],\n Template301: [405221, 'ida.signage.me', 5],\n Template302: [405221, 'ida.signage.me', 6],\n Template303: [405221, 'ida.signage.me', 7],\n Template304: [405221, 'ida.signage.me', 8],\n Template305: [405221, 'ida.signage.me', 9],\n Template308: [405221, 'ida.signage.me', 12],\n Template310: [405221, 'ida.signage.me', 14],\n Template311: [405222, 'ida.signage.me', 24],\n Template313: [405222, 'ida.signage.me', 26],\n Template314: [405222, 'ida.signage.me', 27],\n Template315: [405222, 'ida.signage.me', 28],\n Template312: [405222, 'ida.signage.me', 25],\n Template317: [405222, 'ida.signage.me', 30],\n Template316: [405222, 'ida.signage.me', 29],\n Template319: [405222, 'ida.signage.me', 32],\n Template318: [405222, 'ida.signage.me', 31],\n Template320: [405222, 'ida.signage.me', 34],\n Template321: [405223, 'ida.signage.me', 21],\n Template326: [405223, 'ida.signage.me', 26],\n Template325: [405223, 'ida.signage.me', 25],\n Template329: [405223, 'ida.signage.me', 30],\n Template324: [405223, 'ida.signage.me', 24],\n Template328: [405223, 'ida.signage.me', 29],\n Template322: [405223, 'ida.signage.me', 22],\n Template323: [405223, 'ida.signage.me', 23],\n Template327: [405223, 'ida.signage.me', 28],\n //Template340: [405223,'ida.signage.me',32],\n Template331: [405224, 'ida.signage.me', 27],\n Template332: [405224, 'ida.signage.me', 28],\n Template338: [405224, 'ida.signage.me', 35],\n Template339: [405224, 'ida.signage.me', 36],\n Template335: [405224, 'ida.signage.me', 32],\n Template337: [405224, 'ida.signage.me', 34],\n Template334: [405224, 'ida.signage.me', 31],\n Template340: [405224, 'ida.signage.me', 37],\n Template336: [405224, 'ida.signage.me', 33],\n Template333: [405224, 'ida.signage.me', 30],\n Template341: [407718, 'ida.signage.me', 4],\n Template344: [407718, 'ida.signage.me', 7],\n Template345: [407718, 'ida.signage.me', 8],\n Template346: [407718, 'ida.signage.me', 9],\n Template348: [407718, 'ida.signage.me', 11],\n Template343: [407718, 'ida.signage.me', 6],\n Template342: [407718, 'ida.signage.me', 5],\n Template347: [407718, 'ida.signage.me', 10],\n Template349: [407718, 'ida.signage.me', 12],\n Template350: [407718, 'ida.signage.me', 13],\n Template351: [407720, 'ida.signage.me', 5],\n Template353: [407720, 'ida.signage.me', 7],\n Template352: [407720, 'ida.signage.me', 6],\n Template355: [407720, 'ida.signage.me', 9],\n Template356: [407720, 'ida.signage.me', 11],\n Template354: [407720, 'ida.signage.me', 10],\n Template357: [407720, 'ida.signage.me', 12],\n Template360: [407720, 'ida.signage.me', 15],\n Template358: [407720, 'ida.signage.me', 13],\n Template359: [407720, 'ida.signage.me', 14],\n Template362: [407721, 'ida.signage.me', 6],\n Template364: [407721, 'ida.signage.me', 8],\n Template367: [407721, 'ida.signage.me', 11],\n Template361: [407721, 'ida.signage.me', 5],\n Template368: [407721, 'ida.signage.me', 12],\n Template370: [407721, 'ida.signage.me', 14],\n Template365: [407721, 'ida.signage.me', 9],\n Template369: [407721, 'ida.signage.me', 13],\n Template363: [407721, 'ida.signage.me', 7],\n Template366: [407721, 'ida.signage.me', 10],\n Template371: [407722, 'ida.signage.me', 15],\n Template373: [407722, 'ida.signage.me', 16],\n Template372: [407722, 'ida.signage.me', 17],\n Template374: [407722, 'ida.signage.me', 18],\n Template375: [407722, 'ida.signage.me', 19],\n Template378: [407722, 'ida.signage.me', 21],\n Template376: [407722, 'ida.signage.me', 20],\n Template379: [407722, 'ida.signage.me', 23],\n Template377: [407722, 'ida.signage.me', 22],\n Template380: [407722, 'ida.signage.me', 24],\n Template382: [407723, 'ida.signage.me', 28],\n Template384: [407723, 'ida.signage.me', 30],\n Template385: [407723, 'ida.signage.me', 31],\n Template381: [407723, 'ida.signage.me', 27],\n Template388: [407723, 'ida.signage.me', 34],\n Template387: [407723, 'ida.signage.me', 33],\n Template386: [407723, 'ida.signage.me', 32],\n Template389: [407723, 'ida.signage.me', 35],\n Template390: [407723, 'ida.signage.me', 36],\n Template383: [407723, 'ida.signage.me', 29],\n Template392: [407725, 'ida.signage.me', 17],\n Template397: [407725, 'ida.signage.me', 22],\n Template400: [407725, 'ida.signage.me', 25],\n Template398: [407725, 'ida.signage.me', 23],\n Template399: [407725, 'ida.signage.me', 24],\n Template391: [407725, 'ida.signage.me', 16],\n Template393: [407725, 'ida.signage.me', 18],\n Template394: [407725, 'ida.signage.me', 19],\n Template395: [407725, 'ida.signage.me', 20],\n Template396: [407725, 'ida.signage.me', 21],\n Template401: [407726, 'ida.signage.me', 18],\n Template404: [407726, 'ida.signage.me', 21],\n Template405: [407726, 'ida.signage.me', 22],\n Template406: [407726, 'ida.signage.me', 23],\n Template403: [407726, 'ida.signage.me', 20],\n Template407: [407726, 'ida.signage.me', 24],\n Template408: [407726, 'ida.signage.me', 25],\n Template402: [407726, 'ida.signage.me', 19],\n Template409: [407726, 'ida.signage.me', 26],\n Template410: [407726, 'ida.signage.me', 27],\n Template411: [407727, 'ida.signage.me', 8],\n Template413: [407727, 'ida.signage.me', 10],\n Template415: [407727, 'ida.signage.me', 12],\n Template414: [407727, 'ida.signage.me', 11],\n Template416: [407727, 'ida.signage.me', 13],\n Template417: [407727, 'ida.signage.me', 14],\n Template419: [407727, 'ida.signage.me', 16],\n Template418: [407727, 'ida.signage.me', 15],\n Template412: [407727, 'ida.signage.me', 9],\n Template420: [407727, 'ida.signage.me', 17],\n Template428: [407728, 'ida.signage.me', 17],\n Template429: [407728, 'ida.signage.me', 18],\n Template421: [407728, 'ida.signage.me', 10],\n Template422: [407728, 'ida.signage.me', 11],\n Template423: [407728, 'ida.signage.me', 12],\n Template424: [407728, 'ida.signage.me', 13],\n Template425: [407728, 'ida.signage.me', 14],\n Template426: [407728, 'ida.signage.me', 15],\n Template427: [407728, 'ida.signage.me', 16],\n Template430: [407728, 'ida.signage.me', 19],\n Template434: [407729, 'ida.signage.me', 22],\n Template439: [407729, 'ida.signage.me', 27],\n Template433: [407729, 'ida.signage.me', 21],\n Template438: [407729, 'ida.signage.me', 26],\n Template431: [407729, 'ida.signage.me', 19],\n Template432: [407729, 'ida.signage.me', 20],\n Template435: [407729, 'ida.signage.me', 23],\n Template436: [407729, 'ida.signage.me', 24],\n Template437: [407729, 'ida.signage.me', 25],\n Template440: [407729, 'ida.signage.me', 28],\n Template442: [407730, 'ida.signage.me', 13],\n Template443: [407730, 'ida.signage.me', 14],\n Template444: [407730, 'ida.signage.me', 15],\n Template446: [407730, 'ida.signage.me', 17],\n Template445: [407730, 'ida.signage.me', 16],\n Template448: [407730, 'ida.signage.me', 19],\n Template449: [407730, 'ida.signage.me', 20],\n Template441: [407730, 'ida.signage.me', 12],\n Template447: [407730, 'ida.signage.me', 18],\n Template450: [407730, 'ida.signage.me', 21],\n Template454: [411108, 'ida.signage.me', 7],\n Template455: [411108, 'ida.signage.me', 8],\n Template453: [411108, 'ida.signage.me', 6],\n Template456: [411108, 'ida.signage.me', 9],\n Template457: [411108, 'ida.signage.me', 10],\n Template458: [411108, 'ida.signage.me', 11],\n Template459: [411108, 'ida.signage.me', 12],\n Template452: [411108, 'ida.signage.me', 5],\n Template460: [411108, 'ida.signage.me', 13],\n Template451: [411108, 'ida.signage.me', 4],\n Template461: [411110, 'ida.signage.me', 12],\n Template463: [411110, 'ida.signage.me', 14],\n Template462: [411110, 'ida.signage.me', 13],\n Template465: [411110, 'ida.signage.me', 16],\n Template466: [411110, 'ida.signage.me', 17],\n Template467: [411110, 'ida.signage.me', 18],\n Template464: [411110, 'ida.signage.me', 15],\n Template469: [411110, 'ida.signage.me', 20],\n Template470: [411110, 'ida.signage.me', 21],\n Template468: [411110, 'ida.signage.me', 19],\n Template471: [411111, 'ida.signage.me', 10],\n Template473: [411111, 'ida.signage.me', 12],\n Template474: [411111, 'ida.signage.me', 13],\n Template475: [411111, 'ida.signage.me', 14],\n Template476: [411111, 'ida.signage.me', 15],\n Template472: [411111, 'ida.signage.me', 11],\n Template479: [411111, 'ida.signage.me', 18],\n Template480: [411111, 'ida.signage.me', 19],\n Template478: [411111, 'ida.signage.me', 17],\n Template477: [411111, 'ida.signage.me', 16],\n Template483: [411112, 'ida.signage.me', 7],\n Template481: [411112, 'ida.signage.me', 5],\n Template484: [411112, 'ida.signage.me', 8],\n Template486: [411112, 'ida.signage.me', 10],\n Template482: [411112, 'ida.signage.me', 6],\n Template485: [411112, 'ida.signage.me', 9],\n Template488: [411112, 'ida.signage.me', 12],\n Template489: [411112, 'ida.signage.me', 13],\n Template487: [411112, 'ida.signage.me', 11],\n Template490: [411112, 'ida.signage.me', 14],\n Template491: [411113, 'ida.signage.me', 17],\n Template493: [411113, 'ida.signage.me', 19],\n Template494: [411113, 'ida.signage.me', 20],\n Template497: [411113, 'ida.signage.me', 23],\n Template492: [411113, 'ida.signage.me', 18],\n Template495: [411113, 'ida.signage.me', 21],\n Template496: [411113, 'ida.signage.me', 22],\n Template498: [411113, 'ida.signage.me', 24],\n Template499: [411113, 'ida.signage.me', 25],\n Template500: [411113, 'ida.signage.me', 26],\n Digg9: [411115, 'ida.signage.me', 21],\n Digg6: [411115, 'ida.signage.me', 18],\n Digg10: [411115, 'ida.signage.me', 22],\n Digg11: [411115, 'ida.signage.me', 23],\n Digg12: [411115, 'ida.signage.me', 24],\n Digg8: [411115, 'ida.signage.me', 20],\n Digg14: [411115, 'ida.signage.me', 26],\n Digg13: [411115, 'ida.signage.me', 25],\n Digg15: [411115, 'ida.signage.me', 27],\n Digg16: [411115, 'ida.signage.me', 28],\n Digg17: [411115, 'ida.signage.me', 29],\n Digg18: [411115, 'ida.signage.me', 30],\n Digg19: [411115, 'ida.signage.me', 31],\n Digg20: [411115, 'ida.signage.me', 32],\n Digg1: [411115, 'ida.signage.me', 12],\n Digg2: [411115, 'ida.signage.me', 14],\n Digg3: [411115, 'ida.signage.me', 15],\n Digg4: [411115, 'ida.signage.me', 16],\n Digg5: [411115, 'ida.signage.me', 17],\n Digg7: [411115, 'ida.signage.me', 19],\n Digg21: [434454, 'jupiter.signage.me', 6],\n Sheet6: [411116, 'ida.signage.me', 24],\n Sheet7: [411116, 'ida.signage.me', 25],\n Sheet5: [411116, 'ida.signage.me', 23],\n Sheet12: [411116, 'ida.signage.me', 30],\n Sheet13: [411116, 'ida.signage.me', 31],\n Sheet15: [411116, 'ida.signage.me', 33],\n Sheet9: [411116, 'ida.signage.me', 27],\n Sheet16: [411116, 'ida.signage.me', 34],\n Sheet10: [411116, 'ida.signage.me', 28],\n Sheet17: [411116, 'ida.signage.me', 35],\n Sheet19: [411116, 'ida.signage.me', 37],\n Sheet14: [411116, 'ida.signage.me', 32],\n Sheet18: [411116, 'ida.signage.me', 36],\n Sheet11: [411116, 'ida.signage.me', 29],\n Sheet8: [411116, 'ida.signage.me', 26],\n Sheet1: [411116, 'ida.signage.me', 19],\n //Calendar1: [411116,'ida.signage.me',17],\n Sheet2: [411116, 'ida.signage.me', 20],\n Sheet3: [411116, 'ida.signage.me', 21],\n Sheet4: [411116, 'ida.signage.me', 22],\n Sheet20: [411116, 'ida.signage.me', 38],\n Sheet21: [434454, 'jupiter.signage.me', 8],\n Calendar11: [411117, 'ida.signage.me', 22],\n Calendar10: [411117, 'ida.signage.me', 24],\n Calendar12: [411117, 'ida.signage.me', 25],\n //Twitter1: [411117,'ida.signage.me',12],\n Calendar3: [411117, 'ida.signage.me', 15],\n Calendar13: [411117, 'ida.signage.me', 26],\n Calendar15: [411117, 'ida.signage.me', 28],\n Calendar5: [411117, 'ida.signage.me', 17],\n Calendar9: [411117, 'ida.signage.me', 21],\n Calendar14: [411117, 'ida.signage.me', 27],\n Calendar6: [411117, 'ida.signage.me', 18],\n Calendar16: [411117, 'ida.signage.me', 29],\n Calendar4: [411117, 'ida.signage.me', 16],\n Calendar17: [411117, 'ida.signage.me', 30],\n Calendar7: [411117, 'ida.signage.me', 19],\n Calendar18: [411117, 'ida.signage.me', 31],\n Calendar8: [411117, 'ida.signage.me', 20],\n Calendar1: [411117, 'ida.signage.me', 13],\n Calendar2: [411117, 'ida.signage.me', 14],\n Calendar19: [411117, 'ida.signage.me', 32],\n Calendar20: [411117, 'ida.signage.me', 33],\n Calendar21: [434454, 'jupiter.signage.me', 5],\n Twitter1: [411119, 'ida.signage.me', 24],\n Twitter2: [411119, 'ida.signage.me', 25],\n Twitter4: [411119, 'ida.signage.me', 27],\n Twitter3: [411119, 'ida.signage.me', 26],\n Twitter6: [411119, 'ida.signage.me', 29],\n Twitter7: [411119, 'ida.signage.me', 30],\n Twitter5: [411119, 'ida.signage.me', 28],\n Twitter8: [411119, 'ida.signage.me', 31],\n Twitter9: [411119, 'ida.signage.me', 32],\n Twitter10: [411119, 'ida.signage.me', 33],\n Twitter12: [411119, 'ida.signage.me', 35],\n Twitter11: [411119, 'ida.signage.me', 34],\n Twitter13: [411119, 'ida.signage.me', 36],\n Twitter14: [411119, 'ida.signage.me', 37],\n Twitter16: [411119, 'ida.signage.me', 39],\n Twitter17: [411119, 'ida.signage.me', 40],\n Twitter19: [411119, 'ida.signage.me', 42],\n Twitter15: [411119, 'ida.signage.me', 38],\n Twitter20: [411119, 'ida.signage.me', 43],\n Twitter18: [411119, 'ida.signage.me', 41],\n Weather1: [411114, 'ida.signage.me', 12],\n Weather2: [411114, 'ida.signage.me', 13],\n Weather3: [411114, 'ida.signage.me', 14],\n Weather13: [411114, 'ida.signage.me', 24],\n Weather10: [411114, 'ida.signage.me', 21],\n Weather11: [411114, 'ida.signage.me', 22],\n Weather16: [411114, 'ida.signage.me', 27],\n Weather17: [411114, 'ida.signage.me', 28],\n Weather18: [411114, 'ida.signage.me', 29],\n Weather19: [411114, 'ida.signage.me', 30],\n Weather4: [411114, 'ida.signage.me', 15],\n Weather20: [411114, 'ida.signage.me', 31],\n Weather5: [411114, 'ida.signage.me', 16],\n Weather12: [411114, 'ida.signage.me', 23],\n Weather14: [411114, 'ida.signage.me', 25],\n Weather15: [411114, 'ida.signage.me', 26],\n Weather6: [411114, 'ida.signage.me', 17],\n Weather7: [411114, 'ida.signage.me', 18],\n Weather8: [411114, 'ida.signage.me', 19],\n Weather9: [411114, 'ida.signage.me', 20],\n Weather23: [411120, 'ida.signage.me', 20],\n Weather22: [411120, 'ida.signage.me', 19],\n Weather26: [411120, 'ida.signage.me', 23],\n Weather21: [411120, 'ida.signage.me', 18],\n Weather27: [411120, 'ida.signage.me', 24],\n Weather29: [411120, 'ida.signage.me', 26],\n Weather24: [411120, 'ida.signage.me', 21],\n Weather25: [411120, 'ida.signage.me', 22],\n Weather28: [411120, 'ida.signage.me', 25],\n Weather30: [411120, 'ida.signage.me', 27],\n Weather31: [411120, 'ida.signage.me', 28],\n Weather32: [411120, 'ida.signage.me', 30],\n Weather33: [411120, 'ida.signage.me', 31],\n Weather34: [411120, 'ida.signage.me', 32],\n Weather35: [411120, 'ida.signage.me', 33],\n Weather36: [411120, 'ida.signage.me', 34],\n Weather37: [411120, 'ida.signage.me', 35],\n Weather38: [411120, 'ida.signage.me', 36],\n Weather39: [411120, 'ida.signage.me', 38],\n Weather40: [411120, 'ida.signage.me', 39],\n Weather41: [411120, 'ida.signage.me', 40],\n Weather42: [411120, 'ida.signage.me', 42],\n Weather43: [411120, 'ida.signage.me', 41],\n Weather44: [411120, 'ida.signage.me', 43],\n Weather46: [434454, 'jupiter.signage.me', 7]\n }\n\n }\n}\n" }, { "path": "src/app/scenes/scene-editor.ts", "content": "import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {BlockService, ISceneData} from \"../blocks/block-service\";\nimport {CommBroker, IMessage} from \"../../services/CommBroker\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Consts, PLACEMENT_IS_SCENE, PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {BlockFactoryService} from \"../../services/block-factory-service\";\nimport {BlockFabric} from \"../blocks/block-fabric\";\nimport * as _ from \"lodash\";\nimport {PlayerDataModelExt} from \"../../store/model/msdb-models-extended\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {IAddContents} from \"../../interfaces/IAddContent\";\nimport {PreviewModeEnum} from \"../live-preview/live-preview\";\nimport {AddContent} from \"../campaigns/add-content\";\nimport {Lib} from \"../../Lib\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {PlayerDataModel} from \"../../store/imsdb.interfaces_auto\";\n\nexport const ADD_NEW_BLOCK_SCENE = 'ADD_NEW_BLOCK_SCENE';\nexport const SCENE_BLOCK_CHANGE = 'SCENE_BLOCK_CHANGE';\nexport const SCENE_CHANGE = 'SCENE_CHANGE';\n\nconst JSON_EVENT_ROW_CHANGED = 'JSON_EVENT_ROW_CHANGED';\nconst STATIONS_POLL_TIME_CHANGED = 'STATIONS_POLL_TIME_CHANGED';\nconst THEME_CHANGED = 'THEME_CHANGED';\nconst SELECTED_STACK_VIEW = 'SELECTED_STACK_VIEW';\nconst BLOCK_SELECTED = 'BLOCK_SELECTED';\nconst SCENE_BLOCKS_RENDERED = 'SCENE_BLOCKS_RENDERED';\nconst SCENE_EDITOR_REMOVE = 'SCENE_EDITOR_REMOVE';\nconst SCENE_ITEM_REMOVE = 'SCENE_ITEM_REMOVE';\nconst SCENE_CANVAS_SELECTED = 'SCENE_CANVAS_SELECTED';\nconst SCENE_SELECT_NEXT = 'SCENE_SELECT_NEXT';\nconst WIZARD_EXIT = 'WIZARD_EXIT';\nconst NEW_SCENE_ADD = 'NEW_SCENE_ADD';\nconst SCENE_LIST_UPDATED = 'SCENE_LIST_UPDATED';\nconst SCENE_UNDO = 'SCENE_UNDO';\nconst SCENE_REDO = 'SCENE_REDO';\nconst REMOVING_SCENE = 'REMOVING_SCENE';\nconst REMOVED_SCENE = 'REMOVED_SCENE';\nconst REMOVING_RESOURCE = 'REMOVING_RESOURCE';\nconst REMOVED_RESOURCE = 'REMOVED_RESOURCE';\nconst ADDED_RESOURCE = 'ADDED_RESOURCE';\nconst MOUSE_ENTERS_CANVAS = 'MOUSE_ENTERS_CANVAS';\nconst FONT_SELECTION_CHANGED = 'FONT_SELECTION_CHANGED';\nconst CAMPAIGN_LIST_LOADING = 'CAMPAIGN_LIST_LOADED';\n\n@Component({\n selector: 'scene-editor',\n styles: [`\n a {\n outline: none;\n }\n `],\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n \n
      \n
      \n
      \n
      \n \n
      \n\n \n \n

      add content to scene

      \n       \n \n \n \n \n       \n\n `\n})\nexport class SceneEditor extends Compbaser implements AfterViewInit {\n\n m_PLACEMENT_SCENE = PLACEMENT_SCENE;\n m_activeAddContent = false;\n m_isLoading = true;\n m_selectedSceneID = undefined;\n m_sceneScrollTop = 0;\n m_sceneScrollLeft = 0;\n m_objectScaling = 0;\n m_mouseX: any = 0;\n m_mouseY: any = 0;\n m_gridMagneticMode = 0;\n m_rendering = false;\n m_memento = {};\n m_canvas: any;\n m_canvasBlocks = [];\n _sceneBlockModified;\n m_sceneBlock;\n m_canvasMouseState = 0;\n m_copiesObjects = [];\n m_canvasScale = 1;\n SCALE_FACTOR = 1.2;\n PUSH_TOP = 1;\n PUSH_BOTTOM = 0;\n m_blocks = {\n blocksPre: [],\n blocksPost: {},\n blockSelected: undefined\n };\n\n constructor(private zone: NgZone, private blockFactory: BlockFactoryService, private rp: RedPepperService, private el: ElementRef, private yp: YellowPepperService, private cd: ChangeDetectorRef, private bs: BlockService, private commBroker: CommBroker) {\n super();\n // this.cd.detach();\n }\n\n @ViewChild(ModalComponent)\n modal: ModalComponent;\n\n @ViewChild('addContent')\n addContent: AddContent;\n\n ngAfterViewInit() {\n this.m_selectedSceneID = undefined;\n this.m_sceneScrollTop = 0;\n this.m_sceneScrollLeft = 0;\n this.m_objectScaling = 0;\n this.m_mouseX = 0;\n this.m_mouseY = 0;\n this.m_gridMagneticMode = 0;\n this.m_rendering = false;\n this.m_memento = {};\n this.m_canvasMouseState = 0;\n this.m_copiesObjects = [];\n this.PUSH_TOP = 1;\n this.PUSH_BOTTOM = 0;\n this.m_blocks = {\n blocksPre: [],\n blocksPost: {},\n blockSelected: undefined\n };\n this.m_canvas = undefined;\n this.m_canvasScale = 1;\n this.SCALE_FACTOR = 1.2;\n this._listenSceneSelection();\n this._listenTotalBlocksModified();\n this._listenAddBlockWizard();\n this._listenToCanvasScroll();\n this._listenSceneChanged();\n this._listenContextMenu();\n this._listenSelectNextBlock();\n // this._listenSceneBlockRemove();\n this._listenSceneNew();\n this._listenAppResized();\n this._listenBlockSelected();\n this._delegateSceneBlockModified();\n this._notifyScaleChange();\n\n // this.addContent.setPlacement(1);\n }\n\n ngOnInit() {\n }\n\n @Output()\n onGoBack: EventEmitter = new EventEmitter();\n\n _onClosed() {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _notifyScaleChange() {\n let uiState: IUiState = {scene: {fabric: {scale: this.m_canvasScale}}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _onToolbarAction(event) {\n con('toolbar ' + event);\n switch (event) {\n case 'back': {\n let uiState: IUiState = {uiSideProps: SideProps.miniDashboard, scene: {blockSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.onGoBack.emit();\n break;\n }\n case 'add': {\n this.m_activeAddContent = true;\n this.modal.open();\n break;\n }\n case 'removeItem': {\n this._onContentMenuSelection('remove');\n break;\n }\n case 'playPreview': {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE_AND_PREVIEW, previewMode: PreviewModeEnum.SCENE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n break;\n }\n case 'pushItemToTopButtonToolTip': {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n var block = this.m_canvas.getActiveObject();\n if (_.isNull(block)) {\n this._discardSelections();\n return;\n }\n this.m_canvas.bringToFront(block);\n this._updateZorder(this.PUSH_TOP, block);\n this._mementoAddState();\n break;\n }\n case 'pushItemToBottomButtonToolTip': {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n var block = this.m_canvas.getActiveObject();\n if (_.isNull(block)) {\n this._discardSelections();\n return;\n }\n this.m_canvas.sendToBack(block);\n this._updateZorder(this.PUSH_BOTTOM, block);\n this._mementoAddState();\n break;\n }\n case 'sceneZoomIn': {\n this._zoomIn();\n this._discardSelections();\n this._resetAllObjectScale();\n this.m_canvas.renderAll();\n break;\n }\n case 'sceneZoomOut': {\n this._zoomOut();\n this._discardSelections();\n this._resetAllObjectScale();\n this.m_canvas.renderAll();\n break;\n }\n case 'sceneZoomReset': {\n this._zoomReset();\n this._resetAllObjectScale();\n this.m_canvas.renderAll();\n break;\n }\n case 'undo': {\n if (this.m_rendering)\n return;\n this.m_blocks.blockSelected = undefined;\n this._discardSelections();\n this._mementoLoadState('undo');\n break;\n }\n case 'redo': {\n if (this.m_rendering)\n return;\n this.m_blocks.blockSelected = undefined;\n this._discardSelections();\n this._mementoLoadState('redo');\n break;\n }\n case 'magneticGrid': {\n if (this.m_rendering || _.isUndefined(this.m_canvas))\n return;\n switch (this.m_gridMagneticMode) {\n case 0: {\n this.m_gridMagneticMode = 1;\n break;\n }\n case 1: {\n this.m_gridMagneticMode = 2;\n break;\n }\n case 2: {\n this.m_gridMagneticMode = 0;\n break;\n }\n }\n this.m_sceneBlock.setCanvas(this.m_canvas, this.m_gridMagneticMode);\n break;\n }\n }\n }\n\n /**\n Listen to changes in a new scene selection\n @method _listenSceneSelection\n **/\n _listenSceneSelection() {\n this.cancelOnDestroy(\n //\n this.yp.listenSceneSelected(true)\n .delay(1000)\n .subscribe((sceneData: ISceneData) => {\n if (!sceneData) {\n this.m_isLoading = true;\n this.cd.markForCheck();\n return;\n }\n this.m_selectedSceneID = sceneData.scene_id_pseudo_id;\n this._loadScene();\n this._sceneCanvasSelected();\n if (this._mementoInit())\n this._mementoAddState();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Listen to changes in a new scene selection\n @method _listenSceneSelection\n **/\n _listenBlockSelected() {\n var sceneData: ISceneData = {\n scene_id: null,\n scene_id_pseudo_id: null,\n scene_native_id: null,\n block_pseudo_id: null,\n playerDataModel: null,\n domPlayerData: null,\n domPlayerDataJson: null,\n domPlayerDataXml: null\n }\n\n this.cancelOnDestroy(\n this.yp.listenSceneOrBlockSelectedChanged()\n .startWith(sceneData)\n .pairwise()\n .filter((v: Array) => {\n if (v[0].scene_id == null)\n return false;\n if (v[0].block_pseudo_id != v[1].block_pseudo_id)\n return false;\n if (Lib.IsEqual(v[0].domPlayerDataJson, v[1].domPlayerDataJson))\n return false;\n delete v[\"0\"].domPlayerDataJson.Player.Data.Layout;\n delete v[\"1\"].domPlayerDataJson.Player.Data.Layout;\n if (Lib.IsEqual(v[0].domPlayerDataJson, v[1].domPlayerDataJson))\n return false;\n return true;\n })\n .subscribe((v) => {\n this.commBroker.fire({event: SCENE_BLOCK_CHANGE, fromInstance: this, message: [v[1].block_pseudo_id]})\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n this.commBroker.onEvent(BLOCK_SELECTED)\n .skip(1)\n .subscribe((e: IMessage) => {\n let uiState: IUiState = {uiSideProps: SideProps.sceneBlock, scene: {blockSelected: e.message}};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }, (e) => console.error(e))\n )\n }\n\n @timeout(500)\n _updateBlocksCount() {\n if (!this.m_canvas) return;\n this.m_canvasBlocks = [{id: 'SCENE', name: '[Scene canvas]'}];\n this.m_canvas.getObjects().forEach((block: BlockFabric) => {\n this.m_canvasBlocks.push({\n id: block.getBlockData().blockID,\n name: block.getBlockData().blockName,\n })\n })\n this.cd.markForCheck();\n }\n\n /**\n Bring the scene into view\n @method _sceneActive\n **/\n _sceneActive() {\n // $('#sceneToolbar').fadeIn();\n // $('#sceneToolbar').fadeTo(500, 1);\n }\n\n /**\n Init a new canvas and listen to even changes on that new canvas\n @method _initializeCanvas\n @param {Number} w width\n @param {Number} h height\n **/\n _initializeCanvas(w, h) {\n $('#sceneCanvasContainer', this.el.nativeElement).empty();\n $('#sceneCanvasContainer', this.el.nativeElement).append(``);\n this.m_canvas = new fabric.Canvas('sceneCanvas');\n this.m_canvas.renderOnAddRemove = false;\n $('#sceneCanvas', this.el.nativeElement).addClass('basicBorder');\n this._listenBlockModified();\n this._listenCanvasSelections();\n this._listenKeyboard();\n }\n\n /**\n Init a new scene and subclass off a standard Block\n @method _initializeScene\n **/\n _initializeScene(i_selectedSceneID) {\n var scene_player_data = this.rp.getScenePlayerdata(i_selectedSceneID);\n this.m_sceneBlock = this.blockFactory.createBlock(i_selectedSceneID, scene_player_data);\n this.m_sceneBlock.setCanvas(this.m_canvas, this.m_gridMagneticMode);\n ////_.extend(this.m_canvas, this.m_sceneBlock);\n }\n\n /**\n Load a new scene and dispose of any previous ones\n @return {Number} Unique clientId.\n **/\n _loadScene() {\n if (_.isUndefined(this.m_selectedSceneID))\n return -1;\n this.m_isLoading = true;\n this._disposeBlocks();\n this.disposeScene();\n this._zoomReset();\n // this.m_property.resetPropertiesView();\n var domPlayerData = this.rp.getScenePlayerdataDom(this.m_selectedSceneID);\n var l = $(domPlayerData).find('Layout').eq(0);\n var w = $(l).attr('width');\n var h = $(l).attr('height');\n this._initializeCanvas(w, h);\n this._initializeScene(this.m_selectedSceneID);\n this._preRender(domPlayerData);\n }\n\n /**\n Listen to selection of next block\n @method _listenSelectNextDivision\n **/\n _listenSelectNextBlock() {\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(SCENE_SELECT_NEXT)\n .subscribe((e: IMessage) => {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n var viewer = this.m_canvas.getActiveObject();\n var viewIndex = this.m_canvas.getObjects().indexOf(viewer);\n var totalViews = this.m_canvas.getObjects().length;\n var blockID = undefined;\n if (viewIndex == totalViews - 1) {\n this.m_canvas.setActiveObject(this.m_canvas.item(0));\n blockID = this.m_canvas.getActiveObject().getBlockData().blockID;\n this.commBroker.fire({event: BLOCK_SELECTED, fromInstance: this, message: blockID});\n } else {\n this.m_canvas.setActiveObject(this.m_canvas.item(viewIndex + 1));\n blockID = this.m_canvas.getActiveObject().getBlockData().blockID;\n this.commBroker.fire({event: BLOCK_SELECTED, fromInstance: this, message: blockID});\n }\n }, (e) => console.error(e))\n )\n }\n\n /**\n Listen to when a user selects to delete a block\n @method _listenSceneBlockRemove\n **/\n // _listenSceneBlockRemove() {\n // this.cancelOnDestroy(\n // //\n // this.commBroker.onEvent(SCENE_ITEM_REMOVE)\n // .subscribe((msg: IMessage) => {\n // this._onContentMenuSelection('remove');\n // }, (e) => console.error(e))\n // )\n // }\n\n /**\n Listen to keyboard events\n @method _listenKeyboard\n **/\n _listenKeyboard() {\n // if (_.isUndefined(this.m_canvas))\n // return;\n // $('canvas',this.el.nativeElement).attr('tabindex', '1');\n // var keyDown = _.debounce( (e) => {\n // if (this.m_objectScaling)\n // return;\n // if (this.m_canvasMouseState)\n // return;\n // var block = this.m_canvas.getActiveObject();\n // if (_.isNull(block))\n // return;\n // var dimensionProps = BB.comBroker.getService(BB.SERVICES['DIMENSION_PROPS_LAYOUT']);\n // var values = dimensionProps.getValues();\n // var val = e.shiftKey ? 25 : 1;\n // switch (e.keyCode) {\n // case 38: {\n // values.y = values.y - val;\n // break;\n // }\n // case 40: {\n // values.y = values.y + val;\n // break;\n // }\n // case 37: {\n // values.x = values.x - val;\n // break;\n // }\n // case 39: {\n // values.x = values.x + val;\n // break;\n // }\n // }\n // dimensionProps.setValues(values, true);\n // return false;\n // }, 100);\n // $('.upper-canvas').keydown(keyDown);\n }\n\n /**\n Listen to user selection of new scene\n @method _listenSceneNew\n **/\n _listenSceneNew() {\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(NEW_SCENE_ADD)\n .subscribe((msg: IMessage) => {\n var player_data = this.bs.getBlockBoilerplate('3510').getDefaultPlayerData(PLACEMENT_IS_SCENE);\n this.createScene(player_data, false, true, msg.message.mimeType, msg.message.name);\n }, (e) => console.error(e))\n )\n }\n\n // /**\n // Listen when mouse enters canvas wrapper and announce it\n // @method _listenMouseEnterCanvas\n // **/\n // _listenMouseEnterCanvas() {\n // $('#sceneCanvasContainer', this.el.nativeElement).on(\"mouseover\", (e) => {\n // this.commBroker.fire({event: MOUSE_ENTERS_CANVAS, fromInstance: this});\n // });\n // }\n\n _listenTotalBlocksModified() {\n this.cancelOnDestroy(\n this.yp.listenSelectedSceneChanged()\n .pairwise()\n .map((i_playerDataModelsExt: Array) => {\n var a0 = i_playerDataModelsExt[0].getPlayerDataValue();\n var a1 = $.parseXML(a0);\n var a2 = $(a1).find('Players').children('Player')\n .map((i, player) => $(player).attr('id'))\n var previousBlockIds = $.makeArray(a2);\n var b0 = i_playerDataModelsExt[1].getPlayerDataValue();\n var b1 = $.parseXML(b0);\n var b2 = $(b1).find('Players').children('Player')\n .map((i, player) => $(player).attr('id'))\n var currentBlockIds = $.makeArray(b2);\n return !_.isEqual(currentBlockIds, previousBlockIds);\n }).filter(v => v)\n .subscribe(() => {\n this._updateBlocksCount();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Listen to the event of scene changes which normally comes from a block that modified its data\n and re-render all scene content\n @method _listenSceneChanged\n **/\n _listenSceneChanged() {\n\n var message: IMessage = {\n event: '',\n fromInstance: null\n }\n\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(SCENE_BLOCK_CHANGE)\n .subscribe((msg: IMessage) => {\n if (this.m_rendering)\n return;\n var blockIDs = msg.message;\n con('block(s) edited ' + blockIDs);\n var domPlayerData = this.rp.getScenePlayerdataDom(this.m_selectedSceneID);\n this.m_blocks.blockSelected = blockIDs[0];\n this._preRender(domPlayerData, blockIDs);\n this._mementoAddState();\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(SCENE_CHANGE)\n .subscribe((msg: IMessage) => {\n if (this.m_rendering)\n return;\n this.m_sceneBlock.fabricSceneBg(msg);\n this._mementoAddState();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Listen to any canvas right click\n @method _listenContextMenu\n **/\n /**\n Listen to any canvas right click\n @method _listenContextMenu\n **/\n _listenContextMenu() {\n var self = this;\n jQueryAny('#sceneCanvasContainer', this.el.nativeElement).contextmenu({\n target: '#sceneContextMenu',\n before: function (e, element, target) {\n e.preventDefault();\n // no canvas\n if (_.isUndefined(self.m_canvas)) {\n this.closemenu();\n return false;\n }\n // remember right click position for pasting\n self.m_mouseX = e.offsetX;\n self.m_mouseY = e.offsetY;\n\n // group selected\n var active = self.m_canvas.getActiveGroup();\n if (active) {\n $('.blocksOnly', '#sceneContextMenu').show();\n return true;\n }\n // scene selected\n var block = self.m_canvas.getActiveObject();\n if (_.isNull(block)) {\n $('.blocksOnly', '#sceneContextMenu').hide();\n return true;\n }\n // object selected\n $('.blocksOnly', '#sceneContextMenu').show();\n return true;\n },\n onItem: function (context, e) {\n self._onContentMenuSelection($(e.target).attr('name'))\n }\n });\n }\n\n /**\n On Scene right click context menu selection command\n @method _onContentMenuSelection\n @param {String} i_command\n **/\n _onContentMenuSelection(i_command) {\n var blocks = [];\n\n var contextCmd = (i_blocks) => {\n switch (i_command) {\n case 'copy': {\n this.m_copiesObjects = [];\n _.each(i_blocks, (selectedObject:any) => {\n var blockPlayerData = selectedObject.getBlockData().blockData;\n blockPlayerData = this.rp.stripPlayersID(blockPlayerData);\n this.m_copiesObjects.push(blockPlayerData);\n });\n break;\n }\n\n case 'cut': {\n let uiState: IUiState = {scene: {blockSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.m_copiesObjects = [];\n _.each(i_blocks, (selectedObject:any) => {\n var blockData = selectedObject.getBlockData();\n var blockPlayerData = blockData.blockData;\n this._discardSelections();\n this.rp.removeScenePlayer(this.m_selectedSceneID, blockData.blockID);\n this._disposeBlocks(blockData.blockID);\n blockPlayerData = this.rp.stripPlayersID(blockPlayerData);\n this.m_copiesObjects.push(blockPlayerData);\n });\n this.m_canvas.renderAll();\n this.commBroker.fire({event: SCENE_ITEM_REMOVE, fromInstance: this})\n // this._updateBlockCount();\n this.rp.reduxCommit();\n break;\n }\n\n case 'remove': {\n let uiState: IUiState = {scene: {blockSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n _.each(i_blocks, (selectedObject:any) => {\n var blockData = selectedObject.getBlockData();\n this._discardSelections();\n this.rp.removeScenePlayer(this.m_selectedSceneID, blockData.blockID);\n this._disposeBlocks(blockData.blockID);\n });\n this.m_canvas.renderAll();\n this.commBroker.fire({event: SCENE_ITEM_REMOVE, fromInstance: this})\n // this._updateBlockCount();\n this.rp.reduxCommit();\n break;\n }\n\n case 'paste': {\n if (this.m_copiesObjects.length == 0)\n return;\n var x: any, y: any, blockID, origX: any, origY: any, blockIDs = [];\n _.each(this.m_copiesObjects, (domPlayerData, i: any) => {\n blockID = this.rp.generateSceneId();\n $(domPlayerData).attr('id', blockID);\n blockIDs.push(blockID);\n var layout: any = $(domPlayerData).find('Layout');\n if (i == 0) {\n origX = parseInt(layout.attr('x'));\n origY = parseInt(layout.attr('y'));\n x = this.m_mouseX;\n y = this.m_mouseY;\n } else {\n var a: any = layout.attr('x') - origX;\n var b: any = layout.attr('y') - origY;\n x = this.m_mouseX + a;\n y = this.m_mouseY + b;\n }\n layout.attr('x', x);\n layout.attr('y', y);\n var player_data = (new XMLSerializer()).serializeToString(domPlayerData);\n this.rp.appendScenePlayerBlock(this.m_selectedSceneID, player_data);\n });\n this._discardSelections();\n if (this.m_copiesObjects.length == 1) {\n this.commBroker.fire({event: SCENE_BLOCK_CHANGE, fromInstance: this, message: [blockID]});\n } else {\n this.commBroker.fire({event: SCENE_BLOCK_CHANGE, fromInstance: this, message: blockIDs});\n }\n // this._updateBlockCount();\n this.rp.reduxCommit();\n break;\n }\n }\n };\n\n // no canvas\n if (_.isUndefined(this.m_canvas)) {\n return;\n }\n // group selected\n var group = this.m_canvas.getActiveGroup();\n if (group) {\n con(i_command + ' on group');\n blocks = [];\n _.each(group.objects, (selectedObject) => {\n blocks.push(selectedObject);\n });\n contextCmd(blocks);\n return;\n }\n // scene selected\n var block = this.m_canvas.getActiveObject();\n if (_.isNull(block)) {\n con(i_command + ' on scene');\n contextCmd(null);\n return;\n }\n // object selected\n con(i_command + ' on object');\n blocks = [];\n blocks.push(block);\n contextCmd(blocks);\n return true;\n }\n\n /**\n Listen to canvas scrolling\n @method _listenToCanvasScroll\n **/\n _listenToCanvasScroll() {\n var self = this;\n var sceneScrolling = _.debounce(() => {\n $('#sceneCanvasContainer', this.el.nativeElement).scroll((e) => {\n self.m_sceneScrollTop = $('#scenesPanel').scrollTop();\n self.m_sceneScrollLeft = $('#scenesPanel').scrollLeft();\n self.m_canvas.calcOffset();\n });\n }, 500);\n $('#sceneCanvasContainer', this.el.nativeElement).scroll(sceneScrolling);\n }\n\n /**\n Listen to and add new component / resources to scene\n @method _listenAddBlockWizard\n @param {event} e\n **/\n _listenAddBlockWizard() {\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(ADD_NEW_BLOCK_SCENE)\n .subscribe((msg: IMessage) => {\n var addContents: IAddContents = msg.message;\n var blockID = this.rp.generateSceneId();\n var player_data = this.bs.getBlockBoilerplate(addContents.blockCode).getDefaultPlayerData(PLACEMENT_SCENE, addContents.resourceId);\n var domPlayerData = $.parseXML(player_data);\n $(domPlayerData).find('Player').attr('id', blockID);\n player_data = (new XMLSerializer()).serializeToString(domPlayerData);\n this.rp.appendScenePlayerBlock(this.m_selectedSceneID, player_data);\n this.rp.reduxCommit();\n this.commBroker.fire({event: SCENE_BLOCK_CHANGE, fromInstance: this, message: [blockID]});\n }, (e) => console.error(e))\n )\n }\n\n _onAddedNewBlock() {\n this.modal.close()\n this.m_activeAddContent = false;\n }\n\n /**\n @method _sceneProcessing\n **/\n _sceneProcessing(i_status, i_callBack, from ?) {\n if (i_status) {\n $('#sceneProcessing', this.el.nativeElement).css({\n width: $('#scenePanelWrap').width(),\n height: $('#scenePanelWrap').height()\n })\n $('#sceneProcessing', this.el.nativeElement).fadeTo('fast', 0.7, i_callBack);\n } else {\n this.m_isLoading = false;\n this.cd.markForCheck();\n $('#sceneProcessing', this.el.nativeElement).fadeOut('slow', i_callBack);\n }\n }\n\n /**\n Init a undo / redo via memento pattern\n @method _mementoInit\n @return {Boolean} return true if memento created false if one already existed\n **/\n _mementoInit() {\n if (_.isUndefined(this.m_memento[this.m_selectedSceneID])) {\n this.m_memento[this.m_selectedSceneID] = {\n playerData: [],\n cursor: -1\n };\n return true;\n }\n return false;\n }\n\n /**\n Remember current memento state\n @method _mementoAddState\n **/\n _mementoAddState() {\n const MAX = 100;\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n this._mementoInit();\n\n // maintain memento to stack MAX value\n if (this.m_memento[this.m_selectedSceneID].playerData.length > MAX)\n this.m_memento[this.m_selectedSceneID].playerData.shift();\n\n // if undo / redo was executed, remove ahead mementos\n if (this.m_memento[this.m_selectedSceneID].cursor != this.m_memento[this.m_selectedSceneID].playerData.length - 1)\n this.m_memento[this.m_selectedSceneID].playerData.splice(this.m_memento[this.m_selectedSceneID].cursor + 1);\n\n var player_data = this.rp.getScenePlayerdata(this.m_selectedSceneID);\n this.m_memento[this.m_selectedSceneID].playerData.push(player_data);\n this.m_memento[this.m_selectedSceneID].cursor = this.m_memento[this.m_selectedSceneID].playerData.length - 1;\n }\n\n /**\n Remember current memento state\n @method _mementoLoadState\n **/\n _mementoLoadState(i_direction) {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n this._mementoInit();\n if (this.m_memento[this.m_selectedSceneID].playerData.length == 0)\n return;\n\n switch (i_direction) {\n case 'undo': {\n var cursor = this.m_memento[this.m_selectedSceneID].cursor;\n if (cursor == 0)\n return;\n this.m_memento[this.m_selectedSceneID].cursor--;\n cursor = this.m_memento[this.m_selectedSceneID].cursor;\n break;\n }\n case 'redo': {\n var cursor = this.m_memento[this.m_selectedSceneID].cursor;\n if (cursor == this.m_memento[this.m_selectedSceneID].playerData.length - 1)\n return;\n this.m_memento[this.m_selectedSceneID].cursor++;\n cursor = this.m_memento[this.m_selectedSceneID].cursor;\n break;\n }\n }\n var player_data = this.m_memento[this.m_selectedSceneID].playerData[cursor];\n this.rp.setScenePlayerData(this.m_selectedSceneID, player_data);\n this._loadScene();\n this.rp.reduxCommit();\n this.commBroker.fire({event: SCENE_LIST_UPDATED, fromInstance: this});\n }\n\n /**\n Update the z-order index of an object\n @method _updateZorder\n @param {String} i_pushDirection\n @param {Object} i_block\n **/\n _updateZorder(i_pushDirection, i_block) {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n var active = this.m_canvas.getActiveGroup();\n if (active)\n return;\n var blockID = i_block.getBlockData().blockID;\n var sceneDomPlayerData = this.rp.getScenePlayerdataDom(this.m_selectedSceneID);\n var domBlockData = $(sceneDomPlayerData).find('[id=\"' + blockID + '\"]');\n switch (i_pushDirection) {\n case this.PUSH_TOP: {\n $(sceneDomPlayerData).find('Players').append($(domBlockData));\n break;\n }\n case this.PUSH_BOTTOM: {\n $(sceneDomPlayerData).find('Players').prepend($(domBlockData));\n break;\n }\n }\n this.rp.setScenePlayerData(this.m_selectedSceneID, (new XMLSerializer()).serializeToString(sceneDomPlayerData));\n this.rp.reduxCommit();\n }\n\n /**\n Pre render creates all of the Fabric blocks that will later get added when we call _render\n This allows for smooth (non flickering) rendering since when we are ready to render, the blocks have\n already been instantiated and ready to be added to canvas\n @method _preRender\n @param {Object} i_domPlayerData\n @param {Object} [i_blockIDs] optionally render only a single block\n **/\n _preRender(i_domPlayerData, i_blockIDs ?) {\n var zIndex = -1;\n if (i_blockIDs) {\n if (i_blockIDs.indexOf(this.m_selectedSceneID) > -1)\n return;\n }\n this._renderPause();\n this.m_blocks.blocksPre = [];\n this.m_blocks.blocksPost = {};\n con('pre-rendering new blocks');\n\n // if rendering specific blocks instead of entire canvas\n if (i_blockIDs) {\n $(i_domPlayerData).find('Players').children('Player').each((i, player) => {\n zIndex++;\n var blockID = $(player).attr('id');\n if (_.indexOf(i_blockIDs, blockID) > -1) {\n var block = {\n blockID: blockID,\n blockType: $(player).attr('player'),\n zIndex: zIndex,\n player_data: (new XMLSerializer()).serializeToString(player)\n };\n this.m_blocks.blocksPre.push(block);\n }\n });\n } else {\n $(i_domPlayerData).find('Players').children('Player').each((i, player) => {\n var block = {\n blockID: $(player).attr('id'),\n blockType: $(player).attr('player'),\n zIndex: -1,\n player_data: (new XMLSerializer()).serializeToString(player)\n\n };\n this.m_blocks.blocksPre.push(block);\n });\n }\n this._createBlock(i_blockIDs);\n }\n\n /**\n Render the pre created blocks (via _preRender) and add all blocks to fabric canvas\n @method _render\n **/\n _render(i_blockIDs) {\n if (!this.m_canvas)\n return;\n var nZooms = Math.round(Math.log(1 / this.m_canvasScale) / Math.log(1.2));\n var selectedBlockID = this.m_blocks.blockSelected;\n var createAll = i_blockIDs[0] == undefined ? true : false; // if to re-render entire canvas\n\n if (createAll) {\n this._disposeBlocks();\n this._zoomReset();\n } else {\n // if to re-render only changed blocks\n for (var i = 0; i < i_blockIDs.length; i++)\n this._disposeBlocks(i_blockIDs[i]);\n }\n _.forEach(this.m_blocks.blocksPost, (i_block) => {\n this.m_canvas.add(i_block);\n });\n if (createAll) {\n this._resetAllObjectScale();\n this._zoomTo(nZooms);\n this._updateBlocksCount();\n } else {\n // if to re-render only changed blocks\n _.forEach(this.m_blocks.blocksPost, (i_block: any) => {\n var zIndex = i_block.getZindex();\n if (zIndex > -1)\n i_block.moveTo(zIndex);\n this.m_canvas.setActiveObject(i_block);\n this._zoomToBlock(nZooms, i_block);\n this._resetObjectScale(i_block);\n });\n }\n this._scrollTo(this.m_sceneScrollTop, this.m_sceneScrollLeft);\n this.m_canvas.renderAll();\n this._sceneProcessing(false, () => {\n });\n this._renderContinue();\n // if (createAll)\n // this._updateBlockCount();\n\n // select previous selection\n if (_.isUndefined(selectedBlockID))\n return;\n if (createAll) {\n for (var i = 0; i < this.m_canvas.getObjects().length; i++) {\n if (selectedBlockID == this.m_canvas.item(i).getBlockData().blockID) {\n this._blockSelected(this.m_canvas.item(i));\n break;\n }\n }\n } else {\n var block = this.m_blocks.blocksPost[Object.keys(this.m_blocks.blocksPost)[0]];\n this._blockSelected(block);\n }\n }\n\n /**\n Prevent rendering of canvas to continue and remove canvas listeners\n @method _renderPause\n **/\n _renderPause() {\n this.m_rendering = true;\n if (_.isUndefined(this.m_canvas))\n return;\n this.m_canvas.removeListeners();\n }\n\n /**\n Allow rendering of canvas to continue and add canvas listeners\n @method _renderContinue\n **/\n _renderContinue() {\n this.m_rendering = false;\n if (_.isUndefined(this.m_canvas))\n return;\n this.m_canvas._initEventListeners();\n }\n\n /**\n Create all the blocks that have been pre injected to m_blocks.blocksPre and after each block\n is created created the next block; thus creating blocks sequentially due to fabric bug. When no\n more blocks are to be created (m_blocks.blocksPre queue is empty) we _render the canvas\n @method _createBlock\n @param {Array} [i_blockIDs] optional array of block ids to render, or non if we render the entire canvas\n **/\n _createBlock(i_blockIDs) {\n var blockData = this.m_blocks.blocksPre.shift();\n if (blockData == undefined) {\n this._render([i_blockIDs]);\n return;\n }\n var newBlock = this.blockFactory.createBlock(blockData.blockID, blockData.player_data, this.m_selectedSceneID);\n newBlock.setZindex(blockData.zIndex);\n var blockID = newBlock.getBlockData().blockID;\n newBlock.fabricateBlock(this.m_canvasScale, () => {\n this.m_blocks.blocksPost[blockID] = newBlock;\n this._createBlock(i_blockIDs);\n });\n }\n\n /**\n Announce to all that scene was re-rendered but do it via debounce\n @method _delegateSceneBlockModified\n **/\n _delegateSceneBlockModified() {\n var self = this;\n self._sceneBlockModified = _.debounce(function (e) {\n self.commBroker.fire({event: SCENE_BLOCKS_RENDERED, fromInstance: self.m_canvas, message: ''});\n self._mementoAddState();\n // self._drawGrid();\n }, 200);\n }\n\n\n /**\n Listen to when the app is resized so we can re-render\n @method _listenAppResized\n **/\n _listenAppResized() {\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent(Consts.Events().WIN_SIZED).subscribe((msg: IMessage) => {\n if (_.isUndefined(this.m_canvas))\n return;\n this.m_canvas.calcOffset();\n }, (e) => console.error(e))\n )\n }\n\n /**\n Scene block scales via mouse UI\n @method _sceneBlockScaled\n @param {Event} e\n **/\n _sceneBlockScaled(e) {\n var self = this;\n if (self.m_objectScaling)\n return;\n self.m_objectScaling = 1;\n var block = e.target;\n if (_.isUndefined(block))\n return;\n self.zone.runOutsideAngular(() => {\n block.on('modified', function () {\n setTimeout(function () {\n block.off('modified');\n if (!(block instanceof BlockFabric))\n return;\n var blockID = block.getBlockData().blockID;\n self.commBroker.fire({event: SCENE_BLOCK_CHANGE, fromInstance: this, message: [blockID]});\n self.m_objectScaling = 0;\n }, 15)\n });\n });\n }\n\n /**\n Scene block moving\n @method _sceneBlockMoving\n @param {Object} i_options\n **/\n _sceneBlockMoving(i_options) {\n var grid = 0;\n if (i_options.target.lockMovementX)\n return;\n if (this.m_gridMagneticMode == 0)\n return;\n if (this.m_gridMagneticMode == 1)\n grid = 5;\n if (this.m_gridMagneticMode == 2)\n grid = 10;\n i_options.target.set({\n left: Math.round(i_options.target.left / grid) * grid,\n top: Math.round(i_options.target.top / grid) * grid\n });\n }\n\n /**\n Listen to changes in scale so we can reset back to non-zoom on any block object\n @method _listenBlockModified\n **/\n _listenBlockModified() {\n var self = this;\n self.zone.runOutsideAngular(() => {\n self.m_canvas.on({\n //'object:moving': self.m_objectScaleHandler,\n //'object:selected': self.m_objectScaleHandler,\n 'object:modified': () => {\n self._sceneBlockModified();\n },\n 'object:scaling': $.proxy(self._sceneBlockScaled, self)\n });\n self.m_canvas.on('object:moving', $.proxy(self._sceneBlockMoving, self));\n });\n }\n\n _drawGrid() {\n this.m_canvas.setBackgroundColor('', this.m_canvas.renderAll.bind(this.m_canvas));\n var c: any = $(this.m_canvas)[0];\n var context = c.getContext(\"2d\");\n var h = 600;\n var w = 700;\n for (var x = 0.5; x < (w + 1); x += 10) {\n context.moveTo(x, 0);\n context.lineTo(x, (h + 1));\n }\n for (var y = 0.5; y < (h + 1); y += 10) {\n context.moveTo(0, y);\n context.lineTo(w, y);\n }\n context.globalAlpha = 0.1;\n context.strokeStyle = \"black\";\n context.stroke();\n context.globalAlpha = 1;\n }\n\n /**\n Listen to canvas user selections\n @method _listenCanvasSelections\n **/\n _listenCanvasSelections() {\n this.zone.runOutsideAngular(() => {\n //this.m_canvas.on('object:selected', (e) => {\n // var blockID = e.target.m_blockType;\n // BB.comBroker.fire(BB.EVENTS.BLOCK_SELECTED, this, null, blockID);\n //});\n\n this.m_canvas.on('mouse:down', (options) => {\n this.m_canvasMouseState = 1;\n });\n\n this.m_canvas.on('mouse:up', (options) => {\n this.m_canvasMouseState = 0;\n var active = this.m_canvas.getActiveObject();\n var group = this.m_canvas.getActiveGroup();\n\n //options.e.stopImmediatePropagation();\n //options.e.preventDefault();\n\n //// Group\n if (group) {\n con('group selected');\n var selectedGroup = options.target || group;\n _.each(group.objects, (selectedObject:any) => {\n var objectPos = {\n x: (selectedGroup.left + (selectedObject.left)),\n y: (selectedGroup.top + (selectedObject.top))\n };\n if (objectPos.x < 0 && objectPos.y < 0) {\n // objectPos.x = objectPos.x * -1;\n // objectPos.y = objectPos.y * -1;\n return;\n }\n var blockID = selectedObject.getBlockData().blockID;\n con('object: ' + selectedObject.m_blockType + ' ' + blockID);\n this._updateBlockCords(selectedObject, true, objectPos.x, objectPos.y, selectedObject.currentWidth, selectedObject.currentHeight, selectedObject.angle);\n // this._updateZorder();\n });\n // this._mementoAddState();\n selectedGroup.hasControls = false;\n // this.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).resetPropertiesView();\n return;\n }\n\n //// Object\n if (options.target || active) {\n var block = options.target || active;\n this._blockSelected(block);\n return;\n }\n\n //// Scene\n this._sceneCanvasSelected();\n con('scene: ' + this.m_selectedSceneID);\n // log('object ' + options.e.clientX + ' ' + options.e.clientY + ' ' + options.target.m_blockType);\n\n });\n });\n }\n\n /**\n Select a block object on the canvas\n @method _blockSelected\n @param {Object} i_block\n **/\n _blockSelected(i_block) {\n this.m_canvas.setActiveObject(i_block);\n var blockID = i_block.getBlockData().blockID;\n // con('object: ' + i_block.m_blockType + ' ' + blockID);\n this._updateBlockCords(i_block, true, i_block.left, i_block.top, i_block.currentWidth, i_block.currentHeight, i_block.angle);\n this.commBroker.fire({event: BLOCK_SELECTED, fromInstance: this, message: blockID});\n }\n\n /**\n Deselect current group and or block selections\n @method _canvasDiscardSelections\n **/\n _discardSelections() {\n if (!this.m_canvas)\n return;\n this.m_canvas.discardActiveGroup();\n this.m_canvas.discardActiveObject();\n }\n\n /**\n Set the scene (i.e.: Canvas) as the selected block\n @method _sceneCanvasSelected\n **/\n _sceneCanvasSelected() {\n var self = this;\n if (_.isUndefined(self.m_selectedSceneID))\n return;\n self._discardSelections();\n this.commBroker.fire({event: BLOCK_SELECTED, fromInstance: this, message: self.m_selectedSceneID});\n }\n\n _onItemSelectedFromToolbar(blockID) {\n if (blockID == 'SCENE')\n return this._sceneCanvasSelected();\n\n for (var i = 0; i < this.m_canvas.getObjects().length; i++) {\n if (this.m_canvas.item(i).getBlockData().blockID == blockID) {\n this._blockSelected(this.m_canvas.item(i));\n break;\n }\n }\n }\n\n /**\n Update the coordinates of a block in pepper db, don't allow below w/h MIN_SIZE\n **/\n _updateBlockCords(i_block, i_calcScale, x, y, w, h, a) {\n\n var blockID = i_block.getBlockData().blockID;\n var blockMinWidth = i_block.getBlockData().blockMinWidth;\n var blockMinHeight = i_block.getBlockData().blockMinHeight;\n\n if (i_calcScale) {\n var sy = 1 / this.m_canvasScale;\n var sx = 1 / this.m_canvasScale;\n h = h * sy;\n w = w * sx;\n x = x * sx;\n y = y * sy;\n }\n if (h < blockMinHeight)\n h = blockMinHeight;\n if (w < blockMinWidth)\n w = blockMinWidth;\n\n var domPlayerData = this.rp.getScenePlayerdataBlock(this.m_selectedSceneID, blockID);\n var layout = $(domPlayerData).find('Layout');\n layout.attr('rotation', parseInt(a));\n layout.attr('x', parseInt(x));\n layout.attr('y', parseInt(y));\n layout.attr('width', parseInt(w));\n layout.attr('height', parseInt(h));\n var player_data = (new XMLSerializer()).serializeToString(domPlayerData);\n this.rp.setScenePlayerdataBlock(this.m_selectedSceneID, blockID, player_data);\n this.rp.reduxCommit();\n }\n\n /**\n Reset all canvas objects to their scale is set to 1\n @method _resetAllObjectScale\n **/\n _resetAllObjectScale() {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n _.each(this.m_canvas.getObjects(), (obj) => {\n this._resetObjectScale(obj);\n });\n // this.m_canvas.renderAll();\n }\n\n /**\n Reset a canvas object so its scale is set to 1\n @method _resetObjectScale\n **/\n _resetObjectScale(i_target) {\n if (_.isNull(i_target))\n return;\n if (i_target.width != i_target.currentWidth || i_target.height != i_target.currentHeight) {\n i_target.width = i_target.currentWidth;\n i_target.height = i_target.currentHeight;\n i_target.scaleX = 1;\n i_target.scaleY = 1;\n }\n }\n\n /**\n Remove all block instances\n @method _disposeBlocks\n @params {Number} [i_blockID] optional to remove only a single block\n **/\n _disposeBlocks(i_blockID ?) {\n var i;\n if (_.isUndefined(this.m_canvas))\n return;\n var totalObjects = this.m_canvas.getObjects().length;\n var c = -1;\n for (i = 0; i < totalObjects; i++) {\n c++;\n var block = this.m_canvas.item(c);\n // single block\n if (i_blockID) {\n if (block.getBlockData().blockID == i_blockID) {\n block.selectable = false; // fix fabric scale block bug\n this.m_canvas.remove(block);\n block.deleteBlock();\n break;\n }\n } else {\n // all blocks\n block.selectable = false; // fix fabric scale block bug\n this.m_canvas.remove(block);\n if (block) {\n block.deleteBlock();\n c--;\n }\n }\n }\n if (!i_blockID)\n this.m_canvas.clear();\n }\n\n _canvasUnselectable() {\n var i;\n if (_.isUndefined(this.m_canvas))\n return;\n this.m_canvas.removeListeners();\n //this.m_canvas.interactive = false;\n // this.m_canvas.selection = false;\n var totalObjects = this.m_canvas.getObjects().length;\n var c = -1;\n for (i = 0; i < totalObjects; i++) {\n c++;\n var block = this.m_canvas.item(c);\n block.selectable = false;\n if (block)\n c--;\n }\n }\n\n /**\n Zoom to scale size\n **/\n _zoomTo(nZooms) {\n var i;\n if (nZooms > 0) {\n for (i = 0; i < nZooms; i++)\n this._zoomOut();\n } else {\n for (i = 0; i > nZooms; nZooms++)\n this._zoomIn();\n }\n }\n\n /**\n Zoom to scale size\n **/\n _zoomToBlock(nZooms, block) {\n var i;\n if (nZooms > 0) {\n for (i = 0; i < nZooms; i++)\n this._zoomOutBlock(block);\n } else {\n for (i = 0; i > nZooms; nZooms++)\n this._zoomInBlock(block);\n }\n }\n\n /**\n Scroll canvas to set position\n **/\n _scrollTo(i_top, i_left) {\n var self = this;\n $('#scenesPanel', this.el.nativeElement).scrollTop(i_top);\n $('#scenesPanel', this.el.nativeElement).scrollLeft(i_left);\n }\n\n /**\n Zoom scene in\n @method _zoomIn\n **/\n _zoomIn() {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n this.m_canvasScale = this.m_canvasScale * this.SCALE_FACTOR;\n this.m_canvas.setHeight(this.m_canvas.getHeight() * this.SCALE_FACTOR);\n this.m_canvas.setWidth(this.m_canvas.getWidth() * this.SCALE_FACTOR);\n this._notifyScaleChange();\n var objects = this.m_canvas.getObjects();\n for (var i in objects) {\n if (_.isNull(objects[i]))\n return;\n this._zoomInBlock(objects[i]);\n }\n }\n\n /**\n Zoom scene in\n @method _zoomIn\n **/\n _zoomInBlock(i_block) {\n var scaleX = i_block.scaleX;\n var scaleY = i_block.scaleY;\n var left = i_block.left;\n var top = i_block.top;\n var tempScaleX = scaleX * this.SCALE_FACTOR;\n var tempScaleY = scaleY * this.SCALE_FACTOR;\n var tempLeft = left * this.SCALE_FACTOR;\n var tempTop = top * this.SCALE_FACTOR;\n\n i_block['canvasScale'] = this.m_canvasScale;\n i_block.scaleX = tempScaleX;\n i_block.scaleY = tempScaleY;\n i_block.left = tempLeft;\n i_block.top = tempTop;\n i_block.setCoords();\n\n if (i_block.forEachObject != undefined) {\n i_block.forEachObject((obj) => {\n var scaleX = obj.scaleX;\n var scaleY = obj.scaleY;\n var left = obj.left;\n var top = obj.top;\n var tempScaleX = scaleX * this.SCALE_FACTOR;\n var tempScaleY = scaleY * this.SCALE_FACTOR;\n var tempLeft = left * this.SCALE_FACTOR;\n var tempTop = top * this.SCALE_FACTOR;\n obj['canvasScale'] = this.m_canvasScale;\n obj.scaleX = tempScaleX;\n obj.scaleY = tempScaleY;\n obj.left = tempLeft;\n obj.top = tempTop;\n obj.setCoords();\n });\n }\n }\n\n /**\n Zoom scene out\n @method _zoomOut\n **/\n _zoomOutBlock(i_block) {\n var scaleX = i_block.scaleX;\n var scaleY = i_block.scaleY;\n var left = i_block.left;\n var top = i_block.top;\n var tempScaleX = scaleX * (1 / this.SCALE_FACTOR);\n var tempScaleY = scaleY * (1 / this.SCALE_FACTOR);\n var tempLeft = left * (1 / this.SCALE_FACTOR);\n var tempTop = top * (1 / this.SCALE_FACTOR);\n i_block['canvasScale'] = this.m_canvasScale;\n i_block.scaleX = tempScaleX;\n i_block.scaleY = tempScaleY;\n i_block.left = tempLeft;\n i_block.top = tempTop;\n i_block.setCoords();\n\n if (i_block.forEachObject != undefined) {\n i_block.forEachObject((obj) => {\n var scaleX = obj.scaleX;\n var scaleY = obj.scaleY;\n var left = obj.left;\n var top = obj.top;\n var tempScaleX = scaleX * (1 / this.SCALE_FACTOR);\n var tempScaleY = scaleY * (1 / this.SCALE_FACTOR);\n var tempLeft = left * (1 / this.SCALE_FACTOR);\n var tempTop = top * (1 / this.SCALE_FACTOR);\n obj['canvasScale'] = this.m_canvasScale;\n obj.scaleX = tempScaleX;\n obj.scaleY = tempScaleY;\n obj.left = tempLeft;\n obj.top = tempTop;\n obj.setCoords();\n });\n }\n }\n\n /**\n Zoom scene out\n @method _zoomOut\n **/\n _zoomOut() {\n if (_.isUndefined(this.m_selectedSceneID))\n return;\n this.m_canvasScale = this.m_canvasScale / this.SCALE_FACTOR;\n this.m_canvas.setHeight(this.m_canvas.getHeight() * (1 / this.SCALE_FACTOR));\n this.m_canvas.setWidth(this.m_canvas.getWidth() * (1 / this.SCALE_FACTOR));\n this._notifyScaleChange();\n var objects = this.m_canvas.getObjects();\n for (var i in objects) {\n if (_.isNull(objects[i]))\n return;\n this._zoomOutBlock(objects[i]);\n }\n }\n\n /**\n Zoom reset back to scale 1\n @method _zoomReset\n **/\n _zoomReset() {\n if (_.isUndefined(this.m_selectedSceneID) || _.isUndefined(this.m_canvas)) {\n this.m_canvasScale = 1;\n this._notifyScaleChange();\n return;\n }\n this._discardSelections();\n this.m_canvas.setHeight(this.m_canvas.getHeight() * (1 / this.m_canvasScale));\n this.m_canvas.setWidth(this.m_canvas.getWidth() * (1 / this.m_canvasScale));\n var objects = this.m_canvas.getObjects();\n for (var i in objects) {\n if (_.isNull(objects[i]))\n return;\n var scaleX = objects[i].scaleX;\n var scaleY = objects[i].scaleY;\n var left = objects[i].left;\n var top = objects[i].top;\n var tempScaleX = scaleX * (1 / this.m_canvasScale);\n var tempScaleY = scaleY * (1 / this.m_canvasScale);\n var tempLeft = left * (1 / this.m_canvasScale);\n var tempTop = top * (1 / this.m_canvasScale);\n objects[i].scaleX = tempScaleX;\n objects[i].scaleY = tempScaleY;\n objects[i].left = tempLeft;\n objects[i].top = tempTop;\n objects[i].setCoords();\n objects[i]['canvasScale'] = 1;\n\n if (objects[i].forEachObject != undefined) {\n objects[i].forEachObject((obj) => {\n var scaleX = obj.scaleX;\n var scaleY = obj.scaleY;\n var left = obj.left;\n var top = obj.top;\n var tempScaleX = scaleX * (1 / this.m_canvasScale);\n var tempScaleY = scaleY * (1 / this.m_canvasScale);\n var tempLeft = left * (1 / this.m_canvasScale);\n var tempTop = top * (1 / this.m_canvasScale);\n obj.scaleX = tempScaleX;\n obj.scaleY = tempScaleY;\n obj.left = tempLeft;\n obj.top = tempTop;\n obj.setCoords();\n obj['canvasScale'] = 1;\n });\n }\n }\n this.m_canvasScale = 1;\n this._notifyScaleChange();\n }\n\n /**\n Remove a Scene and cleanup after\n @method disposeScene\n **/\n disposeScene() {\n if (_.isUndefined(this.m_canvas))\n return;\n this.m_canvas.off('mouse:up');\n this.m_canvas.off('mouse:down');\n this.m_canvas.off('object:modified');\n this.m_canvas.off('object:moving');\n this.m_canvas.off('object:scaling');\n this.m_canvas.off();\n this.m_blocks.blocksPost = {};\n this._disposeBlocks();\n this.m_sceneBlock.deleteBlock();\n this.m_canvas.dispose();\n this.m_canvas = undefined;\n // this.m_property.resetPropertiesView();\n }\n\n /**\n Create a new scene based on player_data and strip injected IDs if arged\n @method createScene\n @param {String} i_scenePlayerData\n @optional {Boolean} i_stripIDs\n @optional {Boolean} i_loadScene\n @optional {String} i_mimeType\n @optional {String} i_name\n **/\n createScene(i_scenePlayerData, i_stripIDs, i_loadScene, i_mimeType, i_name) {\n if (i_stripIDs)\n i_scenePlayerData = this.rp.stripPlayersID(i_scenePlayerData);\n this.m_selectedSceneID = this.rp.createScene(i_scenePlayerData, i_mimeType, i_name);\n // BB.comBroker.fire(BB.EVENTS.NEW_SCENE_ADDED, this, null, this.m_selectedSceneID);\n if (i_loadScene)\n this._loadScene();\n this.commBroker.fire({event: SCENE_LIST_UPDATED, fromInstance: this});\n this.rp.reduxCommit();\n }\n\n /**\n Get currently selected scene id\n @method getSelectedSceneID\n @return {Number} scene id\n **/\n getSelectedSceneID() {\n return this.m_selectedSceneID;\n }\n\n destroy() {\n // removed since we need to keep this data in store when adding new LocationBlock\n // let uiState: IUiState = {\n // scene: {\n // sceneSelected: -1,\n // blockSelected: -1\n // }\n // }\n // this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.disposeScene();\n this.m_canvasScale = -1;\n this._notifyScaleChange();\n }\n}\n\n\n// }\n\n// /**\n// Listen to undo and redo\n// @method _listenMemento\n// **/\n// _listenMemento() {\n// this.commBroker.onEvent(SCENE_UNDO).subscribe((msg: IMessage) => {\n// if (this.m_rendering)\n// return;\n// this.m_blocks.blockSelected = undefined;\n// this._discardSelections();\n// this._mementoLoadState('undo');\n// });\n// this.commBroker.onEvent(SCENE_REDO).subscribe((msg: IMessage) => {\n// if (this.m_rendering)\n// return;\n// this.m_blocks.blockSelected = undefined;\n// this._discardSelections();\n// this._mementoLoadState('redo');\n// });\n// }\n\n// _initDimensionProps() {\n// var self = this;\n// require(['DimensionProps'], (DimensionProps) => {\n// self.m_dimensionProps = new DimensionProps({\n// appendTo: Elements.SCENE_BLOCK_PROPS,\n// showAngle: true,\n// showLock: true,\n// hideSpinners: true\n// });\n// // self.m_dimensionProps.hideSpinners();\n// BB.comBroker.setService(BB.SERVICES['DIMENSION_PROPS_LAYOUT'], self.m_dimensionProps);\n// $(self.m_dimensionProps).on('changed', (e) => {\n// var block = self.m_canvas.getActiveObject();\n// if (_.isNull(block))\n// return;\n// var props = e.target.getValues();\n// var block_id = block.getBlockData().blockID;\n// self._updateBlockCords(block, false, props.x, props.y, props.w, props.h, props.a);\n// BB.comBroker.fire(BB.EVENTS['SCENE_BLOCK_CHANGE'], self, null, [block_id]);\n// });\n// self._sceneActive();\n// })\n// }\n\n\n// this._sceneProcessing(true, jQueryAny.proxy(function () {\n// self._disposeBlocks();\n// self.disposeScene();\n// self._zoomReset();\n// // self.m_property.resetPropertiesView();\n// var domPlayerData = self.rp.getScenePlayerdataDom(self.m_selectedSceneID);\n// var l = $(domPlayerData).find('Layout').eq(0);\n// var w = $(l).attr('width');\n// var h = $(l).attr('height');\n// self._initializeCanvas(w, h);\n// // self._initializeScene(self.m_selectedSceneID);\n// self._initializeScene();\n// self._preRender(domPlayerData);\n// }), this);\n\n\n// /**\n// Listen to re-order of screen division, putting selected on top\n// @method _listenPushToTop\n// **/\n// _listenPushToTop() {\n// this.commBroker.onEvent(SCENE_PUSH_TOP).subscribe((msg: IMessage) => {\n// if (_.isUndefined(this.m_selectedSceneID))\n// return;\n// var block = this.m_canvas.getActiveObject();\n// if (_.isNull(block)) {\n// this._discardSelections();\n// return;\n// }\n// this.m_canvas.bringToFront(block);\n// this._updateZorder(this.PUSH_TOP, block);\n// this._mementoAddState();\n// });\n// }\n\n// /**\n// Listen to re-order of screen division, putting selected at bottom\n// @method _listenPushToBottom\n// **/\n// _listenPushToBottom() {\n// this.commBroker.onEvent(SCENE_PUSH_BOTTOM).subscribe((msg: IMessage) => {\n// if (_.isUndefined(this.m_selectedSceneID))\n// return;\n// var block = this.m_canvas.getActiveObject();\n// if (_.isNull(block)) {\n// this._discardSelections();\n// return;\n// }\n// this.m_canvas.sendToBack(block);\n// this._updateZorder(this.PUSH_BOTTOM, block);\n// this._mementoAddState();\n// });\n// }\n\n// /**\n// Listen grid magnet when dragging objects\n// @method _listenGridMagnet\n// **/\n// _listenGridMagnet() {\n// $('#sceneGridMagnet', this.el.nativeElement).on('click', () => {\n// if (this.m_rendering || _.isUndefined(this.m_canvas))\n// return;\n// switch (this.m_gridMagneticMode) {\n// case 0: {\n// this.m_gridMagneticMode = 1;\n// break;\n// }\n// case 1: {\n// this.m_gridMagneticMode = 2;\n// break;\n// }\n// case 2: {\n// this.m_gridMagneticMode = 0;\n// break;\n// }\n// }\n// this.m_sceneBlock.setCanvas(this.m_canvas, this.m_gridMagneticMode);\n// });\n// }\n\n// _listenStackViewSelected() {\n// var appContentFaderView = BB.comBroker.getService(BB.SERVICES['APP_CONTENT_FADER_VIEW']);\n// appContentFaderView.on(BB.EVENTS.SELECTED_STACK_VIEW, (e) => {\n// if (e == BB.comBroker.getService(BB.SERVICES['SCENES_LOADER_VIEW'])) {\n// setTimeout( () => {\n// if (_.isUndefined(this.m_canvas))\n// return;\n// this.m_canvas.calcOffset();\n// }, 500);\n// }\n// });\n// }\n\n\n// /**\n// Listen to all zoom events via wiring the UI\n// @method _listenZoom\n// **/\n// _listenZoom() {\n// this.commBroker.onEvent(SCENE_ZOOM_IN).subscribe((msg: IMessage) => {\n// // this.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).resetPropertiesView();\n// this._zoomIn();\n// this._discardSelections();\n// this._resetAllObjectScale();\n// this.m_canvas.renderAll();\n// });\n//\n// this.commBroker.onEvent(SCENE_ZOOM_OUT).subscribe((msg: IMessage) => {\n// // this.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).resetPropertiesView();\n// this._zoomOut();\n// this._discardSelections();\n// this._resetAllObjectScale();\n// this.m_canvas.renderAll();\n// });\n//\n// this.commBroker.onEvent(SCENE_ZOOM_RESET).subscribe((msg: IMessage) => {\n// // this.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).resetPropertiesView();\n// this._zoomReset();\n// this._resetAllObjectScale();\n// this.m_canvas.renderAll();\n// });\n// }\n\n// /**\n// Announce that block count changed with block array of ids\n// @method self._updateBlockCount();\n// **/\n// _updateBlockCount() {\n// setTimeout(() => {\n// this.m_sceneBlockIds = List([{id: 'SCENE', name: '[Scene canvas]'}]);\n// var objects = this.m_canvas.getObjects().length;\n// for (var i = 0; i < objects; i++) {\n// this.m_sceneBlockIds = this.m_sceneBlockIds.push({\n// id: this.m_canvas.item(i).m_block_id,\n// name: this.m_canvas.item(i).m_blockName\n// });\n// }\n// // con('NEW LIST CREATED');\n// // this.sceneToolbar.updateBlocks(this.m_sceneBlockIds);\n// }, 1000)\n//\n// }\n\n\n\n" }, { "path": "src/app/scenes/scene-list.ts", "content": "import {Component, ChangeDetectionStrategy, Input, Output, EventEmitter} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {IUiState} from \"../../store/store.data\";\nimport {SideProps} from \"../../store/actions/appdb.actions\";\nimport {BlockService, ISceneData} from \"../blocks/block-service\";\n\n@Component({\n selector: 'scene-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n \n `,\n})\nexport class SceneList extends Compbaser {\n selectedIdx = -1;\n m_scenes: Array;\n m_selectedScene: ISceneData;\n\n constructor(private bs: BlockService) {\n super();\n }\n\n @Input()\n set scenes(i_scenes: Array) {\n this.m_scenes = i_scenes;\n }\n\n @Output()\n slideToSceneEditor: EventEmitter = new EventEmitter();\n\n @Output()\n slideToSceneName: EventEmitter = new EventEmitter();\n\n @Output()\n onSceneSelected: EventEmitter = new EventEmitter();\n\n _onSceneSelected(event: MouseEvent, scene: ISceneData, index) {\n this.selectedIdx = index;\n let uiState: IUiState;\n if (jQuery(event.target).hasClass('props')) {\n uiState = {\n uiSideProps: SideProps.sceneProps,\n scene: {sceneSelected: scene.scene_id}\n }\n this.onSceneSelected.emit(uiState)\n } else {\n uiState = {\n uiSideProps: SideProps.miniDashboard,\n scene: {sceneSelected: scene.scene_id}\n }\n this.slideToSceneEditor.emit();\n this.onSceneSelected.emit(uiState)\n }\n this.m_selectedScene = scene;\n }\n\n resetSelection(){\n this.selectedIdx = -1;\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/scenes/scene-manager.ts", "content": "import {Component, ElementRef, EventEmitter, Output, ViewChild} from \"@angular/core\";\nimport {Observable} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Router} from \"@angular/router\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {ISceneData} from \"../blocks/block-service\";\nimport {SceneList} from \"./scene-list\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {WizardService} from \"../../services/wizard-service\";\n\n@Component({\n // changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'scene-manager',\n template: `\n {{me}}\n
      \n scene selection\n
      \n
      \n
      \n \n \n \n
      \n
      \n \n
      \n
      \n \n \n
      \n
      \n `\n})\nexport class SceneManager extends Compbaser {\n\n sceneSelected$;\n public scenes$: Observable>\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private toastr: ToastsManager, private wizardService:WizardService) {\n super();\n this.preventRedirect(true);\n this.scenes$ = this.yp.listenScenes()\n this.sceneSelected$ = this.yp.ngrxStore.select(store => store.appDb.uiState.scene.sceneSelected)\n this._notifyResetSceneSelection();\n\n // setTimeout(()=>{\n // this.wizardService.inModule('scenes');\n // },4000)\n }\n\n @ViewChild(SceneList)\n sceneList:SceneList;\n\n @Output()\n sceneCreate: EventEmitter = new EventEmitter();\n\n @Output()\n slideToSceneEditor: EventEmitter = new EventEmitter();\n\n @Output()\n slideToCampaignName: EventEmitter = new EventEmitter();\n\n _notifyResetSceneSelection(){\n var uiState: IUiState = {scene: {sceneSelected: -1}}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n\n _removeScene() {\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.uiState.scene.sceneSelected)\n .take(1)\n .subscribe(scene_id => {\n bootbox.confirm('Are you sure you want to remove the selected scene', (result) => {\n if (result == true) {\n this._notifyResetSceneSelection();\n this.rp.removeBlocksWithSceneID(scene_id);\n this.rp.removeSceneFromBlockCollectionInScenes(scene_id);\n this.rp.removeSceneFromBlockCollectionsInChannels(scene_id);\n this.rp.removeSceneFromBlockLocationInScenes(scene_id);\n this.rp.removeSceneFromBlockLocationInChannels(scene_id);\n this.rp.removeScene(scene_id);\n this.rp.reduxCommit();\n this.sceneList.resetSelection();\n this.toastr.info('scene removed from scene list');\n }\n });\n })\n )\n }\n\n _duplicateScene() {\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.uiState.scene.sceneSelected)\n .take(1)\n .subscribe(scene_id => {\n var scenePlayerData = this.rp.getScenePlayerdata(scene_id);\n this.createScene(scenePlayerData, true, '');\n this.toastr.info('scene duplicated and is available in scene list');\n })\n )\n }\n\n /**\n Create a new scene based on player_data and strip injected IDs if arged\n @method createScene\n @param {String} i_scenePlayerData\n @optional {Boolean} i_stripIDs\n @optional {Boolean} i_loadScene\n @optional {String} i_mimeType\n @optional {String} i_name\n **/\n private createScene(i_scenePlayerData, i_stripIDs, i_mimeType, i_name?) {\n if (i_stripIDs)\n i_scenePlayerData = this.rp.stripPlayersID(i_scenePlayerData);\n var sceneId = this.rp.createScene(i_scenePlayerData, i_mimeType, i_name);\n this.rp.reduxCommit();\n }\n\n private save() {\n con('saving...');\n this.rp.save((result) => {\n if (result.status == true) {\n bootbox.alert('saved');\n } else {\n alert(JSON.stringify(result));\n }\n });\n }\n\n _onSceneSelected(i_uiState: IUiState) {\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: i_uiState}))\n }\n\n _newScene() {\n this.sceneCreate.emit();\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.slideToCampaignName.emit();\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/scenes/scene-props-manager.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable} from \"rxjs\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {BlockService, IBlockData, ISceneData} from \"../blocks/block-service\";\nimport {IUiState} from \"../../store/store.data\";\nimport * as _ from 'lodash';\nimport {CommBroker} from \"../../services/CommBroker\";\n\n@Component({\n selector: 'scene-props-manager',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n ul {\n padding: 0\n }\n `],\n template: `\n {{me}}\n
        \n
        \n
        scene editor
        \n
        \n
        \n \n
        \n
        \n \n \n
        \n
        \n \n
        \n
      \n `,\n})\nexport class ScenePropsManager extends Compbaser {\n\n m_blockData: IBlockData;\n\n constructor(private yp: YellowPepperService, private bs: BlockService, private commBroker: CommBroker) {\n super();\n this.m_sideProps$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n\n this.cancelOnDestroy(\n //\n this.commBroker.onEvent('SCENE_ITEM_REMOVE')\n .subscribe(() => {\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n })\n )\n\n this.cancelOnDestroy(\n //\n this.yp.listenSceneSelected(true)\n .mergeMap((i_sceneData: ISceneData) => {\n return this.bs.getBlockDataInScene(i_sceneData);\n }).subscribe((i_blockData) => {\n this.m_blockData = i_blockData;\n }, (e) => console.error(e))\n )\n }\n\n m_sidePropsEnum = SideProps;\n m_sideProps$: Observable;\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/scenes/scene-toolbar.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit, Output, EventEmitter, Input, ChangeDetectorRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {FormBuilder, FormGroup} from \"@angular/forms\";\nimport * as _ from 'lodash';\nimport {PlayerDataModelExt} from \"../../store/model/msdb-models-extended\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'scene-toolbar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
      \n
      \n
      \n \n \n \n \n \n \n \n \n \n \n \n \n
      \n \n
      \n
      \n
      \n
      \n\n `,\n})\nexport class SceneToolbar extends Compbaser {\n\n m_formInputs = {};\n m_contGroup: FormGroup;\n m_blocks = [];\n\n constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {\n super();\n this.m_contGroup = fb.group({\n 'blocks': []\n });\n }\n\n @Input()\n set blocks(i_blocks) {\n this.m_blocks = i_blocks;\n }\n\n @Output()\n onToolbarAction: EventEmitter = new EventEmitter();\n\n @Output()\n onItemSelected: EventEmitter = new EventEmitter();\n\n @timeout(100)\n _goBack(){\n this.onToolbarAction.emit('back')\n }\n \n _onBlockSelected(event) {\n this.onItemSelected.emit(event.target.value);\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/app/scenes/scenes-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {BlockFactoryService} from \"../../services/block-factory-service\";\nimport {PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {AppdbAction, AuthenticateFlags} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n providers: [BlockService, BlockFactoryService, {\n provide: \"BLOCK_PLACEMENT\",\n useValue: PLACEMENT_SCENE\n }],\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n scene-navigation\n
      \n \n
      \n \n \n \n \n \n \n \n \n \n \n \n `\n})\nexport class ScenesNavigation extends Compbaser {\n userModel$;\n m_AuthenticateFlags = AuthenticateFlags;\n\n constructor(private yp: YellowPepperService) {\n super();\n this.userModel$ = this.yp.listenUserModel();\n }\n}\n\n" }, { "path": "src/app/scenes/scenes.ts", "content": "import {ChangeDetectionStrategy, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {PLACEMENT_SCENE} from \"../../interfaces/Consts\";\nimport {ISliderItemData, Slideritem} from \"../../comps/sliderpanel/Slideritem\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'scenes',\n template: `\n {{me}}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `\n})\nexport class Scenes extends Compbaser {\n\n private m_placement = PLACEMENT_SCENE;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard}\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n\n this.cancelOnDestroy(\n //\n this.yp.listenLocationMapLoad()\n .subscribe((v) => {\n if (v){\n this.sliderSceneCreator.slideTo('locationMap','right')\n }\n }, (e) => console.error(e))\n\n )\n\n }\n\n @ViewChild('sliderSceneCreator')\n sliderSceneCreator:Slideritem;\n\n\n _onLocationMapClosed(){\n this.sliderSceneCreator.slideTo('sceneEditor','left')\n\n }\n\n _onSlideChange(event: ISliderItemData) {\n if (event.direction == 'left' && event.to == 'sceneList') {\n var uiState:IUiState = {\n uiSideProps: SideProps.miniDashboard,\n scene: {sceneSelected: -1}\n }\n return this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n }\n // if (event.direction == 'right' && event.to == 'campaignEditor')\n // return this._createCampaign();\n }\n}\n\n" }, { "path": "src/app/settings/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {SettingsNavigation} from \"./settings-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {Twofactor} from \"./twofactor\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: SettingsNavigation},\n {path: ':folder/:id', component: SettingsNavigation},\n {path: '**', component: SettingsNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [SettingsNavigation, Twofactor]\n})\nexport class SettingsLazyModule {\n}" }, { "path": "src/app/settings/settings-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n \n \n `,\n})\nexport class SettingsNavigation extends Compbaser {\n\n constructor() {\n super();\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/settings/twofactor.ts", "content": "import {Component, ChangeDetectionStrategy, ElementRef, ViewChild, ChangeDetectorRef} from \"@angular/core\";\nimport {FormControl, FormGroup, FormBuilder} from \"@angular/forms\";\nimport * as _ from \"lodash\";\nimport {LocalStorage} from \"../../services/LocalStorage\";\nimport {AppdbAction, AuthenticateFlags} from \"../../store/actions/appdb.actions\";\nimport {UserModel} from \"../../models/UserModel\";\nimport {Map} from \"immutable\";\nimport {EFFECT_TWO_FACTOR_UPDATING} from \"../../store/effects/appdb.effects\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\n\n@Component({\n selector: 'Twofactor',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
      \n
      \n
      \n
      \n
      \n
      \n general properties\n \n \n
      \n
        \n
      • \n Two factor login with Google Authenticator\n
        \n \n \n
        \n
        • \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n \n \n
      \n
      \n `,\n styles: [`.material-switch {\n position: relative;\n padding-top: 10px;\n }`]\n})\nexport class Twofactor extends Compbaser {\n constructor(private fb: FormBuilder,\n private localStorage: LocalStorage,\n private el: ElementRef,\n private cd: ChangeDetectorRef,\n private appdbAction: AppdbAction,\n private yp: YellowPepperService) {\n super();\n this.contGroup = fb.group({\n 'TwofactorCont': ['']\n });\n _.forEach(this.contGroup.controls, (value, key: string) => {\n this.formInputs[key] = this.contGroup.controls[key] as FormControl;\n })\n this.yp.ngrxStore.select(store => store.appDb.userModel).subscribe((userModel: UserModel) => {\n this.twoFactorStatus = userModel.getTwoFactorRequired();\n this.changeTwoFactorStatus();\n }, (e) => {\n console.error(e)\n })\n this.renderFormInputs();\n this.listenEvents();\n }\n\n @ViewChild('activate')\n activateToken;\n\n twoFactorStatus: boolean;\n contGroup: FormGroup;\n formInputs = {};\n\n private listenEvents() {\n this.cancelOnDestroy(\n this.yp.ngrxStore.select(store => store.appDb.appAuthStatus).skip(1).subscribe((i_authStatus: Map) => {\n let authStatus: AuthenticateFlags = i_authStatus.get('authStatus')\n switch (authStatus) {\n case AuthenticateFlags.TWO_FACTOR_UPDATE_PASS: {\n bootbox.alert('Congratulations, activated');\n break;\n }\n case AuthenticateFlags.TWO_FACTOR_UPDATE_FAIL: {\n bootbox.alert('wrong token entered');\n break;\n }\n }\n }, (e) => {\n console.error(e)\n }))\n }\n\n private changeTwoFactorStatus() {\n if (this.twoFactorStatus) {\n this.twoFactorStatus = true;\n this.removeQrCode();\n this.cd.markForCheck();\n this.localStorage.removeItem('remember_me_studioweb');\n this.renderFormInputs();\n } else {\n // this.removeQrCode();\n this.cd.markForCheck();\n }\n }\n\n private onActivate() {\n if (this.activateToken.nativeElement.value.length < 6)\n return bootbox.alert('token is too short');\n this.yp.ngrxStore.dispatch({\n type: EFFECT_TWO_FACTOR_UPDATING,\n payload: {\n token: this.activateToken.nativeElement.value,\n enable: true\n }\n })\n }\n\n private addQrCode() {\n this.removeQrCode();\n this.appdbAction.getQrCodeTwoFactor().take(1).subscribe((qrCode) => {\n this.removeQrCode();\n jQuery(this.el.nativeElement).append(qrCode);\n var svg = jQuery(this.el.nativeElement).find('svg').get(0);\n // var w = svg.width.baseVal.value;\n // var h = svg.height.baseVal.value;\n svg.setAttribute('viewBox', '0 0 ' + 100 + ' ' + 100);\n svg.setAttribute('width', '40%');\n // svg.setAttribute('height', '100%');\n }, (e) => console.error(e));\n }\n\n private removeQrCode() {\n jQuery(this.el.nativeElement).find('svg').remove();\n }\n\n private onChangeStatus(i_twoFactorStatus: boolean) {\n this.twoFactorStatus = i_twoFactorStatus;\n if (this.twoFactorStatus) {\n this.removeQrCode();\n } else {\n this.addQrCode();\n bootbox.alert('Token removed, be sure to delete the entry now from Google Authenticator as it is no longer valid');\n }\n }\n\n private renderFormInputs() {\n this.formInputs['TwofactorCont'].setValue(this.twoFactorStatus);\n if (this.twoFactorStatus) {\n this.removeQrCode();\n } else {\n this.addQrCode();\n }\n }\n\n}" }, { "path": "src/app/stations/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {StationsNavigation} from \"./stations-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\nimport {Stations} from \"./stations\";\nimport {StationsList} from \"./stations-list\";\nimport {StationsPropsManager} from \"./stations-props-manager\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: StationsNavigation},\n {path: ':folder/:id', component: StationsNavigation},\n {path: '**', component: StationsNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [StationsNavigation, Stations, StationsList, StationsPropsManager]\n})\nexport class StationsLazyModule {\n}" }, { "path": "src/app/stations/stations-list.ts", "content": "import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {List} from \"immutable\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {StationModel} from \"../../models/StationModel\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'stations-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n input[type=\"checkbox\"] {\n transform: scale(2, 2);\n position: relative;\n top: -40px;\n }\n\n .green {\n color: green;\n }\n\n .red {\n color: red;\n }\n\n .yellow {\n color: yellow;\n }\n\n span {\n background-color: transparent;\n -webkit-text-stroke: 1px black;\n text-shadow: 1px 1px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n }\n `],\n template: `\n {{me}}\n \n `,\n})\nexport class StationsList extends Compbaser {\n selectedIdx = -1;\n m_stations: List;\n m_checked = {};\n\n constructor(private bs: BlockService, private el: ElementRef, private cd:ChangeDetectorRef) {\n super();\n }\n\n @Input()\n set stations(i_stations: List) {\n this.m_stations = i_stations;\n }\n\n @Input() filter;\n\n @Output()\n onSelected: EventEmitter = new EventEmitter();\n\n @Output()\n onMultiSelected: EventEmitter = new EventEmitter();\n\n @timeout()\n _onCheckedChange(station: StationModel) {\n if (!this.m_checked[station.id]){\n this.m_checked[station.id] = true;\n } else {\n this.m_checked[station.id] = !this.m_checked[station.id];\n }\n this.cd.markForCheck();\n this.onMultiSelected.emit(this.m_checked)\n }\n\n\n _onSelected(event: MouseEvent, i_station: StationModel, index) {\n this.selectedIdx = index;\n this.onSelected.emit(i_station)\n // this.cd.markForCheck();\n // this.m_selected = i_resource;\n }\n\n resetSelection() {\n this.selectedIdx = -1;\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/stations/stations-navigation.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {BlockService} from \"../blocks/block-service\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n providers: [BlockService, {\n provide: \"BLOCK_PLACEMENT\",\n useValue: ''\n }\n ],\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n station-navigation\n \n \n \n \n \n \n \n \n \n `\n})\nexport class StationsNavigation extends Compbaser {\n\n constructor() {\n super();\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/app/stations/stations-props-manager.html", "content": "{{me}}\n
      \n
      \n
        \n
        \n
        \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
        \n
        \n
        \n \n \n \n \n
        \n \n
        \n
        1\">\n \n
        \n \n
        \n
        \n \n \n
        \n
        \n
        \n
          \n
        • \n Name : {{m_selectedStation.name}}\n
          • \n
        • \n Station id: : {{m_selectedStation.id}}\n
          • \n
        • \n OS : {{m_selectedStation.os}}\n
          • \n
        • \n AIR : {{m_selectedStation.airVersion}}\n
          • \n
        • \n App version: : {{m_selectedStation.appVersion}}\n
          • \n
        • \n Peak memory: : {{m_selectedStation.peakMemory}}\n
          • \n
        • \n Total memory: : {{m_selectedStation.totalMemory}}\n
          • \n
        • \n Running: : {{m_selectedStation.runningTime}}\n
          • \n
        • \n Watchdog: : {{m_selectedStation.watchDogConnection == \"1\" ? 'ON' : 'OFF'}}\n
          • \n
        • \n Last update: : {{m_selectedStation.lastUpdate}}\n
          • \n
        \n
        \n
        \n
        \n
        \n \n \n\n

        \n \n
        \n
        \n \n\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n
          \n
        • \n ip address\n \n
          • \n
        • \n port\n \n
          • \n
        \n
        \n
        \n
        \n
        \n
        \n\n
        \n \n
        \n\n
      \n
      \n\n\n" }, { "path": "src/app/stations/stations-props-manager.ts", "content": "import {ChangeDetectorRef, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Observable} from \"rxjs\";\nimport {ACTION_LIVELOG_UPDATE, ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {StationModel} from \"../../models/StationModel\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {FormBuilder, FormGroup} from \"@angular/forms\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {BranchStationsModelExt, CampaignsModelExt} from \"../../store/model/msdb-models-extended\";\nimport {List} from \"immutable\";\nimport {LazyImage} from \"../../comps/lazy-image/lazy-image\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {LiveLogModel} from \"../../models/live-log-model\";\nimport * as _ from 'lodash';\nimport {IUiState} from \"../../store/store.data\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {PreviewModeEnum} from \"../live-preview/live-preview\";\n\n@Component({\n selector: 'stations-props-manager',\n host: {\n '(input-blur)': 'saveToStore($event)'\n },\n animations: [\n trigger('toggleState', [\n state('true', style({})),\n state('false', style({maxHeight: 0, padding: 0, display: 'none'})),\n // transition\n transition('* => *', animate('300ms')),\n ])\n ],\n styles: [`\n ul {\n padding: 0px;\n }\n\n #stationcontrol {\n width: 100%;\n }\n\n #stationcontrol button {\n width: 25%;\n }\n\n /*.loading {*/\n /*float: left;*/\n /*position: relative;*/\n /*top: -106px;*/\n /*left: calc((100% / 2) - 30px);*/\n /*}*/\n\n /*img {*/\n /*float: left;*/\n /*position: relative;*/\n /*width: 210px;*/\n /*top: -140px;*/\n /*left: calc((100% / 2) - 109px);*/\n /*}*/\n\n /*#propWrap {*/\n /*position: fixed;*/\n /*padding-left: 20px;*/\n /*}*/\n `],\n templateUrl: './stations-props-manager.html'\n})\nexport class StationsPropsManager extends Compbaser {\n\n contGroup: FormGroup;\n m_sideProps$: Observable;\n m_sidePropsEnum = SideProps;\n m_uiUserFocusItem$: Observable;\n m_selectedStation: StationModel;\n m_selectedBranchStation: BranchStationsModelExt;\n m_selectedCampaignId = -1;\n m_loading = false;\n m_totalStationsSelected = [];\n m_snapPath = '';\n shouldToggle = true;\n m_disabled = true;\n m_port = '';\n m_campaigns: List;\n m_ip = '';\n m_inFocus = false;\n m_multiOptions = ['change campaigns, no save','change campaigns & save','change campaigns, save & restart station']\n\n constructor(private toast: ToastsManager, private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService, private cd: ChangeDetectorRef) {\n super();\n this.m_uiUserFocusItem$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n this.m_sideProps$ = this.yp.ngrxStore.select(store => store.appDb.uiState.uiSideProps);\n\n\n this.contGroup = fb.group({\n 'm_campaignsControl': [''],\n 'm_campaignsMultiControl': [''],\n 'm_stationName': [''],\n 'm_eventValue': [''],\n 'm_enableLan': [],\n 'm_ip': [],\n 'm_port': []\n });\n\n this.cancelOnDestroy(\n //\n this.yp.getMultiSelectedStations()\n .map(i_stations => {\n var jStationsData = i_stations.toJSON();\n this.m_totalStationsSelected = [];\n _.forEach(jStationsData, (i_selected, i_stationId) => {\n if (i_selected)\n this.m_totalStationsSelected.push(i_stationId)\n })\n return this.m_totalStationsSelected;\n })\n .subscribe((i_stationsIds) => {\n console.log(i_stationsIds);\n }, (e) => console.error(e))\n )\n\n this.cancelOnDestroy(\n //\n this.yp.getCampaigns()\n .subscribe((i_campaigns: List) => {\n this.m_campaigns = i_campaigns;\n }, (e) => console.error(e))\n )\n this.cancelOnDestroy(\n //\n this.yp.listenStationBranchSelected()\n .map((i_station: StationModel) => {\n this.m_snapPath = '';\n if (this.m_selectedStation && this.m_selectedStation.id != i_station.id)\n this._resetSnapshotSelection();\n this.m_selectedStation = i_station;\n this.m_disabled = this.m_selectedStation.connection == \"0\";\n return this.m_selectedStation.id;\n })\n .mergeMap(i_station_id => {\n return this.yp.getStationCampaignID(i_station_id)\n .map((i_campaign_id) => {\n return {i_station_id, i_campaign_id};\n })\n\n })\n .mergeMap(({i_station_id, i_campaign_id}) => {\n this.m_selectedCampaignId = i_campaign_id;\n return this.yp.listenStationRecord(i_station_id)\n })\n .subscribe((i_branchStationsModel) => {\n this.m_selectedBranchStation = i_branchStationsModel;\n this._render()\n\n }, (e) => console.error(e))\n )\n }\n\n @ViewChild(LazyImage)\n lazyImage: LazyImage;\n\n loadImage(imagePath: string): Observable {\n return Observable\n .create(observer => {\n const img = new Image();\n try {\n img.src = imagePath;\n img.onload = () => {\n observer.next(imagePath);\n observer.complete();\n };\n img.onerror = err => {\n observer.error(null);\n };\n }\n catch (e) {\n console.log('some error ' + e);\n }\n\n\n });\n }\n\n _resetSnapshotSelection() {\n if (this.lazyImage)\n this.lazyImage.resetToDefault();\n }\n\n _onMultiChangeCampaign(){\n this.m_totalStationsSelected.forEach((i_stationId)=>{\n this.rp.setStationCampaignID(i_stationId, this.contGroup.value.m_campaignsControl);\n });\n switch (this.contGroup.value.m_campaignsMultiControl) {\n case 'change campaigns, no save': {\n break;\n }\n case 'change campaigns & save': {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE, previewMode: PreviewModeEnum.NONE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n break;\n }\n case 'change campaigns, save & restart station': {\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE, previewMode: PreviewModeEnum.NONE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n this.yp.listenMainAppState()\n .skip(1)\n .take(1)\n .subscribe(i_status => {\n if (i_status == MainAppShowStateEnum.SAVED) {\n this.m_totalStationsSelected.forEach((i_stationId)=>{\n this.rp.sendCommand('rebootPlayer', i_stationId, () => {\n // this.rp.sendCommand('rebootPlayer', -1, () => {\n });\n });\n }\n })\n break;\n }\n\n }\n\n\n this.rp.reduxCommit();\n\n // bootbox.alert('next, restart selected stations to have them play your newly selected campaign');\n }\n\n _render() {\n if (!this.m_selectedBranchStation)\n return;\n\n this.contGroup.controls.m_campaignsControl.setValue(this.m_selectedCampaignId);\n this.contGroup.controls.m_enableLan.setValue(this.m_selectedBranchStation.getLanEnabled);\n if (this.m_inFocus)\n return;\n this.contGroup.controls.m_stationName.setValue(this.m_selectedBranchStation.getStationName());\n this.contGroup.controls.m_ip.setValue(this.m_selectedBranchStation.getLanServerIp());\n this.contGroup.controls.m_port.setValue(this.m_selectedBranchStation.getLanServerPort());\n }\n\n _onFocus(i_value) {\n this.m_inFocus = i_value;\n }\n\n _onStationRename() {\n this.toast.info('Station name will apply a few minutes after you save Studio changes, click [Save]');\n }\n\n _onCommand(i_command) {\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'send station event ' + i_command})}));\n switch (i_command) {\n case 'play': {\n this.rp.sendCommand('start', this.m_selectedStation.id, () => {\n });\n break;\n }\n case 'stop': {\n this.rp.sendCommand('stop', this.m_selectedStation.id, () => {\n });\n break;\n }\n case 'snap': {\n this._takeSnapshot();\n break;\n }\n case 'off': {\n this.rp.sendCommand('rebootPlayer', this.m_selectedStation.id, () => {\n });\n break;\n }\n }\n }\n\n _onLoaded() {\n console.log('img loaded');\n }\n\n _onError() {\n console.log('img error');\n }\n\n _onCompleted() {\n console.log('img completed');\n }\n\n _takeSnapshot() {\n var d = new Date().getTime();\n this.m_snapPath = '';\n this.m_loading = true;\n var path = this.rp.sendSnapshot(d, 0.2, this.m_selectedStation.id, () => {\n this.m_snapPath = path;\n this.lazyImage.urls = [path];\n });\n setTimeout(() => {\n this.loadImage(path)\n .subscribe(v => {\n // console.log(v);\n })\n }, 100)\n\n setTimeout(() => {\n this.m_loading = false;\n this.m_snapPath = path;\n // console.log('loading image from ' + this.m_snapPath);\n }, 100);\n\n }\n\n _onSendEvent() {\n this.shouldToggle != this.shouldToggle;\n this.rp.sendEvent(this.contGroup.controls.m_eventValue.value, this.m_selectedStation.id, function () {\n });\n this.yp.dispatch(({type: ACTION_LIVELOG_UPDATE, payload: new LiveLogModel({event: 'send station event ' + this.contGroup.controls.m_eventValue.value})}));\n }\n\n @timeout()\n private saveToStore() {\n // console.log(this.contGroup.status + ' ' + JSON.stringify(this.ngmslibService.cleanCharForXml(this.contGroup.value)));\n if (this.contGroup.status != 'VALID')\n return;\n if (this.contGroup.value.m_ip.match(/\\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\\.|$)){4}\\b/))\n this.rp.setStationRecordValue(this.m_selectedStation.id, 'lan_server_ip', this.contGroup.value.m_ip);\n this.rp.setStationCampaignID(this.m_selectedStation.id, this.contGroup.value.m_campaignsControl);\n this.rp.setStationRecordValue(this.m_selectedStation.id, 'lan_server_enabled', this.contGroup.value.m_enableLan == true ? 'True' : 'False');\n this.rp.setStationRecordValue(this.m_selectedStation.id, 'lan_server_port', this.contGroup.value.m_port);\n this.rp.setStationName(this.m_selectedStation.id, this.contGroup.value.m_stationName);\n this.rp.reduxCommit();\n this.cd.markForCheck();\n }\n\n destroy() {\n }\n}\n\n" }, { "path": "src/app/stations/stations.ts", "content": "import {ChangeDetectionStrategy, Component} from \"@angular/core\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {ResourcesModel} from \"../../store/imsdb.interfaces_auto\";\nimport {List, Map} from \"immutable\";\nimport {Observable} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\nimport {IUiState} from \"../../store/store.data\";\nimport {ACTION_UISTATE_UPDATE, SideProps} from \"../../store/actions/appdb.actions\";\nimport {BlockService} from \"../blocks/block-service\";\nimport {MainAppShowStateEnum} from \"../app-component\";\nimport {EFFECT_LOAD_STATIONS} from \"../../store/effects/appdb.effects\";\nimport {StationModel} from \"../../models/StationModel\";\nimport * as _ from 'lodash';\n\n@Component({\n // changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'stations',\n template: `\n {{me}}\n
      \n
      \n \n \n \n
      \n \n
      \n
        \n
        \n
        \n \n
        \n
        \n \n \n
        \n
        \n `,\n styles: [`\n\n /*:host /deep/ vg-player {*/\n /*background-color: transparent;*/\n /*margin: 30px;*/\n /*width: 30%;*/\n /*height: calc(100% - 60px);*/\n /*}*/\n\n /*:host /deep/ vg-player {*/\n /*background-color: transparent;*/\n /*margin: 30px;*/\n /*width: 30%;*/\n /*height: calc(100% - 60px);*/\n /*}*/\n\n * {\n border-radius: 0 !important;\n }\n\n vg-player {\n background-color: transparent;\n margin: 30px;\n width: 30%;\n height: calc(100% - 60px);\n }\n\n vg-controls {\n padding: 30px;\n transition: all 1s;\n }\n\n #resourcesPanel {\n padding: 10px;\n }\n\n .myFile {\n position: relative;\n overflow: hidden;\n float: left;\n clear: left;\n }\n\n .myFile input[type=\"file\"] {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n opacity: 0;\n font-size: 100px;\n filter: alpha(opacity=0);\n cursor: pointer;\n }\n `]\n})\n\nexport class Stations extends Compbaser {\n\n m_filter;\n m_stationModel: StationModel;\n m_stationModels$: Observable>;\n m_loadStationsHandle;\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService, private bs: BlockService) {\n super();\n this._loadData();\n this.m_stationModels$ = this.yp.listenStations();\n\n this.cancelOnDestroy(\n //\n this.yp.listenStationSelected()\n .subscribe((i_stationModel: StationModel) => {\n this.m_stationModel = i_stationModel;\n }, (e) => console.error(e))\n );\n\n this.cancelOnDestroy(\n //\n this.yp.listenMainAppState()\n .subscribe((i_value: MainAppShowStateEnum) => {\n switch (i_value) {\n case MainAppShowStateEnum.SAVED: {\n this._loadData();\n break;\n }\n }\n }, (e) => console.error(e))\n );\n }\n\n _loadData() {\n this.yp.ngrxStore.dispatch({type: EFFECT_LOAD_STATIONS, payload: {userData: this.rp.getUserData()}});\n if (_.isUndefined(this.m_loadStationsHandle)) {\n this.m_loadStationsHandle = setInterval(() => {\n this._loadData();\n }, 4000);\n }\n }\n\n _removeStation() {\n if (_.isUndefined(this.m_stationModel)) {\n bootbox.dialog({\n message: 'No station selected...',\n buttons: {\n danger: {\n label: 'close',\n className: \"btn-danger\",\n callback: function () {\n }\n }\n }\n });\n return false;\n }\n bootbox.confirm('Are you sure you want to uninstall the selected station?', (result) => {\n if (!result) return;\n\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: {uiSideProps: SideProps.miniDashboard}}));\n this.rp.removeStation(this.m_stationModel.id);\n // this.rp.sendCommand('rebootStation', this.m_stationModel.id, () => {});\n this.rp.sendCommand('rebootPlayer', this.m_stationModel.id, () => {});\n this.rp.sendCommand('rebootPlayer', this.m_stationModel.id, () => {});\n this.rp.sendCommand('rebootPlayer', this.m_stationModel.id, () => {});\n var uiState: IUiState = {uiSideProps: SideProps.miniDashboard, stations: {stationSelected: -1}};\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: {mainAppState: MainAppShowStateEnum.SAVE}}));\n });\n }\n\n _onSelected(i_station: StationModel) {\n const uiState: IUiState = {\n uiSideProps: SideProps.stationProps,\n stations: {stationSelected: i_station.id}\n };\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n }\n\n _onMultiSelected(i_stations: any) {\n const uiState: IUiState = {\n multiStationSelected: {\n stations: Map(i_stations)\n }\n };\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n }\n\n destroy() {\n clearInterval(this.m_loadStationsHandle);\n var uiState: IUiState = {stations: {stationSelected: -1}};\n this.yp.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n }\n}\n\n" }, { "path": "src/app/studiopro/index.ts", "content": "import {NgModule} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {RouterModule} from \"@angular/router\";\nimport {StudioProNavigation} from \"./studiopro-navigation\";\nimport {DropdownModule as DropdownModulePrime} from \"primeng/primeng\";\nimport {SharedModule} from \"../../modules/shared.module\";\n\nexport const LAZY_ROUTES = [\n {path: ':folder', component: StudioProNavigation},\n {path: ':folder/:id', component: StudioProNavigation},\n {path: '**', component: StudioProNavigation}\n];\n\n@NgModule({\n imports: [DropdownModulePrime, SharedModule, CommonModule, RouterModule.forChild(LAZY_ROUTES)],\n declarations: [StudioProNavigation]\n})\nexport class StudioProLazyModule {\n}" }, { "path": "src/app/studiopro/pro-upgrade.ts", "content": "import {Component} from \"@angular/core\";\nimport {FormBuilder, FormGroup, Validators} from \"@angular/forms\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {NGValidators} from \"ng-validators\";\nimport {equalValueValidator} from \"../../Lib\";\n\n@Component({\n selector: 'pro-upgrade',\n templateUrl: './pro-upgrades.html',\n styles: [`\n input.ng-invalid {\n border-right: 10px solid red;\n }\n\n .material-switch {\n position: relative;\n padding-top: 10px;\n }\n\n .input-group {\n padding-top: 10px;\n }\n\n i {\n width: 20px;\n }\n `]\n})\nexport class ProUpgrade extends Compbaser {\n\n formInputs = {};\n m_contGroup: FormGroup;\n\n constructor(private fb: FormBuilder, private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.m_contGroup = this.fb.group({\n 'userName': ['', [Validators.required]],\n 'creditCard': ['', [NGValidators.isCreditCard()]],\n 'month': ['', [NGValidators.isNumeric()]],\n 'year': ['', [NGValidators.isNumeric()]],\n 'cv': ['', [NGValidators.isNumeric()]],\n 'password': ['', [Validators.required, Validators.minLength(3)]],\n 'confirmPassword': ['', [Validators.required, Validators.minLength(3)]]\n },\n {validator: equalValueValidator('password', 'confirmPassword')}\n );\n }\n\n private showMessage(i_title: string, i_msg: string, i_status: boolean): void {\n bootbox.hideAll();\n bootbox.dialog({\n closeButton: true,\n title: i_title,\n message: `


        \n
        \n ${i_status == true ? '' : ''}\n

        ${i_msg}

        \n


        \n
        `\n\n });\n }\n\n\n\n _detectCardType(number) {\n var re = {\n electron: /^(4026|417500|4405|4508|4844|4913|4917)\\d+$/,\n maestro: /^(5018|5020|5038|5612|5893|6304|6759|6761|6762|6763|0604|6390)\\d+$/,\n dankort: /^(5019)\\d+$/,\n interpayment: /^(636)\\d+$/,\n unionpay: /^(62|88)\\d+$/,\n visa: /^4[0-9]{12}(?:[0-9]{3})?$/,\n mastercard: /^5[1-5][0-9]{14}$/,\n amex: /^3[47][0-9]{13}$/,\n diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,\n discover: /^6(?:011|5[0-9]{2})[0-9]{12}$/,\n jcb: /^(?:2131|1800|35\\d{3})\\d{11}$/\n };\n if (re.electron.test(number)) {\n return 'ELECTRON';\n } else if (re.maestro.test(number)) {\n return 'MAESTRO';\n } else if (re.dankort.test(number)) {\n return 'DANKORT';\n } else if (re.interpayment.test(number)) {\n return 'INTERPAYMENT';\n } else if (re.unionpay.test(number)) {\n return 'UNIONPAY';\n } else if (re.visa.test(number)) {\n return 'VISA';\n } else if (re.mastercard.test(number)) {\n return 'MASTERCARD';\n } else if (re.amex.test(number)) {\n return 'AMEX';\n } else if (re.diners.test(number)) {\n return 'DINERS';\n } else if (re.discover.test(number)) {\n return 'DISCOVER';\n } else if (re.jcb.test(number)) {\n return 'JCB';\n } else {\n return undefined;\n }\n }\n\n _onStartSubscription() {\n if (this.m_contGroup.status != 'VALID')\n return bootbox.alert('Please fix the fields marked in red');\n\n const cardType = this._detectCardType(this.m_contGroup.controls.creditCard.value);\n const userName = this.rp.getUserData().userName;\n const userPass = this.rp.getUserData().userPass;\n const year = this.m_contGroup.controls.year.value.length == 2 ? '20' + this.m_contGroup.controls.year.value : this.m_contGroup.controls.year.value;\n const month = this.m_contGroup.controls.month.value.replace(/^0+/, '');\n var card;\n switch (cardType) {\n case 'VISA': {\n card = '0';\n break;\n }\n case 'MASTERCARD': {\n card = '1';\n break;\n }\n case 'DISCOVER': {\n card = '2';\n break;\n }\n case 'AMEX': {\n card = '3';\n break;\n }\n default: {\n card = '-1';\n }\n }\n\n var url = `https://galaxy.signage.me/WebService/UpgradeToResellerAccount.ashx?userName=${userName}&userPassword=${userPass}&resellerUserName=${this.m_contGroup.controls.userName.value}&resellerPassword=${this.m_contGroup.controls.password.value}&cardType=${card}&cardNumber=${this.m_contGroup.controls.creditCard.value}&expirationMonth=${month}&expirationYear=${year}&securityCode=${this.m_contGroup.controls.cv.value}&callback=?`;\n $.getJSON(url, (e) => {\n var msg = '';\n console.log('Credit card status ' + e.result);\n switch (e.result) {\n case -4: {\n msg = 'This user is already under a subscription account';\n this.showMessage(e.status, msg, false);\n return;\n }\n case -5: {\n msg = 'Enterprise use name is taken, please pick a different name';\n this.showMessage(e.status, msg, false);\n return;\n }\n case -3: {\n }\n case -2: {\n }\n case -1: {\n msg = 'Problem with credit card, please use a different card';\n this.showMessage(e.status, msg, false);\n return;\n }\n default: {\n if (e.result > 100) {\n bootbox.hideAll();\n $('.modal').modal('hide');\n //var snippet = `Congratulations, be sure to checkout the video tutorial on how to install your newly available components from the mediaSTORE`;\n var snippet = `Congratulations, be sure to go to the mediaSTORE and install your newly available components...`;\n this.showMessage('success', snippet, true);\n return;\n } else {\n msg = 'Problem with credit card, please use a different card';\n this.showMessage(e.status, msg, false);\n }\n }\n }\n }).done((e) => {\n }).fail((e) => {\n this.showMessage(e.status, 'Could not complete, something went wrong on server side', false);\n }).always(() => {\n });\n }\n\n\n destroy() {\n }\n}" }, { "path": "src/app/studiopro/pro-upgrades.html", "content": "
        \n
        \n
        \n
        \n target properties\n \n \n {{me}}\n
        \n \n Learn more about Enterprise\n \n
        \n
        \n

        \n \n

        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n \n \n
        \n
        \n
        \n \n
        \n \n \n
        \n
        \n
        \n \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n

        \n
        \n
        \n \n
        \n
        \n
        \n
        \n" }, { "path": "src/app/studiopro/studiopro-navigation.ts", "content": "import {ChangeDetectionStrategy, Component, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {animate, state, style, transition, trigger} from \"@angular/animations\";\nimport {ModalComponent} from \"ng2-bs3-modal/ng2-bs3-modal\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Observable} from \"rxjs/Observable\";\nimport {UserModel} from \"../../models/UserModel\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n\n .dottedHR {\n height: 6px;\n width: 1500px;\n opacity: 0.6;\n position: relative;\n border-top: 12px dotted #c1c1c1;\n padding-bottom: 7px;\n top: 20px;\n }\n\n .activated {\n background-color: #428bca;\n color: white;\n }\n\n .headerPropIcon {\n position: fixed !important;\n top: 0px !important;\n color: #f5f5f5;\n right: 50px !important;\n z-index: 1500;\n background-color: #151515;\n float: right;\n border: black;\n }\n\n .whiteFont {\n color: white;\n }\n\n .pricingContainer {\n padding-top: 40px;\n }\n\n .price {\n font-size: 25px;\n float: left;\n }\n\n .faHeader {\n font-size: 1.9em !important;\n color: #bababa;\n }\n\n .faHeader:hover {\n color: white;\n }\n\n .pricing_header1 {\n background: none repeat scroll 0% 0% rgb(0, 181, 255);\n border-radius: 5px 5px 0px 0px;\n }\n\n .pricing_header2 {\n background: none repeat scroll 0% 0% rgb(0, 121, 171);\n border-radius: 5px 5px 0px 0px;\n }\n\n .pricing_header3 {\n background: none repeat scroll 0% 0% rgb(0, 81, 115);\n border-radius: 5px 5px 0px 0px;\n }\n\n .pricing_headerh2 {\n text-align: center;\n line-height: 25px;\n padding: 15px 0px;\n margin: 0px;\n font-size: 1.5em;\n font-weight: 400;\n color: white;\n }\n\n `],\n host: {\n '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n animations: [\n trigger('routeAnimation', [\n state('*', style({opacity: 1})),\n transition('void => *', [\n style({opacity: 0}),\n animate(333)\n ]),\n transition('* => void', animate(333, style({opacity: 0})))\n ])\n ],\n template: `\n
        \n

        Choose the package that's right for you

        \n \n
        \n
        \n
        \n\n
        \n
        \n
        \n

        \n \n StudioLite\n

        \n\n
        \n
        \n
          \n
        • \n \n 100% FREE\n
          • \n
        • \n \n simple to use interface\n
          • \n
        • \n Campaign manager\n
          • \n
        • \n Timeline management\n
          • \n
        • \n Screen templates\n
          • \n
        • \n Screen editor\n
          • \n
        • \n Station Manager\n
          • \n
        • \n Support 10 components\n
          • \n
        • \n Scene editor (coming)\n
          • \n
        • \n Files: videos/images/flash\n
          • \n
        • \n Run on Tablets and phones\n
          • \n
        • \n Open source (GitHub)\n
          • \n
        \n
        \n

        $0.00

        \n \n
        \n
        \n
        \n
        \n

        \n \n StudioPro (FREE)\n

        \n\n
        \n
        \n
          \n
        • \n 100% FREE\n
          • \n
        • \n Higher learning curve\n
          • \n
        • \n Professional editor\n
          • \n
        • \n Campaign manager\n
          • \n
        • \n Timeline management\n
          • \n
        • \n Channel management\n
          • \n
        • \n Scheduler / sequencer\n
          • \n
        • \n Rich scene editor\n
          • \n
        • \n Support more components\n
          • \n
        • \n Advance Station Manager\n
          • \n
        • \n Runs on Desktop and Web\n
          • \n
        • \n and much more...\n
          • \n
        \n
        \n

        $0.00

        \n Convert\n
        \n
        \n
        \n
        \n

        \n \n StudioEnterprise

        \n\n
        \n
        \n
          \n
        • \n $99 a month (flat)\n
          • \n
        • \n Everything from Lite & Pro\n
          • \n
        • \n White label / branding\n
          • \n
        • \n Support all components\n
          • \n
        • \n Transitions / Effects\n
          • \n
        • \n Multi user management\n
          • \n
        • \n Advertising manager\n
          • \n
        • \n Access control\n
          • \n
        • \n Unlimited cloud storage\n
          • \n
        • \n Phone support\n
          • \n
        • \n Hardware discounts\n
          • \n
        • \n and much more...\n
          • \n
        \n
        \n

        $99/month\n

        \n \n
        \n
        \n
        \n
        \n
        \n \n \n

        Upgrade to Enterprise - $99.00 per month

        \n         \n \n \n \n \n         \n `\n})\nexport class StudioProNavigation extends Compbaser {\n\n @ViewChild(ModalComponent)\n modal: ModalComponent;\n\n subAccount = false;\n isBrandingDisabled: Observable\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n this.isBrandingDisabled = this.yp.isBrandingDisabled()\n }\n\n _initCustomer() {\n if (this.rp.getUserData().resellerID == 1 || this.rp.getUserData().whiteLabel == false) {\n this.subAccount = false;\n } else {\n this.subAccount = true;\n }\n }\n\n _onConvert(event) {\n window.open('http://galaxy.mediasignage.com/WebService/signagestudio.aspx?mode=login&v=4&eri=f7bee07a7e79c8efdb961c4d30d20e10c66442110de03d6141', '_blank');\n }\n\n _onSubscribe(event) {\n this.modal.open();\n }\n\n ngOnInit() {\n this.preventRedirect(true);\n this._initCustomer();\n }\n\n destroy() {\n }\n}" }, { "path": "src/app-routes.ts", "content": "import {PreloadAllModules, RouterModule, Routes} from \"@angular/router\";\nimport {LoginPanel} from \"./comps/entry/LoginPanel\";\nimport {Logout} from \"./comps/logout/Logout\";\nimport {AuthService} from \"./services/AuthService\";\nimport {AutoLogin} from \"./comps/entry/AutoLogin\";\nimport {Dashboard} from \"./app/dashboard/dashboard-navigation\";\nimport {Appwrap} from \"./app/appwrap\";\nimport {FasterqTerminal} from \"./app/fasterq/fasterq-terminal\";\n\nconst routes: Routes = [\n {path: 'index.html', data: {title: 'Login'}, component: AutoLogin},\n {path: 'AutoLogin', data: {title: 'Login'}, component: AutoLogin},\n {path: 'FasterqTerminal/:id', data: {title: 'FasterqTerminal'}, component: FasterqTerminal},\n {path: 'UserLogin', data: {title: 'Login'}, component: LoginPanel},\n {path: 'UserLogin/:twoFactor', data: {title: 'Login'}, component: LoginPanel},\n {path: 'UserLogin/:twoFactor/:user/:pass', data: {title: 'Login'}, component: LoginPanel},\n {path: 'Logout', component: Logout},\n {path: '', pathMatch: 'full', redirectTo: '/App1/Dashboard'},\n {path: 'studioweb', pathMatch: 'full', redirectTo: '/App1/Dashboard'}, // IE/FF compatibility\n {path: 'studioweb/index.html', pathMatch: 'full', redirectTo: '/App1/Dashboard'}, // IE 11\n {\n path: 'App1', component: Appwrap,\n children: [\n {path: '', component: Appwrap, canActivate: [AuthService]},\n {path: 'Dashboard', component: Dashboard, data: {title: 'Dashboard'}, canActivate: [AuthService]},\n {path: 'Campaigns', loadChildren: '../app/campaigns/index#CampaignsLazyModule', data: {title: 'Campaigns'}, canActivate: [AuthService]},\n {path: 'Fasterq', loadChildren: '../app/fasterq/index#FasterqLazyModule', data: {title: 'Fasterq'}, canActivate: [AuthService]},\n {path: 'Scenes', loadChildren: '../app/scenes/index#ScenesLazyModule', data: {title: 'Scenes'}, canActivate: [AuthService]},\n {path: 'Resources', loadChildren: '../app/resources/index#ResourcesLazyModule', data: {title: 'Resources'}, canActivate: [AuthService]},\n {path: 'Help', loadChildren: '../app/help/index#HelpLazyModule', data: {title: 'Help'}, canActivate: [AuthService]},\n {path: 'Install', loadChildren: '../app/install/index#InstallLazyModule', data: {title: 'Install'}, canActivate: [AuthService]},\n {path: 'Settings', loadChildren: '../app/settings/index#SettingsLazyModule', data: {title: 'Settings'}, canActivate: [AuthService]},\n {path: 'Stations', loadChildren: '../app/stations/index#StationsLazyModule', data: {title: 'Stations'}, canActivate: [AuthService]},\n {path: 'Studiopro', loadChildren: '../app/studiopro/index#StudioProLazyModule', data: {title: 'Studiopro'}, canActivate: [AuthService]},\n {path: 'Logout', component: Logout, data: {title: 'Logout'}, canActivate: [AuthService]},\n {path: '**', redirectTo: 'Dashboard'}\n ]\n }\n];\n\nexport const routing = RouterModule.forRoot(routes, {enableTracing: false, preloadingStrategy: PreloadAllModules});\n\n\n" }, { "path": "src/assets/geojson.json", "content": "{\n \"type\": \"FeatureCollection\",\n \"crs\": {\n \"type\": \"name\",\n \"properties\": {\n \"name\": \"urn:ogc:def:crs:EPSG::31493\"\n }\n },\n \"features\": [\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"2\",\n \"adm1_code\": \"DEU-1579\",\n \"OBJECTID_1\": \"942\",\n \"diss_me\": \"1579\",\n \"adm1_cod_1\": \"DEU-1579\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"6\",\n \"name\": \"Schleswig-Holstein\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.SH\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"3\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"SH\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"18\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM10\",\n \"fips_alt\": null,\n \"woe_id\": \"2345490\",\n \"woe_label\": \"Schleswig-Holstein, DE, Germany\",\n \"woe_name\": \"Schleswig-Holstein\",\n \"latitude\": \"54.1315\",\n \"longitude\": \"9.84605\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2838632\",\n \"gn_name\": \"Land Schleswig-Holstein\",\n \"gns_id\": \"-1858348\",\n \"gns_name\": \"Schleswig-Holstein\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.10\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM10\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"MultiPolygon\",\n \"coordinates\": [\n [\n [\n [\n 3457361.6953271437,\n 6064537.3175473278\n ],\n [\n 3473831.1032281509,\n 6066454.707440001\n ],\n [\n 3458254.2756455722,\n 6054378.8800201574\n ],\n [\n 3454292.4301971514,\n 6059770.7031057561\n ],\n [\n 3454356.6117983218,\n 6084731.7034898801\n ],\n [\n 3457361.6953271437,\n 6064537.3175473278\n ]\n ]\n ],\n [\n [\n [\n 3588249.9672536696,\n 5922981.0870051431\n ],\n [\n 3578686.4275546414,\n 5933125.8551333752\n ],\n [\n 3577703.2560399352,\n 5938504.9128987873\n ],\n [\n 3580874.49823714,\n 5945222.0506500695\n ],\n [\n 3576943.630466254,\n 5950819.015340128\n ],\n [\n 3578862.6937927571,\n 5955081.5497373492\n ],\n [\n 3572137.6137213707,\n 5954711.580675493\n ],\n [\n 3570371.6708244649,\n 5950301.8162747147\n ],\n [\n 3554853.9405998117,\n 5940794.9144034721\n ],\n [\n 3550830.3006076724,\n 5944304.1125011407\n ],\n [\n 3549069.0712087429,\n 5937985.4088263968\n ],\n [\n 3536429.5426071933,\n 5944772.404340459\n ],\n [\n 3526016.6806122339,\n 5966561.8734104037\n ],\n [\n 3519393.374612669,\n 5968304.8412422938\n ],\n [\n 3512239.2302019894,\n 5970199.5365770916\n ],\n [\n 3500514.2646667375,\n 5973331.8574014464\n ],\n [\n 3489082.291314546,\n 5989366.3785155555\n ],\n [\n 3499819.4056466105,\n 5988660.6677569058\n ],\n [\n 3498517.1762036402,\n 6001512.9417701392\n ],\n [\n 3490893.0391698242,\n 5999239.2651538216\n ],\n [\n 3489548.1277326951,\n 6013751.9056054596\n ],\n [\n 3497601.9580049324,\n 6020646.9336849805\n ],\n [\n 3477324.3183245538,\n 6015942.557420373\n ],\n [\n 3477174.6819570824,\n 6030585.0076404512\n ],\n [\n 3490956.4413303267,\n 6031361.2477700273\n ],\n [\n 3489931.1912721554,\n 6043152.005285589\n ],\n [\n 3499099.8590448922,\n 6044205.2552816924\n ],\n [\n 3479952.2035088921,\n 6067179.7789988136\n ],\n [\n 3478240.9941294421,\n 6085109.2448926223\n ],\n [\n 3488727.8879079837,\n 6086138.8696871242\n ],\n [\n 3529021.0772972321,\n 6075584.8843934499\n ],\n [\n 3537230.3970351499,\n 6081868.5508470545\n ],\n [\n 3553025.9213487152,\n 6069833.4444824299\n ],\n [\n 3558853.4378033783,\n 6073742.2482397221\n ],\n [\n 3566668.0124271861,\n 6060682.9319272507\n ],\n [\n 3566001.9292511554,\n 6046527.0230161548\n ],\n [\n 3557272.6619548667,\n 6037087.2706446396\n ],\n [\n 3572862.5690058409,\n 6041055.569442112\n ],\n [\n 3615633.3602376087,\n 6021826.8104329733\n ],\n [\n 3636653.86664266,\n 6031065.0210786732\n ],\n [\n 3630020.1589864371,\n 6039286.8314314149\n ],\n [\n 3637283.7395728445,\n 6047018.1667916644\n ],\n [\n 3650216.1204284448,\n 6033819.9766713399\n ],\n [\n 3635081.4884479907,\n 6025376.2926454805\n ],\n [\n 3634893.8065267834,\n 6007738.1217093375\n ],\n [\n 3614788.5216621999,\n 5991603.5560405627\n ],\n [\n 3625082.7900508232,\n 5982662.9355227295\n ],\n [\n 3625050.7337689409,\n 5979329.7269153669\n ],\n [\n 3628805.8970855772,\n 5977389.3176590335\n ],\n [\n 3626024.1404369744,\n 5976110.5464679133\n ],\n [\n 3623841.3356328616,\n 5977945.1403433578\n ],\n [\n 3615980.348949628,\n 5971721.3096266175\n ],\n [\n 3615255.5018173298,\n 5969260.8856087131\n ],\n [\n 3616689.3777262997,\n 5963752.7563475929\n ],\n [\n 3616154.1812646016,\n 5958546.736402004\n ],\n [\n 3619138.4221999128,\n 5958008.8936667377\n ],\n [\n 3623189.4327053195,\n 5953513.3434927408\n ],\n [\n 3628029.4118883419,\n 5951954.0380383944\n ],\n [\n 3629467.0720780403,\n 5938790.4934651023\n ],\n [\n 3621108.1006804346,\n 5938712.2612650106\n ],\n [\n 3620734.103808559,\n 5932842.580161592\n ],\n [\n 3608645.9904428972,\n 5924805.5896682888\n ],\n [\n 3606560.2346579311,\n 5916586.2707823943\n ],\n [\n 3601710.25338207,\n 5916543.2227652604\n ],\n [\n 3588249.9672536696,\n 5922981.0870051431\n ]\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"6\",\n \"adm1_code\": \"DEU-1599\",\n \"OBJECTID_1\": \"2334\",\n \"diss_me\": \"1599\",\n \"adm1_cod_1\": \"DEU-1599\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Berlin\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.BE\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"7\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"BE\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"9\",\n \"labelrank\": \"9\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"6\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM16\",\n \"fips_alt\": null,\n \"woe_id\": \"2345496\",\n \"woe_label\": \"Berlin, DE, Germany\",\n \"woe_name\": \"Berlin\",\n \"latitude\": \"52.5131\",\n \"longitude\": \"13.4213\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2950157\",\n \"gn_name\": \"Land Berlin\",\n \"gns_id\": \"-1746445\",\n \"gns_name\": \"Berlin\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.16\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM16\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3804566.4152815924,\n 5843865.692704617\n ],\n [\n 3804934.6433777702,\n 5840168.5899853837\n ],\n [\n 3809716.679845443,\n 5835249.9865113907\n ],\n [\n 3815207.714945185,\n 5832907.5054032393\n ],\n [\n 3814140.9994099671,\n 5827006.7575231045\n ],\n [\n 3816712.9457131149,\n 5827478.2731477637\n ],\n [\n 3822865.3678980898,\n 5823472.4171997104\n ],\n [\n 3820320.890532007,\n 5814819.0171839539\n ],\n [\n 3816409.7180140801,\n 5810966.0266671684\n ],\n [\n 3815681.7293974063,\n 5814709.1505647963\n ],\n [\n 3803208.3688719897,\n 5818473.9252682505\n ],\n [\n 3801245.3895061575,\n 5814373.9040043866\n ],\n [\n 3792079.8344209795,\n 5817614.5021004295\n ],\n [\n 3782830.3462029067,\n 5815037.8793154648\n ],\n [\n 3778418.5104975295,\n 5817224.1775639663\n ],\n [\n 3780958.9744146601,\n 5829146.268900374\n ],\n [\n 3781589.121700428,\n 5837662.7537919097\n ],\n [\n 3785070.6277251416,\n 5836354.5125904409\n ],\n [\n 3785707.312560183,\n 5840767.7494266415\n ],\n [\n 3791058.6585779274,\n 5844454.8433719436\n ],\n [\n 3796466.9763708967,\n 5841442.4283941165\n ],\n [\n 3802213.9156131558,\n 5845930.8582165847\n ],\n [\n 3804566.4152815924,\n 5843865.692704617\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"10\",\n \"adm1_code\": \"DEU-3488\",\n \"OBJECTID_1\": \"3312\",\n \"diss_me\": \"3488\",\n \"adm1_cod_1\": \"DEU-3488\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"5\",\n \"name\": \"Mecklenburg-Vorpommern\",\n \"name_alt\": \"Mecklenburg-West Pomerania\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.MV\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"30001\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"MV\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"22\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM12\",\n \"fips_alt\": null,\n \"woe_id\": \"2345492\",\n \"woe_label\": \"Mecklenburg-Vorpommern, DE, Germany\",\n \"woe_name\": \"Mecklenburg-Vorpommern\",\n \"latitude\": \"53.7528\",\n \"longitude\": \"12.5647\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2872567\",\n \"gn_name\": \"Land Mecklenburg-Vorpommern\",\n \"gns_id\": \"-1824278\",\n \"gns_name\": \"Mecklenburg-Vorpommern\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.12\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM12\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"MultiPolygon\",\n \"coordinates\": [\n [\n [\n [\n 3765978.7018767856,\n 6054368.3792266808\n ],\n [\n 3777435.6134433611,\n 6053854.901303824\n ],\n [\n 3782368.591728467,\n 6059205.16406429\n ],\n [\n 3786974.612363453,\n 6049178.2954727663\n ],\n [\n 3791952.7030979348,\n 6048995.307912183\n ],\n [\n 3790982.149199931,\n 6056628.7616059249\n ],\n [\n 3782166.0009250576,\n 6062203.9922618233\n ],\n [\n 3776325.3208203837,\n 6056130.6553788381\n ],\n [\n 3776858.0248962715,\n 6065718.7575505488\n ],\n [\n 3774350.7781503876,\n 6067627.8759364616\n ],\n [\n 3783033.4912099959,\n 6070747.65958957\n ],\n [\n 3783858.2782364748,\n 6061451.222502646\n ],\n [\n 3788686.5434686914,\n 6058680.8391875532\n ],\n [\n 3799870.6040519727,\n 6060388.0503517305\n ],\n [\n 3802580.9076147829,\n 6055519.6901947297\n ],\n [\n 3796496.4780506194,\n 6047458.1686205128\n ],\n [\n 3799128.0083435532,\n 6041146.6738467803\n ],\n [\n 3809821.4347207304,\n 6034166.5356042059\n ],\n [\n 3792493.4405632792,\n 6033025.5237082997\n ],\n [\n 3784186.8438639143,\n 6023359.0631650677\n ],\n [\n 3778032.6959456238,\n 6022255.4613743341\n ],\n [\n 3767578.4113822468,\n 6030737.7075944003\n ],\n [\n 3769494.9703409448,\n 6035222.8034836464\n ],\n [\n 3776065.5893489686,\n 6036691.2679821067\n ],\n [\n 3769692.2806164096,\n 6040765.0543835247\n ],\n [\n 3776060.2697977475,\n 6045791.7914314782\n ],\n [\n 3765978.7018767856,\n 6054368.3792266808\n ]\n ]\n ],\n [\n [\n [\n 3858958.4675184065,\n 5924746.6905517764\n ],\n [\n 3850096.8967003031,\n 5915716.2145906379\n ],\n [\n 3840283.6437742342,\n 5916498.3542627199\n ],\n [\n 3848470.2881636913,\n 5929329.4855594682\n ],\n [\n 3848307.6588879293,\n 5934358.7847815678\n ],\n [\n 3826929.8373607565,\n 5932832.0742536131\n ],\n [\n 3822905.9499626607,\n 5941589.9501121677\n ],\n [\n 3812528.0683271405,\n 5937242.9811624223\n ],\n [\n 3801803.8451427119,\n 5927759.7186010573\n ],\n [\n 3793795.8883584146,\n 5913641.643195576\n ],\n [\n 3777112.0423970157,\n 5910922.5465983907\n ],\n [\n 3767480.0978048071,\n 5900151.2545123501\n ],\n [\n 3763845.3670365461,\n 5903055.9980064519\n ],\n [\n 3728791.1339836149,\n 5909381.6571826441\n ],\n [\n 3712076.1365221734,\n 5919807.300273018\n ],\n [\n 3703941.6063928884,\n 5918019.7483437611\n ],\n [\n 3700755.786590965,\n 5911583.242706717\n ],\n [\n 3683284.378220486,\n 5901519.8736129059\n ],\n [\n 3680200.6158619821,\n 5905056.4653345328\n ],\n [\n 3669396.6476244526,\n 5899831.1085491451\n ],\n [\n 3670935.6606098032,\n 5893318.19994\n ],\n [\n 3660311.8800712302,\n 5888738.7558573624\n ],\n [\n 3652231.3320433423,\n 5889511.3574547973\n ],\n [\n 3643302.4959958429,\n 5895374.819350563\n ],\n [\n 3639785.0696396269,\n 5892100.1719632307\n ],\n [\n 3606560.2346579311,\n 5916586.2707823943\n ],\n [\n 3608645.9904428972,\n 5924805.5896682888\n ],\n [\n 3620734.103808559,\n 5932842.580161592\n ],\n [\n 3621108.1006804346,\n 5938712.2612650106\n ],\n [\n 3629467.0720780403,\n 5938790.4934651023\n ],\n [\n 3628029.4118883419,\n 5951954.0380383944\n ],\n [\n 3623189.4327053195,\n 5953513.3434927408\n ],\n [\n 3619138.4221999128,\n 5958008.8936667377\n ],\n [\n 3616154.1812646016,\n 5958546.736402004\n ],\n [\n 3616689.3777262997,\n 5963752.7563475929\n ],\n [\n 3615255.5018173298,\n 5969260.8856087131\n ],\n [\n 3615980.348949628,\n 5971721.3096266175\n ],\n [\n 3623841.3356328616,\n 5977945.1403433578\n ],\n [\n 3626024.1404369744,\n 5976110.5464679133\n ],\n [\n 3628805.8970855772,\n 5977389.3176590335\n ],\n [\n 3625050.7337689409,\n 5979329.7269153669\n ],\n [\n 3625082.7900508232,\n 5982662.9355227295\n ],\n [\n 3642541.5708868173,\n 5989491.9165221117\n ],\n [\n 3647245.3665982271,\n 5981531.2007794483\n ],\n [\n 3653174.0782078085,\n 5983522.0033757631\n ],\n [\n 3661492.4592031753,\n 5977652.8750231266\n ],\n [\n 3655820.8028928475,\n 5985889.7743025105\n ],\n [\n 3663350.6954817097,\n 5988433.0763060879\n ],\n [\n 3678217.7285471754,\n 6006380.5903663486\n ],\n [\n 3702468.7811940378,\n 6009068.5689904485\n ],\n [\n 3707700.6256526238,\n 6017070.9558728579\n ],\n [\n 3717497.3602633895,\n 6024278.7813600069\n ],\n [\n 3726955.9006420602,\n 6043652.8382368414\n ],\n [\n 3732879.1080247746,\n 6041514.9281786047\n ],\n [\n 3751573.5256050769,\n 6042181.2297516\n ],\n [\n 3751194.3818650926,\n 6038592.5262381751\n ],\n [\n 3739667.4854723434,\n 6039851.6737545151\n ],\n [\n 3729144.6259276099,\n 6032464.1750187948\n ],\n [\n 3724343.3351603751,\n 6034435.6926388405\n ],\n [\n 3718792.9118886008,\n 6025039.0342627419\n ],\n [\n 3722354.2783105765,\n 6018654.7492071465\n ],\n [\n 3726227.3404115206,\n 6027813.5854513822\n ],\n [\n 3738785.27984973,\n 6035167.4210286662\n ],\n [\n 3751847.0466833659,\n 6032895.4936694633\n ],\n [\n 3761685.9547273475,\n 6041061.5307539245\n ],\n [\n 3767918.6873595146,\n 6024278.3875305923\n ],\n [\n 3779544.7257449995,\n 6019867.6876431284\n ],\n [\n 3791982.7664662367,\n 6005478.7560929675\n ],\n [\n 3792719.4913930758,\n 6008509.8053144859\n ],\n [\n 3806813.9026390165,\n 6012547.7583060171\n ],\n [\n 3813624.1933684391,\n 6008114.9790483778\n ],\n [\n 3814273.5260422458,\n 6015341.28071272\n ],\n [\n 3826245.4298891709,\n 6004732.7182455854\n ],\n [\n 3841931.3593487581,\n 5991047.874779541\n ],\n [\n 3841857.4827590617,\n 5984285.0268656248\n ],\n [\n 3820735.1401745877,\n 5978971.9858000716\n ],\n [\n 3823658.5330290105,\n 6004032.5048946002\n ],\n [\n 3812743.7630230263,\n 5998386.4246438835\n ],\n [\n 3813388.7445945316,\n 6005505.544981841\n ],\n [\n 3810809.0447827573,\n 5999782.8875678834\n ],\n [\n 3821994.1922710077,\n 5990116.933645878\n ],\n [\n 3816749.3601884744,\n 5982489.2711326405\n ],\n [\n 3828446.727039618,\n 5971682.0152686974\n ],\n [\n 3836719.1779422434,\n 5968847.9592408147\n ],\n [\n 3844529.3000683878,\n 5971131.5817635488\n ],\n [\n 3851718.7367773792,\n 5943706.1401673108\n ],\n [\n 3858958.4675184065,\n 5924746.6905517764\n ]\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"14\",\n \"adm1_code\": \"DEU-1575\",\n \"OBJECTID_1\": \"1518\",\n \"diss_me\": \"1575\",\n \"adm1_cod_1\": \"DEU-1575\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Bremen\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.HB\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"5\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"HB\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"9\",\n \"labelrank\": \"9\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"6\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM03\",\n \"fips_alt\": null,\n \"woe_id\": \"2345483\",\n \"woe_label\": \"Bremen, DE, Germany\",\n \"woe_name\": \"Bremen\",\n \"latitude\": \"53.1211\",\n \"longitude\": \"8.742990000000001\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2944387\",\n \"gn_name\": \"Bremen\",\n \"gns_id\": \"-1752235\",\n \"gns_name\": \"Bremen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.03\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM03\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"MultiPolygon\",\n \"coordinates\": [\n [\n [\n [\n 3470648.2738475171,\n 5897758.2648433764\n ],\n [\n 3482994.3597778352,\n 5895366.5686806049\n ],\n [\n 3494135.47721026,\n 5889523.4182940461\n ],\n [\n 3498339.9930427396,\n 5889002.5856371522\n ],\n [\n 3498170.5207677865,\n 5879865.4094565529\n ],\n [\n 3494265.4796796911,\n 5876757.5917747803\n ],\n [\n 3491011.2500537927,\n 5879309.938417878\n ],\n [\n 3480045.6539797694,\n 5879745.4698925437\n ],\n [\n 3480079.7036048737,\n 5882942.5270079691\n ],\n [\n 3473997.6676363903,\n 5894121.7778715324\n ],\n [\n 3467459.3721810151,\n 5896352.760481637\n ],\n [\n 3470648.2738475171,\n 5897758.2648433764\n ]\n ]\n ],\n [\n [\n [\n 3470633.9099116446,\n 5931964.1095968718\n ],\n [\n 3471219.9106471892,\n 5934938.2581426231\n ],\n [\n 3467778.8065959434,\n 5942795.0136931287\n ],\n [\n 3475199.3643792034,\n 5941403.5468862616\n ],\n [\n 3476062.7607371015,\n 5931567.9643862806\n ],\n [\n 3473640.484591655,\n 5928668.0521080317\n ],\n [\n 3470633.9099116446,\n 5931964.1095968718\n ]\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"1\",\n \"adm1_code\": \"DEU-1578\",\n \"OBJECTID_1\": \"1520\",\n \"diss_me\": \"1578\",\n \"adm1_cod_1\": \"DEU-1578\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Hamburg\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.HH\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"21\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"HH\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"9\",\n \"labelrank\": \"9\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"7\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM04\",\n \"fips_alt\": null,\n \"woe_id\": \"2345484\",\n \"woe_label\": \"Hamburg, DE, Germany\",\n \"woe_name\": \"Hamburg\",\n \"latitude\": \"53.559\",\n \"longitude\": \"10.0344\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2911297\",\n \"gn_name\": \"Freie und Hansestadt Hamburg\",\n \"gns_id\": \"-1785435\",\n \"gns_name\": \"Hamburg\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.04\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM04\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3550632.9068574295,\n 5935231.2751757316\n ],\n [\n 3554307.569858544,\n 5936267.8784428686\n ],\n [\n 3549069.0712087429,\n 5937985.4088263968\n ],\n [\n 3550830.3006076724,\n 5944304.1125011407\n ],\n [\n 3554853.9405998117,\n 5940794.9144034721\n ],\n [\n 3570371.6708244649,\n 5950301.8162747147\n ],\n [\n 3572137.6137213707,\n 5954711.580675493\n ],\n [\n 3578862.6937927571,\n 5955081.5497373492\n ],\n [\n 3576943.630466254,\n 5950819.015340128\n ],\n [\n 3580874.49823714,\n 5945222.0506500695\n ],\n [\n 3577703.2560399352,\n 5938504.9128987873\n ],\n [\n 3578686.4275546414,\n 5933125.8551333752\n ],\n [\n 3588249.9672536696,\n 5922981.0870051431\n ],\n [\n 3578903.5037427521,\n 5919670.0220713178\n ],\n [\n 3571948.8982978156,\n 5924735.9639584571\n ],\n [\n 3565509.5510616428,\n 5920653.881467809\n ],\n [\n 3556965.7078730096,\n 5922524.892838276\n ],\n [\n 3550632.9068574295,\n 5935231.2751757316\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"3\",\n \"adm1_code\": \"DEU-1580\",\n \"OBJECTID_1\": \"2331\",\n \"diss_me\": \"1580\",\n \"adm1_cod_1\": \"DEU-1580\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Rheinland-Pfalz\",\n \"name_alt\": \"Rhineland-Palatinate\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.RP\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"16\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"RP\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"15\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM08\",\n \"fips_alt\": null,\n \"woe_id\": \"2345488\",\n \"woe_label\": \"Rhineland-Palatinate, DE, Germany\",\n \"woe_name\": \"Rheinland-Pfalz\",\n \"latitude\": \"49.8685\",\n \"longitude\": \"7.36974\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2847618\",\n \"gn_name\": \"Rheinland-Pfalz\",\n \"gns_id\": \"-1849325\",\n \"gns_name\": \"Rheinland-Pfalz\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.08\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM08\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3441413.1035388974,\n 5424738.8449200103\n ],\n [\n 3421909.7072348008,\n 5433496.2339400193\n ],\n [\n 3400206.9816703415,\n 5434171.874666106\n ],\n [\n 3381263.1691697384,\n 5448827.7981531238\n ],\n [\n 3375749.5360028311,\n 5453286.6340999817\n ],\n [\n 3382812.5808065045,\n 5467779.9515374238\n ],\n [\n 3372832.7086474616,\n 5480162.0484409798\n ],\n [\n 3377452.9388920865,\n 5484425.9351314809\n ],\n [\n 3374726.1658796789,\n 5494845.4324212102\n ],\n [\n 3371185.6562408176,\n 5493263.5940849595\n ],\n [\n 3365049.947543317,\n 5497693.0631523961\n ],\n [\n 3350931.1909566126,\n 5500859.6144528091\n ],\n [\n 3334486.4385668249,\n 5492783.5487769293\n ],\n [\n 3326657.9711445286,\n 5490789.7013586788\n ],\n [\n 3308089.9034189489,\n 5490864.744018699\n ],\n [\n 3313667.5787480427,\n 5506768.1633549016\n ],\n [\n 3319085.3295557285,\n 5510024.6220939485\n ],\n [\n 3320036.2148178266,\n 5520422.1984197628\n ],\n [\n 3313918.6219594479,\n 5521855.0304813217\n ],\n [\n 3300451.1426753607,\n 5531427.5120395822\n ],\n [\n 3292075.331599589,\n 5549727.9406546457\n ],\n [\n 3296390.0855788519,\n 5567982.1229122831\n ],\n [\n 3304168.46299545,\n 5572448.5800253376\n ],\n [\n 3307664.7511126897,\n 5578120.7324183807\n ],\n [\n 3312983.7700960236,\n 5579512.6769915028\n ],\n [\n 3316745.7783426233,\n 5580422.3833581302\n ],\n [\n 3314942.5281778327,\n 5586140.8450016081\n ],\n [\n 3319084.6380793764,\n 5581296.9993137084\n ],\n [\n 3328285.0183701818,\n 5585040.4950274136\n ],\n [\n 3330605.1985471123,\n 5582020.31771647\n ],\n [\n 3337596.2249325705,\n 5580760.0248874584\n ],\n [\n 3343107.5339642386,\n 5582155.4682631167\n ],\n [\n 3341011.5040215962,\n 5595025.0052518947\n ],\n [\n 3350093.4458034495,\n 5595426.0479528448\n ],\n [\n 3350049.3700410733,\n 5600448.5200936021\n ],\n [\n 3362065.5903108316,\n 5607751.5255306438\n ],\n [\n 3369368.6827267488,\n 5608763.7309827879\n ],\n [\n 3372459.6357410736,\n 5612603.93168246\n ],\n [\n 3378474.6462449804,\n 5610514.4526037313\n ],\n [\n 3384825.5188038861,\n 5613016.2159250593\n ],\n [\n 3386058.8756050379,\n 5619783.1269912859\n ],\n [\n 3401137.3966407343,\n 5622790.962612764\n ],\n [\n 3408249.7846913603,\n 5628022.5903055705\n ],\n [\n 3406666.4940470285,\n 5631204.3429187089\n ],\n [\n 3413201.5977249132,\n 5634040.7961232988\n ],\n [\n 3412628.2518007741,\n 5642375.6446921304\n ],\n [\n 3419827.9681884986,\n 5643501.2928428715\n ],\n [\n 3418700.2280780436,\n 5639011.3647475801\n ],\n [\n 3425511.3029791312,\n 5633355.6262931069\n ],\n [\n 3433322.8712637313,\n 5617549.7121808697\n ],\n [\n 3438838.0181758674,\n 5616717.762588284\n ],\n [\n 3440788.8477046415,\n 5605767.4036669126\n ],\n [\n 3436698.9808041384,\n 5599221.561436912\n ],\n [\n 3429406.6760302559,\n 5598670.4881470185\n ],\n [\n 3427486.3471034807,\n 5584796.3907665983\n ],\n [\n 3432385.6108222404,\n 5582006.6984252753\n ],\n [\n 3437471.8600296136,\n 5571557.030202195\n ],\n [\n 3423056.5161700593,\n 5563089.1127727879\n ],\n [\n 3422876.6023717704,\n 5552937.0920662321\n ],\n [\n 3418083.6548039587,\n 5553784.5111388061\n ],\n [\n 3412023.655965697,\n 5546950.898131174\n ],\n [\n 3422434.0216260618,\n 5537934.5923802424\n ],\n [\n 3440828.5246273172,\n 5545698.4037055941\n ],\n [\n 3444709.495428592,\n 5544811.9771885592\n ],\n [\n 3452319.9802185413,\n 5536002.3603432896\n ],\n [\n 3452586.3951217886,\n 5528367.2193213543\n ],\n [\n 3458495.5004734448,\n 5514559.1553209331\n ],\n [\n 3453841.9804025455,\n 5503159.6692345878\n ],\n [\n 3457830.8811206338,\n 5493673.0699443156\n ],\n [\n 3463300.0906483554,\n 5478415.3615263375\n ],\n [\n 3462173.0401205476,\n 5462228.3351949146\n ],\n [\n 3441413.1035388974,\n 5424738.8449200103\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"4\",\n \"adm1_code\": \"DEU-1581\",\n \"OBJECTID_1\": \"2332\",\n \"diss_me\": \"1581\",\n \"adm1_cod_1\": \"DEU-1581\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Saarland\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.SL\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"12\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"SL\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"8\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM09\",\n \"fips_alt\": null,\n \"woe_id\": \"2345489\",\n \"woe_label\": \"Saarland, DE, Germany\",\n \"woe_name\": \"Saarland\",\n \"latitude\": \"49.4026\",\n \"longitude\": \"6.86625\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2842635\",\n \"gn_name\": \"Saarland\",\n \"gns_id\": \"-1854333\",\n \"gns_name\": \"Saarland\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.09\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM09\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3381263.1691697384,\n 5448827.7981531238\n ],\n [\n 3373557.3606479331,\n 5442263.874895405\n ],\n [\n 3342161.1407189239,\n 5454623.4918628894\n ],\n [\n 3340179.5116371857,\n 5447601.5385523606\n ],\n [\n 3332385.342399545,\n 5450840.3922064183\n ],\n [\n 3318304.2294849427,\n 5480523.8351349905\n ],\n [\n 3307562.3294992363,\n 5483097.0605111523\n ],\n [\n 3308089.9034189489,\n 5490864.744018699\n ],\n [\n 3326657.9711445286,\n 5490789.7013586788\n ],\n [\n 3334486.4385668249,\n 5492783.5487769293\n ],\n [\n 3350931.1909566126,\n 5500859.6144528091\n ],\n [\n 3365049.947543317,\n 5497693.0631523961\n ],\n [\n 3371185.6562408176,\n 5493263.5940849595\n ],\n [\n 3374726.1658796789,\n 5494845.4324212102\n ],\n [\n 3377452.9388920865,\n 5484425.9351314809\n ],\n [\n 3372832.7086474616,\n 5480162.0484409798\n ],\n [\n 3382812.5808065045,\n 5467779.9515374238\n ],\n [\n 3375749.5360028311,\n 5453286.6340999817\n ],\n [\n 3381263.1691697384,\n 5448827.7981531238\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"5\",\n \"adm1_code\": \"DEU-1591\",\n \"OBJECTID_1\": \"2333\",\n \"diss_me\": \"1591\",\n \"adm1_cod_1\": \"DEU-1591\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Bayern\",\n \"name_alt\": \"Bavaria\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.BY\",\n \"note\": null,\n \"hasc_maybe\": \"DE.TH|DEU-BYR\",\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"14\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"BY\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"6\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM02\",\n \"fips_alt\": \"GM15\",\n \"woe_id\": \"2345482\",\n \"woe_label\": \"Bavaria, DE, Germany\",\n \"woe_name\": \"Bayern\",\n \"latitude\": \"49.0056\",\n \"longitude\": \"11.3966\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2951839\",\n \"gn_name\": \"Freistaat Bayern\",\n \"gns_id\": \"-1744755\",\n \"gns_name\": \"Bayern\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.02\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM02\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3720854.929931188,\n 5579802.1671278924\n ],\n [\n 3719631.2211950263,\n 5571814.3670201534\n ],\n [\n 3732520.2786687785,\n 5550332.2352868849\n ],\n [\n 3748749.2603212004,\n 5542736.809619463\n ],\n [\n 3753100.7648904314,\n 5535668.0080291722\n ],\n [\n 3743829.3417696748,\n 5517178.9862410398\n ],\n [\n 3762324.3291879585,\n 5492080.2687983979\n ],\n [\n 3764245.5673894449,\n 5483218.791022324\n ],\n [\n 3775995.855328233,\n 5472471.210996354\n ],\n [\n 3790870.3988914737,\n 5469570.8132270994\n ],\n [\n 3804947.7173350696,\n 5450646.8378275726\n ],\n [\n 3813933.9184407792,\n 5448396.0162059972\n ],\n [\n 3828298.2930317265,\n 5431829.4757764423\n ],\n [\n 3837496.0529524805,\n 5433331.9746355461\n ],\n [\n 3853922.3040218116,\n 5414298.7288533179\n ],\n [\n 3854027.9231568337,\n 5397041.137897308\n ],\n [\n 3848317.1758256047,\n 5386640.727975281\n ],\n [\n 3833446.5846785088,\n 5392755.7269397127\n ],\n [\n 3826289.9515585969,\n 5369140.3878430389\n ],\n [\n 3816994.2940813755,\n 5360866.1018757839\n ],\n [\n 3799346.7957504704,\n 5355056.062758225\n ],\n [\n 3778767.4968754789,\n 5338084.6226216014\n ],\n [\n 3780201.3775204262,\n 5331942.0280900477\n ],\n [\n 3798665.6127939913,\n 5308605.0331156831\n ],\n [\n 3791934.1650316818,\n 5294492.4678504989\n ],\n [\n 3801583.7247173521,\n 5293802.7550295144\n ],\n [\n 3806028.2541264431,\n 5283947.7214670992\n ],\n [\n 3804167.7842186769,\n 5269432.0791578349\n ],\n [\n 3797155.9113819273,\n 5266557.9084208813\n ],\n [\n 3784369.5568754105,\n 5275318.431105678\n ],\n [\n 3782489.4718682836,\n 5287708.8790438846\n ],\n [\n 3765869.8159498828,\n 5282967.6688195048\n ],\n [\n 3757000.8567382093,\n 5289276.9764530305\n ],\n [\n 3738359.0559389209,\n 5290070.1350489352\n ],\n [\n 3737999.8904091902,\n 5278714.7879365459\n ],\n [\n 3720699.45624005,\n 5278787.4608982084\n ],\n [\n 3697068.2414810816,\n 5275593.9712792682\n ],\n [\n 3692138.5890133549,\n 5266976.1832740316\n ],\n [\n 3681727.3248318103,\n 5265798.1394534484\n ],\n [\n 3670484.2581564616,\n 5253737.0374460649\n ],\n [\n 3649428.9658668973,\n 5252031.1020079171\n ],\n [\n 3634830.2636962491,\n 5265638.6508152951\n ],\n [\n 3606391.2058383985,\n 5271384.9862124128\n ],\n [\n 3609508.0145107368,\n 5256512.8726171581\n ],\n [\n 3598748.4894922166,\n 5241134.8247360373\n ],\n [\n 3587417.9932788452,\n 5237698.0592393083\n ],\n [\n 3589919.3672567643,\n 5249560.5825826228\n ],\n [\n 3571438.51553459,\n 5265428.8433407042\n ],\n [\n 3545727.4155536136,\n 5271763.9444706095\n ],\n [\n 3551119.3500004988,\n 5274925.3375281552\n ],\n [\n 3553760.0831742487,\n 5274202.1924148183\n ],\n [\n 3564921.0598903387,\n 5282095.2396906596\n ],\n [\n 3571596.2949043298,\n 5280467.0692903223\n ],\n [\n 3579419.406908934,\n 5282654.3130722083\n ],\n [\n 3580805.8182427208,\n 5279501.6412465433\n ],\n [\n 3582086.3286339194,\n 5282857.9677951159\n ],\n [\n 3584928.4473972623,\n 5283809.5219843267\n ],\n [\n 3583494.2047532503,\n 5292617.613166254\n ],\n [\n 3580930.5669586663,\n 5294773.3959587673\n ],\n [\n 3584580.1453866977,\n 5298103.7145693144\n ],\n [\n 3582134.3343479666,\n 5304897.8270773264\n ],\n [\n 3582885.1004398358,\n 5311565.5902857054\n ],\n [\n 3581170.5874427473,\n 5314040.8154020924\n ],\n [\n 3584271.0151908011,\n 5322385.9982684879\n ],\n [\n 3584603.1174242902,\n 5330438.8159838542\n ],\n [\n 3582536.9707668643,\n 5334936.9094386967\n ],\n [\n 3578187.6194506902,\n 5352316.3667016691\n ],\n [\n 3572624.432680374,\n 5360747.4124220517\n ],\n [\n 3578955.5050633829,\n 5370940.3940610792\n ],\n [\n 3583771.9889397854,\n 5372636.0281001786\n ],\n [\n 3585285.3429935728,\n 5370319.6556346128\n ],\n [\n 3592397.2803958142,\n 5374804.8767391955\n ],\n [\n 3597104.90080478,\n 5377768.9604256051\n ],\n [\n 3596820.2459671348,\n 5386336.2469680198\n ],\n [\n 3598254.0374123072,\n 5388042.2132638032\n ],\n [\n 3594990.0970565821,\n 5390440.2955783168\n ],\n [\n 3593537.9326087711,\n 5394395.9917849256\n ],\n [\n 3595531.1762953508,\n 5396915.3128908044\n ],\n [\n 3601043.7237907918,\n 5392675.2968838485\n ],\n [\n 3604817.5383069692,\n 5396914.4062103806\n ],\n [\n 3605494.6288470197,\n 5393679.6094944002\n ],\n [\n 3610040.9729735483,\n 5396732.7561689578\n ],\n [\n 3605288.9192014784,\n 5404018.894093167\n ],\n [\n 3607096.9641639437,\n 5411585.8563470664\n ],\n [\n 3606859.6900644084,\n 5423359.0073309727\n ],\n [\n 3599011.9484724626,\n 5433669.2124226196\n ],\n [\n 3593147.1400163225,\n 5435435.6389526604\n ],\n [\n 3592245.8891499159,\n 5443944.4963075556\n ],\n [\n 3583564.5297398535,\n 5452545.6756128054\n ],\n [\n 3582413.875438883,\n 5459974.4160899296\n ],\n [\n 3584382.777422816,\n 5460337.6364304721\n ],\n [\n 3581463.7540525994,\n 5470771.6749604018\n ],\n [\n 3585018.2661472317,\n 5472469.5360561004\n ],\n [\n 3582846.7077056891,\n 5477603.5611078702\n ],\n [\n 3580825.872080544,\n 5478633.7955291895\n ],\n [\n 3581644.3427704326,\n 5486557.8843275979\n ],\n [\n 3578523.3819369273,\n 5490167.6813984727\n ],\n [\n 3577176.3558150646,\n 5486245.6809542198\n ],\n [\n 3573881.9593119058,\n 5482987.1144731594\n ],\n [\n 3567840.6018891246,\n 5483063.8994000871\n ],\n [\n 3566013.3375535863,\n 5493864.1031941669\n ],\n [\n 3561886.1846542899,\n 5489700.4107388947\n ],\n [\n 3560708.0498845158,\n 5490710.2006405825\n ],\n [\n 3563761.6499401266,\n 5497211.0637213998\n ],\n [\n 3560208.8010403323,\n 5502015.7024308359\n ],\n [\n 3560005.6028370573,\n 5506214.9098258298\n ],\n [\n 3557139.2306370987,\n 5509661.1895087473\n ],\n [\n 3552489.5273762518,\n 5505757.5850912258\n ],\n [\n 3551176.5391815607,\n 5509357.2814978566\n ],\n [\n 3548880.8715447127,\n 5506083.0556571763\n ],\n [\n 3545480.2621061597,\n 5506998.8894933118\n ],\n [\n 3546539.9080542442,\n 5516416.3428387139\n ],\n [\n 3543354.8998105251,\n 5514967.3727186071\n ],\n [\n 3535345.8245763546,\n 5517624.6485599363\n ],\n [\n 3525335.9484673571,\n 5516510.933784782\n ],\n [\n 3522498.7099780627,\n 5514265.6125144539\n ],\n [\n 3522607.3664702717,\n 5510533.3209668808\n ],\n [\n 3530810.1855651978,\n 5507912.8665117286\n ],\n [\n 3529207.3879846265,\n 5500329.3255963055\n ],\n [\n 3527193.7326927111,\n 5501474.0234873584\n ],\n [\n 3520685.2364013265,\n 5498793.0887854239\n ],\n [\n 3518325.600151998,\n 5493330.7812480545\n ],\n [\n 3508004.7275028112,\n 5493032.8392732944\n ],\n [\n 3505250.4010145608,\n 5497006.3185954299\n ],\n [\n 3508038.9263903359,\n 5500227.9951685322\n ],\n [\n 3509617.7330651209,\n 5506477.500841843\n ],\n [\n 3510146.6536235306,\n 5516639.2130606221\n ],\n [\n 3505048.3221994299,\n 5521439.4779663766\n ],\n [\n 3501918.8327689632,\n 5529980.5791802146\n ],\n [\n 3501924.5455787638,\n 5545078.5930615086\n ],\n [\n 3498323.6014661267,\n 5546150.3840967752\n ],\n [\n 3500735.6345797917,\n 5551049.7819365254\n ],\n [\n 3507714.830290556,\n 5554233.6068744743\n ],\n [\n 3510910.1904314789,\n 5552779.3399014063\n ],\n [\n 3516350.8844319284,\n 5556299.1656100359\n ],\n [\n 3523525.7989939875,\n 5555823.0760990549\n ],\n [\n 3529102.3323403024,\n 5550628.9499717057\n ],\n [\n 3536241.2263133698,\n 5552425.6098567126\n ],\n [\n 3537768.1315709203,\n 5559166.6873750146\n ],\n [\n 3535646.7908835602,\n 5560063.0808881437\n ],\n [\n 3536454.1115450612,\n 5566675.5268396242\n ],\n [\n 3547168.3691143082,\n 5566552.8579348298\n ],\n [\n 3548486.4890143084,\n 5571588.4039183576\n ],\n [\n 3553322.554148009,\n 5574531.7938179336\n ],\n [\n 3554503.9289892185,\n 5585281.3163722064\n ],\n [\n 3561061.3854291611,\n 5585008.1051580943\n ],\n [\n 3571078.9444448808,\n 5590634.6929859295\n ],\n [\n 3574817.4056062475,\n 5598257.4420703379\n ],\n [\n 3579781.59930187,\n 5603487.1175612584\n ],\n [\n 3584213.7888737433,\n 5602032.7751879171\n ],\n [\n 3587805.4131642585,\n 5597748.057573312\n ],\n [\n 3593561.5613371767,\n 5595872.3240806991\n ],\n [\n 3599433.8822761257,\n 5588255.5182174174\n ],\n [\n 3599920.250670508,\n 5585260.6331641655\n ],\n [\n 3603043.3838240071,\n 5585677.0623686798\n ],\n [\n 3606720.0805508858,\n 5580673.1137679294\n ],\n [\n 3610451.0868479265,\n 5581336.1181971366\n ],\n [\n 3613301.3204261549,\n 5577745.2251591412\n ],\n [\n 3615378.8061682819,\n 5566488.7467001993\n ],\n [\n 3623231.2025344539,\n 5565109.5173362065\n ],\n [\n 3623502.8652153891,\n 5568663.640977269\n ],\n [\n 3631250.6056273249,\n 5568820.599108696\n ],\n [\n 3631003.5069937492,\n 5572109.5285800658\n ],\n [\n 3622115.8301066705,\n 5577492.5262480676\n ],\n [\n 3622821.4798547197,\n 5581827.2477174671\n ],\n [\n 3627205.3913595304,\n 5584768.6555711003\n ],\n [\n 3638188.6970979096,\n 5585165.1007029591\n ],\n [\n 3641467.2303942246,\n 5581085.1458215769\n ],\n [\n 3645868.0769925839,\n 5580963.0357561549\n ],\n [\n 3650284.4903703765,\n 5583030.593772362\n ],\n [\n 3653432.929886797,\n 5578485.1134469826\n ],\n [\n 3652087.5666547911,\n 5576864.6365224905\n ],\n [\n 3656266.8897332451,\n 5572781.6523313411\n ],\n [\n 3660745.4664473836,\n 5573283.5300583346\n ],\n [\n 3662238.810322443,\n 5582653.1846054439\n ],\n [\n 3659605.2232868215,\n 5595262.2291009063\n ],\n [\n 3664336.9864799059,\n 5597622.3606871739\n ],\n [\n 3666404.0989981135,\n 5600603.8442229992\n ],\n [\n 3672121.9713641307,\n 5600160.7438294999\n ],\n [\n 3671958.3111791341,\n 5592357.348135368\n ],\n [\n 3675994.001566703,\n 5590758.7787582632\n ],\n [\n 3676626.67844284,\n 5587664.6132867765\n ],\n [\n 3680049.0477793319,\n 5585432.8105548657\n ],\n [\n 3698749.3649529289,\n 5590010.1434312938\n ],\n [\n 3701124.6336581926,\n 5587599.6888292851\n ],\n [\n 3706456.6357335709,\n 5590490.103557012\n ],\n [\n 3712475.9410972646,\n 5583643.9742964255\n ],\n [\n 3720854.929931188,\n 5579802.1671278924\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"8\",\n \"adm1_code\": \"DEU-1601\",\n \"OBJECTID_1\": \"2336\",\n \"diss_me\": \"1601\",\n \"adm1_cod_1\": \"DEU-1601\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Sachsen\",\n \"name_alt\": \"Saxony\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.SN\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"13\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"SN\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"7\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM13\",\n \"fips_alt\": null,\n \"woe_id\": \"2345493\",\n \"woe_label\": \"Saxony, DE, Germany\",\n \"woe_name\": \"Sachsen\",\n \"latitude\": \"51.0053\",\n \"longitude\": \"13.4596\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2842566\",\n \"gn_name\": \"Freistaat Sachsen\",\n \"gns_id\": \"-1854402\",\n \"gns_name\": \"Sachsen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.13\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM13\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3895729.9823607644,\n 5727122.6007731473\n ],\n [\n 3913070.5398604777,\n 5718259.5309541589\n ],\n [\n 3920360.2740866155,\n 5695097.0156875188\n ],\n [\n 3917262.6324534719,\n 5675524.3458810057\n ],\n [\n 3906855.3511170237,\n 5646619.4597514132\n ],\n [\n 3895163.1054948336,\n 5649360.6450482514\n ],\n [\n 3896125.4075728473,\n 5656567.4818767738\n ],\n [\n 3885322.9184645279,\n 5667742.8164319936\n ],\n [\n 3870722.8689866588,\n 5668920.658955303\n ],\n [\n 3867706.1925043422,\n 5662631.8681641854\n ],\n [\n 3876123.3069151207,\n 5651812.8112209244\n ],\n [\n 3844935.6204190049,\n 5638502.4966573529\n ],\n [\n 3841262.8713556938,\n 5631926.33240279\n ],\n [\n 3824931.3167273672,\n 5629596.8108225381\n ],\n [\n 3814830.689602342,\n 5616161.0174571536\n ],\n [\n 3799673.1328355772,\n 5613571.7049376061\n ],\n [\n 3795090.3541931743,\n 5603831.5304041319\n ],\n [\n 3784445.6694856659,\n 5602760.9429713953\n ],\n [\n 3778486.0135767977,\n 5592711.3187929457\n ],\n [\n 3771699.906899136,\n 5596372.6104919445\n ],\n [\n 3749573.2997890264,\n 5589410.5125307078\n ],\n [\n 3737872.9533890621,\n 5574367.7266012002\n ],\n [\n 3734558.6914271559,\n 5563483.4667501887\n ],\n [\n 3730459.2210461572,\n 5574098.141054092\n ],\n [\n 3720854.929931188,\n 5579802.1671278924\n ],\n [\n 3712475.9410972646,\n 5583643.9742964255\n ],\n [\n 3706456.6357335709,\n 5590490.103557012\n ],\n [\n 3707593.3788553113,\n 5598689.8272855673\n ],\n [\n 3711847.4358901861,\n 5605288.3101831255\n ],\n [\n 3716102.6109797498,\n 5603841.3164922409\n ],\n [\n 3722819.9620642923,\n 5607572.8059453368\n ],\n [\n 3725457.3308588881,\n 5614794.9990650406\n ],\n [\n 3730125.0831804471,\n 5614992.2367806258\n ],\n [\n 3734759.1665375163,\n 5620512.1446339721\n ],\n [\n 3728832.1004670118,\n 5625615.0790818483\n ],\n [\n 3729672.7793026781,\n 5633487.7130454583\n ],\n [\n 3741232.331247753,\n 5637557.6046812981\n ],\n [\n 3748218.9617048698,\n 5643708.7736610528\n ],\n [\n 3756509.8321495252,\n 5646715.3534608511\n ],\n [\n 3748992.2363486462,\n 5654296.6612281911\n ],\n [\n 3744176.9108976396,\n 5663770.8769144556\n ],\n [\n 3728697.3410449172,\n 5665894.003271156\n ],\n [\n 3725736.6071475316,\n 5666344.9610057147\n ],\n [\n 3720493.4261422371,\n 5675145.0456173113\n ],\n [\n 3718449.0036664321,\n 5688621.3779614437\n ],\n [\n 3721730.6767142406,\n 5692441.5749404654\n ],\n [\n 3719417.8191738939,\n 5706182.4262456577\n ],\n [\n 3724304.7276911819,\n 5719002.5429664785\n ],\n [\n 3737782.7113693953,\n 5720766.2362732422\n ],\n [\n 3738522.3460328085,\n 5724031.9576492552\n ],\n [\n 3753662.7909530257,\n 5724768.6707163947\n ],\n [\n 3761788.6117216963,\n 5728031.8281768858\n ],\n [\n 3767113.5430716942,\n 5732917.2825115556\n ],\n [\n 3781244.7607806674,\n 5727749.173669612\n ],\n [\n 3789159.7458350016,\n 5722743.0719234683\n ],\n [\n 3791429.4246440106,\n 5702687.0541994385\n ],\n [\n 3806709.1660082862,\n 5707620.2425152455\n ],\n [\n 3814794.8146041944,\n 5702036.2389156315\n ],\n [\n 3831961.9311943511,\n 5701008.7637389079\n ],\n [\n 3846067.6576036941,\n 5703199.0928839929\n ],\n [\n 3857862.6325678141,\n 5722744.2213756908\n ],\n [\n 3870467.4319547503,\n 5721757.1183289066\n ],\n [\n 3881910.1924875081,\n 5727851.2041914547\n ],\n [\n 3895729.9823607644,\n 5727122.6007731473\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"7\",\n \"adm1_code\": \"DEU-1600\",\n \"OBJECTID_1\": \"2335\",\n \"diss_me\": \"1600\",\n \"adm1_cod_1\": \"DEU-1600\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Sachsen-Anhalt\",\n \"name_alt\": \"Saxony-Anhalt\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.ST\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"18\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"ST\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"14\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM14\",\n \"fips_alt\": null,\n \"woe_id\": \"2345494\",\n \"woe_label\": \"Saxony-Anhalt, DE, Germany\",\n \"woe_name\": \"Sachsen-Anhalt\",\n \"latitude\": \"51.9338\",\n \"longitude\": \"11.6796\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2842565\",\n \"gn_name\": \"Land Sachsen-Anhalt\",\n \"gns_id\": \"-1854403\",\n \"gns_name\": \"Sachsen-Anhalt\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.14\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM14\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3781244.7607806674,\n 5727749.173669612\n ],\n [\n 3767113.5430716942,\n 5732917.2825115556\n ],\n [\n 3761788.6117216963,\n 5728031.8281768858\n ],\n [\n 3753662.7909530257,\n 5724768.6707163947\n ],\n [\n 3738522.3460328085,\n 5724031.9576492552\n ],\n [\n 3737782.7113693953,\n 5720766.2362732422\n ],\n [\n 3724304.7276911819,\n 5719002.5429664785\n ],\n [\n 3719417.8191738939,\n 5706182.4262456577\n ],\n [\n 3721730.6767142406,\n 5692441.5749404654\n ],\n [\n 3718449.0036664321,\n 5688621.3779614437\n ],\n [\n 3720493.4261422371,\n 5675145.0456173113\n ],\n [\n 3725736.6071475316,\n 5666344.9610057147\n ],\n [\n 3728697.3410449172,\n 5665894.003271156\n ],\n [\n 3729823.6229192242,\n 5657699.0347429402\n ],\n [\n 3724984.3058717526,\n 5648366.5871077562\n ],\n [\n 3721967.7634851355,\n 5650922.120966264\n ],\n [\n 3711102.7786706178,\n 5650136.7946595009\n ],\n [\n 3700671.5497429045,\n 5657917.8290444724\n ],\n [\n 3691711.4629774042,\n 5657002.0672275824\n ],\n [\n 3688360.598657859,\n 5665165.5228766529\n ],\n [\n 3670003.9710097802,\n 5665298.3177191904\n ],\n [\n 3669281.7923881463,\n 5672052.1862729536\n ],\n [\n 3662981.3890735451,\n 5678154.1523908963\n ],\n [\n 3671078.403472946,\n 5684562.7217747746\n ],\n [\n 3661128.3753905562,\n 5696690.098692731\n ],\n [\n 3639072.4658529945,\n 5698871.2434897516\n ],\n [\n 3632504.2172296499,\n 5716768.8556063659\n ],\n [\n 3634798.3906453014,\n 5719458.0870596841\n ],\n [\n 3617510.6850254778,\n 5723772.3194554569\n ],\n [\n 3615012.1854641521,\n 5731490.6919269329\n ],\n [\n 3609394.947188708,\n 5739233.3662485098\n ],\n [\n 3608880.3975983351,\n 5746675.8150769975\n ],\n [\n 3612899.5315223499,\n 5751066.7033877522\n ],\n [\n 3610948.6257142145,\n 5755584.0213080486\n ],\n [\n 3613030.801248,\n 5759432.3883808982\n ],\n [\n 3607797.4707193407,\n 5764671.3332481934\n ],\n [\n 3613361.9478737903,\n 5768780.5365629746\n ],\n [\n 3626913.4232676532,\n 5769958.5594496056\n ],\n [\n 3634968.6410203772,\n 5771763.776092371\n ],\n [\n 3633454.749544749,\n 5775329.8780293567\n ],\n [\n 3639545.4940197729,\n 5779363.0596436961\n ],\n [\n 3638079.8541451683,\n 5785463.3934184005\n ],\n [\n 3642306.9390903679,\n 5789843.2179832282\n ],\n [\n 3637457.8965149773,\n 5796638.6178118531\n ],\n [\n 3636231.0192434615,\n 5802737.3780365922\n ],\n [\n 3641160.67654408,\n 5806181.3832803816\n ],\n [\n 3631772.1436179769,\n 5815934.1879419796\n ],\n [\n 3635920.4080108143,\n 5820057.3019131161\n ],\n [\n 3632514.9164062119,\n 5825233.8930791495\n ],\n [\n 3633938.0988071673,\n 5832809.371821166\n ],\n [\n 3630000.1103232088,\n 5833404.7902165819\n ],\n [\n 3624130.2654388198,\n 5843359.7207674412\n ],\n [\n 3621666.099287462,\n 5844655.1274119448\n ],\n [\n 3618514.5615372388,\n 5851704.8690217081\n ],\n [\n 3618718.1755545707,\n 5857485.6109101465\n ],\n [\n 3632019.5397876874,\n 5860810.2693054294\n ],\n [\n 3635509.5308777369,\n 5866108.0874277316\n ],\n [\n 3648934.7473273841,\n 5864932.535072092\n ],\n [\n 3651333.2684875731,\n 5862791.5747473724\n ],\n [\n 3662276.0322155575,\n 5866329.1451455932\n ],\n [\n 3668159.9163241819,\n 5870732.0661629066\n ],\n [\n 3668261.3414150965,\n 5877081.257549637\n ],\n [\n 3671922.8545249584,\n 5878200.7057062704\n ],\n [\n 3673094.9477649452,\n 5881900.7282523569\n ],\n [\n 3685470.527182492,\n 5877043.1175059043\n ],\n [\n 3690394.3300075424,\n 5869785.5474416316\n ],\n [\n 3699574.5929267807,\n 5865363.214592156\n ],\n [\n 3708117.6930525554,\n 5866440.6340229502\n ],\n [\n 3715667.1928544352,\n 5863903.8374439515\n ],\n [\n 3717929.5001302152,\n 5858476.4293313287\n ],\n [\n 3715469.8620647853,\n 5849748.085141778\n ],\n [\n 3718214.6508923629,\n 5844431.1891566208\n ],\n [\n 3711850.4436102621,\n 5829091.543895375\n ],\n [\n 3717622.3749302062,\n 5827795.9666623687\n ],\n [\n 3723223.1986584924,\n 5821704.5994157083\n ],\n [\n 3720737.934966553,\n 5816927.2713739648\n ],\n [\n 3718959.61734682,\n 5798644.4757761015\n ],\n [\n 3721757.2971702325,\n 5795806.4581173742\n ],\n [\n 3718700.9173543877,\n 5789151.6860899935\n ],\n [\n 3723228.6656669825,\n 5782040.1035374934\n ],\n [\n 3734812.1546247685,\n 5769569.3694657935\n ],\n [\n 3737897.7987304418,\n 5770821.5788534619\n ],\n [\n 3747886.3812362328,\n 5765052.4747153148\n ],\n [\n 3751784.0961636314,\n 5768485.2524125446\n ],\n [\n 3766349.8402684638,\n 5760146.1772142258\n ],\n [\n 3771836.8357371399,\n 5759778.7603498688\n ],\n [\n 3780081.7644681148,\n 5754179.0442536157\n ],\n [\n 3791815.5008474807,\n 5755165.8817298934\n ],\n [\n 3787186.3117421567,\n 5747485.4105568705\n ],\n [\n 3788950.7222997635,\n 5738608.6159806\n ],\n [\n 3781244.7607806674,\n 5727749.173669612\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"9\",\n \"adm1_code\": \"DEU-3487\",\n \"OBJECTID_1\": \"3562\",\n \"diss_me\": \"3487\",\n \"adm1_cod_1\": \"DEU-3487\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Brandenburg\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.\",\n \"note\": null,\n \"hasc_maybe\": \"DE.BE|DEU-BRN\",\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"17\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"BE\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"11\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM11\",\n \"fips_alt\": \"GM16\",\n \"woe_id\": \"2345491\",\n \"woe_label\": \"Brandenburg, DE, Germany\",\n \"woe_name\": \"Brandenburg\",\n \"latitude\": \"52.8156\",\n \"longitude\": \"12.9206\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2945356\",\n \"gn_name\": \"Land Brandenburg\",\n \"gns_id\": \"-1751262\",\n \"gns_name\": \"Brandenburg\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.11\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM11\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3858958.4675184065,\n 5924746.6905517764\n ],\n [\n 3863006.6963384282,\n 5915868.9256445663\n ],\n [\n 3858145.8362342203,\n 5892787.8486107616\n ],\n [\n 3845536.6696635247,\n 5881951.7849794067\n ],\n [\n 3845024.9412794961,\n 5869707.4513760619\n ],\n [\n 3882462.763382134,\n 5841922.4558948586\n ],\n [\n 3876679.8774116514,\n 5824138.593258542\n ],\n [\n 3894793.9838867425,\n 5786961.4449581495\n ],\n [\n 3885105.1970240651,\n 5755706.9621667564\n ],\n [\n 3895439.295541347,\n 5742171.3496038476\n ],\n [\n 3895729.9823607644,\n 5727122.6007731473\n ],\n [\n 3881910.1924875081,\n 5727851.2041914547\n ],\n [\n 3870467.4319547503,\n 5721757.1183289066\n ],\n [\n 3857862.6325678141,\n 5722744.2213756908\n ],\n [\n 3846067.6576036941,\n 5703199.0928839929\n ],\n [\n 3831961.9311943511,\n 5701008.7637389079\n ],\n [\n 3814794.8146041944,\n 5702036.2389156315\n ],\n [\n 3806709.1660082862,\n 5707620.2425152455\n ],\n [\n 3791429.4246440106,\n 5702687.0541994385\n ],\n [\n 3789159.7458350016,\n 5722743.0719234683\n ],\n [\n 3781244.7607806674,\n 5727749.173669612\n ],\n [\n 3788950.7222997635,\n 5738608.6159806\n ],\n [\n 3787186.3117421567,\n 5747485.4105568705\n ],\n [\n 3791815.5008474807,\n 5755165.8817298934\n ],\n [\n 3780081.7644681148,\n 5754179.0442536157\n ],\n [\n 3771836.8357371399,\n 5759778.7603498688\n ],\n [\n 3766349.8402684638,\n 5760146.1772142258\n ],\n [\n 3751784.0961636314,\n 5768485.2524125446\n ],\n [\n 3747886.3812362328,\n 5765052.4747153148\n ],\n [\n 3737897.7987304418,\n 5770821.5788534619\n ],\n [\n 3734812.1546247685,\n 5769569.3694657935\n ],\n [\n 3723228.6656669825,\n 5782040.1035374934\n ],\n [\n 3718700.9173543877,\n 5789151.6860899935\n ],\n [\n 3721757.2971702325,\n 5795806.4581173742\n ],\n [\n 3718959.61734682,\n 5798644.4757761015\n ],\n [\n 3720737.934966553,\n 5816927.2713739648\n ],\n [\n 3723223.1986584924,\n 5821704.5994157083\n ],\n [\n 3717622.3749302062,\n 5827795.9666623687\n ],\n [\n 3711850.4436102621,\n 5829091.543895375\n ],\n [\n 3718214.6508923629,\n 5844431.1891566208\n ],\n [\n 3715469.8620647853,\n 5849748.085141778\n ],\n [\n 3717929.5001302152,\n 5858476.4293313287\n ],\n [\n 3715667.1928544352,\n 5863903.8374439515\n ],\n [\n 3708117.6930525554,\n 5866440.6340229502\n ],\n [\n 3699574.5929267807,\n 5865363.214592156\n ],\n [\n 3690394.3300075424,\n 5869785.5474416316\n ],\n [\n 3685470.527182492,\n 5877043.1175059043\n ],\n [\n 3673094.9477649452,\n 5881900.7282523569\n ],\n [\n 3661924.2617668891,\n 5885747.2731848815\n ],\n [\n 3652231.3320433423,\n 5889511.3574547973\n ],\n [\n 3660311.8800712302,\n 5888738.7558573624\n ],\n [\n 3670935.6606098032,\n 5893318.19994\n ],\n [\n 3669396.6476244526,\n 5899831.1085491451\n ],\n [\n 3680200.6158619821,\n 5905056.4653345328\n ],\n [\n 3683284.378220486,\n 5901519.8736129059\n ],\n [\n 3700755.786590965,\n 5911583.242706717\n ],\n [\n 3703941.6063928884,\n 5918019.7483437611\n ],\n [\n 3712076.1365221734,\n 5919807.300273018\n ],\n [\n 3728791.1339836149,\n 5909381.6571826441\n ],\n [\n 3763845.3670365461,\n 5903055.9980064519\n ],\n [\n 3767480.0978048071,\n 5900151.2545123501\n ],\n [\n 3777112.0423970157,\n 5910922.5465983907\n ],\n [\n 3793795.8883584146,\n 5913641.643195576\n ],\n [\n 3801803.8451427119,\n 5927759.7186010573\n ],\n [\n 3812528.0683271405,\n 5937242.9811624223\n ],\n [\n 3822905.9499626607,\n 5941589.9501121677\n ],\n [\n 3826929.8373607565,\n 5932832.0742536131\n ],\n [\n 3848307.6588879293,\n 5934358.7847815678\n ],\n [\n 3848470.2881636913,\n 5929329.4855594682\n ],\n [\n 3840283.6437742342,\n 5916498.3542627199\n ],\n [\n 3850096.8967003031,\n 5915716.2145906379\n ],\n [\n 3858958.4675184065,\n 5924746.6905517764\n ]\n ],\n [\n [\n 3804566.4152815924,\n 5843865.692704617\n ],\n [\n 3802213.9156131558,\n 5845930.8582165847\n ],\n [\n 3796466.9763708967,\n 5841442.4283941165\n ],\n [\n 3791058.6585779274,\n 5844454.8433719436\n ],\n [\n 3785707.312560183,\n 5840767.7494266415\n ],\n [\n 3785070.6277251416,\n 5836354.5125904409\n ],\n [\n 3781589.121700428,\n 5837662.7537919097\n ],\n [\n 3780958.9744146601,\n 5829146.268900374\n ],\n [\n 3778418.5104975295,\n 5817224.1775639663\n ],\n [\n 3782830.3462029067,\n 5815037.8793154648\n ],\n [\n 3792079.8344209795,\n 5817614.5021004295\n ],\n [\n 3801245.3895061575,\n 5814373.9040043866\n ],\n [\n 3803208.3688719897,\n 5818473.9252682505\n ],\n [\n 3815681.7293974063,\n 5814709.1505647963\n ],\n [\n 3816409.7180140801,\n 5810966.0266671684\n ],\n [\n 3820320.890532007,\n 5814819.0171839539\n ],\n [\n 3822865.3678980898,\n 5823472.4171997104\n ],\n [\n 3816712.9457131149,\n 5827478.2731477637\n ],\n [\n 3814140.9994099671,\n 5827006.7575231045\n ],\n [\n 3815207.714945185,\n 5832907.5054032393\n ],\n [\n 3809716.679845443,\n 5835249.9865113907\n ],\n [\n 3804934.6433777702,\n 5840168.5899853837\n ],\n [\n 3804566.4152815924,\n 5843865.692704617\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"11\",\n \"adm1_code\": \"DEU-1572\",\n \"OBJECTID_1\": \"1515\",\n \"diss_me\": \"1572\",\n \"adm1_cod_1\": \"DEU-1572\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Nordrhein-Westfalen\",\n \"name_alt\": \"North Rhine-Westphalia\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.NW\",\n \"note\": null,\n \"hasc_maybe\": \"DE.NI|DEU-NWS\",\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"11\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"NW\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"19\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM07\",\n \"fips_alt\": \"GM06\",\n \"woe_id\": \"2345487\",\n \"woe_label\": \"North Rhine-Westphalia, DE, Germany\",\n \"woe_name\": \"Nordrhein-Westfalen\",\n \"latitude\": \"51.6146\",\n \"longitude\": \"7.65708\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2861876\",\n \"gn_name\": \"Land Nordrhein-Westfalen\",\n \"gns_id\": \"-1835009\",\n \"gns_name\": \"Nordrhein-Westfalen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.07\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM07\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3438838.0181758674,\n 5616717.762588284\n ],\n [\n 3433322.8712637313,\n 5617549.7121808697\n ],\n [\n 3425511.3029791312,\n 5633355.6262931069\n ],\n [\n 3418700.2280780436,\n 5639011.3647475801\n ],\n [\n 3419827.9681884986,\n 5643501.2928428715\n ],\n [\n 3412628.2518007741,\n 5642375.6446921304\n ],\n [\n 3413201.5977249132,\n 5634040.7961232988\n ],\n [\n 3406666.4940470285,\n 5631204.3429187089\n ],\n [\n 3408249.7846913603,\n 5628022.5903055705\n ],\n [\n 3401137.3966407343,\n 5622790.962612764\n ],\n [\n 3386058.8756050379,\n 5619783.1269912859\n ],\n [\n 3384825.5188038861,\n 5613016.2159250593\n ],\n [\n 3378474.6462449804,\n 5610514.4526037313\n ],\n [\n 3372459.6357410736,\n 5612603.93168246\n ],\n [\n 3369368.6827267488,\n 5608763.7309827879\n ],\n [\n 3362065.5903108316,\n 5607751.5255306438\n ],\n [\n 3350049.3700410733,\n 5600448.5200936021\n ],\n [\n 3350093.4458034495,\n 5595426.0479528448\n ],\n [\n 3341011.5040215962,\n 5595025.0052518947\n ],\n [\n 3343107.5339642386,\n 5582155.4682631167\n ],\n [\n 3337596.2249325705,\n 5580760.0248874584\n ],\n [\n 3330605.1985471123,\n 5582020.31771647\n ],\n [\n 3328285.0183701818,\n 5585040.4950274136\n ],\n [\n 3319084.6380793764,\n 5581296.9993137084\n ],\n [\n 3314942.5281778327,\n 5586140.8450016081\n ],\n [\n 3316745.7783426233,\n 5580422.3833581302\n ],\n [\n 3312983.7700960236,\n 5579512.6769915028\n ],\n [\n 3311015.0402032044,\n 5597166.2959220903\n ],\n [\n 3301286.5663866308,\n 5598571.7062137835\n ],\n [\n 3300452.0495598861,\n 5612535.5799334673\n ],\n [\n 3286562.4368676911,\n 5631605.5381454192\n ],\n [\n 3293515.8540427848,\n 5645328.8087019995\n ],\n [\n 3289593.1201755358,\n 5652859.9777060952\n ],\n [\n 3280490.6418140358,\n 5652305.5355140213\n ],\n [\n 3283946.8383823703,\n 5659327.0333167221\n ],\n [\n 3300441.7297592955,\n 5672312.375694558\n ],\n [\n 3295054.930980491,\n 5681365.4637364801\n ],\n [\n 3305673.7855360452,\n 5698330.3926210487\n ],\n [\n 3305185.7435152312,\n 5711900.5580570772\n ],\n [\n 3298151.4557415806,\n 5721776.7622817336\n ],\n [\n 3299248.1908475813,\n 5727184.30292344\n ],\n [\n 3288593.3455453222,\n 5737357.14206855\n ],\n [\n 3288166.3396910564,\n 5745714.5100391265\n ],\n [\n 3302277.8919111043,\n 5755163.8046153989\n ],\n [\n 3319581.1853357637,\n 5746810.0729826046\n ],\n [\n 3349540.1338124895,\n 5760629.0532384655\n ],\n [\n 3340479.231191908,\n 5769175.6678363914\n ],\n [\n 3365215.7405231372,\n 5791134.4245591592\n ],\n [\n 3384012.9715766446,\n 5794350.67907946\n ],\n [\n 3392025.9757624478,\n 5798862.5502476348\n ],\n [\n 3404900.1974876495,\n 5809887.5124256918\n ],\n [\n 3405503.5945286378,\n 5816570.4759445861\n ],\n [\n 3420259.1575914957,\n 5803751.5274206437\n ],\n [\n 3425492.757720896,\n 5805288.4202747019\n ],\n [\n 3430006.2427960923,\n 5797970.8222356346\n ],\n [\n 3424868.898425628,\n 5786447.4626845969\n ],\n [\n 3432793.2771179159,\n 5782578.7181442473\n ],\n [\n 3430848.1481474047,\n 5776941.4217684427\n ],\n [\n 3424043.0116273453,\n 5773317.3629900236\n ],\n [\n 3429320.229406042,\n 5767538.2512281965\n ],\n [\n 3443866.3179077418,\n 5772309.6550858961\n ],\n [\n 3449806.276862137,\n 5777869.5358370543\n ],\n [\n 3458464.1366839507,\n 5775302.8801533738\n ],\n [\n 3465646.1563843205,\n 5783918.4884388642\n ],\n [\n 3463355.0737599577,\n 5785668.4196412982\n ],\n [\n 3461024.8513124967,\n 5803711.8401982216\n ],\n [\n 3454665.8384169149,\n 5807279.4963338831\n ],\n [\n 3452513.9193353336,\n 5813170.6235983437\n ],\n [\n 3462486.1358933239,\n 5813475.3430145392\n ],\n [\n 3465828.1105889371,\n 5819223.8873425638\n ],\n [\n 3475033.4589592386,\n 5821106.0705908509\n ],\n [\n 3479867.1735936282,\n 5816213.7362615485\n ],\n [\n 3480044.9075819287,\n 5808105.8626193544\n ],\n [\n 3488204.8196057775,\n 5806021.1578105967\n ],\n [\n 3497362.7964672055,\n 5808264.4660474733\n ],\n [\n 3505512.7507341616,\n 5818113.1914334437\n ],\n [\n 3508734.1906899149,\n 5808202.5161512913\n ],\n [\n 3501228.9466671981,\n 5800697.4286702024\n ],\n [\n 3498856.9730779752,\n 5792231.21404994\n ],\n [\n 3504814.6166028902,\n 5789111.4519898761\n ],\n [\n 3499183.6395015051,\n 5783721.9442453487\n ],\n [\n 3499759.3356492291,\n 5777670.6405627411\n ],\n [\n 3509276.9756461484,\n 5777434.9458997874\n ],\n [\n 3513012.1422050977,\n 5771107.5125731593\n ],\n [\n 3511749.4542092225,\n 5761204.0843012407\n ],\n [\n 3519653.3203679961,\n 5759759.9832918076\n ],\n [\n 3517560.304288995,\n 5754143.8004587572\n ],\n [\n 3523025.290853254,\n 5752320.4393789358\n ],\n [\n 3522181.9700715416,\n 5746808.8859115178\n ],\n [\n 3531347.6256220187,\n 5748185.8522464707\n ],\n [\n 3530138.6548991445,\n 5737303.7716195555\n ],\n [\n 3525818.084766577,\n 5723573.9568773992\n ],\n [\n 3530455.4859661362,\n 5723798.1047803881\n ],\n [\n 3528924.4766209414,\n 5721351.5218874197\n ],\n [\n 3523070.5236526416,\n 5719044.8562405137\n ],\n [\n 3524603.0147794806,\n 5717491.2277388889\n ],\n [\n 3520561.9854983916,\n 5709122.9644377604\n ],\n [\n 3515576.2447461095,\n 5705707.6914275726\n ],\n [\n 3514925.1214373852,\n 5702549.6671367111\n ],\n [\n 3510983.0960355494,\n 5700337.8754208274\n ],\n [\n 3507554.9044111446,\n 5700780.0367017193\n ],\n [\n 3505875.6567809652,\n 5705238.8299312703\n ],\n [\n 3501068.9273003335,\n 5708144.4145278726\n ],\n [\n 3493481.3893631604,\n 5705006.7893563118\n ],\n [\n 3495486.2723003584,\n 5695033.5096952291\n ],\n [\n 3487092.8830240588,\n 5693984.3327005329\n ],\n [\n 3478098.1711568064,\n 5691979.9560178882\n ],\n [\n 3470564.1349909166,\n 5682285.2168887602\n ],\n [\n 3472321.6289579044,\n 5678561.7930466589\n ],\n [\n 3480242.9781700782,\n 5681704.1365179941\n ],\n [\n 3482531.6234846874,\n 5670756.3682026779\n ],\n [\n 3478703.4031630475,\n 5666065.6576269772\n ],\n [\n 3479299.5390543016,\n 5663197.6244847337\n ],\n [\n 3476066.6090996503,\n 5661389.358788928\n ],\n [\n 3466708.3078764328,\n 5661993.1278259987\n ],\n [\n 3468070.104050932,\n 5653902.1312206704\n ],\n [\n 3460909.0517494865,\n 5642310.59995\n ],\n [\n 3455235.7066972801,\n 5636303.2577909315\n ],\n [\n 3450712.3612730294,\n 5638488.3772231052\n ],\n [\n 3443440.0761954072,\n 5632575.1928710276\n ],\n [\n 3439308.1902859993,\n 5627939.3903268781\n ],\n [\n 3441783.7754965182,\n 5623139.8062560717\n ],\n [\n 3438838.0181758674,\n 5616717.762588284\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"12\",\n \"adm1_code\": \"DEU-1573\",\n \"OBJECTID_1\": \"1516\",\n \"diss_me\": \"1573\",\n \"adm1_cod_1\": \"DEU-1573\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Baden-Württemberg\",\n \"name_alt\": null,\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.BW\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"15\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"BW\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"17\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM01\",\n \"fips_alt\": null,\n \"woe_id\": \"2345481\",\n \"woe_label\": \"Baden-Wurttemberg, DE, Germany\",\n \"woe_name\": \"Baden-Württemberg\",\n \"latitude\": \"48.59\",\n \"longitude\": \"9.00328\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2953481\",\n \"gn_name\": \"Baden-Wuerttemberg\",\n \"gns_id\": \"-1743106\",\n \"gns_name\": \"Baden-Wurttemberg\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.01\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM01\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3441413.1035388974,\n 5424738.8449200103\n ],\n [\n 3462173.0401205476,\n 5462228.3351949146\n ],\n [\n 3463300.0906483554,\n 5478415.3615263375\n ],\n [\n 3457830.8811206338,\n 5493673.0699443156\n ],\n [\n 3463711.7080498426,\n 5492955.3966393284\n ],\n [\n 3468596.5891445591,\n 5487801.5832253546\n ],\n [\n 3472314.7994839814,\n 5489979.6376655754\n ],\n [\n 3471193.28598797,\n 5497091.6041746819\n ],\n [\n 3476270.1188411755,\n 5498354.3952498306\n ],\n [\n 3479600.3046743623,\n 5489358.4316641716\n ],\n [\n 3492069.8971853391,\n 5485360.722180808\n ],\n [\n 3489052.2447243668,\n 5482837.3566248845\n ],\n [\n 3486398.2881462742,\n 5474042.1804142566\n ],\n [\n 3488841.5516411392,\n 5473151.6657701498\n ],\n [\n 3496055.1333653242,\n 5479681.4650302604\n ],\n [\n 3496946.0138544249,\n 5485085.7153924536\n ],\n [\n 3502541.2115189768,\n 5484821.1008404233\n ],\n [\n 3509069.49997,\n 5486471.6288755341\n ],\n [\n 3505792.5326571916,\n 5492886.3640927905\n ],\n [\n 3508004.7275028112,\n 5493032.8392732944\n ],\n [\n 3518325.600151998,\n 5493330.7812480545\n ],\n [\n 3520685.2364013265,\n 5498793.0887854239\n ],\n [\n 3527193.7326927111,\n 5501474.0234873584\n ],\n [\n 3529207.3879846265,\n 5500329.3255963055\n ],\n [\n 3530810.1855651978,\n 5507912.8665117286\n ],\n [\n 3522607.3664702717,\n 5510533.3209668808\n ],\n [\n 3522498.7099780627,\n 5514265.6125144539\n ],\n [\n 3525335.9484673571,\n 5516510.933784782\n ],\n [\n 3535345.8245763546,\n 5517624.6485599363\n ],\n [\n 3543354.8998105251,\n 5514967.3727186071\n ],\n [\n 3546539.9080542442,\n 5516416.3428387139\n ],\n [\n 3545480.2621061597,\n 5506998.8894933118\n ],\n [\n 3548880.8715447127,\n 5506083.0556571763\n ],\n [\n 3551176.5391815607,\n 5509357.2814978566\n ],\n [\n 3552489.5273762518,\n 5505757.5850912258\n ],\n [\n 3557139.2306370987,\n 5509661.1895087473\n ],\n [\n 3560005.6028370573,\n 5506214.9098258298\n ],\n [\n 3560208.8010403323,\n 5502015.7024308359\n ],\n [\n 3563761.6499401266,\n 5497211.0637213998\n ],\n [\n 3560708.0498845158,\n 5490710.2006405825\n ],\n [\n 3561886.1846542899,\n 5489700.4107388947\n ],\n [\n 3566013.3375535863,\n 5493864.1031941669\n ],\n [\n 3567840.6018891246,\n 5483063.8994000871\n ],\n [\n 3573881.9593119058,\n 5482987.1144731594\n ],\n [\n 3577176.3558150646,\n 5486245.6809542198\n ],\n [\n 3578523.3819369273,\n 5490167.6813984727\n ],\n [\n 3581644.3427704326,\n 5486557.8843275979\n ],\n [\n 3580825.872080544,\n 5478633.7955291895\n ],\n [\n 3582846.7077056891,\n 5477603.5611078702\n ],\n [\n 3585018.2661472317,\n 5472469.5360561004\n ],\n [\n 3581463.7540525994,\n 5470771.6749604018\n ],\n [\n 3584382.777422816,\n 5460337.6364304721\n ],\n [\n 3582413.875438883,\n 5459974.4160899296\n ],\n [\n 3583564.5297398535,\n 5452545.6756128054\n ],\n [\n 3592245.8891499159,\n 5443944.4963075556\n ],\n [\n 3593147.1400163225,\n 5435435.6389526604\n ],\n [\n 3599011.9484724626,\n 5433669.2124226196\n ],\n [\n 3606859.6900644084,\n 5423359.0073309727\n ],\n [\n 3607096.9641639437,\n 5411585.8563470664\n ],\n [\n 3605288.9192014784,\n 5404018.894093167\n ],\n [\n 3610040.9729735483,\n 5396732.7561689578\n ],\n [\n 3605494.6288470197,\n 5393679.6094944002\n ],\n [\n 3604817.5383069692,\n 5396914.4062103806\n ],\n [\n 3601043.7237907918,\n 5392675.2968838485\n ],\n [\n 3595531.1762953508,\n 5396915.3128908044\n ],\n [\n 3593537.9326087711,\n 5394395.9917849256\n ],\n [\n 3594990.0970565821,\n 5390440.2955783168\n ],\n [\n 3598254.0374123072,\n 5388042.2132638032\n ],\n [\n 3596820.2459671348,\n 5386336.2469680198\n ],\n [\n 3597104.90080478,\n 5377768.9604256051\n ],\n [\n 3592397.2803958142,\n 5374804.8767391955\n ],\n [\n 3585285.3429935728,\n 5370319.6556346128\n ],\n [\n 3583771.9889397854,\n 5372636.0281001786\n ],\n [\n 3578955.5050633829,\n 5370940.3940610792\n ],\n [\n 3572624.432680374,\n 5360747.4124220517\n ],\n [\n 3578187.6194506902,\n 5352316.3667016691\n ],\n [\n 3582536.9707668643,\n 5334936.9094386967\n ],\n [\n 3584603.1174242902,\n 5330438.8159838542\n ],\n [\n 3584271.0151908011,\n 5322385.9982684879\n ],\n [\n 3581170.5874427473,\n 5314040.8154020924\n ],\n [\n 3582885.1004398358,\n 5311565.5902857054\n ],\n [\n 3582134.3343479666,\n 5304897.8270773264\n ],\n [\n 3584580.1453866977,\n 5298103.7145693144\n ],\n [\n 3580930.5669586663,\n 5294773.3959587673\n ],\n [\n 3583494.2047532503,\n 5292617.613166254\n ],\n [\n 3584928.4473972623,\n 5283809.5219843267\n ],\n [\n 3582086.3286339194,\n 5282857.9677951159\n ],\n [\n 3580805.8182427208,\n 5279501.6412465433\n ],\n [\n 3579419.406908934,\n 5282654.3130722083\n ],\n [\n 3571596.2949043298,\n 5280467.0692903223\n ],\n [\n 3564921.0598903387,\n 5282095.2396906596\n ],\n [\n 3553760.0831742487,\n 5274202.1924148183\n ],\n [\n 3551119.3500004988,\n 5274925.3375281552\n ],\n [\n 3545727.4155536136,\n 5271763.9444706095\n ],\n [\n 3538108.586976225,\n 5278216.6571631031\n ],\n [\n 3524201.4871307504,\n 5282560.200732233\n ],\n [\n 3505381.2646053382,\n 5297500.5593641382\n ],\n [\n 3513744.3973849737,\n 5281261.0549703501\n ],\n [\n 3501245.2564575989,\n 5282187.1291832635\n ],\n [\n 3492954.4217438856,\n 5279178.0382866459\n ],\n [\n 3470156.9156570975,\n 5295126.922488031\n ],\n [\n 3459797.2292908044,\n 5291776.8305603499\n ],\n [\n 3454288.3872752469,\n 5280872.8088062005\n ],\n [\n 3467574.511019954,\n 5280502.1190058449\n ],\n [\n 3458547.4047226133,\n 5271815.2668946693\n ],\n [\n 3438287.8564351345,\n 5275499.0383446272\n ],\n [\n 3431325.8307742607,\n 5270193.2645433815\n ],\n [\n 3418142.7353061661,\n 5269604.711872451\n ],\n [\n 3411241.1816176744,\n 5273572.6100377999\n ],\n [\n 3400901.6777409539,\n 5268058.8002021173\n ],\n [\n 3389002.1904692957,\n 5282303.4787578518\n ],\n [\n 3389551.2422212488,\n 5294829.8907658765\n ],\n [\n 3396957.1488953112,\n 5319103.1428725459\n ],\n [\n 3393692.7435733448,\n 5329429.7595380237\n ],\n [\n 3407518.0857715937,\n 5358145.5869738301\n ],\n [\n 3406601.0067125871,\n 5363861.6629127022\n ],\n [\n 3412357.6879469999,\n 5376321.143464623\n ],\n [\n 3412286.4552563648,\n 5386948.5981052546\n ],\n [\n 3424287.4372463357,\n 5402595.5740310866\n ],\n [\n 3434119.715337595,\n 5409591.547999708\n ],\n [\n 3441413.1035388974,\n 5424738.8449200103\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"13\",\n \"adm1_code\": \"DEU-1574\",\n \"OBJECTID_1\": \"1517\",\n \"diss_me\": \"1574\",\n \"adm1_cod_1\": \"DEU-1574\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Hessen\",\n \"name_alt\": \"Hesse\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.HE\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"19\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"HE\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"6\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM05\",\n \"fips_alt\": null,\n \"woe_id\": \"2345485\",\n \"woe_label\": \"Hesse, DE, Germany\",\n \"woe_name\": \"Hessen\",\n \"latitude\": \"50.6098\",\n \"longitude\": \"8.958729999999999\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2905330\",\n \"gn_name\": \"Land Hessen\",\n \"gns_id\": \"-1791414\",\n \"gns_name\": \"Hessen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.05\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM05\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3574817.4056062475,\n 5598257.4420703379\n ],\n [\n 3571078.9444448808,\n 5590634.6929859295\n ],\n [\n 3561061.3854291611,\n 5585008.1051580943\n ],\n [\n 3554503.9289892185,\n 5585281.3163722064\n ],\n [\n 3553322.554148009,\n 5574531.7938179336\n ],\n [\n 3548486.4890143084,\n 5571588.4039183576\n ],\n [\n 3547168.3691143082,\n 5566552.8579348298\n ],\n [\n 3536454.1115450612,\n 5566675.5268396242\n ],\n [\n 3535646.7908835602,\n 5560063.0808881437\n ],\n [\n 3537768.1315709203,\n 5559166.6873750146\n ],\n [\n 3536241.2263133698,\n 5552425.6098567126\n ],\n [\n 3529102.3323403024,\n 5550628.9499717057\n ],\n [\n 3523525.7989939875,\n 5555823.0760990549\n ],\n [\n 3516350.8844319284,\n 5556299.1656100359\n ],\n [\n 3510910.1904314789,\n 5552779.3399014063\n ],\n [\n 3507714.830290556,\n 5554233.6068744743\n ],\n [\n 3500735.6345797917,\n 5551049.7819365254\n ],\n [\n 3498323.6014661267,\n 5546150.3840967752\n ],\n [\n 3501924.5455787638,\n 5545078.5930615086\n ],\n [\n 3501918.8327689632,\n 5529980.5791802146\n ],\n [\n 3505048.3221994299,\n 5521439.4779663766\n ],\n [\n 3510146.6536235306,\n 5516639.2130606221\n ],\n [\n 3509617.7330651209,\n 5506477.500841843\n ],\n [\n 3508038.9263903359,\n 5500227.9951685322\n ],\n [\n 3505250.4010145608,\n 5497006.3185954299\n ],\n [\n 3508004.7275028112,\n 5493032.8392732944\n ],\n [\n 3505792.5326571916,\n 5492886.3640927905\n ],\n [\n 3509069.49997,\n 5486471.6288755341\n ],\n [\n 3502541.2115189768,\n 5484821.1008404233\n ],\n [\n 3496946.0138544249,\n 5485085.7153924536\n ],\n [\n 3496055.1333653242,\n 5479681.4650302604\n ],\n [\n 3488841.5516411392,\n 5473151.6657701498\n ],\n [\n 3486398.2881462742,\n 5474042.1804142566\n ],\n [\n 3489052.2447243668,\n 5482837.3566248845\n ],\n [\n 3492069.8971853391,\n 5485360.722180808\n ],\n [\n 3479600.3046743623,\n 5489358.4316641716\n ],\n [\n 3476270.1188411755,\n 5498354.3952498306\n ],\n [\n 3471193.28598797,\n 5497091.6041746819\n ],\n [\n 3472314.7994839814,\n 5489979.6376655754\n ],\n [\n 3468596.5891445591,\n 5487801.5832253546\n ],\n [\n 3463711.7080498426,\n 5492955.3966393284\n ],\n [\n 3457830.8811206338,\n 5493673.0699443156\n ],\n [\n 3453841.9804025455,\n 5503159.6692345878\n ],\n [\n 3458495.5004734448,\n 5514559.1553209331\n ],\n [\n 3452586.3951217886,\n 5528367.2193213543\n ],\n [\n 3452319.9802185413,\n 5536002.3603432896\n ],\n [\n 3444709.495428592,\n 5544811.9771885592\n ],\n [\n 3440828.5246273172,\n 5545698.4037055941\n ],\n [\n 3422434.0216260618,\n 5537934.5923802424\n ],\n [\n 3412023.655965697,\n 5546950.898131174\n ],\n [\n 3418083.6548039587,\n 5553784.5111388061\n ],\n [\n 3422876.6023717704,\n 5552937.0920662321\n ],\n [\n 3423056.5161700593,\n 5563089.1127727879\n ],\n [\n 3437471.8600296136,\n 5571557.030202195\n ],\n [\n 3432385.6108222404,\n 5582006.6984252753\n ],\n [\n 3427486.3471034807,\n 5584796.3907665983\n ],\n [\n 3429406.6760302559,\n 5598670.4881470185\n ],\n [\n 3436698.9808041384,\n 5599221.561436912\n ],\n [\n 3440788.8477046415,\n 5605767.4036669126\n ],\n [\n 3438838.0181758674,\n 5616717.762588284\n ],\n [\n 3441783.7754965182,\n 5623139.8062560717\n ],\n [\n 3439308.1902859993,\n 5627939.3903268781\n ],\n [\n 3443440.0761954072,\n 5632575.1928710276\n ],\n [\n 3450712.3612730294,\n 5638488.3772231052\n ],\n [\n 3455235.7066972801,\n 5636303.2577909315\n ],\n [\n 3460909.0517494865,\n 5642310.59995\n ],\n [\n 3468070.104050932,\n 5653902.1312206704\n ],\n [\n 3466708.3078764328,\n 5661993.1278259987\n ],\n [\n 3476066.6090996503,\n 5661389.358788928\n ],\n [\n 3479299.5390543016,\n 5663197.6244847337\n ],\n [\n 3478703.4031630475,\n 5666065.6576269772\n ],\n [\n 3482531.6234846874,\n 5670756.3682026779\n ],\n [\n 3480242.9781700782,\n 5681704.1365179941\n ],\n [\n 3472321.6289579044,\n 5678561.7930466589\n ],\n [\n 3470564.1349909166,\n 5682285.2168887602\n ],\n [\n 3478098.1711568064,\n 5691979.9560178882\n ],\n [\n 3487092.8830240588,\n 5693984.3327005329\n ],\n [\n 3495486.2723003584,\n 5695033.5096952291\n ],\n [\n 3493481.3893631604,\n 5705006.7893563118\n ],\n [\n 3501068.9273003335,\n 5708144.4145278726\n ],\n [\n 3505875.6567809652,\n 5705238.8299312703\n ],\n [\n 3507554.9044111446,\n 5700780.0367017193\n ],\n [\n 3510983.0960355494,\n 5700337.8754208274\n ],\n [\n 3514925.1214373852,\n 5702549.6671367111\n ],\n [\n 3515576.2447461095,\n 5705707.6914275726\n ],\n [\n 3520561.9854983916,\n 5709122.9644377604\n ],\n [\n 3524603.0147794806,\n 5717491.2277388889\n ],\n [\n 3523070.5236526416,\n 5719044.8562405137\n ],\n [\n 3528924.4766209414,\n 5721351.5218874197\n ],\n [\n 3530455.4859661362,\n 5723798.1047803881\n ],\n [\n 3534226.8905062792,\n 5721936.5230261441\n ],\n [\n 3538023.0338339861,\n 5722871.9953770936\n ],\n [\n 3543159.0281349747,\n 5721711.6281607887\n ],\n [\n 3547558.9102820596,\n 5715352.1442766832\n ],\n [\n 3544642.9489397793,\n 5715322.7546808505\n ],\n [\n 3541427.0530289891,\n 5708583.377967434\n ],\n [\n 3544378.4200985883,\n 5703761.8090163535\n ],\n [\n 3544011.9748935108,\n 5696296.3759464175\n ],\n [\n 3540504.4158721655,\n 5696031.611479966\n ],\n [\n 3539668.6032787417,\n 5689741.4874358121\n ],\n [\n 3547588.8435190055,\n 5686762.122029556\n ],\n [\n 3549624.2787566381,\n 5684174.2859604955\n ],\n [\n 3553132.3127446934,\n 5686190.0345269963\n ],\n [\n 3549697.4774175971,\n 5692215.0098583559\n ],\n [\n 3557474.3696721108,\n 5696424.5482411729\n ],\n [\n 3559629.6316318894,\n 5693246.9378643679\n ],\n [\n 3560024.2843798888,\n 5697322.0626973845\n ],\n [\n 3562896.1835305644,\n 5698276.577285951\n ],\n [\n 3566077.5702712322,\n 5694404.3259839863\n ],\n [\n 3564312.7318813005,\n 5691987.1708498131\n ],\n [\n 3566034.6785900695,\n 5685742.3244812824\n ],\n [\n 3573198.2449193862,\n 5682792.5178340524\n ],\n [\n 3575528.1127700228,\n 5676892.8194844155\n ],\n [\n 3586006.8405960761,\n 5672728.1137020076\n ],\n [\n 3583764.4426440145,\n 5665075.652521369\n ],\n [\n 3582117.5519434675,\n 5668271.7900177678\n ],\n [\n 3578798.7772993003,\n 5667248.2472233446\n ],\n [\n 3581851.2486287467,\n 5665001.7837908594\n ],\n [\n 3580088.3767739702,\n 5658270.1789641948\n ],\n [\n 3583664.5405275868,\n 5657171.22150579\n ],\n [\n 3583383.0604236061,\n 5651698.8799884953\n ],\n [\n 3573767.2356044655,\n 5652811.9528761469\n ],\n [\n 3571869.1755224951,\n 5650014.132858675\n ],\n [\n 3573185.653422052,\n 5645450.4846842652\n ],\n [\n 3567177.6235405561,\n 5645472.6461312221\n ],\n [\n 3568515.6242985181,\n 5641517.5843244502\n ],\n [\n 3570742.7824758831,\n 5643197.4355528848\n ],\n [\n 3574302.524281817,\n 5638981.32835175\n ],\n [\n 3571762.6630286835,\n 5633277.0861994652\n ],\n [\n 3566901.1734591089,\n 5631378.4425946446\n ],\n [\n 3566734.0008735228,\n 5627081.9127885103\n ],\n [\n 3564520.4169722269,\n 5617718.1240404369\n ],\n [\n 3562073.2358358465,\n 5612230.2116798423\n ],\n [\n 3566738.0713194893,\n 5610456.5903575188\n ],\n [\n 3567228.3343895781,\n 5614423.7075280305\n ],\n [\n 3570507.0136910323,\n 5615967.2634153562\n ],\n [\n 3574366.9579191515,\n 5615279.0739612924\n ],\n [\n 3576134.9967648848,\n 5610012.6024658671\n ],\n [\n 3574029.2307750289,\n 5608145.7005352741\n ],\n [\n 3574817.4056062475,\n 5598257.4420703379\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"15\",\n \"adm1_code\": \"DEU-1576\",\n \"OBJECTID_1\": \"6321\",\n \"diss_me\": \"1576\",\n \"adm1_cod_1\": \"DEU-1576\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"4\",\n \"name\": \"Niedersachsen\",\n \"name_alt\": \"Lower Saxony\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.NI\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"4\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"NI\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"13\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM06\",\n \"fips_alt\": null,\n \"woe_id\": \"2345486\",\n \"woe_label\": \"Lower Saxony, DE, Germany\",\n \"woe_name\": \"Niedersachsen\",\n \"latitude\": \"52.775\",\n \"longitude\": \"8.861840000000001\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2862926\",\n \"gn_name\": \"Land Niedersachsen\",\n \"gns_id\": \"-1833951\",\n \"gns_name\": \"Niedersachsen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.06\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM06\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3550632.9068574295,\n 5935231.2751757316\n ],\n [\n 3556965.7078730096,\n 5922524.892838276\n ],\n [\n 3565509.5510616428,\n 5920653.881467809\n ],\n [\n 3571948.8982978156,\n 5924735.9639584571\n ],\n [\n 3578903.5037427521,\n 5919670.0220713178\n ],\n [\n 3588249.9672536696,\n 5922981.0870051431\n ],\n [\n 3601710.25338207,\n 5916543.2227652604\n ],\n [\n 3606560.2346579311,\n 5916586.2707823943\n ],\n [\n 3639785.0696396269,\n 5892100.1719632307\n ],\n [\n 3643302.4959958429,\n 5895374.819350563\n ],\n [\n 3652231.3320433423,\n 5889511.3574547973\n ],\n [\n 3661924.2617668891,\n 5885747.2731848815\n ],\n [\n 3673094.9477649452,\n 5881900.7282523569\n ],\n [\n 3671922.8545249584,\n 5878200.7057062704\n ],\n [\n 3668261.3414150965,\n 5877081.257549637\n ],\n [\n 3668159.9163241819,\n 5870732.0661629066\n ],\n [\n 3662276.0322155575,\n 5866329.1451455932\n ],\n [\n 3651333.2684875731,\n 5862791.5747473724\n ],\n [\n 3648934.7473273841,\n 5864932.535072092\n ],\n [\n 3635509.5308777369,\n 5866108.0874277316\n ],\n [\n 3632019.5397876874,\n 5860810.2693054294\n ],\n [\n 3618718.1755545707,\n 5857485.6109101465\n ],\n [\n 3618514.5615372388,\n 5851704.8690217081\n ],\n [\n 3621666.099287462,\n 5844655.1274119448\n ],\n [\n 3624130.2654388198,\n 5843359.7207674412\n ],\n [\n 3630000.1103232088,\n 5833404.7902165819\n ],\n [\n 3633938.0988071673,\n 5832809.371821166\n ],\n [\n 3632514.9164062119,\n 5825233.8930791495\n ],\n [\n 3635920.4080108143,\n 5820057.3019131161\n ],\n [\n 3631772.1436179769,\n 5815934.1879419796\n ],\n [\n 3641160.67654408,\n 5806181.3832803816\n ],\n [\n 3636231.0192434615,\n 5802737.3780365922\n ],\n [\n 3637457.8965149773,\n 5796638.6178118531\n ],\n [\n 3642306.9390903679,\n 5789843.2179832282\n ],\n [\n 3638079.8541451683,\n 5785463.3934184005\n ],\n [\n 3639545.4940197729,\n 5779363.0596436961\n ],\n [\n 3633454.749544749,\n 5775329.8780293567\n ],\n [\n 3634968.6410203772,\n 5771763.776092371\n ],\n [\n 3626913.4232676532,\n 5769958.5594496056\n ],\n [\n 3613361.9478737903,\n 5768780.5365629746\n ],\n [\n 3607797.4707193407,\n 5764671.3332481934\n ],\n [\n 3613030.801248,\n 5759432.3883808982\n ],\n [\n 3610948.6257142145,\n 5755584.0213080486\n ],\n [\n 3612899.5315223499,\n 5751066.7033877522\n ],\n [\n 3608880.3975983351,\n 5746675.8150769975\n ],\n [\n 3609394.947188708,\n 5739233.3662485098\n ],\n [\n 3615012.1854641521,\n 5731490.6919269329\n ],\n [\n 3617510.6850254778,\n 5723772.3194554569\n ],\n [\n 3611631.7745252792,\n 5716427.2014618823\n ],\n [\n 3605003.1711668326,\n 5714474.0370600866\n ],\n [\n 3598512.0890342994,\n 5718303.0865497692\n ],\n [\n 3595277.3502693637,\n 5717559.7764455471\n ],\n [\n 3594658.1928674169,\n 5712729.2957265247\n ],\n [\n 3586116.3035516692,\n 5704751.2523524342\n ],\n [\n 3582986.9514478082,\n 5705509.9902624423\n ],\n [\n 3579943.6412702766,\n 5700165.6181104556\n ],\n [\n 3572713.6175525445,\n 5700091.8007927611\n ],\n [\n 3566077.5702712322,\n 5694404.3259839863\n ],\n [\n 3562896.1835305644,\n 5698276.577285951\n ],\n [\n 3560024.2843798888,\n 5697322.0626973845\n ],\n [\n 3559629.6316318894,\n 5693246.9378643679\n ],\n [\n 3557474.3696721108,\n 5696424.5482411729\n ],\n [\n 3549697.4774175971,\n 5692215.0098583559\n ],\n [\n 3553132.3127446934,\n 5686190.0345269963\n ],\n [\n 3549624.2787566381,\n 5684174.2859604955\n ],\n [\n 3547588.8435190055,\n 5686762.122029556\n ],\n [\n 3539668.6032787417,\n 5689741.4874358121\n ],\n [\n 3540504.4158721655,\n 5696031.611479966\n ],\n [\n 3544011.9748935108,\n 5696296.3759464175\n ],\n [\n 3544378.4200985883,\n 5703761.8090163535\n ],\n [\n 3541427.0530289891,\n 5708583.377967434\n ],\n [\n 3544642.9489397793,\n 5715322.7546808505\n ],\n [\n 3547558.9102820596,\n 5715352.1442766832\n ],\n [\n 3543159.0281349747,\n 5721711.6281607887\n ],\n [\n 3538023.0338339861,\n 5722871.9953770936\n ],\n [\n 3534226.8905062792,\n 5721936.5230261441\n ],\n [\n 3530455.4859661362,\n 5723798.1047803881\n ],\n [\n 3525818.084766577,\n 5723573.9568773992\n ],\n [\n 3530138.6548991445,\n 5737303.7716195555\n ],\n [\n 3531347.6256220187,\n 5748185.8522464707\n ],\n [\n 3522181.9700715416,\n 5746808.8859115178\n ],\n [\n 3523025.290853254,\n 5752320.4393789358\n ],\n [\n 3517560.304288995,\n 5754143.8004587572\n ],\n [\n 3519653.3203679961,\n 5759759.9832918076\n ],\n [\n 3511749.4542092225,\n 5761204.0843012407\n ],\n [\n 3513012.1422050977,\n 5771107.5125731593\n ],\n [\n 3509276.9756461484,\n 5777434.9458997874\n ],\n [\n 3499759.3356492291,\n 5777670.6405627411\n ],\n [\n 3499183.6395015051,\n 5783721.9442453487\n ],\n [\n 3504814.6166028902,\n 5789111.4519898761\n ],\n [\n 3498856.9730779752,\n 5792231.21404994\n ],\n [\n 3501228.9466671981,\n 5800697.4286702024\n ],\n [\n 3508734.1906899149,\n 5808202.5161512913\n ],\n [\n 3505512.7507341616,\n 5818113.1914334437\n ],\n [\n 3497362.7964672055,\n 5808264.4660474733\n ],\n [\n 3488204.8196057775,\n 5806021.1578105967\n ],\n [\n 3480044.9075819287,\n 5808105.8626193544\n ],\n [\n 3479867.1735936282,\n 5816213.7362615485\n ],\n [\n 3475033.4589592386,\n 5821106.0705908509\n ],\n [\n 3465828.1105889371,\n 5819223.8873425638\n ],\n [\n 3462486.1358933239,\n 5813475.3430145392\n ],\n [\n 3452513.9193353336,\n 5813170.6235983437\n ],\n [\n 3454665.8384169149,\n 5807279.4963338831\n ],\n [\n 3461024.8513124967,\n 5803711.8401982216\n ],\n [\n 3463355.0737599577,\n 5785668.4196412982\n ],\n [\n 3465646.1563843205,\n 5783918.4884388642\n ],\n [\n 3458464.1366839507,\n 5775302.8801533738\n ],\n [\n 3449806.276862137,\n 5777869.5358370543\n ],\n [\n 3443866.3179077418,\n 5772309.6550858961\n ],\n [\n 3429320.229406042,\n 5767538.2512281965\n ],\n [\n 3424043.0116273453,\n 5773317.3629900236\n ],\n [\n 3430848.1481474047,\n 5776941.4217684427\n ],\n [\n 3432793.2771179159,\n 5782578.7181442473\n ],\n [\n 3424868.898425628,\n 5786447.4626845969\n ],\n [\n 3430006.2427960923,\n 5797970.8222356346\n ],\n [\n 3425492.757720896,\n 5805288.4202747019\n ],\n [\n 3420259.1575914957,\n 5803751.5274206437\n ],\n [\n 3405503.5945286378,\n 5816570.4759445861\n ],\n [\n 3404900.1974876495,\n 5809887.5124256918\n ],\n [\n 3392025.9757624478,\n 5798862.5502476348\n ],\n [\n 3384012.9715766446,\n 5794350.67907946\n ],\n [\n 3365215.7405231372,\n 5791134.4245591592\n ],\n [\n 3362238.7512589549,\n 5814902.0341639277\n ],\n [\n 3343415.361510009,\n 5818165.0608863141\n ],\n [\n 3349108.9968962353,\n 5836405.5838817265\n ],\n [\n 3367138.1978925127,\n 5836588.6911443137\n ],\n [\n 3377978.5938670379,\n 5871789.2388360733\n ],\n [\n 3379497.5438460801,\n 5902801.0457823742\n ],\n [\n 3386958.4166595987,\n 5912384.9993838463\n ],\n [\n 3368491.1976311509,\n 5917721.1951329885\n ],\n [\n 3373321.4256524909,\n 5941022.1998136546\n ],\n [\n 3382766.2664820482,\n 5949643.7128865141\n ],\n [\n 3430791.1632321044,\n 5954859.5760023473\n ],\n [\n 3444864.3727772231,\n 5935897.0754981693\n ],\n [\n 3437552.1160068554,\n 5930291.0044142148\n ],\n [\n 3447162.8743102439,\n 5920011.8600732181\n ],\n [\n 3454923.7023514169,\n 5930895.0261556925\n ],\n [\n 3450845.0647243001,\n 5941532.4429137409\n ],\n [\n 3470633.9099116446,\n 5931964.1095968718\n ],\n [\n 3473640.484591655,\n 5928668.0521080317\n ],\n [\n 3476062.7607371015,\n 5931567.9643862806\n ],\n [\n 3475199.3643792034,\n 5941403.5468862616\n ],\n [\n 3467778.8065959434,\n 5942795.0136931287\n ],\n [\n 3471923.858467692,\n 5969539.9600837333\n ],\n [\n 3512239.2302019894,\n 5970199.5365770916\n ],\n [\n 3518067.5505578616,\n 5970323.7222689753\n ],\n [\n 3519393.374612669,\n 5968304.8412422938\n ],\n [\n 3537537.0645105471,\n 5940886.6664245054\n ],\n [\n 3550632.9068574295,\n 5935231.2751757316\n ]\n ],\n [\n [\n 3470648.2738475171,\n 5897758.2648433764\n ],\n [\n 3467459.3721810151,\n 5896352.760481637\n ],\n [\n 3473997.6676363903,\n 5894121.7778715324\n ],\n [\n 3480079.7036048737,\n 5882942.5270079691\n ],\n [\n 3480045.6539797694,\n 5879745.4698925437\n ],\n [\n 3491011.2500537927,\n 5879309.938417878\n ],\n [\n 3494265.4796796911,\n 5876757.5917747803\n ],\n [\n 3498170.5207677865,\n 5879865.4094565529\n ],\n [\n 3498339.9930427396,\n 5889002.5856371522\n ],\n [\n 3494135.47721026,\n 5889523.4182940461\n ],\n [\n 3482994.3597778352,\n 5895366.5686806049\n ],\n [\n 3470648.2738475171,\n 5897758.2648433764\n ]\n ]\n ]\n }\n },\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"cat\": \"16\",\n \"adm1_code\": \"DEU-1577\",\n \"OBJECTID_1\": \"1519\",\n \"diss_me\": \"1577\",\n \"adm1_cod_1\": \"DEU-1577\",\n \"iso_3166_2\": \"DE-\",\n \"wikipedia\": null,\n \"iso_a2\": \"DE\",\n \"adm0_sr\": \"1\",\n \"name\": \"Thüringen\",\n \"name_alt\": \"Thuringia\",\n \"name_local\": null,\n \"type\": \"Land\",\n \"type_en\": \"State\",\n \"code_local\": null,\n \"code_hasc\": \"DE.TH\",\n \"note\": null,\n \"hasc_maybe\": null,\n \"region\": null,\n \"region_cod\": null,\n \"provnum_ne\": \"20\",\n \"gadm_level\": \"1\",\n \"check_me\": \"20\",\n \"scalerank\": \"3\",\n \"datarank\": \"3\",\n \"abbrev\": null,\n \"postal\": \"TH\",\n \"area_sqkm\": \"0\",\n \"sameascity\": \"-99\",\n \"labelrank\": \"3\",\n \"featurecla\": \"Admin-1 scale rank\",\n \"name_len\": \"9\",\n \"mapcolor9\": \"5\",\n \"mapcolor13\": \"1\",\n \"fips\": \"GM15\",\n \"fips_alt\": null,\n \"woe_id\": \"2345495\",\n \"woe_label\": \"Thuringia, DE, Germany\",\n \"woe_name\": \"Thüringen\",\n \"latitude\": \"50.9052\",\n \"longitude\": \"11.0976\",\n \"sov_a3\": \"DEU\",\n \"adm0_a3\": \"DEU\",\n \"adm0_label\": \"2\",\n \"admin\": \"Germany\",\n \"geonunit\": \"Germany\",\n \"gu_a3\": \"DEU\",\n \"gn_id\": \"2822542\",\n \"gn_name\": \"Freistaat Thuringen\",\n \"gns_id\": \"-1874498\",\n \"gns_name\": \"Thuringen\",\n \"gn_level\": \"1\",\n \"gn_region\": null,\n \"gn_a1_code\": \"DE.15\",\n \"region_sub\": null,\n \"sub_code\": null,\n \"gns_level\": \"1\",\n \"gns_lang\": \"zho\",\n \"gns_adm1\": \"GM15\",\n \"gns_region\": null\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [\n [\n [\n 3728697.3410449172,\n 5665894.003271156\n ],\n [\n 3744176.9108976396,\n 5663770.8769144556\n ],\n [\n 3748992.2363486462,\n 5654296.6612281911\n ],\n [\n 3756509.8321495252,\n 5646715.3534608511\n ],\n [\n 3748218.9617048698,\n 5643708.7736610528\n ],\n [\n 3741232.331247753,\n 5637557.6046812981\n ],\n [\n 3729672.7793026781,\n 5633487.7130454583\n ],\n [\n 3728832.1004670118,\n 5625615.0790818483\n ],\n [\n 3734759.1665375163,\n 5620512.1446339721\n ],\n [\n 3730125.0831804471,\n 5614992.2367806258\n ],\n [\n 3725457.3308588881,\n 5614794.9990650406\n ],\n [\n 3722819.9620642923,\n 5607572.8059453368\n ],\n [\n 3716102.6109797498,\n 5603841.3164922409\n ],\n [\n 3711847.4358901861,\n 5605288.3101831255\n ],\n [\n 3707593.3788553113,\n 5598689.8272855673\n ],\n [\n 3706456.6357335709,\n 5590490.103557012\n ],\n [\n 3701124.6336581926,\n 5587599.6888292851\n ],\n [\n 3698749.3649529289,\n 5590010.1434312938\n ],\n [\n 3680049.0477793319,\n 5585432.8105548657\n ],\n [\n 3676626.67844284,\n 5587664.6132867765\n ],\n [\n 3675994.001566703,\n 5590758.7787582632\n ],\n [\n 3671958.3111791341,\n 5592357.348135368\n ],\n [\n 3672121.9713641307,\n 5600160.7438294999\n ],\n [\n 3666404.0989981135,\n 5600603.8442229992\n ],\n [\n 3664336.9864799059,\n 5597622.3606871739\n ],\n [\n 3659605.2232868215,\n 5595262.2291009063\n ],\n [\n 3662238.810322443,\n 5582653.1846054439\n ],\n [\n 3660745.4664473836,\n 5573283.5300583346\n ],\n [\n 3656266.8897332451,\n 5572781.6523313411\n ],\n [\n 3652087.5666547911,\n 5576864.6365224905\n ],\n [\n 3653432.929886797,\n 5578485.1134469826\n ],\n [\n 3650284.4903703765,\n 5583030.593772362\n ],\n [\n 3645868.0769925839,\n 5580963.0357561549\n ],\n [\n 3641467.2303942246,\n 5581085.1458215769\n ],\n [\n 3638188.6970979096,\n 5585165.1007029591\n ],\n [\n 3627205.3913595304,\n 5584768.6555711003\n ],\n [\n 3622821.4798547197,\n 5581827.2477174671\n ],\n [\n 3622115.8301066705,\n 5577492.5262480676\n ],\n [\n 3631003.5069937492,\n 5572109.5285800658\n ],\n [\n 3631250.6056273249,\n 5568820.599108696\n ],\n [\n 3623502.8652153891,\n 5568663.640977269\n ],\n [\n 3623231.2025344539,\n 5565109.5173362065\n ],\n [\n 3615378.8061682819,\n 5566488.7467001993\n ],\n [\n 3613301.3204261549,\n 5577745.2251591412\n ],\n [\n 3610451.0868479265,\n 5581336.1181971366\n ],\n [\n 3606720.0805508858,\n 5580673.1137679294\n ],\n [\n 3603043.3838240071,\n 5585677.0623686798\n ],\n [\n 3599920.250670508,\n 5585260.6331641655\n ],\n [\n 3599433.8822761257,\n 5588255.5182174174\n ],\n [\n 3593561.5613371767,\n 5595872.3240806991\n ],\n [\n 3587805.4131642585,\n 5597748.057573312\n ],\n [\n 3584213.7888737433,\n 5602032.7751879171\n ],\n [\n 3579781.59930187,\n 5603487.1175612584\n ],\n [\n 3574817.4056062475,\n 5598257.4420703379\n ],\n [\n 3574029.2307750289,\n 5608145.7005352741\n ],\n [\n 3576134.9967648848,\n 5610012.6024658671\n ],\n [\n 3574366.9579191515,\n 5615279.0739612924\n ],\n [\n 3570507.0136910323,\n 5615967.2634153562\n ],\n [\n 3567228.3343895781,\n 5614423.7075280305\n ],\n [\n 3566738.0713194893,\n 5610456.5903575188\n ],\n [\n 3562073.2358358465,\n 5612230.2116798423\n ],\n [\n 3564520.4169722269,\n 5617718.1240404369\n ],\n [\n 3566734.0008735228,\n 5627081.9127885103\n ],\n [\n 3566901.1734591089,\n 5631378.4425946446\n ],\n [\n 3571762.6630286835,\n 5633277.0861994652\n ],\n [\n 3574302.524281817,\n 5638981.32835175\n ],\n [\n 3570742.7824758831,\n 5643197.4355528848\n ],\n [\n 3568515.6242985181,\n 5641517.5843244502\n ],\n [\n 3567177.6235405561,\n 5645472.6461312221\n ],\n [\n 3573185.653422052,\n 5645450.4846842652\n ],\n [\n 3571869.1755224951,\n 5650014.132858675\n ],\n [\n 3573767.2356044655,\n 5652811.9528761469\n ],\n [\n 3583383.0604236061,\n 5651698.8799884953\n ],\n [\n 3583664.5405275868,\n 5657171.22150579\n ],\n [\n 3580088.3767739702,\n 5658270.1789641948\n ],\n [\n 3581851.2486287467,\n 5665001.7837908594\n ],\n [\n 3578798.7772993003,\n 5667248.2472233446\n ],\n [\n 3582117.5519434675,\n 5668271.7900177678\n ],\n [\n 3583764.4426440145,\n 5665075.652521369\n ],\n [\n 3586006.8405960761,\n 5672728.1137020076\n ],\n [\n 3575528.1127700228,\n 5676892.8194844155\n ],\n [\n 3573198.2449193862,\n 5682792.5178340524\n ],\n [\n 3566034.6785900695,\n 5685742.3244812824\n ],\n [\n 3564312.7318813005,\n 5691987.1708498131\n ],\n [\n 3566077.5702712322,\n 5694404.3259839863\n ],\n [\n 3572713.6175525445,\n 5700091.8007927611\n ],\n [\n 3579943.6412702766,\n 5700165.6181104556\n ],\n [\n 3582986.9514478082,\n 5705509.9902624423\n ],\n [\n 3586116.3035516692,\n 5704751.2523524342\n ],\n [\n 3594658.1928674169,\n 5712729.2957265247\n ],\n [\n 3595277.3502693637,\n 5717559.7764455471\n ],\n [\n 3598512.0890342994,\n 5718303.0865497692\n ],\n [\n 3605003.1711668326,\n 5714474.0370600866\n ],\n [\n 3611631.7745252792,\n 5716427.2014618823\n ],\n [\n 3617510.6850254778,\n 5723772.3194554569\n ],\n [\n 3634798.3906453014,\n 5719458.0870596841\n ],\n [\n 3632504.2172296499,\n 5716768.8556063659\n ],\n [\n 3639072.4658529945,\n 5698871.2434897516\n ],\n [\n 3661128.3753905562,\n 5696690.098692731\n ],\n [\n 3671078.403472946,\n 5684562.7217747746\n ],\n [\n 3662981.3890735451,\n 5678154.1523908963\n ],\n [\n 3669281.7923881463,\n 5672052.1862729536\n ],\n [\n 3670003.9710097802,\n 5665298.3177191904\n ],\n [\n 3688360.598657859,\n 5665165.5228766529\n ],\n [\n 3691711.4629774042,\n 5657002.0672275824\n ],\n [\n 3700671.5497429045,\n 5657917.8290444724\n ],\n [\n 3711102.7786706178,\n 5650136.7946595009\n ],\n [\n 3721967.7634851355,\n 5650922.120966264\n ],\n [\n 3724984.3058717526,\n 5648366.5871077562\n ],\n [\n 3729823.6229192242,\n 5657699.0347429402\n ],\n [\n 3728697.3410449172,\n 5665894.003271156\n ]\n ]\n ]\n }\n }\n ]\n}" }, { "path": "src/comps/blurforwarder/BlurForwarder.ts", "content": "import {Directive, ElementRef, Renderer} from \"@angular/core\";\n@Directive({\n selector: 'input,select,textarea',\n host: {\n '(blur)': 'onBlur($event)'\n }\n})\nexport class BlurForwarder {\n constructor(private elRef: ElementRef) {\n }\n\n onBlur($event) {\n // this.renderer.invokeElementMethod(this.elRef.nativeElement, 'dispatchEvent', [new CustomEvent('input-blur', {bubbles: true})]);\n // or just\n // don't error out on older browsers just fail silently\n try {\n this.elRef.nativeElement.dispatchEvent(new CustomEvent('input-blur', { bubbles: true }));\n } catch (e){\n\n }\n\n // you don't care about webworker compatibility\n }\n}" }, { "path": "src/comps/connect-form/connect-form.ts", "content": "import {Directive, EventEmitter, Input, Output} from '@angular/core';\nimport {FormGroupDirective} from '@angular/forms';\nimport {Subscription} from 'rxjs/Subscription';\nimport {Actions} from '@ngrx/effects';\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport * as _ from 'lodash';\nimport {ACTION_FORM_UPDATE} from \"../../store/actions/appdb.actions\";\n\nconst FORM_SUBMIT_SUCCESS = 'FORM_SUBMIT_SUCCESS';\nconst FORM_SUBMIT_ERROR = 'FORM_SUBMIT_ERROR';\n\nexport const formSuccessAction = path => ({\n type: FORM_SUBMIT_SUCCESS,\n payload: {\n path\n }\n});\n\nexport const formErrorAction = (path, error) => ({\n type: FORM_SUBMIT_ERROR,\n payload: {\n path,\n error\n }\n});\n\n@Directive({\n selector: '[connectForm]'\n})\nexport class ConnectFormDirective {\n @Input('connectForm') path: string;\n @Input() debounce: number = 300;\n @Output() error = new EventEmitter();\n @Output() success = new EventEmitter();\n formChange: Subscription;\n formSuccess: Subscription;\n formError: Subscription;\n\n constructor(private formGroupDirective: FormGroupDirective,\n private actions$: Actions,\n private yp: YellowPepperService) {\n }\n\n ngOnInit() {\n this.yp.ngrxStore.select(state => _.get(state, this.path))\n .take(1)\n .subscribe((val: Map) => {\n this.formGroupDirective.form.patchValue(val.toJSON());\n });\n\n this.formChange = this.formGroupDirective.form.valueChanges\n .debounceTime(this.debounce)\n .subscribe(value => {\n // remove the first level of store path, i.e 'appDb.contact' becomes just 'connect'\n this.yp.ngrxStore.dispatch({\n type: ACTION_FORM_UPDATE,\n payload: {\n value,\n path: this.path.split('.').slice(1, this.path.length - 1).join(),\n }\n });\n });\n\n this.formSuccess = this.actions$\n .ofType(FORM_SUBMIT_SUCCESS)\n .filter(({payload}) => payload.path === this.path)\n .subscribe(() => {\n this.formGroupDirective.form.reset();\n this.success.emit();\n });\n\n this.formError = this.actions$\n .ofType(FORM_SUBMIT_ERROR)\n .filter(({payload}) => payload.path === this.path)\n .subscribe(({payload}) => {\n return this.error.emit(payload.error)\n })\n }\n\n ngOnDestroy() {\n this.formChange.unsubscribe();\n this.formError.unsubscribe();\n this.formSuccess.unsubscribe();\n }\n\n}" }, { "path": "src/comps/contact-us/contact-us.ts", "content": "import {Component} from \"@angular/core\";\nimport {FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {EFFECT_CONTACT_US} from \"../../store/effects/appdb.effects\";\n\n@Component({\n selector: 'contact-us',\n template: `\n
        \n
        \n\n
        \n \n
        \n\n
        \n \n
        \n\n \n \n \n\n \n
        \n \n\n
        \n\n
        Success!
        \n
        {{error}}
        \n\n
        \n `\n})\nexport class ContactUs {\n options = [{id: 1, label: 'Support'}, {id: 2, label: 'Sales'}]\n error;\n success;\n contactForm: FormGroup;\n\n constructor(private yp: YellowPepperService) {\n }\n\n onError(error) {\n this.error = error;\n }\n\n onSuccess(e) {\n this.success = true;\n }\n\n ngOnInit() {\n this.contactForm = new FormGroup({\n email: new FormControl(null, Validators.email),\n message: new FormControl(null, Validators.required),\n category: new FormControl(this.options[1].id, Validators.required)\n // ,draft: new FormControl(false)\n });\n\n }\n\n // blog ref: https://netbasal.com/understanding-the-comparefn-input-in-angular-v4-4a401ef4fc4c\n // the trackBy Input is for performance optimization, and the compareFn used to identify specific member\n compareFn(optionOne, optionTwo): boolean {\n return optionOne === optionTwo;\n }\n\n submit(e) {\n this.success = false;\n this.yp.ngrxStore.dispatch({\n type: EFFECT_CONTACT_US\n })\n }\n}" }, { "path": "src/comps/disable-control/disable-control.ts", "content": "import {NgControl} from '@angular/forms';\nimport {Directive, Input} from \"@angular/core\";\n\n@Directive({\n selector: '[disableControl]'\n})\nexport class DisableControlDirective {\n\n @Input()\n set disableControl(condition: boolean) {\n const action = condition ? 'disable' : 'enable';\n this.ngControl.control[action]();\n }\n\n constructor(private ngControl: NgControl) {\n }\n\n}" }, { "path": "src/comps/draggable-list/draggable-list.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, TemplateRef} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {List} from \"immutable\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'draggable-list',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .dragch {\n float: right;\n padding-right: 10px;\n position: relative;\n top: 5px;\n }\n\n .lengthTimer {\n float: right;\n padding-right: 10px;\n }\n\n .listItems {\n cursor: pointer;\n }\n\n .listItems a i {\n display: inline;\n font-size: 40px;\n padding-right: 20px;\n }\n\n .listItems a span {\n display: inline;\n font-size: 1.5em;\n position: relative;\n top: -12px;\n }\n `],\n template: `\n {{me}}\n
        \n
        \n
        \n
      • \n \n \n
        • \n
        \n
        \n
        \n
        \n
      • \n \n {{item}}\n \n
        • \n
        \n
        \n
        \n `,\n})\nexport class DraggableList extends Compbaser implements AfterViewInit {\n\n private m_draggables;\n private target;\n private y;\n\n constructor(private el: ElementRef) {\n super();\n }\n\n m_items: List\n m_selectedIdx = -1;\n\n @Input() customTemplate: TemplateRef;\n\n @Input()\n set items(i_items: List) {\n // this.m_selectedIdx = -1;\n this.m_items = i_items;\n this.createSortable();\n }\n\n public deselect() {\n this.m_selectedIdx = -1;\n }\n\n @Output()\n onDragComplete: EventEmitter = new EventEmitter();\n\n @Output()\n onItemSelected: EventEmitter = new EventEmitter();\n\n private _onItemSelected(item, event, i) {\n this.m_selectedIdx = i;\n this.onItemSelected.emit({item, event, i})\n }\n\n /**\n Create a draggable sortable list\n @method _createSortable\n @param {String} i_selector\n **/\n @timeout(300)\n public createSortable() {\n var self = this;\n\n var selector = '.sortableList';\n if (jQuery(selector).children().length == 0) return;\n var sortable = document.querySelector(selector);\n if (this.m_draggables) {\n this.m_draggables.forEach((drag) => {\n drag.kill()\n });\n // var a = Draggable.get(\".sortableList\");\n // var sortable = document.querySelector(selector);\n // var a = Draggable.get(sortable);\n // con(a);\n // Draggable.get(\".sortableList\").kill();\n }\n\n self.m_draggables = Draggable.create(sortable.children, {\n type: \"y\",\n bounds: sortable,\n dragClickables: true,\n edgeResistance: 1,\n onPress: self._sortablePress,\n onDragStart: self._sortableDragStart,\n onDrag: self._sortableDrag,\n liveSnap: self._sortableSnap,\n onDragEnd: function () {\n self.m_selectedIdx = -1;\n var t = this.target,\n max = t.kids.length - 1,\n newIndex = Math.round(this.y / t.currentHeight);\n newIndex += (newIndex < 0 ? -1 : 0) + t.currentIndex;\n if (newIndex === max) {\n t.parentNode.appendChild(t);\n } else {\n t.parentNode.insertBefore(t, t.kids[newIndex + 1]);\n }\n TweenLite.set(t.kids, {yPercent: 0, overwrite: \"all\"});\n TweenLite.set(t, {y: 0, color: \"\"});\n var items = jQuery('.sortableList', self.el.nativeElement).children();\n self.onDragComplete.emit(items)\n\n //_.each(self.m_draggables, function(i){\n // this.enabled(false);\n //});\n }\n });\n }\n\n\n /**\n Sortable list on press\n @method _sortablePress\n **/\n _sortablePress() {\n var t = this.target,\n i = 0,\n child = t;\n while (child = child.previousSibling)\n if (child.nodeType === 1) i++;\n t.currentIndex = i;\n t.currentHeight = t.offsetHeight;\n t.kids = [].slice.call(t.parentNode.children); // convert to array\n }\n\n /**\n Sortable drag list on press\n @method _sortableDragStart\n **/\n _sortableDragStart() {\n TweenLite.set(this.target, {color: \"#88CE02\"});\n }\n\n /**\n Sortable drag list\n @method _sortableDrag\n **/\n _sortableDrag() {\n var t = this.target,\n elements = t.kids.slice(), // clone\n indexChange = Math.round(this.y / t.currentHeight),\n bound1 = t.currentIndex,\n bound2 = bound1 + indexChange;\n if (bound1 < bound2) { // moved down\n TweenLite.to(elements.splice(bound1 + 1, bound2 - bound1), 0.15, {yPercent: -100});\n TweenLite.to(elements, 0.15, {yPercent: 0});\n } else if (bound1 === bound2) {\n elements.splice(bound1, 1);\n TweenLite.to(elements, 0.15, {yPercent: 0});\n } else { // moved up\n TweenLite.to(elements.splice(bound2, bound1 - bound2), 0.15, {yPercent: 100});\n TweenLite.to(elements, 0.15, {yPercent: 0});\n }\n }\n\n /**\n snap to set rounder values\n @method _sortableSnap\n **/\n _sortableSnap(y) {\n return y;\n // enable code below to enable snapinnes on dragging\n // var h = this.target.currentHeight;\n // return Math.round(y / h) * h;\n }\n\n ngAfterViewInit() {\n\n\n }\n\n ngOnInit() {\n }\n\n destroy() {\n if (this.m_draggables) {\n this.m_draggables.forEach((drag) => {\n drag.kill()\n });\n }\n this.m_draggables = null;\n }\n}" }, { "path": "src/comps/duration-input/duration-input.component.css", "content": "div {\n display: inline-block;\n}\n\ninput {\n width: 22px;\n border: none;\n outline: 0;\n}\n\n.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {\n outline: 0;\n}\n\na {\n height: 12px;\n width: 12px;\n cursor: pointer;\n}\n\ni {\n font-size: 8px;\n position: relative;\n top: -5px;\n left: 5px;\n color: black;\n}\n\n.wrap {\n background-color: white;\n height: 35px;\n width: 100px;\n margin: 5px;\n padding: 5px;\n border: solid #cccccc 1px;\n height: 30px;\n}\n" }, { "path": "src/comps/duration-input/duration-input.component.html", "content": "
        \n
        \n
        \n \n \n \n
        \n
        \n \n \n \n \n \n \n
        \n\n
        \n
        \n" }, { "path": "src/comps/duration-input/duration-input.component.spec.ts", "content": "/* tslint:disable:no-unused-variable */\nimport { async, ComponentFixture, TestBed } from '@angular/core/testing';\nimport { By } from '@angular/platform-browser';\nimport { DebugElement } from '@angular/core';\n\nimport { DurationInputComponent } from './duration-input.component';\n\ndescribe('DurationInputComponent', () => {\n let component: DurationInputComponent;\n let fixture: ComponentFixture;\n\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [ DurationInputComponent ]\n })\n .compileComponents();\n }));\n\n beforeEach(() => {\n fixture = TestBed.createComponent(DurationInputComponent);\n component = fixture.componentInstance;\n fixture.detectChanges();\n });\n\n it('should create', () => {\n expect(component).toBeTruthy();\n });\n});\n" }, { "path": "src/comps/duration-input/duration-input.component.ts", "content": "import {Component, EventEmitter, Input, OnInit, Output} from \"@angular/core\";\n\n@Component({\n selector: 'app-duration-input',\n templateUrl: './duration-input.component.html',\n styleUrls: ['./duration-input.component.css']\n})\nexport class DurationInputComponent implements OnInit {\n hours = 0;\n minutes = 0;\n seconds = 1;\n hoursOutput = \"00\";\n minutesOutput = \"00\";\n secondsOutput = \"01\";\n focus = \"second\";\n focusedItem;\n timer;\n duration = 0;\n prevDuration = 0;\n\n @Input()\n set setDuration(i_duration: number) {\n i_duration = Math.round(i_duration);\n if (this.duration == i_duration || i_duration == -1) return;\n console.log(`>>>>>>>> setting new duration old ${this.duration} > ${i_duration}`);\n this.duration = i_duration;\n this.calcSeconds();\n this.updateDisplay();\n }\n\n @Output() durationChange = new EventEmitter();\n\n constructor() {\n }\n\n ngOnInit() {\n document.body.onmouseup = () => {\n clearInterval(this.timer);\n }\n this.calcSeconds();\n this.updateDisplay();\n }\n\n calcSeconds() {\n var totalSeconds = this.duration;\n this.hours = Math.floor(totalSeconds / 3600);\n totalSeconds -= this.hours * 3600;\n this.minutes = Math.floor(totalSeconds / 60);\n totalSeconds -= this.minutes * 60;\n this.seconds = totalSeconds;\n }\n\n increment() {\n // console.log('increment');\n if (this.focusedItem) {\n this.focusedItem.focus();\n }\n switch (this.focus) {\n case \"hour\":\n ++this.hours;\n break;\n case \"minute\":\n ++this.minutes;\n break;\n case \"second\":\n ++this.seconds;\n break;\n default:\n break;\n }\n if (this.seconds == 60) {\n this.seconds = 0;\n this.minutes++;\n }\n if (this.minutes == 60) {\n this.minutes = 0;\n this.hours++;\n }\n if (this.hours > 24) {\n this.hours = 0;\n }\n this.updateDisplay();\n }\n\n decrement() {\n // console.log('decrement');\n switch (this.focus) {\n case \"hour\":\n if (--this.hours < 0) {\n this.hours = 24;\n }\n break;\n case \"minute\":\n if (this.minutes == 0 && this.hours == 0) break;\n if (--this.minutes == -1) {\n this.minutes = 59;\n this.hours--;\n }\n break;\n case \"second\":\n if (this.seconds == 0 && this.minutes == 0 && this.hours == 0) break;\n if (--this.seconds == -1) {\n this.seconds = 59;\n if (--this.minutes == -1) {\n this.minutes = 59;\n this.hours--;\n }\n }\n break;\n default:\n break;\n }\n this.updateDisplay();\n }\n\n notifyChanges() {\n const newDuration = this.hours * 60 * 60 + this.minutes * 60 + this.seconds;\n if (newDuration != this.prevDuration) {\n this.prevDuration = newDuration;\n // console.log('change emitted ' + newDuration);\n this.durationChange.emit(newDuration);\n }\n\n }\n\n updateDisplay() {\n this.secondsOutput = this.padLeft(this.seconds);\n this.minutesOutput = this.padLeft(this.minutes);\n this.hoursOutput = this.padLeft(this.hours);\n }\n\n inputTime(e) {\n if (!/[0-9]/.test(e.key)) {\n e.preventDefault();\n } else {\n\n }\n }\n\n keyUp(e) {\n this.seconds = +this.secondsOutput;\n this.minutes = +this.minutesOutput;\n this.hours = +this.hoursOutput;\n if (!this.hours) {\n this.hours = 0;\n }\n if (this.hours > 24) {\n this.hours = 24;\n }\n\n if (!this.minutes) {\n this.minutes = 0;\n }\n if (this.minutes > 59) {\n this.minutes = 59;\n }\n\n if (!this.seconds) {\n this.seconds = 0;\n }\n if (this.seconds > 59) {\n this.seconds = 59;\n }\n this.updateDisplay();\n }\n\n setFocus(event, field) {\n this.focus = field;\n this.focusedItem = event.target;\n }\n\n mouseDownIncrement() {\n this.increment();\n // this.timer = setInterval(() => this.increment(), 150);\n }\n\n mouseUpIncrement() {\n // clearInterval(this.timer);\n }\n\n mouseDownDecrement() {\n this.decrement();\n // this.timer = setInterval(() => this.decrement(), 150);\n }\n\n mouseUpDecrement() {\n clearInterval(this.timer);\n }\n\n padLeft(n) {\n n = n.toString();\n n = \"00\".substring(0, 2 - n.length) + \"\" + n.toString();\n n = n.substring(n.length - 2);\n return n;\n }\n\n\n}\n" }, { "path": "src/comps/entry/AutoLogin.ts", "content": "import {Component, ChangeDetectionStrategy} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\n\n@Component({\n selector: 'AutoLogin',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `
        \n verifying access...\n
        `\n})\nexport class AutoLogin extends Compbaser {\n}" }, { "path": "src/comps/entry/LoginPanel.ts", "content": "import {Component, ElementRef, Injectable, ViewChild} from \"@angular/core\";\nimport {animate, keyframes, state, style, transition, trigger} from \"@angular/animations\";\nimport {ActivatedRoute} from \"@angular/router\";\nimport {LocalStorage} from \"../../services/LocalStorage\";\nimport {AuthService} from \"../../services/AuthService\";\nimport {Map} from \"immutable\";\nimport {ToastsManager} from \"ng2-toastr\";\nimport {ApplicationState} from \"../../store/application.state\";\nimport {Store} from \"@ngrx/store\";\nimport {UserModel} from \"../../models/UserModel\";\nimport {AuthenticateFlags} from \"../../store/actions/appdb.actions\";\nimport {Compbaser, NgmslibService} from \"ng-mslib\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {Lib} from \"../../Lib\";\n\nenum ViewMod {\n LOGIN,\n FORGOT_PASSWORD,\n CHANGE_PASSWORD,\n CHANGE_BUSINESS_NAME\n}\n\n@Injectable()\n@Component({\n selector: 'LoginPanel',\n providers: [LocalStorage],\n animations: [\n\n trigger('loginState', [\n state('inactive', style({\n backgroundColor: 'red',\n transform: 'scale(1)',\n alpha: 0\n })),\n state('default', style({\n backgroundColor: '#313131',\n transform: 'scale(1)',\n alpha: 1\n })),\n state('active', style({\n backgroundColor: 'green',\n transform: 'scale(0.98)'\n })),\n transition('* => active', animate('600ms ease-out')),\n transition('* => inactive', animate('2000ms ease-out'))\n ]),\n trigger('showTwoFactor', [\n state('true', style({\n transform: 'scale(1)'\n })),\n transition(':enter', [\n animate('1s 2s cubic-bezier(0.455,0.03,0.515,0.955)', keyframes([\n style({\n opacity: 0,\n transform: 'translateX(-400px)'\n }),\n style({\n opacity: 1,\n transform: 'translateX(0)'\n })\n ]))\n ]),\n transition(':leave', animate('500ms cubic-bezier(.17,.67,.83,.67)'))\n ])\n ],\n styles: [`\n a {\n color: gray;\n }\n\n a:visited {\n color: #b9b9b9;\n }\n\n a:hover {\n color: #b9b9b9;\n }\n `],\n template: ` \n \n `\n})\nexport class LoginPanel extends Compbaser {\n m_viewMod = ViewMod;\n m_currentViewMode = ViewMod.LOGIN;\n public m_user: string = '';\n public m_pass: string = '';\n public m_passNew: string = '';\n public m_passRepeat: string = '';\n public m_businessName: string = '';\n public m_twoFactor: string;\n public m_showTwoFactor: boolean = false;\n public m_rememberMe: any;\n public loginState: string = '';\n public userModel: UserModel;\n\n constructor(private ngmslibService: NgmslibService, private store: Store,\n private toast: ToastsManager,\n private rp: RedPepperService,\n private activatedRoute: ActivatedRoute,\n private authService: AuthService) {\n super();\n this.listenEvents();\n }\n\n @ViewChild('userPass') userPass: ElementRef;\n\n private listenEvents() {\n\n this.cancelOnDestroy(\n this.store.select(store => store.appDb.userModel)\n .subscribe((userModel: UserModel) => {\n this.userModel = userModel\n }, (e) => {\n console.error(e)\n })\n )\n\n this.cancelOnDestroy(\n this.store.select(store => store.appDb.appAuthStatus).subscribe((i_authStatus: Map) => {\n let authStatus = i_authStatus.get('authStatus')\n if (this.isAccessAllowed(authStatus) == false)\n return;\n switch (authStatus) {\n case AuthenticateFlags.TWO_FACTOR_ENABLED: {\n this.m_showTwoFactor = true;\n break;\n }\n case AuthenticateFlags.TWO_FACTOR_PASS: {\n this.loginState = 'active';\n break;\n }\n case AuthenticateFlags.AUTH_PASS_NO_TWO_FACTOR: {\n this.loginState = 'active';\n break;\n }\n }\n }, (e) => {\n console.error(e)\n })\n )\n\n this.cancelOnDestroy(\n this.activatedRoute.params.subscribe(params => {\n if (params['twoFactor']) {\n this.m_user = this.ngmslibService.base64().decode(params['user']);\n this.m_pass = this.ngmslibService.base64().decode(params['pass']);\n this.m_showTwoFactor = true;\n }\n }, (e) => console.error(e))\n )\n }\n\n passFocus() {\n // this.renderer.invokeElementMethod(this.userPass.nativeElement, 'focus', [])\n jQuery(this.userPass.nativeElement).focus();\n }\n\n onChangeBusinessName(){\n this.rp.changeBusinessName(this.m_user, this.m_pass, this.m_businessName, (value) => {\n if (!value.result)\n return bootbox.alert('Sorry there was a problem authenticating');\n bootbox.alert('Your business name has been renamed successfully');\n this.m_currentViewMode = ViewMod.LOGIN;\n })\n }\n\n onResetPassword() {\n if (!Lib.ValidateEmail(this.m_user))\n return bootbox.alert('user name must be in the form of an email address');\n this.rp.resetPassword(this.m_user, (value) => {\n if (!value.result)\n return bootbox.alert('Sorry no account found');\n bootbox.alert('Please check your email for a new password');\n this.m_currentViewMode = ViewMod.LOGIN;\n })\n }\n\n onChangePassword() {\n if (this.m_passNew != this.m_passRepeat)\n return bootbox.alert('passwords do not match')\n if (this.m_user.length < 2)\n return bootbox.alert('user name is too short')\n this.rp.changePassword(this.m_user, this.m_pass, this.m_passNew, (value) => {\n if (value.result == -1)\n return bootbox.alert('authentication for password change failed, try again');\n bootbox.alert('Password changed successfully');\n this.m_currentViewMode = ViewMod.LOGIN;\n })\n }\n\n onClickedLogin() {\n if (this.m_showTwoFactor) {\n // this.toast.warning('Authenticating Two factor...');\n this.authService.authServerTwoFactor(this.m_twoFactor);\n } else {\n // this.toast.info('Authenticating...');\n this.authService.authUser(this.m_user, this.m_pass, this.m_rememberMe);\n }\n }\n\n private isAccessAllowed(i_reason: AuthenticateFlags): boolean {\n let msg1: string;\n let msg2: string;\n // this.loginState = 'default';\n switch (i_reason) {\n case AuthenticateFlags.WRONG_PASS: {\n msg1 = 'User or password are incorrect...'\n msg2 = 'Please try again or click forgot password to reset your credentials'\n this.showMessage(msg1, msg2);\n this.loginState = 'inactive';\n return false;\n }\n case AuthenticateFlags.WRONG_TWO_FACTOR: {\n msg1 = 'Invalid token'\n msg2 = 'Wrong token entered or the 60 seconds limit may have exceeded, try again...'\n this.showMessage(msg1, msg2);\n this.loginState = 'inactive';\n return false;\n }\n case AuthenticateFlags.TWO_FACTOR_CHECK: {\n return false;\n }\n case AuthenticateFlags.TWO_FACTOR_FAIL: {\n msg1 = 'Two factor failed'\n msg2 = 'please try again...'\n this.showMessage(msg1, msg2);\n this.loginState = 'inactive';\n return false;\n }\n case AuthenticateFlags.TWO_FACTOR_PASS: {\n this.loginState = 'active';\n return true;\n }\n }\n }\n\n private showMessage(title, message) {\n setTimeout(() => {\n bootbox.dialog({\n closeButton: true,\n title: title,\n message: message\n });\n }, 200);\n }\n}" }, { "path": "src/comps/font-selector/font-selector.ts", "content": "import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Subject} from \"rxjs\";\nimport {FontLoaderService} from \"../../services/font-loader-service\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {Lib} from \"../../Lib\";\n\nexport interface IFontSelector {\n bold: boolean;\n italic: boolean;\n underline: boolean;\n alignment: 'left' | 'center' | 'right',\n font: string;\n color: string;\n size: number;\n}\n\n@Component({\n selector: 'font-selector',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n {{me}}\n
        \n
        \n \n
        \n
        \n \n \n \n \n
        \n
        \n \n \n \n \n\n
        \n
        \n
        \n
        \n
        \n
        \n
        \n\n `,\n styles: [`\n /*:host /deep/ .color-picker {*/\n /*position: relative;*/\n /*} */\n\n .fontSelection {\n width: 200px;\n }\n\n .offSet {\n position: relative;\n top: 5px;\n }\n\n input {\n height: 30px;\n }\n\n button {\n margin: 5px;\n height: 30px;\n }\n\n .colorPicker {\n width: 20px;\n float: left;\n display: inline-block;\n margin: 0 10px 0 0;\n padding: 15px 45px;\n border-radius: 0;\n border: 1px solid gray;\n background: #ffffff;\n padding: 10px 20px 10px 20px;\n text-decoration: none;\n }\n `]\n\n})\nexport class FontSelector extends Compbaser implements AfterViewInit {\n\n bold: boolean;\n italic: boolean;\n underline: boolean;\n alignment: 'left' | 'center' | 'right';\n m_fonts: Array;\n m_borderColorChanged = new Subject();\n m_moveColorPickerOnce = false;\n\n m_config: IFontSelector = {\n size: 12,\n alignment: 'right',\n bold: true,\n italic: true,\n font: 'Lora',\n underline: true,\n color: '#ff0000',\n }\n\n constructor(private fontService: FontLoaderService, private el: ElementRef) {\n super();\n this.m_fonts = this.fontService.getFonts();\n this._listenColorChanged();\n }\n\n @Input()\n set setConfig(i_config: IFontSelector) {\n if (!i_config) return;\n if (Lib.ColorToDecimal(i_config.color)==0){\n i_config.color = '#ffffff';\n };\n this.m_config = i_config\n }\n\n @Output()\n onChange: EventEmitter = new EventEmitter();\n\n _listenColorChanged() {\n this.cancelOnDestroy(\n //\n this.m_borderColorChanged\n .debounceTime(500)\n .filter(v => v != '#123')\n .skip(1)\n .subscribe((i_color) => {\n this.m_config.color = String(i_color);\n this.onChange.emit(this.m_config);\n }, (e) => console.error(e))\n )\n }\n\n @timeout(1)\n _moveColorPicker() {\n if (this.m_moveColorPickerOnce) return;\n this.m_moveColorPickerOnce = true;\n jQuery(\".color-picker\", this.el.nativeElement).css(\"left\", \"+=100\").css(\"top\", \"-=100\");\n ;\n }\n\n _onFontChanged(e) {\n this.m_config.font = e.target.value;\n this.onChange.emit(this.m_config);\n }\n\n _onFontSizeChanged(i_value) {\n this.m_config.size = i_value;\n this.onChange.emit(this.m_config);\n }\n\n _onFontStyleToggle(i_style) {\n this.m_config[i_style] = !this.m_config[i_style];\n this.onChange.emit(this.m_config);\n }\n\n _onAlignmentChange(direction: 'left' | 'center' | 'right') {\n this.m_config.alignment = direction;\n this.onChange.emit(this.m_config);\n }\n\n ngAfterViewInit() {\n\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/comps/hour-counter/hour-counter.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit, ElementRef, ViewChild, Input} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\n\n@Component({\n selector: 'hour-counter',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n \n \n \n \n\n \n \n\n `,\n})\nexport class HourCounter {\n\n constructor(private el: ElementRef) {\n document.body.onmouseup = () => {\n clearInterval(this.intIncrement);\n clearInterval(this.intDecrement);\n }\n\n }\n\n @ViewChild('hour')\n inputHour;\n\n @ViewChild('minute')\n inputMinute:ElementRef;\n\n @ViewChild('second')\n inputSeconds:ElementRef;\n\n @ViewChild('up')\n up:ElementRef;\n\n @ViewChild('down')\n down:ElementRef;\n\n\n\n intIncrement;\n intDecrement;\n currentFocus = 'second';\n\n setFocus(id) {\n this.currentFocus = id;\n this.inputHour.nativeElement.value;\n }\n\n intIncrementStart() {\n setInterval(this.increment,80);\n }\n\n intIncrementEnd() {\n clearInterval(this.intIncrement);\n }\n\n intDecrementStart() {\n setInterval(this.decrement,80)\n }\n\n intDecrementEnd() {\n clearInterval(this.intDecrement)\n }\n\n increment() {\n // document.getElementById(this.currentFocus).focus();\n var hr = this.inputHour.nativeElement.value;\n var min = this.inputMinute.nativeElement.value;\n var sec = this.inputSeconds.nativeElement.value;\n // var hr = document.getElementById('hour').value;\n // var min = document.getElementById('minute').value;\n // var sec = document.getElementById('second').value;\n // if (this.currentFocus == \"second\") {\n //\n // sec++;\n //\n // if (sec == 60) {\n // sec = 0;\n // min++;\n // if (min == 60) {\n // min = 0;\n // hr++;\n // }\n // }\n //\n // }\n // else if (this.currentFocus == \"minute\") {\n // min++;\n // if (min == 60) {\n // min = 0;\n // hr++;\n // }\n // }\n // else if (this.currentFocus == \"hour\") {\n // hr++;\n // }\n // document.getElementById('hour').value = this.padLeft(hr);\n // document.getElementById('minute').value = this.padLeft(min);\n // document.getElementById('second').value = this.padLeft(sec);\n // this.validate();\n }\n\n decrement() {\n // document.getElementById(this.currentFocus).focus();\n // var hr = document.getElementById('hour').value;\n // var min = document.getElementById('minute').value;\n // var sec = document.getElementById('second').value;\n // if (this.currentFocus == \"second\") {\n // if (hr == 0 && min == 0 && sec == 1) {\n // return;\n // }\n // sec--;\n // if (sec == -1) {\n // sec = 59;\n // min--;\n // if (min == -1) {\n // min = 59;\n // hr--;\n // }\n // }\n // }\n // else if (this.currentFocus == \"minute\") {\n // min--;\n // if (min == -1) {\n // min = 59;\n // hr--;\n // }\n // }\n // else if (this.currentFocus == \"hour\") {\n // hr--;\n // }\n // document.getElementById('hour').value = padLeft(hr);\n // document.getElementById('minute').value = padLeft(min);\n // document.getElementById('second').value = padLeft(sec);\n // this.validate();\n }\n\n\n padLeft(n) {\n n = n.toString();\n n = \"00\".substring(0, 2 - n.length) + \"\" + n.toString();\n n = n.substring(n.length - 2);\n return n;\n }\n\n validate() {\n // var val = document.getElementById(this.currentFocus).value;\n // if (isNaN(val)) {\n // document.getElementById(this.currentFocus).value = \"00\";\n // }\n // var hr = document.getElementById('hour').value;\n // var min = document.getElementById('minute').value;\n // var sec = document.getElementById('second').value;\n // if (hr > 24)\n // hr = 24;\n // if (hr < 0)\n // hr = 0;\n // if (min < 0)\n // min = 0;\n // if (min > 59)\n // min = 59;\n // if (sec < 0)\n // sec = 0;\n // if (sec > 59)\n // sec = 59;\n // document.getElementById('hour').value = this.padLeft(hr);\n // document.getElementById('minute').value = this.padLeft(min);\n // document.getElementById('second').value = this.padLeft(sec);\n }\n}\n" }, { "path": "src/comps/imgloader/ImgLoader.ts", "content": "import {Component, ChangeDetectionStrategy, ChangeDetectorRef, Input} from '@angular/core';\nimport 'rxjs/add/observable/fromEvent';\nimport 'rxjs/add/operator/do';\nimport 'rxjs/add/operator/merge';\nimport 'rxjs/add/operator/distinctUntilChanged';\nimport {Lib} from \"../../Lib\";\n\n@Component({\n selector: 'imgLoader',\n changeDetection: ChangeDetectionStrategy.Default,\n template: `\n
        \n \n
        \n `\n})\n\nexport class ImgLoader {\n\n constructor(private cdr:ChangeDetectorRef) {\n }\n\n @Input('style')\n _style:any = {};\n\n @Input()\n defaultImage:string = '';\n\n @Input()\n circle:boolean = false;\n\n @Input()\n images:Array = [];\n\n private imageRetries:number = 0;\n\n private getImageUrl() {\n if (this.images.length == 0)\n return this.defaultImage;\n if (this.images[this.imageRetries] == undefined)\n return this.defaultImage;\n var url = this.images[this.imageRetries] + (Lib.DevMode() ? '?random=xyz' : `?random=' ${Math.random()}`);\n return url;\n }\n\n private onImageLoaded() {\n this.cdr.detach();\n }\n\n private onImageError() {\n this.imageRetries++;\n }\n\n public reloadImage(){\n this.imageRetries = 0;\n this.cdr.reattach();\n }\n\n}" }, { "path": "src/comps/infobox/Infobox.ts", "content": "import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy, OnChanges, SimpleChange} from '@angular/core'\n\n@Component({\n selector: 'Infobox',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .panel-footer {\n padding: 5px 3px;\n background-color: #fafafa;\n border: 1px solid #e2e2e2;\n border-bottom-right-radius: 2px;\n border-bottom-left-radius: 2px;\n }\n .br-a {\n border: 1px solid #eeeeee !important;\n }\n .br-grey {\n border-color: #d9d9d9 !important;\n }\n `],\n template: `\n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n

        {{value1}}

        \n
        {{value2}}
        \n
        \n
        \n \n \n {{value3}}\n \n
        \n
        \n
        \n `\n})\nexport class Infobox {\n @Input()\n style:string = 'basic'\n @Input()\n value1:string = null;\n @Input()\n value2:string = '';\n @Input()\n value3:string = '';\n @Input()\n icon:string = 'fa-plus';\n\n}\n\n" }, { "path": "src/comps/lazy-image/lazy-image.ts", "content": "import {Directive, ElementRef, EventEmitter, Input, NgZone, Output} from \"@angular/core\";\nimport {Observable} from \"rxjs/Observable\";\nimport {Subject} from \"rxjs/Subject\";\n\n/**\n * Usage\n *\n\n directive that allows you to load images which are deferred (not available right away)\n so image will be polled. While image is polled we can show default image as well as\n as loading image.\n\n usage:\n\n \n\n or to use via API\n\n ...\n\n @ViewChild(LazyImage)\n lazyImage: LazyImage;\n\n _lazyLoad() {\n this.lazyImage.setUrl(['https://secure.digitalsignage.com/studioweb/assets/some_lazy.png']);\n }\n\n _resetSnapshotSelection() {\n if (this.lazyImage)\n this.lazyImage.resetToDefault();\n }\n\n _takeSnapshot() {\n this.lazyImage.url = 'http://example.com/foo.png;\n }\n\n ...\n\n */\n\n@Directive({\n selector: '[lazyImage]'\n})\nexport class LazyImage {\n\n private m_urls: Array = [];\n private m_index = 0;\n private cancel$ = new Subject();\n\n constructor(private el: ElementRef, private ngZone: NgZone) {\n }\n\n // @Input('lazyImage') lazyImage; // to change support to directive of: = new EventEmitter();\n @Output() completed: EventEmitter = new EventEmitter();\n @Output() errored: EventEmitter = new EventEmitter();\n @Input() defaultImage: string;\n @Input() loadingImage: string;\n @Input() errorImage: string;\n @Input() retry: number = 5;\n @Input() delay: number = 1000;\n\n @Input()\n set urls(i_urls: Array) {\n this.setUrls(i_urls)\n }\n\n setUrls(i_urls: Array) {\n this.m_index = 0;\n this.m_urls = i_urls;\n this.loadImage(i_urls);\n }\n\n public resetToDefault() {\n this.setImage(this.el.nativeElement, this.defaultImage);\n this.cancel$.next({})\n }\n\n ngAfterViewInit() {\n this.setImage(this.el.nativeElement, this.defaultImage);\n }\n\n ngOnInit() {\n }\n\n setImage(element: HTMLElement, i_url) {\n // const isImgNode = element.nodeName.toLowerCase() === 'img';\n // if (isImgNode) {\n // } else {\n // element.style.backgroundImage = `url('${imagePath}')`;\n // }\n (element).src = i_url;\n return element;\n }\n\n loadImage(i_urls) {\n const pollAPI$ = Observable.defer(() => {\n return new Promise((resolve, reject) => {\n const img = new Image();\n var url;\n if (i_urls[this.m_index]){\n url = i_urls[this.m_index];\n this.m_index++;\n } else {\n this.m_index = 0;\n url = i_urls[this.m_index];\n }\n img.src = url;\n img.onload = () => {\n resolve(url);\n };\n img.onerror = err => {\n this.setImage(this.el.nativeElement, this.loadingImage);\n reject(err)\n };\n })\n }).retryWhen(err => {\n return err.scan((errorCount, err) => {\n if (errorCount >= this.retry) {\n throw err;\n }\n return errorCount + 1;\n }, 0)\n .delay(this.delay);\n })\n .takeUntil(this.cancel$)\n\n pollAPI$.subscribe((v) => {\n this.setImage(this.el.nativeElement, v)\n this.loaded.emit();\n }, (e) => {\n this.setImage(this.el.nativeElement, this.errorImage);\n this.errored.emit();\n // console.error(e)\n }, () => {\n this.completed.emit();\n })\n\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/comps/limited-access/limited-access.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\n\n@Component({\n selector: 'limited-access',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n

        Limited access:

        \n
        \n
        \n

        You are login in to StudioLite with StudioPro credentials

        \n
        \n This will result in limited functionality, please proceed to download StudioPro below...\n
        \n
        \n
        \n
        \n
        \n
        \n

        \n \n StudioPro for Windows\n

        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n

        \n \n StudioPro for Mac\n

        \n
        \n
        \n
        \n
          \n
        • \n Step 1: download Adobe AIR runtime\n download\n
          • \n
        • \n Step 2: download StudioPro for Mac\n \n download\n \n
          • \n
        • \n Step 3:\n Install the runtime and proceed with installing StudioPro for Mac\n
          • \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n `\n})\n\nexport class LimitedAccess {\n\n\n}\n" }, { "path": "src/comps/loading/loading.ts", "content": "import {Component, Input, ChangeDetectionStrategy} from '@angular/core'\n\n@Component({\n selector: 'loading',\n styles: [`\n .spinner {\n display: inline-block;\n opacity: 1;\n border: 3px solid rgba(0,0,0,.3);\n border-radius: 50%;\n border-top-color: #fff;\n animation: spin 1s ease-in-out infinite;\n -webkit-animation: spin 1s ease-in-out infinite;\n height: 100px;\n width: 100px;\n }\n @keyframes spin {\n to { -webkit-transform: rotate(360deg); }\n }\n @-webkit-keyframes spin {\n to { -webkit-transform: rotate(360deg); }\n }\n .center {\n text-align: center\n }\n `],\n template: `\n
        \n
        \n
        \n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class Loading {\n\n _style: Object;\n _size: Object;\n\n @Input()\n src: string = '';\n\n @Input('style')\n set style(i_style: Object) {\n this._style = i_style;\n }\n\n @Input('size')\n set size(i_size) {\n this._size = {\n opacity: 1,\n height: i_size,\n width: i_size\n }\n }\n}\n\n" }, { "path": "src/comps/logo/Logo.ts", "content": "import {Component, ElementRef, ChangeDetectionStrategy} from '@angular/core';\nimport {Observable} from \"rxjs/Observable\";\nimport 'rxjs/add/observable/of';\nimport 'rxjs/add/observable/fromEvent';\nimport 'rxjs/add/operator/do';\nimport 'rxjs/add/operator/merge';\nimport 'rxjs/add/operator/distinctUntilChanged';\n\n/**\n * Logo component for Application header\n * activated via elementRef and listen to mouse events via angular\n * adapter interface\n **/\n@Component({\n selector: 'Logo',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
        \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        \n `\n})\n\nexport class Logo {\n constructor(private elementRef: ElementRef) {\n this.listenMouse();\n }\n\n listenMouse(): void {\n var over: Observable = Observable.fromEvent(this.elementRef.nativeElement, 'mouseover').map(e => {\n return Observable.of(1)\n });\n var out: Observable = Observable.fromEvent(this.elementRef.nativeElement, 'mouseout').map(e => {\n return Observable.of(0)\n });\n over.merge(out).distinctUntilChanged().subscribe(events => {\n if (events.value) {\n jQuery(this.elementRef.nativeElement).find('.flipcard').addClass('flipped');\n } else {\n jQuery(this.elementRef.nativeElement).find('.flipcard').removeClass('flipped');\n }\n }, (e) => console.error(e));\n }\n}" }, { "path": "src/comps/logo/reseller-logo.ts", "content": "import {Component, ChangeDetectionStrategy, AfterViewInit, ViewChild} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {LazyImage} from \"../lazy-image/lazy-image\";\nimport {UserModel} from \"../../models/UserModel\";\nimport {Observable} from \"rxjs/Observable\";\n\n@Component({\n selector: 'reseller-logo',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n `\n})\nexport class ResellerLogo extends Compbaser implements AfterViewInit {\n\n\n constructor(private yp: YellowPepperService, private rp: RedPepperService) {\n super();\n }\n\n @ViewChild(LazyImage)\n lazyImage: LazyImage;\n\n _onLoaded() {\n // console.log('img loaded');\n }\n\n _onError() {\n console.log('img error');\n }\n\n _onCompleted() {\n // console.log('img completed');\n }\n\n ngAfterViewInit() {\n this.cancelOnDestroy(\n this.yp.listenUserModel()\n .take(1)\n .subscribe((i_userModel: UserModel) => {\n if (i_userModel.resellerId == 1)\n return;\n var urls = [\n `http://galaxy.signage.me/Resources/Resellers/${i_userModel.resellerId}/Logo.png`,\n `http://galaxy.signage.me/Resources/Resellers/${i_userModel.resellerId}/Logo.jpg`\n ];\n this.lazyImage.setUrls(urls);\n }, (e) => console.error(e))\n )\n\n }\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}\n" }, { "path": "src/comps/logout/Logout.ts", "content": "import {Component} from \"@angular/core\";\nimport {LocalStorage} from \"../../services/LocalStorage\";\nimport {RedPepperService} from \"../../services/redpepper.service\";\nimport {MainAppShowStateEnum} from \"../../app/app-component\";\nimport {ACTION_UISTATE_UPDATE} from \"../../store/actions/appdb.actions\";\nimport {IUiState} from \"../../store/store.data\";\nimport {YellowPepperService} from \"../../services/yellowpepper.service\";\nimport {Compbaser} from \"ng-mslib\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'Logout',\n providers: [LocalStorage],\n styles: [`\n .fa {\n display: inline-table;\n }\n .btn-xlarge {\n vertical-align: center;\n margin: 30px;\n /*width: 100%;*/\n padding: 48px 48px;\n font-size: 22px;\n color: white;\n text-align: center;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);\n background: #62b1d0;\n border: 0;\n border-bottom: 3px solid #9FE8EF;\n cursor: pointer;\n -webkit-box-shadow: inset 0 -3px #9FE8EF;\n box-shadow: inset 0 -3px #9FE8EF;\n width: 250px;\n }\n\n .btn-xlarge:active {\n top: 2px;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n }\n\n .btn-xlarge:hover {\n background: #a9a9a9;\n }\n `],\n template: `\n
        \n
        \n \n \n
        \n
        \n `\n})\n\nexport class Logout extends Compbaser {\n constructor(private localStorage: LocalStorage, private rp: RedPepperService, private yp:YellowPepperService) {\n super();\n this.cancelOnDestroy(\n this.yp.listenMainAppState()\n .subscribe((i_value: MainAppShowStateEnum) => {\n switch (i_value) {\n case MainAppShowStateEnum.SAVED: {\n this._onLogout();\n break;\n }\n }\n }, (e) => console.error(e))\n )\n }\n\n _onSaveChangesLogout(){\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.SAVE};\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}));\n }\n\n @timeout(500)\n _onLogout() {\n window.onbeforeunload = () => {\n };\n this.localStorage.removeItem('remember_me_studioweb');\n this.localStorage.removeItem('no_show_limited');\n let uiState: IUiState = {mainAppState: MainAppShowStateEnum.GOODBYE}\n this.yp.ngrxStore.dispatch(({type: ACTION_UISTATE_UPDATE, payload: uiState}))\n if (this.rp.getUserData().resellerID == 1)\n jQuery('body').fadeOut(1000, function () {\n window.location.replace('http://www.digitalsignage.com');\n });\n }\n}\n" }, { "path": "src/comps/match-body-height/match-body-height.ts", "content": "import {Directive, ElementRef, HostListener, Input, AfterContentInit} from \"@angular/core\";\n\n@Directive({\n selector: '[matchBodyHeight]'\n})\nexport class MatchBodyHeight implements AfterContentInit {\n\n constructor(private el: ElementRef) {\n }\n\n // offset total height\n @Input() matchBodyHeight:number = 50;\n\n ngAfterContentInit() {\n this.onResize();\n }\n\n @HostListener('window:resize')\n onResize() {\n var bodyHeight = jQuery('body').height() - this.matchBodyHeight;\n jQuery(this.el.nativeElement).height(bodyHeight);\n }\n\n ngOnDestroy(){\n // console.log('dest matchBodyHeight');\n }\n}\n\n// import {timeout} from \"../../decorators/timeout-decorator\";\n// constructor { this.enableScroller() }\n// @timeout(500)\n// private enableScroller() {\n// // jQuery('.ng-content-wrapper', this.el.nativeElement).css('overflow-y', 'scroll');\n// }\n// @HostBinding('style.overflow')\n// overFlow;\n// jQuery('.ng-content-wrapper', this.el.nativeElement)\n// .delay(500)\n// .queue(function (next) {\n// $(this).css('overflow-y', 'scroll');\n// next();\n// });" }, { "path": "src/comps/media-player/media-player.ts", "content": "import {Component, Input} from \"@angular/core\";\nimport {VgAPI} from \"videogular2/core\";\n\n@Component({\n selector: 'media-player',\n template: `\n \n\n \n \n \n\n \n \n \n \n\n \n \n \n\n \n\n \n\n \n \n\n \n \n \n \n\n\n \n\n \n \n `\n})\nexport class MediaPlayer {\n sources: Array;\n api: VgAPI\n\n constructor() {\n this.sources = [\n {\n src: \"http://s3.signage.me/business1000/resources/OfflineUpdate.mp4\",\n type: \"video/mp4\"\n }\n ];\n }\n\n @Input()\n set playResource(i_resource: string) {\n this.onSwap(i_resource, 'video/mp4')\n }\n\n @Input() autoPlay:boolean = false;\n\n onSwap(source: string, type: string) {\n if (this.api) this.api.pause();\n this.sources = new Array();\n this.sources.push({\n src: source,\n type: type\n });\n setTimeout(() => {\n this.api.getDefaultMedia().currentTime = 0;\n if (this.api && this.autoPlay)\n this.api.play();\n }, 300)\n\n\n }\n\n getApi(): VgAPI {\n return this.api;\n }\n\n onPlayerReady(i_api: VgAPI) {\n this.api = i_api;\n // this.api.fsAPI.toggleFullscreen()\n // this.api.getDefaultMedia().subscriptions.ended.subscribe(\n // () => {\n // // Set the video to the beginning\n // this.api.getDefaultMedia().currentTime = 0;\n // }\n // );\n }\n}\n\n" }, { "path": "src/comps/ng-menu/ng-menu-item.ts", "content": "import {Component, ChangeDetectionStrategy, Input} from \"@angular/core\";\nimport {NgMenu} from \"./ng-menu\";\nimport {Compbaser} from \"ng-mslib\";\n\n@Component({\n selector: 'ng-menu-item',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n `,\n})\nexport class NgMenuItem extends Compbaser {\n\n constructor(private ngMenu:NgMenu) {\n super();\n this.ngMenu.addMenuItem(this);\n }\n\n @Input() fontawesome:string;\n @Input() title:string;\n @Input() name:string;\n\n get getTitle(): string {\n return this.title;\n }\n\n get getName(): string {\n return this.name;\n }\n\n get getFontAwesome(): string {\n return this.fontawesome;\n }\n\n\n ngOnInit() {\n }\n\n destroy() {\n }\n}" }, { "path": "src/comps/ng-menu/ng-menu.ts", "content": "import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input} from \"@angular/core\";\nimport {NgMenuItem} from \"./ng-menu-item\";\nimport {CommBroker, IMessage} from \"../../services/CommBroker\";\nimport {Router} from \"@angular/router\";\nimport {Compbaser} from \"ng-mslib\";\nimport {Consts} from \"../../interfaces/Consts\";\n\n@Component({\n selector: 'ng-menu',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n
        \n
        \n
      • \n \n {{item.getTitle}}\n
        • \n
        \n
        \n\n         \n \n
        \n
        \n \n
        \n
        \n         \n\n `,\n styles: [`\n .appMenu {\n background: #3e3f48;\n }\n\n .navicons {\n font-size: 0.9em;\n position: relative;\n top: 2px;\n left: 0px;\n text-align: left;\n padding-right: 5px;\n }\n\n .iconSize {\n font-size: 1.3em;\n padding-right: 20px;\n }\n `]\n})\nexport class NgMenu extends Compbaser {\n\n constructor(private router: Router, private commBroker: CommBroker, private cd: ChangeDetectorRef) {\n super();\n }\n\n ngOnInit() {\n this.m_hidden = false;\n this.listenWinResize()\n }\n\n @Input() fileMenuMode: boolean = true;\n @Input() routePrefix: string = '';\n\n public items: Array = [];\n public m_hidden: boolean = true;\n\n private listenWinResize() {\n this.commBroker.onEvent(Consts.Events().WIN_SIZED).subscribe((e: IMessage) => {\n if (e.message.width < Consts.Values().MENU_MIN_ICON_SHOW) {\n this.m_hidden = true;\n } else {\n this.m_hidden = false;\n }\n this.cd.markForCheck();\n }, (e) => console.error(e));\n }\n\n private listenMenuSelected(ngMenuItem:NgMenuItem, event: MouseEvent) {\n event.preventDefault();\n this.router.navigate([`/${this.routePrefix}/${ngMenuItem.name}`]);\n }\n\n public addMenuItem(i_item: NgMenuItem): void {\n this.items.push(i_item);\n }\n\n\n destroy() {\n }\n}" }, { "path": "src/comps/panel-split/panel-split-container.ts", "content": "import {Component, ChangeDetectionStrategy, ElementRef, ContentChild, AfterViewInit} from \"@angular/core\";\nimport {PanelSplitMain} from \"./panel-split-main\";\nimport {PanelSplitSide} from \"./panel-split-side\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'panel-split-container',\n template: `\n
        \n \n
        \n `\n})\nexport class PanelSplitContainer implements AfterViewInit {\n constructor(private el: ElementRef) {\n }\n\n @ContentChild(PanelSplitMain)\n panelSpiltMain: PanelSplitMain\n\n @ContentChild(PanelSplitSide)\n panelSplitSide: PanelSplitSide\n\n ngAfterViewInit() {\n if (!this.panelSpiltMain || !this.panelSplitSide)\n throw new Error('panel-split-container requires main and side children');\n this.panelSplitSide.onToggle.subscribe((value: boolean) => {\n this.panelSpiltMain.setFullScreen(value)\n }, (e) => console.error(e))\n }\n\n}\n\n" }, { "path": "src/comps/panel-split/panel-split-main.ts", "content": "import {Component, ChangeDetectionStrategy, ElementRef} from \"@angular/core\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'panel-split-main',\n\n styles: [`\n .mainPanelWrap {\n -webkit-transition: width 1s ease, margin 1s ease;\n -moz-transition: width 1s ease, margin 1s ease;\n -o-transition: width 1s ease, margin 1s ease;\n transition: width 1s ease, margin 1s ease;\n }\n button {\n width: 200px;\n margin: 5px;\n }\n .mainPanelWrap {\n padding: 0;\n margin: 0;\n }\n \n `],\n template: `\n
        \n
        \n \n
        \n
        \n `\n})\nexport class PanelSplitMain {\n\n constructor(private el: ElementRef) {\n }\n\n setFullScreen(value) {\n if (!value) {\n // full screen\n jQuery(this.el.nativeElement).find('.mainPanelWrap').removeClass('col-xs-7 col-sm-8 col-md-9 col-lg-10')\n jQuery(this.el.nativeElement).find('.mainPanelWrap').addClass('col-xs-12')\n } else {\n jQuery(this.el.nativeElement).find('.mainPanelWrap').addClass('col-xs-7 col-sm-8 col-md-9 col-lg-10')\n jQuery(this.el.nativeElement).find('.mainPanelWrap').removeClass('col-xs-12')\n }\n }\n}\n\n\n;" }, { "path": "src/comps/panel-split/panel-split-side.ts", "content": "import {Component, ChangeDetectionStrategy, ElementRef, Output, EventEmitter} from \"@angular/core\";\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'panel-split-side',\n styles: [`\n .propPanelWrap {\n position: fixed;\n /*min-height: 100%;*/\n /*max-height: 100%;*/\n right: 0;\n top: 0;\n height: 100%;\n overflow: hidden;\n -webkit-transition: width 1s ease, margin 1s ease;\n -moz-transition: width 1s ease, margin 1s ease;\n -o-transition: width 1s ease, margin 1s ease;\n transition: width 1s ease, margin 1s ease;\n background-color: #ffffff;\n margin: 0;\n z-index: 200;\n border-left: 2px #c9c9c9 solid;\n }\n\n .toggleArrow {\n font-size: 1.5em;\n color: #313335\n }\n\n .restorePanel {\n position: absolute;\n right: 0;\n top: 3px;\n }\n\n .fa-arrow-circle-right {\n padding-top: 60px;\n }\n `],\n template: `\n \n
        \n \n
        \n\n \n
        \n \n \n
        \n `\n})\nexport class PanelSplitSide {\n\n constructor(private el: ElementRef) {\n }\n\n @Output()\n onToggle: EventEmitter = new EventEmitter();\n\n showSidePanel: boolean = true;\n\n _toggle(event: MouseEvent) {\n event.preventDefault();\n this.showSidePanel = !this.showSidePanel;\n this.onToggle.emit(this.showSidePanel);\n if (this.showSidePanel) {\n jQuery(this.el.nativeElement).find('.propPanelWrap').addClass('col-xs-7 col-sm-8 col-md-9 col-lg-10')\n jQuery(this.el.nativeElement).find('.propPanelWrap').fadeIn('50')\n } else {\n jQuery(this.el.nativeElement).find('.propPanelWrap').fadeOut(0)\n jQuery(this.el.nativeElement).find('.propPanelWrap').removeClass('col-xs-7 col-sm-8 col-md-9 col-lg-10')\n }\n }\n}\n\n" }, { "path": "src/comps/screen-template/screen-template.ts", "content": "/**\n The class generates the UI for a template (a.k.a Screen Division) that is\n a selectable widget including the drawing of each viewer (division) within\n the screen, as well as firing related click events on action.\n @param {object} i_screenTemplateData hold data as instructions for factory creation component\n @param {String} i_type the type of widget that we will create. This includes\n VIEWER_SELECTABLE as well as ENTIRE_SELECTABLE with respect to the ability to select the components viewers individually\n or the entire screen division\n @param {object} i_owner the owner of this class (parent) that we can query at the listening end, to examine if the event is\n of any interest to the listener.\n\n\n This is a key event in the framework as many different instances subscribe to ON_VIEWER_SELECTED to reconfigure\n themselves. The event is fired when a viewer (i.e.: a screen division) is selected inside a Template (i.e. Screen).\n The key to remember is that the Factory instance (this) is always created with respect to it's owner (i_owner),\n so when ON_VIEWER_SELECTED is fired, the owner is carried with the event so listeners can act accordingly, and only if the owner\n is of interest to a subscribed listener.\n **/\n\nimport {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output} from \"@angular/core\";\nimport {Compbaser} from \"ng-mslib\";\nimport * as _ from \"lodash\";\nimport {Lib} from \"../../Lib\";\nimport {OrientationEnum} from \"../../app/campaigns/campaign-orientation\";\nimport {IScreenTemplateData} from \"../../interfaces/IScreenTemplate\";\n\n\n@Component({\n selector: 'screen-template',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: ``,\n})\nexport class ScreenTemplate extends Compbaser {\n\n private created = false;\n private m_mouseHoverEffect = false;\n private m_campaign_timeline_id = -1;\n\n constructor(private el: ElementRef) {\n super();\n }\n\n ngAfterViewInit(){\n if (this.m_mouseHoverEffect)\n this._mouseOverEffect()\n this.m_mouseHoverEffect = false;\n }\n\n @Output()\n onDivisionDoubleClicked: EventEmitter = new EventEmitter();\n\n @Input()\n set mouseHoverEffect(i_value) {\n this.m_mouseHoverEffect = i_value;\n }\n\n @Input()\n set setTemplate(i_screenTemplateData: IScreenTemplateData) {\n if (this.created) return\n this.created = true;\n // this.m_selfDestruct = i_screenTemplateData.i_selfDestruct;\n this.m_myElementID = 'svgScreenLayout' + '_' + _.uniqueId();\n this.m_screenTemplateData = i_screenTemplateData;\n this.m_orientation = i_screenTemplateData['orientation'];\n this.m_resolution = i_screenTemplateData['resolution'];\n this.m_screenProps = i_screenTemplateData['screenProps'];\n this.m_scale = i_screenTemplateData['scale'];\n this.m_svgWidth = (this.m_resolution.split('x')[0]) / this.m_scale;\n this.m_svgHeight = (this.m_resolution.split('x')[1]) / this.m_scale;\n this.m_useLabels = false;\n this._create()\n // this.selectableFrame();\n\n this._mouseDoubleClickDivision();\n }\n\n m_selfDestruct;\n m_screenTemplateData;\n m_myElementID;\n m_orientation;\n m_resolution;\n m_screenProps;\n m_scale;\n m_svgWidth;\n m_svgHeight;\n m_useLabels;\n\n /**\n Method is called when an entire screen frame of the UI is clicked, in contrast to when a single viewer is selected.\n The difference in dispatch of the event depends on how the factory created this instance.\n @method _onViewSelected\n @param {Event} e\n @param {Object} i_caller\n @return {Boolean} false\n **/\n private _onViewSelected(e, i_caller) {\n var self = i_caller;\n var element = e.target;\n\n var campaign_timeline_board_viewer_id = jQuery(element).data('campaign_timeline_board_viewer_id');\n var campaign_timeline_id = jQuery(element).data('campaign_timeline_id');\n\n var screenData = {\n sd: jQuery(element).data('sd'),\n elementID: i_caller.m_myElementID,\n // owner: i_caller.getOwner(),\n campaign_timeline_board_viewer_id: campaign_timeline_board_viewer_id,\n campaign_timeline_id: campaign_timeline_id,\n screenTemplateData: self.m_screenTemplateData\n };\n self._deselectViewers();\n // BB.comBroker.fire(BB.EVENTS.ON_VIEWER_SELECTED, this, screenData);\n }\n\n /**\n Deselect all viewers, thus change their colors back to default.\n @method _deselectViewers\n @return none\n **/\n private _deselectViewers() {\n var self = this;\n jQuery('.screenDivisionClass', self.el.nativeElement).each(function () {\n if (jQuery(this).is('rect')) {\n jQuery(this).css({'fill': 'rgb(230,230,230)'});\n }\n });\n }\n\n\n /**\n When enabled, _mouseOverEffect will highlight viewers when mouse is hovered over them.\n @method _mouseOverEffect\n @return none\n **/\n private _mouseOverEffect() {\n var self = this;\n // var a = jQuery('#' + self.m_myElementID);\n // var b = jQuery('#' + self.m_myElementID).find('rect');\n jQuery('#' + self.m_myElementID, self.el.nativeElement).find('rect').each(function () {\n jQuery(this).on('mouseover', function () {\n jQuery(this).css({'fill': 'rgb(190,190,190)'});\n }).mouseout(function () {\n jQuery(this).css({'fill': 'rgb(230,230,230)'});\n });\n });\n }\n\n private _mouseDoubleClickDivision() {\n var self = this;\n // var a = jQuery('#' + self.m_myElementID);\n // var b = jQuery('#' + self.m_myElementID).find('rect');\n\n jQuery('#' + self.m_myElementID, self.el.nativeElement).find('rect').each(function () {\n jQuery(this).on('dblclick', function () {\n var e = jQuery(this).data('campaign_timeline_board_viewer_id');\n self.onDivisionDoubleClicked.emit(e)\n });\n });\n }\n\n\n // Get the owner (parent) of this instance, i.e., the one who created this.\n // We use the owner attribute as a way to distinguish what type of instance this was created as.\n // @method getOwner\n // @return {Object} m_owner\n //\n // getOwner() {\n // var self = this;\n // return self.m_owner;\n // }\n //\n /**\n Create all the screen divisions (aka viewers) as svg snippets and push them into an array\n @method getDivisions\n @return {array} f array of all svg divisions\n **/\n getDivisions() {\n var self = this;\n var svg = self._create();\n return $(svg).find('rect');\n\n // var f = $(svg).find('rect').map(function (k, v) {\n // return ' ' +\n // '' +\n // v.outerHTML +\n // ' ' +\n // '';\n // });\n // return f;\n }\n\n /**\n Create will produce the actual SVG based Template (screen) with inner viewers and return HTML snippet to the caller.\n @method create\n @return {Object} html element produced by this factory\n **/\n private _create() {\n var self = this;\n var screensDivisons = '';\n var screenLabels = '';\n\n // sort for proper z-order creating the viewers\n var orderedScreenValues = [], i = 0;\n for (var screenValues in self.m_screenProps) {\n var viewOrder = self.m_screenProps[screenValues]['view_order'];\n viewOrder = _.isUndefined(viewOrder) ? i : viewOrder;\n orderedScreenValues[viewOrder] = self.m_screenProps[screenValues];\n i++;\n }\n\n // create the viewers\n i = 0;\n for (var ordered in orderedScreenValues) {\n i++;\n var screenValue = orderedScreenValues[ordered];\n var x = screenValue['x'] == 0 ? 0 : screenValue['x'] / self.m_scale;\n var y = screenValue['y'] == 0 ? 0 : screenValue['y'] / self.m_scale;\n var w = screenValue['w'] == 0 ? 0 : screenValue['w'] / self.m_scale;\n var h = screenValue['h'] == 0 ? 0 : screenValue['h'] / self.m_scale;\n var campaign_timeline_board_viewer_id = screenValue['campaign_timeline_board_viewer_id'];\n var campaign_timeline_id = self.m_campaign_timeline_id = screenValue['campaign_timeline_id'];\n var sd = screenValues;\n\n var uniqueID = 'rectSD' + '_' + _.uniqueId();\n if (self.m_useLabels == true)\n screenLabels += '' + i + '';\n\n screensDivisons += '';\n }\n var snippet = (jQuery(' ' +\n '' +\n screensDivisons +\n screenLabels +\n ' ' +\n ''));\n jQuery(self.el.nativeElement).append(snippet);\n return snippet;\n }\n\n /**\n When enabled, selectableFrame will allow for UI mouse / click of the outer frame of the template (screen) and not\n individual viewers.\n @method selectableFrame\n @return none\n **/\n selectableFrame() {\n var self = this;\n var applyToSelected = function (e) {\n jQuery('#' + self.m_myElementID, self.el.nativeElement).parent().find('rect').css({\n 'stroke-width': '2',\n 'stroke': 'rgb(72,72,72)'\n });\n jQuery('#' + self.m_myElementID, self.el.nativeElement).find('rect').css({'stroke-width': '2', 'stroke': Lib.GetThemeColor()});\n self._onViewSelected(e, self);\n }\n // listen one\n if (self.m_selfDestruct) {\n jQuery('.screenDivisionClass', '#' + self.m_myElementID).one('mouseup contextmenu', function (e) {\n applyToSelected(e);\n });\n\n } else {\n // listen on\n jQuery('.screenDivisionClass', '#' + self.m_myElementID).on('mouseup contextmenu', function (e) {\n applyToSelected(e);\n });\n }\n }\n\n get campaignTimelineId(){\n return this.m_campaign_timeline_id;\n }\n \n /**\n When enabled, selectableFrame will allow for UI mouse / click of the outer frame of the template (screen) and not\n individual viewers.\n @method selectableFrame\n @return none\n **/\n selectFrame() {\n jQuery('#' + this.m_myElementID, this.el.nativeElement).parent().find('rect').css({\n 'stroke-width': '2',\n 'stroke': 'rgb(72,72,72)'\n });\n jQuery('#' + this.m_myElementID, this.el.nativeElement).find('rect').css({'stroke-width': '2', 'stroke': Lib.GetThemeColor()});\n // this._onViewSelected(e, this);\n }\n\n deSelectFrame() {\n jQuery('#' + this.m_myElementID, this.el.nativeElement).parent().find('rect').css({\n 'stroke-width': '2',\n 'stroke': 'rgb(72,72,72)'\n });\n }\n\n\n /**\n The public method version of _deselectViewers, which de-selects all viewers\n @method deselectDivisons\n **/\n deselectDivisons() {\n var self = this;\n self._deselectViewers();\n }\n\n /**\n Select a division (aka viewer) using it's viewer_id, only applicable when class represents an actual timelime > board > viewer_id\n @method selectDivison\n @param {Number} i_campaign_timeline_board_viewer_id\n **/\n selectDivison(i_campaign_timeline_board_viewer_id) {\n var self = this;\n self._deselectViewers();\n var selectedElement = jQuery('#' + self.m_myElementID, self.el.nativeElement).find('[data-campaign_timeline_board_viewer_id=\"' + i_campaign_timeline_board_viewer_id + '\"]');\n // jQuery(selectedElement).css({'fill': Lib.GetThemeColor()});\n jQuery(selectedElement).css({'fill': '#aed0ed'});\n }\n\n destroy() {\n var self = this;\n jQuery('.screenDivisionClass', '#' + self.m_myElementID).off('mouseup contextmenu');\n jQuery('.screenDivisionClass', self.el.nativeElement).off('click contextmenu', function (e) {\n self._onViewSelected(e, self);\n });\n jQuery(this).off('mouseover', function () {\n jQuery(this).css({'fill': 'rgb(190,190,190)'});\n }).mouseout(function () {\n jQuery(this).css({'fill': 'rgb(230,230,230)'});\n });\n\n jQuery('#' + this.m_myElementID, self.el.nativeElement).find('rect').each(function () {\n jQuery(this).off();\n });\n\n // jQuery.each(self, function (k) {\n // self[k] = undefined;\n // });\n }\n}" }, { "path": "src/comps/simple-grid-module/SimpleGrid.css", "content": ".simpleTable {\n background-color: white;\n}\n\n* {\n font-size: 0.9em;\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGrid.ts", "content": "import {SimpleGridData} from \"./SimpleGridData\";\nimport {SimpleGridTable} from \"./SimpleGridTable\";\nimport {SimpleGridSortableHeader} from \"./SimpleGridSortableHeader\";\nimport {SimpleGridRecord} from \"./SimpleGridRecord\";\nimport {SimpleGridDataImage} from \"./SimpleGridDataImage\";\nimport {SimpleGridDataCurrency} from \"./SimpleGridDataCurrency\";\nimport {StoreModel} from \"../../models/StoreModel\";\nimport {SimpleGridDataChecks} from \"./SimpleGridDataChecks\";\nimport {SimpleGridDataDropdown} from \"./SimpleGridDataDropdown\";\n\nexport const SIMPLEGRID_DIRECTIVES:Array = [SimpleGridTable, SimpleGridSortableHeader, SimpleGridRecord, SimpleGridData, SimpleGridDataCurrency, SimpleGridDataImage, SimpleGridDataChecks, SimpleGridDataDropdown];\n\nexport interface ISimpleGridEdit {\n value:string;\n item:StoreModel;\n}\n" }, { "path": "src/comps/simple-grid-module/SimpleGridData.ts", "content": "import {Component, Input, ChangeDetectionStrategy, Output, EventEmitter} from '@angular/core'\nimport {StoreModel} from \"../../models/StoreModel\";\nimport {ISimpleGridEdit} from \"./SimpleGrid\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\n\n@Component({\n selector: 'td[simpleGridData]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n label {\n padding: 0;\n margin: 0;\n }\n .editableLabel {\n cursor: pointer;\n }\n input {\n padding: 0;\n margin: 0;\n }\n a {\n cursor: pointer;\n }\n `],\n template: `\n \n \n \n \n \n \n \n \n `\n})\nexport class SimpleGridData {\n value:string = '';\n private storeModel:StoreModel;\n private _editable:boolean|string = false;\n _editing:boolean = false;\n\n @Input()\n set item(i_storeModel:StoreModel) {\n this.storeModel = i_storeModel\n }\n\n @Input()\n set field(i_field) {\n this.value = this.storeModel.getKey(i_field)\n }\n\n @Input()\n set processField(i_processField:(storeModel:StoreModel)=>string) {\n this.value = i_processField(this.storeModel)\n }\n\n @Input()\n set editable(i_editable) {\n this._editable = i_editable;\n }\n\n @Output()\n labelEdited:EventEmitter = new EventEmitter();\n\n onEdit(isEditing:boolean) {\n if (this._editable == false || this._editable == 'false')\n return;\n this._editing = isEditing;\n if (this._editing)\n return;\n // done editing, so notify\n var payload:ISimpleGridEdit = {\n value: this.value,\n item: this.storeModel\n }\n this.labelEdited.emit(payload);\n\n }\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridDataChecks.ts", "content": "import {Component, Input, Output, EventEmitter, ViewChildren, QueryList, ChangeDetectorRef} from \"@angular/core\";\nimport {List} from \"immutable\";\nimport {StoreModel} from \"../../models/StoreModel\";\nimport * as _ from \"lodash\";\n\n@Component({\n selector: 'td[simpleGridDataChecks]',\n styles: [`\n i {\n cursor: pointer;\n }\n .slideMode {\n padding-top: 8px;\n padding-right: 20px;\n }\n `],\n template: `\n
        \n
        \n \n \n
        \n
        \n
        \n
        \n \n \n
        \n
        \n `\n})\nexport class SimpleGridDataChecks {\n constructor(private cdr: ChangeDetectorRef) {\n }\n\n m_checkId = _.uniqueId('slideCheck');\n m_checkboxes: List\n private m_storeModel: StoreModel;\n\n @ViewChildren('checkInputs')\n inputs: QueryList\n\n @Input()\n set checkboxes(i_checkboxes: List) {\n this.m_checkboxes = i_checkboxes\n }\n\n @Input()\n set item(i_storeModel: StoreModel) {\n this.m_storeModel = i_storeModel\n }\n\n @Input()\n slideMode: boolean = false;\n\n @Output()\n changed: EventEmitter = new EventEmitter();\n\n //@HostListener('click', ['$event'])\n private onClick(e) {\n this.cdr.detach();\n let values = []\n this.inputs.map(v => {\n values.push(v.nativeElement.checked);\n });\n this.changed.emit({item: this.m_storeModel, value: values});\n return true;\n }\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridDataCurrency.ts", "content": "import {Component, Input, ChangeDetectionStrategy, Output, EventEmitter} from '@angular/core'\nimport {StoreModel} from \"../../models/StoreModel\";\nimport {ISimpleGridEdit} from \"./SimpleGrid\";\n\n@Component({\n selector: 'td[simpleGridDataCurrency]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n label {\n padding: 0;\n margin: 0;\n }\n `],\n template: `\n \n `\n})\nexport class SimpleGridDataCurrency {\n value:string = '';\n storeModel:StoreModel;\n\n @Input()\n set item(i_storeModel:StoreModel) {\n this.storeModel = i_storeModel\n }\n\n @Input()\n set field(i_field) {\n this.value = this.storeModel.getKey(i_field)\n }\n\n @Input()\n set processField(i_processField:(storeModel:StoreModel)=>string) {\n this.value = i_processField(this.storeModel)\n }\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridDataDropdown.ts", "content": "import {\n Component, Input, ChangeDetectionStrategy, Output, EventEmitter, ViewChildren, QueryList, HostListener\n} from '@angular/core'\nimport {List} from \"immutable\";\nimport {StoreModel} from \"../../models/StoreModel\";\n\n@Component({\n selector: 'td[simpleGridDataDropdown]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n i {\n cursor: pointer;\n }\n\n .select button {\n width: 100%;\n text-align: left;\n }\n\n .select .caret {\n position: absolute;\n right: 10px;\n margin-top: 10px;\n }\n\n .select:last-child > .btn {\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n }\n\n .selected {\n padding-right: 10px;\n }\n\n .option {\n width: 100%;\n }\n `],\n template: `\n
        \n \n \n
        \n \n \n \n \n `\n})\nexport class SimpleGridDataDropdown {\n\n m_dropdown: List\n m_storeModel: StoreModel;\n m_field: string = '';\n value: string = '';\n m_testSelection: Function;\n\n @ViewChildren('checkInputs')\n inputs: QueryList\n\n @Input()\n set dropdown(i_dropdown: List) {\n this.m_dropdown = i_dropdown\n }\n\n @Input()\n set item(i_storeModel: StoreModel) {\n this.m_storeModel = i_storeModel\n }\n\n @Input()\n set field(i_field) {\n this.m_field = i_field;\n }\n\n @Input()\n set testSelection(i_testSelection: (dropItem: any, storeModel: StoreModel) => 'checked' | '') {\n this.m_testSelection = i_testSelection;\n }\n\n @Output()\n changed: EventEmitter = new EventEmitter();\n\n onChanges(event) {\n this.changed.emit({item: this.m_storeModel, value: event.target.value});\n }\n\n private getSelected(i_dropItem): string {\n if (this.m_testSelection) {\n return this.m_testSelection(i_dropItem, this.m_storeModel);\n }\n return '';\n }\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridDataImage.ts", "content": "import {Component, Input, ChangeDetectionStrategy} from '@angular/core'\nimport {StoreModel} from \"../../models/StoreModel\";\n\n@Component({\n selector: 'td[simpleGridDataImage]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n i {\n cursor: pointer;\n }\n `],\n template: `\n \n \n \n `\n})\nexport class SimpleGridDataImage {\n value;\n style;\n storeModel:StoreModel;\n\n @Input()\n set item(i_storeModel:StoreModel) {\n this.storeModel = i_storeModel\n }\n\n @Input()\n set field(i_field) {\n this.value = i_field;\n }\n \n @Input()\n set color(i_color:string) {\n this.style = {\n color: i_color\n }\n }\n\n onClick(event){\n }\n\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridDraggable.ts", "content": "import {\n ContentChildren,\n Directive,\n ElementRef,\n EventEmitter,\n forwardRef,\n Inject,\n Output,\n QueryList\n} from \"@angular/core\";\nimport {SimpleGridTable} from \"./SimpleGridTable\";\nimport {timeout} from \"../../decorators/timeout-decorator\";\nimport {SimpleGridRecord} from \"./SimpleGridRecord\";\nimport {Subscription} from \"rxjs\";\nimport {StoreModel} from \"../../models/StoreModel\";\n// import TweenLite = gsap.TweenLite;\n\nexport interface ISimpleGridDraggedData {\n newIndex: number;\n currentIndex: number;\n items: Array;\n}\n\n@Directive({\n selector: 'tbody[simpleGridDraggable]'\n})\nexport class SimpleGridDraggable {\n\n // we have to Inject -> forwardRef as SimpleGridTable is not yet due to load order of files\n constructor(@Inject(forwardRef(() => SimpleGridTable)) i_table: SimpleGridTable, private el: ElementRef) {\n this.m_table = i_table;\n }\n\n private m_table: SimpleGridTable\n private m_draggables;\n private target;\n private y;\n\n m_items;\n m_selectedIdx = -1;\n m_sub: Subscription;\n\n @ContentChildren(SimpleGridRecord) simpleGridRecords: QueryList;\n\n @Output()\n dragCompleted: EventEmitter = new EventEmitter();\n\n ngAfterViewInit() {\n this.createSortable();\n this.m_sub = this.simpleGridRecords\n .changes.subscribe(v => {\n this.createSortable();\n });\n }\n\n _cleanSortables() {\n if (this.m_draggables)\n this.m_draggables.forEach((drag) => drag.kill());\n }\n\n /**\n Create a draggable sortable list\n **/\n @timeout(500)\n public createSortable() {\n var self = this;\n jQueryAny(self.el.nativeElement).children().each((i, child) => jQuery.data(child, \"idx\", i));\n this.simpleGridRecords.forEach((rec: SimpleGridRecord, i) => rec.index = i);\n\n if (jQuery(self.el.nativeElement).children().length == 0) return;\n this._cleanSortables();\n self.m_draggables = Draggable.create(jQuery(self.el.nativeElement).children(), {\n type: \"y\",\n bounds: self.el.nativeElement,\n dragClickables: false,\n edgeResistance: 1,\n onPress: self._sortablePress,\n onDragStart: self._sortableDragStart,\n onDrag: self._sortableDrag,\n liveSnap: self._sortableSnap,\n onDragEnd: function () {\n self.m_selectedIdx = -1;\n var t = this.target\n var max = t.kids.length - 1;\n var newIndex = Math.round(this.y / t.currentHeight);\n newIndex += (newIndex < 0 ? -1 : 0) + t.currentIndex;\n if (newIndex === max) {\n t.parentNode.appendChild(t);\n } else {\n t.parentNode.insertBefore(t, t.kids[newIndex + 1]);\n }\n var result:ISimpleGridDraggedData = {\n items: [],\n newIndex: newIndex < t.currentIndex ? newIndex + 1 : newIndex,\n currentIndex: t.currentIndex\n };\n TweenLite.set(t.kids, {yPercent: 0, overwrite: \"all\"});\n TweenLite.set(t, {y: 0, color: \"\"});\n jQuery(self.el.nativeElement).children().each((i, child) => {\n var oldIndex = jQuery.data(child, \"idx\");\n var found: SimpleGridRecord = self.simpleGridRecords.find((rec: SimpleGridRecord) => {\n return rec.index == oldIndex;\n })\n // con(i + ' ' + found.item.getKey('event'));\n result.items.push(found.item)\n })\n self.dragCompleted.emit(result)\n }\n });\n }\n\n /**\n Sortable list on press\n @method _sortablePress\n **/\n _sortablePress() {\n var t = this.target,\n i = 0,\n child = t;\n while (child = child.previousSibling)\n if (child.nodeType === 1) i++;\n t.currentIndex = i;\n t.currentHeight = t.offsetHeight;\n t.kids = [].slice.call(t.parentNode.children); // convert to array\n }\n\n /**\n Sortable drag list on press\n @method _sortableDragStart\n **/\n _sortableDragStart() {\n TweenLite.set(this.target, {color: \"#88CE02\"});\n }\n\n /**\n Sortable drag list\n @method _sortableDrag\n **/\n _sortableDrag() {\n var t = this.target,\n elements = t.kids.slice(), // clone\n indexChange = Math.round(this.y / t.currentHeight),\n bound1 = t.currentIndex,\n bound2 = bound1 + indexChange;\n if (bound1 < bound2) { // moved down\n TweenLite.to(elements.splice(bound1 + 1, bound2 - bound1), 0.15, {yPercent: -100});\n TweenLite.to(elements, 0.15, {yPercent: 0});\n } else if (bound1 === bound2) {\n elements.splice(bound1, 1);\n TweenLite.to(elements, 0.15, {yPercent: 0});\n } else { // moved up\n TweenLite.to(elements.splice(bound2, bound1 - bound2), 0.15, {yPercent: 100});\n TweenLite.to(elements, 0.15, {yPercent: 0});\n }\n }\n\n /**\n snap to set rounder values\n @method _sortableSnap\n **/\n _sortableSnap(y) {\n return y;\n // enable code below to enable snapinnes on dragging\n // var h = this.target.currentHeight;\n // return Math.round(y / h) * h;\n }\n\n ngOnDestroy() {\n this._cleanSortables();\n this.m_sub.unsubscribe();\n this.m_draggables = null;\n }\n}" }, { "path": "src/comps/simple-grid-module/SimpleGridExample.txt", "content": "import {\n Component,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n} from \"@angular/core\";\nimport {AppModel} from \"../../../reseller/AppModel\";\nimport {List} from \"immutable\";\nimport {AppStore} from \"angular2-redux-util\";\nimport {ResellerAction} from \"../../../reseller/ResellerAction\";\n// import {ComponentInstruction} from \"@angular/router\";\n\n@Component({\n selector: 'apps',\n host: {\n // '[@routeAnimation]': 'true',\n '[style.display]': \"'block'\"\n },\n template: `\n
        0\">\n \n \n \n icon\n app name\n available (off | on)\n \n \n \n \n \n \n \n \n \n \n
        \n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\n\nexport class Apps {\n\n constructor(private appStore: AppStore, private resellerAction: ResellerAction, private ref: ChangeDetectorRef) {\n var i_reseller = this.appStore.getState().reseller;\n this.apps = i_reseller.getIn(['apps']);\n this.unsub = this.appStore.sub((apps) => {\n this.apps = apps;\n this.ref.markForCheck();\n }, 'reseller.apps');\n }\n\n private sort: {field: string, desc: boolean} = {field: null, desc: false};\n private apps: List;\n private unsub;\n\n private getInstalledStatus(item: AppModel) {\n return [Number(item.getInstalled())];\n }\n\n private onAppInstalledChange(event, index) {\n this.appStore.dispatch(this.resellerAction.appStatus(event.item, event.value[\"0\"]));\n }\n\n private ngOnDestroy() {\n this.unsub();\n }\n\n}\n\n" }, { "path": "src/comps/simple-grid-module/SimpleGridModule.ts", "content": "import {SimpleGridData} from \"./SimpleGridData\";\nimport {SimpleGridTable} from \"./SimpleGridTable\";\nimport {SimpleGridSortableHeader} from \"./SimpleGridSortableHeader\";\nimport {SimpleGridRecord} from \"./SimpleGridRecord\";\nimport {SimpleGridDataImage} from \"./SimpleGridDataImage\";\nimport {SimpleGridDataCurrency} from \"./SimpleGridDataCurrency\";\nimport {SimpleGridDataChecks} from \"./SimpleGridDataChecks\";\nimport {SimpleGridDataDropdown} from \"./SimpleGridDataDropdown\";\nimport {\n NgModule,\n ModuleWithProviders\n} from \"@angular/core\";\nimport {CommonModule} from \"@angular/common\";\nimport {\n FormsModule,\n ReactiveFormsModule\n} from \"@angular/forms\";\nimport {SimpleGridDraggable} from \"./SimpleGridDraggable\";\n// import {StoreModel} from \"../../models/StoreModel\";\n\n\nexport const SIMPLEGRID_DIRECTIVES: Array = [SimpleGridTable, SimpleGridSortableHeader, SimpleGridRecord, SimpleGridData, SimpleGridDataCurrency, SimpleGridDataImage, SimpleGridDataChecks, SimpleGridDataDropdown, SimpleGridDraggable];\n\nexport interface ISimpleGridEdit {\n value: string;\n item: any;\n}\n\n@NgModule({\n imports: [CommonModule, FormsModule, ReactiveFormsModule],\n declarations: SIMPLEGRID_DIRECTIVES,\n exports: SIMPLEGRID_DIRECTIVES\n})\n\n// here we are loading the providers ONLY when this shared module is loaded by the app and not\n// by a feature or lazy loaded module, this making sure we share a single instance of AuthService\nexport class SimpleGridModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: SimpleGridModule,\n providers: []\n };\n }\n}" }, { "path": "src/comps/simple-grid-module/SimpleGridRecord.ts", "content": "import {Component, Input, Output, ChangeDetectionStrategy, HostListener, forwardRef, Inject, HostBinding, EventEmitter} from '@angular/core'\nimport {SimpleGridTable} from \"./SimpleGridTable\";\n\n@Component({\n selector: 'tr[simpleGridRecord]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n `\n})\nexport class SimpleGridRecord {\n\n // we have to Inject -> forwardRef as SimpleGridTable is not yet due to load order of files\n constructor(@Inject(forwardRef(() => SimpleGridTable)) i_table: SimpleGridTable){\n this.m_table = i_table;\n }\n\n private m_table:SimpleGridTable\n private m_index;\n\n @Input()\n item;\n\n @Input()\n selectable:boolean = true;\n\n // @Input()\n // set table(i_table) {\n // this.m_table = i_table;\n // }\n\n @Output()\n onDoubleClicked:EventEmitter = new EventEmitter();\n\n @Output()\n onClicked:EventEmitter = new EventEmitter();\n\n @HostListener('dblclick', ['$event'])\n doubleClicked(event) {\n this.setSelected();\n this.onDoubleClicked.emit({\n target: event.target,\n item: this.item ? this.item : null\n });\n return true;\n }\n\n @HostListener('click', ['$event'])\n onSelected() {\n if (!this.selectable)\n return;\n this.setSelected();\n this.onClicked.emit({\n target: event.target,\n item: this.item ? this.item : null\n });\n return true;\n }\n\n @HostBinding('class.selectedTr')\n selectedClass:boolean = false;\n\n @Input()\n set index(i_index:number) {\n this.m_index = i_index;\n }\n\n get index() {\n return this.m_index;\n }\n\n ngOnInit() {\n var selected:SimpleGridRecord = this.m_table.getSelected();\n // even though the index is same as this, the Immutable data propSelectedModel\n // is out of sync inside table, so we need to update to latest version of this\n if (selected && selected.m_index == this.index)\n this.setSelected();\n }\n\n private setSelected() {\n this.m_table.setSelected(this);\n this.selectedClass = true;\n }\n}" }, { "path": "src/comps/simple-grid-module/SimpleGridSortableHeader.ts", "content": "import {Component, Input, ChangeDetectionStrategy} from '@angular/core';\n\n@Component({\n selector: 'th[sortableHeader]',\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n
        \n \n \n \n \n
        \n `,\n styles: [`\n div {\n cursor: pointer;\n width: 80px;\n }\n `]\n})\nexport class SimpleGridSortableHeader {\n\n // map the sortableHeader input into a local var named fieldName\n @Input('sortableHeader') fieldName: string;\n\n // no mapping just create local reference sort which gets passed in\n // the sort points to same instance as the one from the host component\n @Input() sort: {field: string, desc: boolean};\n\n headerClicked(): void {\n if (this.sort.field === this.fieldName) {\n if (this.sort.desc === true) {\n this.sort.desc = false;\n this.sort.field = null;\n } else {\n this.sort.desc = true;\n }\n } else {\n this.sort.field = this.fieldName;\n this.sort.desc = false;\n }\n }\n\n}" }, { "path": "src/comps/simple-grid-module/SimpleGridTable.ts", "content": "import {ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, QueryList} from \"@angular/core\";\nimport {SimpleGridRecord} from \"./SimpleGridRecord\";\nimport {SimpleGridDraggable} from \"./SimpleGridDraggable\";\n\n@Component({\n selector: 'simpleGridTable',\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n .simpleTable {\n background-color: white;\n }\n\n * {\n font-size: 0.9em;\n }\n `],\n template: `\n \n \n
        \n `,\n})\n\nexport class SimpleGridTable {\n @Input() sort;\n\n @Input() list;\n\n private selected;\n\n @ContentChildren(SimpleGridRecord) simpleGridRecords: QueryList;\n @ContentChild(SimpleGridDraggable) simpleGridDraggable;\n\n public setSelected(i_selected: SimpleGridRecord) {\n this.deselect();\n this.selected = i_selected;\n // var rec = i_selected.item;\n // console.log(`user selected ${rec.getBusinessId()} ${rec.getName()} ${rec.getAccessMask()}`);\n }\n\n public deselect() {\n this.selected = null;\n if (!this.simpleGridRecords && !this.simpleGridDraggable)\n return;\n // content children parsed differently depending if we are using SimpleGridDraggable or not\n var records: QueryList = this.simpleGridRecords.length > 0 ? this.simpleGridRecords : this.simpleGridDraggable.simpleGridRecords;\n records.map((i_simpleGridRecord: SimpleGridRecord) => {\n i_simpleGridRecord.selectedClass = false;\n })\n }\n\n public getSelected(): SimpleGridRecord {\n return this.selected;\n }\n\n // ngAfterViewInit() {\n // if (!this.simpleGridRecords && !this.simpleGridDraggable) return;\n // var records: QueryList = this.simpleGridRecords.length > 0 || this.simpleGridDraggable.simpleGridRecords;\n // records.changes.subscribe(val => {\n // var arr = records.toArray();\n // });\n // }\n\n // public getOrder() {\n // if (!this.simpleGridRecords && !this.simpleGridDraggable) return;\n // var records: QueryList = this.simpleGridRecords.length > 0 || this.simpleGridDraggable.simpleGridRecords;\n // records.notifyOnChanges()\n // // this.cd.detectChanges();\n // records.forEach((s: SimpleGridRecord) => {\n // console.log(s.index + ' ' + s.item.getKey('event'));\n // });\n //\n // }\n}" }, { "path": "src/comps/sliderpanel/SliderItemContent.ts", "content": "import {ApplicationRef, ChangeDetectorRef, Component, DoCheck, Input, Output, TemplateRef, ViewContainerRef} from \"@angular/core\";\nimport {Sliderpanel} from \"./Sliderpanel\";\nimport {Observable, Subject} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\n\nexport interface ISliderItemData {\n to: string;\n direction: string;\n}\n\n@Component({\n selector: 'SlideritemContent',\n template: `\n \n\n \n \n `,\n})\nexport class SlideritemContent extends Compbaser {\n\n private m_onChanges$ = new Subject()\n\n constructor(private viewContainer: ViewContainerRef, protected sliderPanel: Sliderpanel, private cd: ChangeDetectorRef, ap:ApplicationRef) {\n super();\n this.viewContainer.element.nativeElement.classList.add('page');\n this.sliderPanel.addSlider(this);\n\n this.cancelOnDestroy(\n this.m_onChanges$.debounceTime(300)\n .subscribe((data: any) => {\n this.sliderPanel.slideToPage(data.to, data.direction)\n this.cd.markForCheck();\n })\n )\n }\n\n @Input() toDirection: 'left' | 'right';\n @Input() fromDirection: 'left' | 'right';\n @Input() to: string;\n @Input() from: string;\n @Input() showToButton: boolean = true;\n @Input() showFromButton: boolean = true;\n @Output() onChange: Observable = new Subject().delay(300).debounceTime(1000);\n\n public addClass(i_className) {\n this.viewContainer.element.nativeElement.classList.add(i_className);\n }\n\n public hasClass(i_className) {\n this.viewContainer.element.nativeElement.classList.contains(i_className);\n }\n\n public getNative() {\n return this.viewContainer.element.nativeElement;\n }\n\n public removeClass(i_className) {\n this.viewContainer.element.nativeElement.classList.remove(i_className);\n }\n\n public slideTo(to: string, direction: string) {\n (this.onChange as Subject).next({\n to: to,\n direction: direction\n })\n this.m_onChanges$.next({to, direction})\n // this.sliderPanel.slideToPage(to, direction)\n }\n\n public onNext() {\n this.slideTo(this.to, this.toDirection);\n }\n\n public onPrev() {\n this.slideTo(this.from, this.fromDirection);\n }\n\n destroy(){\n // console.log('dest SliderItem');\n }\n}\n\n" }, { "path": "src/comps/sliderpanel/Slideritem.ts", "content": "import {ApplicationRef, ChangeDetectorRef, Component, DoCheck, Input, Output, TemplateRef, ViewContainerRef} from \"@angular/core\";\nimport {Sliderpanel} from \"./Sliderpanel\";\nimport {Observable, Subject} from \"rxjs\";\nimport {Compbaser} from \"ng-mslib\";\n\nexport interface ISliderItemData {\n to: string;\n direction: string;\n}\n\n@Component({\n selector: 'Slideritem',\n // changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n \n\n \n\n \n\n \n `,\n})\nexport class Slideritem extends Compbaser implements DoCheck {\n\n m_render: boolean = false;\n m_onChanges$ = new Subject()\n\n constructor(private viewContainer: ViewContainerRef, protected sliderPanel: Sliderpanel, private cd: ChangeDetectorRef, ap: ApplicationRef) {\n super();\n this.viewContainer.element.nativeElement.classList.add('page');\n this.sliderPanel.addSlider(this);\n\n this.cancelOnDestroy(\n this.m_onChanges$.debounceTime(300)\n .subscribe((data: any) => {\n this.sliderPanel.slideToPage(data.to, data.direction)\n this.cd.markForCheck();\n })\n )\n }\n\n ngDoCheck() {\n if (this.viewContainer.element.nativeElement.classList.contains('selected')) {\n if (this.m_render == true)\n return;\n this.m_render = true;\n // console.log('added');\n this.cd.detectChanges();\n } else {\n if (this.m_render == false)\n return;\n setTimeout(() => {\n this.m_render = false;\n // console.log('removed');\n this.cd.detectChanges();\n }, 500)\n }\n }\n\n @Input() templateRef: TemplateRef;\n @Input() toDirection: 'left' | 'right';\n @Input() fromDirection: 'left' | 'right';\n @Input() to: string;\n @Input() from: string;\n @Input() showToButton: boolean = true;\n @Input() showFromButton: boolean = true;\n @Output() onChange: Observable = new Subject().delay(300).debounceTime(1000);\n\n public addClass(i_className) {\n this.viewContainer.element.nativeElement.classList.add(i_className);\n }\n\n public hasClass(i_className) {\n this.viewContainer.element.nativeElement.classList.contains(i_className);\n }\n\n public getNative() {\n return this.viewContainer.element.nativeElement;\n }\n\n public removeClass(i_className) {\n this.viewContainer.element.nativeElement.classList.remove(i_className);\n }\n\n public slideTo(to: string, direction: string) {\n (this.onChange as Subject).next({\n to: to,\n direction: direction\n })\n this.m_onChanges$.next({to, direction})\n // this.sliderPanel.slideToPage(to, direction)\n }\n\n public onNext() {\n this.slideTo(this.to, this.toDirection);\n }\n\n public onPrev() {\n this.slideTo(this.from, this.fromDirection);\n }\n\n destroy() {\n // console.log('dest SliderItem');\n }\n}\n\n" }, { "path": "src/comps/sliderpanel/Sliderpanel.ts", "content": "import {\n Component,\n ViewContainerRef,\n Inject\n} from '@angular/core';\nimport {DOCUMENT} from '@angular/platform-browser';\nimport {Slideritem} from \"./Slideritem\";\n\n/**\n @class Sliderpanel\n example: this.slideToPage('campaignNameSelectorView', 'left')\n **/\n\n@Component({\n selector: 'Sliderpanel',\n template: ``\n})\n\nexport class Sliderpanel {\n private el: any;\n private viewContainer: ViewContainerRef;\n private dom: HTMLBodyElement;\n private sliders: Array = [];\n\n constructor(viewContainer: ViewContainerRef, @Inject(DOCUMENT) private doc:any) {\n this.dom = doc.body;\n this.viewContainer = viewContainer;\n this.el = viewContainer.element.nativeElement;\n }\n\n private getElementByClass(element: string) {\n var jq: any = jQuery;\n return jq(this.dom).find('.' + element, this.el)[0];\n }\n\n private removeAllClassesFrom(elementClass: any, selected?: boolean) {\n var element = this.getElementByClass(elementClass);\n if (selected) {\n jQuery(element).removeClass('selected');\n return;\n }\n jQuery(element).removeClass('left');\n jQuery(element).removeClass('right');\n jQuery(element).removeClass('center');\n jQuery(element).removeClass('transition');\n }\n\n private addClassesTo(elementClass: any, classesToAdd: string[]) {\n var element = this.getElementByClass(elementClass);\n for (var i = 0; i < classesToAdd.length; i++) {\n jQuery(element).addClass(classesToAdd[i])\n }\n }\n\n public slideToPage(toClassName: string, i_direction: string): void {\n if (toClassName == 'selected')\n return;\n // Position the new page at the starting position of the animation\n this.removeAllClassesFrom(toClassName);\n this.addClassesTo(toClassName, [\"page\", i_direction]);\n // Position the new page and the current page at the ending position of their animation with a transition class indicating the duration of the animation and force reflow of page so it renders\n var parent = jQuery(this.getElementByClass(toClassName)).parent();\n var grandparent = jQuery(parent).parent();\n var offsetWidth = jQuery(grandparent).prop('offsetWidth');\n this.removeAllClassesFrom(toClassName);\n this.addClassesTo(toClassName, ['page', 'transition', 'center']);\n this.removeAllClassesFrom('selected');\n this.addClassesTo('selected', ['page', 'transition', i_direction === 'left' ? 'right' : 'left']);\n this.removeAllClassesFrom('selected', true);\n this.addClassesTo(toClassName, ['selected']);\n }\n\n public addSlider(i_slider) {\n this.sliders.push(i_slider);\n }\n}\n" }, { "path": "src/comps/svg-icon/svg-icon.ts", "content": "import {Component, Input, ChangeDetectionStrategy, ElementRef, Renderer} from '@angular/core';\nimport {Http, Response} from '@angular/http';\n@Component({\n selector: 'svg-icon',\n template: `\n `,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class SvgIcon {\n @Input()\n set path(val: string) {\n this.loadSvg(val);\n }\n\n @Input() height;\n @Input() width;\n @Input() alt: string;\n\n constructor(private http: Http, private elementRef: ElementRef) {\n\n }\n\n loadSvg(val: string) {\n // this.http.get(`svgs/${val}.svg`) // grab locally\n this.http.get(val)\n .subscribe(\n res => {\n // get our element and clean it out\n const element = this.elementRef.nativeElement;\n var svgFinal;\n element.innerHTML = '';\n // get response and build svg element\n var response = res.text();\n const parser = new DOMParser();\n\n\n if (this.height && this.width) {\n var svgHeight, svgWidth, re;\n svgHeight = response.match(/(height=\")([^\\\"]*)/)[2];\n re = new RegExp('height=\"' + svgHeight + '\"', \"ig\");\n response = response.replace(re, `height=\"${this.height}\"`);\n\n svgWidth = response.match(/(width=\")([^\\\"]*)/)[2];\n re = new RegExp('width=\"' + svgWidth + '\"', \"ig\");\n response = response.replace(re, `width=\"${this.width}\"`);\n // var s = new String(response);\n }\n\n svgFinal = parser.parseFromString(response, 'image/svg+xml');\n element.appendChild(svgFinal.documentElement);\n // insert the svg result\n\n },\n err => {\n console.error(err);\n });\n }\n}" }, { "path": "src/comps/tabs/tab.ts", "content": "import {Component, Host, Output, EventEmitter} from '@angular/core';\nimport {Tabs} from '../tabs/tabs';\n\n@Component({\n selector: 'tab',\n inputs: [\n 'title:tabtitle',\n 'active'\n ],\n styles: [`\n .pane {\n padding: 1em;\n background-color: white;\n border-left: 1px solid #dddddd;\n border-right: 1px solid #dddddd;\n border-bottom: 1px solid #dddddd;\n }\n `],\n template: `\n
        \n \n
        \n `\n})\n\n/**\n Add this Tab as part of it's parents Tabs component\n use @Host to make sure we only look for a parent Tabs dependency injector\n and don't go any further to prevent lookup of wrong Tabs under misconfiguration\n **/\nexport class Tab {\n\n constructor(@Host() private tabs: Tabs) {\n tabs.addTab(this);\n }\n\n @Output()\n activated: EventEmitter = new EventEmitter();\n\n public title: string;\n _active = false;\n _show = true;\n\n public set active(value) {\n this._active = value || false;\n if (this._active)\n this.activated.emit(true);\n }\n\n public get active() {\n return this._active;\n }\n\n public set show(value) {\n this._show = value;\n if (value == false) {\n this._active = false\n this.tabs.checkActive();\n }\n }\n\n public get show() {\n return this._show;\n }\n\n}\n" }, { "path": "src/comps/tabs/tabs.ts", "content": "import {Component} from '@angular/core';\n//import {Tab} from 'tab';\n\n@Component({\n selector: 'tabs',\n template: `\n \n \n `\n})\nexport class Tabs {\n\n tabs: any[];\n removed;\n\n constructor() {\n this.tabs = [];\n }\n\n private selectTab(tab, event) {\n event.preventDefault;\n this.tabs.forEach((tab) => tab.active = false);\n tab.active = true;\n return false;\n }\n\n /** make sure at least one tab is active **/\n public checkActive() {\n var actives = this.tabs.filter((tab) => tab.active == true);\n actives.length == 0 ? this.tabs[0].active = true : null;\n }\n\n addTab(tab: any) {\n if (this.tabs.length === 0) {\n tab.active = true;\n }\n this.tabs.push(tab);\n }\n}" }, { "path": "src/create_reflection.html", "content": "\n\n\n\n\n\n\n\n\n" }, { "path": "src/decorators/once-decorator.ts", "content": "import {Subscriber} from \"rxjs\";\nexport function Once(milliseconds: number = 0) {\n return function (target, key, descriptor) {\n var originalMethod = descriptor.value;\n descriptor.value = function (...args) {\n var sub = originalMethod.apply(this, args);\n setTimeout(() => {\n if (sub instanceof Subscriber) {\n sub.unsubscribe();\n } else if (sub instanceof Function) {\n sub()\n } else if (sub === null) {\n } else {\n throw new Error('@Once did not receive something to unsubscribe from, did you forget to return an Observable maybe?');\n }\n }, milliseconds);\n };\n return descriptor;\n }\n}" }, { "path": "src/decorators/timeout-decorator.ts", "content": "// ref: http://blog.wolksoftware.com/decorators-reflection-javascript-typescript\n// ref: https://medium.com/@NetanelBasal/javascript-make-your-code-cleaner-with-decorators-d34fc72af947#.fe9f2rfb8\n\nexport function timeout( milliseconds: number = 0 ) {\n\n return function( target, key, descriptor ) {\n\n var originalMethod = descriptor.value;\n\n descriptor.value = function (...args) {\n\n setTimeout(() => {\n originalMethod.apply(this, args);\n }, milliseconds);\n\n };\n\n return descriptor;\n }\n\n\n}" }, { "path": "src/environments/environment.hmr.ts", "content": "import {StoreDevtoolsModule} from \"@ngrx/store-devtools\";\nexport const environment = {\n production: false,\n hmr: true,\n imports: [],\n // imports: [\n // StoreDevtoolsModule.instrumentStore({maxAge: 2}),\n // ]\n};" }, { "path": "src/environments/environment.prod.ts", "content": "export const environment = {\n production: true,\n hmr: false,\n imports: []\n};\n" }, { "path": "src/environments/environment.ts", "content": "// The file contents for the current environment will overwrite these during build.\n// The build system defaults to the dev environment which uses `environment.ts`, but if you do\n// `ng build --env=prod` then `environment.prod.ts` will be used instead.\n// The list of which env maps to which file can be found in `angular-cli.json`.\n\nimport {StoreDevtoolsModule} from \"@ngrx/store-devtools\";\nexport const environment = {\n production: false,\n hmr: false,\n imports: [\n StoreDevtoolsModule.instrumentStore({maxAge: 2}),\n ]\n};\n" }, { "path": "src/filters/filter-model-pipe.ts", "content": "import {Pipe, PipeTransform} from '@angular/core';\nimport {StoreModel} from \"../store/model/StoreModel\";\nimport * as _ from 'lodash';\n\n@Pipe({\n name: 'FilterModelPipe'\n})\nexport class FilterModelPipe implements PipeTransform {\n transform(model:StoreModel, ...args:any[]):boolean {\n if (_.isUndefined(args['0']) || _.isEmpty(args['0']))\n return false;\n try {\n var field = args[2];\n var str1:string = args[0].toLowerCase();\n var str2:string;\n if (typeof model[field] === \"function\"){\n str2 = model[field]().toLowerCase();\n } else {\n str2 = model[field].toLowerCase();\n }\n\n if (str2.indexOf(str1) > -1)\n return false;\n return true;\n } catch (e) {\n return false;\n }\n }\n}" }, { "path": "src/hmr.ts", "content": "import { NgModuleRef, ApplicationRef } from '@angular/core';\nimport { createNewHosts } from '@angularclass/hmr';\n\nexport const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {\n let ngModule: NgModuleRef;\n module.hot.accept();\n bootstrap().then(mod => ngModule = mod);\n module.hot.dispose(() => {\n let appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);\n let elements = appRef.components.map(c => c.location.nativeElement);\n let makeVisible = createNewHosts(elements);\n ngModule.destroy();\n makeVisible();\n });\n};" }, { "path": "src/index.html", "content": "\n\n\n \n Dashboard\n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n\n\n\n
        \n
        \n \n
        \n        \n\n\n" }, { "path": "src/interfaces/BlockTypeEnum.ts", "content": "export enum BlockTypeEnum {\n 'COMPONENT',\n 'RESOURCE',\n 'SCENE'\n}\n" }, { "path": "src/interfaces/Consts.ts", "content": "export const BLOCKS_LOADED = 'BLOCKS_LOADED';\nexport const PLACEMENT_SCENE = 'PLACEMENT_SCENE';\nexport const PLACEMENT_CHANNEL = 'PLACEMENT_CHANNEL';\nexport const PLACEMENT_IS_SCENE = 'PLACEMENT_IS_SCENE';\nexport const PLACEMENT_LISTS = 'PLACEMENT_LISTS';\nexport const FASTERQ_QUEUE_CALL_CANCLED = 'FASTERQ_QUEUE_CALL_CANCLED';\nexport const BLOCK_SERVICE = 'BLOCK_SERVICE';\n\nexport const BlockLabels = {\n 'BLOCKCODE_SCENE': 3510,\n 'BLOCKCODE_COLLECTION': 4100,\n 'BLOCKCODE_TWITTER': 4500,\n 'BLOCKCODE_TWITTER_ITEM': 4505,\n 'BLOCKCODE_JSON': 4300,\n 'BLOCKCODE_JSON_ITEM': 4310,\n 'BLOCKCODE_WORLD_WEATHER': 6010,\n 'BLOCKCODE_GOOGLE_SHEETS': 6022,\n 'BLOCKCODE_CALENDAR': 6020,\n 'BLOCKCODE_TWITTERV3': 6230,\n 'BLOCKCODE_INSTAGRAM': 6050,\n 'BLOCKCODE_DIGG': 6000,\n 'BLOCKCODE_IMAGE': 3130,\n 'BLOCKCODE_SVG': 3140,\n 'BLOCKCODE_VIDEO': 3100,\n 'RSS': 3345,\n 'QR': 3430,\n 'YOUTUBE': 4600,\n 'LOCATION': 4105,\n 'FASTERQ': 6100,\n 'IMAGE': 3160,\n 'EXTERNAL_VIDEO': 3150,\n 'CLOCK': 3320,\n 'HTML': 3235,\n 'LABEL': 3241,\n 'MRSS': 3340\n}\n\nexport class Consts {\n public static Clas() {\n return {\n CLASS_APP_HEIGHT: '.appHeight'\n };\n }\n\n public static Events() {\n return {\n WIN_SIZED: 'winSized',\n MENU_SELECTION: 'menuSelection',\n STATIONS_NETWORK_ERROR: 'stationsNetworkError',\n UPGRADE_ENTERPRISE: 'UPGRADE_ENTERPRISE'\n };\n }\n\n public static Values() {\n return {\n MENU_MIN_ICON_SHOW: 1550,\n APP_SIZE: 'AppSize',\n SERVER_MODE: 'serverMode', // 0 = cloud, 1 = private 2 = hybrid\n USER_NAME: 'userName',\n USER_PASS: 'userPass'\n };\n }\n\n public static Services() {\n return {\n App: 'Application',\n Properties: 'Properties',\n ActionService: 'ActionService'\n };\n }\n}\n" }, { "path": "src/interfaces/IAddContent.ts", "content": "import {BlockTypeEnum} from \"./BlockTypeEnum\";\nimport {ISceneData} from \"../app/blocks/block-service\";\n\nexport interface IAddContents {\n type:BlockTypeEnum;\n blockCode: number;\n name: string;\n allow: boolean;\n fa: string;\n description: string;\n resourceId?: number;\n blockId?:number;\n sceneData?: ISceneData;\n size?:string;\n specialJsonItemName?: string;\n specialJsonItemColor?: string;\n}\n" }, { "path": "src/interfaces/IRegisterCaller.ts", "content": "export interface IRegisterCaller {\n registerCaller(caller:any):void;\n}" }, { "path": "src/interfaces/IScreenTemplate.ts", "content": "import {OrientationEnum} from \"../app/campaigns/campaign-orientation\";\n\nexport interface IScreenTemplateData {\n resolution: string;\n screenType: string;\n orientation: OrientationEnum;\n screenProps: {};\n name: string;\n scale: number;\n campaignTimelineId?: number,\n campaignTimelineBoardTemplateId?: number\n}" }, { "path": "src/libs/bootstrap-timepicker/CHANGELOG.md", "content": "# Changelog\n\nAll notable changes will be documented in this file. This project\nsort of conforms to Semantic Versioning. Since we're still pre-1.0,\nit's like the Wild West up in here!\n\n## Unreleased\n### Added (not started)\n- Still planning out how to include i18n data and functionality.\n\n### Deprecated (not started)\n- Incorrect usage of the word \"meridian\" will be deprecated. It should\n be \"meridiem\".\n- `showWidgetOnAddonClick`'s current behavior is not intuitive. Clicking\n the input addon should _toggle_ the widget instead of showing it.\n\n## 0.5.2 - 2016-01-02\n### Added\n- Tabbing out of the timepicker widget will now close it.\n- You can specify your own icon classes. See docs for the option.\n\n### Changed\n- Cleaned up `package.json` and `bower.json` files. The npm/bower package\n should be cleaner now.\n- `timepicker.less` now lives in the `css/` directory of the package.\n- bootstrap-timepicker now uses the latest minor releases for jQuery 2 and\n Bootstrap 3\n\n### Fixed\n- Fixed bad interaction between `setTime(\"12:00 AM\")` and `showMeridian`\n- Various documentation issues were fixed.\n\n## 0.5.1 - 2015-08-06\n### Changed\n- Critical fix (#279) for bootstrap initialization. If you happened to\n list your timepicker's classes in an order other than \"input-group\n bootstrap-timepicker\", you'd be out of luck. Now we use jQuery's\n `hasClass` method correctly. Yay!\n\n## 0.5 - 2015-07-31\n### Changed\n- Bootstrap 3 support. No more Bootstrap 2 support.\n- setTime sets time better\n- more tests, and they exercise Bootstrap 3 support!\n- snapToStep is a new option, off by default, which snaps times to the\n nearest step or overflows to 0 if it would otherwise snap to 60 or\n more.\n- explicitMode is a new option, off by default, which lets you leave\n out colons when typing times.\n- shift+tab now correctly moves the cursor to the previously\n highlighted unit, and blurs the timepicker when expected.\n- We have cut out significant amounts of old cruft from the\n repository.\n- Minified/Uglified code is no longer kept in the repo. Please\n download a release tarball or zip file to get the compiled and\n minified CSS and Javascript files.\n" }, { "path": "src/libs/bootstrap-timepicker/README.md", "content": "Timepicker for Twitter Bootstrap\n=======\n[![Build Status](https://travis-ci.org/jdewit/bootstrap-timepicker.svg?branch=gh-pages)](https://travis-ci.org/jdewit/bootstrap-timepicker)\n\nA simple timepicker component for Twitter Bootstrap.\n\nStatus\n======\nPlease take a look at the `CHANGELOG.md` and the issues tab for issues we're\nworking on and their relative priorities.\n\nInstallation\n============\n\nThis project is registered as a Bower package,\nand can be installed with the following command:\n\n```bash\nbower install bootstrap-timepicker\n```\n\nYou can also download our latest release (and any previous release) \nhere.\n\nDemos & Documentation\n=====================\n\nView demos & documentation.\n\nSupport\n=======\n\nIf you make money using this timepicker, please consider \nsupporting its development.\n\n\"Click \n\nContributing\n============\n\n1. Install NodeJS and Node Package Manager.\n\n2. Install packages\n\n```bash\nnpm install\n```\n\n3. Use Bower to get the dev dependencies.\n\n```bash \nbower install\n```\n\n4. Use Grunt to run tests, compress assets, etc. \n\n```bash \ngrunt test // run jshint and jasmine tests\ngrunt watch // run jsHint and Jasmine tests whenever a file is changed\ngrunt compile // minify the js and css files\n```\n\n- Please make it easy on me by covering any new features or issues \n with Jasmine tests.\n- If your changes need documentation, please take the time to update the docs.\n\nAcknowledgements\n================\n\nThanks to everyone who have given feedback and submitted pull requests. A \nlist of all the contributors can be found here.\n\nSpecial thanks to @eternicode and his Twitter Datepicker for inspiration.\n" }, { "path": "src/libs/bootstrap-timepicker/bower.json", "content": "{\n \"name\": \"bootstrap-timepicker\",\n \"description\": \"A timepicker component for Twitter Bootstrap\",\n \"version\": \"0.5.2\",\n \"main\": \"js/bootstrap-timepicker.js\",\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"_layouts\",\n \"node_modules\",\n \"_config.yml\",\n \"assets\",\n \"spec\",\n \"index.html\",\n \"Gruntfile.js\",\n \"package.json\",\n \"composer.json\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/jdewit/bootstrap-timepicker\"\n },\n \"dependencies\": {\n \"bootstrap\": \"^3.0\",\n \"jquery\": \"^2.0\"\n },\n \"devDependencies\": {\n \"autotype\": \"https://raw.github.com/mmonteleone/jquery.autotype/master/jquery.autotype.js\"\n },\n \"keywords\": [\n \"widget\",\n \"timepicker\",\n \"time\"\n ]\n}\n" }, { "path": "src/libs/bootstrap-timepicker/composer.json", "content": "{\n\t\"name\" : \"jdewit/bootstrap-timepicker\",\n\t\"description\" : \"A simple timepicker component for Twitter Bootstrap.\",\n\t\"version\" : \"0.5.2\",\n\t\"license\" : \"MIT\",\n\t\"authors\": [\n\t\t{\n\t \"name\" : \"Joris de Wit\",\n\t \"email\" : \"joris.w.dewit@gmail.com\"\n\t\t}\n\t]\n\n}\n" }, { "path": "src/libs/bootstrap-timepicker/css/bootstrap-timepicker.css", "content": "/*!\n * Timepicker Component for Twitter Bootstrap\n *\n * Copyright 2013 Joris de Wit\n *\n * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\n.bootstrap-timepicker {\n position: relative;\n}\n.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {\n left: auto;\n right: 0;\n}\n.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {\n left: auto;\n right: 12px;\n}\n.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {\n left: auto;\n right: 13px;\n}\n.bootstrap-timepicker .input-group-addon {\n cursor: pointer;\n}\n.bootstrap-timepicker .input-group-addon i {\n display: inline-block;\n width: 16px;\n height: 16px;\n}\n.bootstrap-timepicker-widget.dropdown-menu {\n padding: 4px;\n}\n.bootstrap-timepicker-widget.dropdown-menu.open {\n display: inline-block;\n}\n.bootstrap-timepicker-widget.dropdown-menu:before {\n border-bottom: 7px solid rgba(0, 0, 0, 0.2);\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: \"\";\n display: inline-block;\n position: absolute;\n}\n.bootstrap-timepicker-widget.dropdown-menu:after {\n border-bottom: 6px solid #FFFFFF;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n content: \"\";\n display: inline-block;\n position: absolute;\n}\n.bootstrap-timepicker-widget.timepicker-orient-left:before {\n left: 6px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-left:after {\n left: 7px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-right:before {\n right: 6px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-right:after {\n right: 7px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-top:before {\n top: -7px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-top:after {\n top: -6px;\n}\n.bootstrap-timepicker-widget.timepicker-orient-bottom:before {\n bottom: -7px;\n border-bottom: 0;\n border-top: 7px solid #999;\n}\n.bootstrap-timepicker-widget.timepicker-orient-bottom:after {\n bottom: -6px;\n border-bottom: 0;\n border-top: 6px solid #ffffff;\n}\n.bootstrap-timepicker-widget a.btn,\n.bootstrap-timepicker-widget input {\n border-radius: 4px;\n}\n.bootstrap-timepicker-widget table {\n width: 100%;\n margin: 0;\n}\n.bootstrap-timepicker-widget table td {\n text-align: center;\n height: 30px;\n margin: 0;\n padding: 2px;\n}\n.bootstrap-timepicker-widget table td:not(.separator) {\n min-width: 30px;\n}\n.bootstrap-timepicker-widget table td span {\n width: 100%;\n}\n.bootstrap-timepicker-widget table td a {\n border: 1px transparent solid;\n width: 100%;\n display: inline-block;\n margin: 0;\n padding: 8px 0;\n outline: 0;\n color: #333;\n}\n.bootstrap-timepicker-widget table td a:hover {\n text-decoration: none;\n background-color: #eee;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n border-color: #ddd;\n}\n.bootstrap-timepicker-widget table td a i {\n margin-top: 2px;\n font-size: 18px;\n}\n.bootstrap-timepicker-widget table td input {\n width: 25px;\n margin: 0;\n text-align: center;\n}\n.bootstrap-timepicker-widget .modal-content {\n padding: 4px;\n}\n@media (min-width: 767px) {\n .bootstrap-timepicker-widget.modal {\n width: 200px;\n margin-left: -100px;\n }\n}\n@media (max-width: 767px) {\n .bootstrap-timepicker {\n width: 100%;\n }\n .bootstrap-timepicker .dropdown-menu {\n width: 100%;\n }\n}\n" }, { "path": "src/libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css", "content": "/*!\n * Timepicker Component for Twitter Bootstrap\n *\n * Copyright 2013 Joris de Wit\n *\n * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */.bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .input-group-addon{cursor:pointer}.bootstrap-timepicker .input-group-addon i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:4px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:\"\";display:inline-block;position:absolute}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:\"\";display:inline-block;position:absolute}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:25px;margin:0;text-align:center}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}}" }, { "path": "src/libs/bootstrap-timepicker/css/timepicker.less", "content": "/*!\n * Timepicker Component for Twitter Bootstrap\n *\n * Copyright 2013 Joris de Wit\n *\n * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\n.bootstrap-timepicker {\n position: relative;\n\n &.pull-right {\n .bootstrap-timepicker-widget {\n &.dropdown-menu {\n left: auto;\n right: 0;\n\n &:before {\n left: auto;\n right: 12px;\n }\n &:after {\n left: auto;\n right: 13px;\n }\n }\n }\n }\n\n .input-group-addon {\n cursor: pointer;\n i {\n display: inline-block;\n width: 16px;\n height: 16px;\n }\n }\n}\n.bootstrap-timepicker-widget {\n &.dropdown-menu {\n padding: 4px;\n &.open {\n display: inline-block;\n }\n &:before {\n border-bottom: 7px solid rgba(0, 0, 0, 0.2);\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n content: \"\";\n display: inline-block;\n position: absolute;\n }\n &:after {\n border-bottom: 6px solid #FFFFFF;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n content: \"\";\n display: inline-block;\n position: absolute;\n }\n }\n &.timepicker-orient-left {\n &:before {\n left: 6px;\n }\n &:after {\n left: 7px;\n }\n }\n &.timepicker-orient-right {\n &:before {\n right: 6px;\n }\n &:after {\n right: 7px;\n }\n }\n &.timepicker-orient-top {\n &:before {\n top: -7px;\n }\n &:after {\n top: -6px;\n }\n }\n &.timepicker-orient-bottom {\n &:before {\n bottom: -7px;\n border-bottom: 0;\n border-top: 7px solid #999;\n }\n &:after {\n bottom: -6px;\n border-bottom: 0;\n border-top: 6px solid #ffffff;\n }\n }\n a.btn, input {\n border-radius: 4px;\n }\n\n table {\n width: 100%;\n margin: 0;\n\n td {\n text-align: center;\n height: 30px;\n margin: 0;\n padding: 2px;\n\n &:not(.separator) {\n min-width: 30px;\n }\n\n span {\n width: 100%;\n }\n a {\n border: 1px transparent solid;\n width: 100%;\n display: inline-block;\n margin: 0;\n padding: 8px 0;\n outline: 0;\n color: #333;\n\n &:hover {\n text-decoration: none;\n background-color: #eee;\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n border-radius: 4px;\n border-color: #ddd;\n }\n\n i {\n margin-top: 2px;\n font-size: 18px;\n }\n }\n input {\n width: 25px;\n margin: 0;\n text-align: center;\n }\n }\n }\n}\n\n.bootstrap-timepicker-widget .modal-content {\n padding: 4px;\n}\n\n@media (min-width: 767px) {\n .bootstrap-timepicker-widget.modal {\n width: 200px;\n margin-left: -100px;\n }\n}\n\n@media (max-width: 767px) {\n .bootstrap-timepicker {\n width: 100%;\n\n .dropdown-menu {\n width: 100%;\n }\n }\n}\n" }, { "path": "src/libs/bootstrap-timepicker/js/bootstrap-timepicker.js", "content": "/*!\n * Timepicker Component for Twitter Bootstrap\n *\n * Copyright 2013 Joris de Wit and bootstrap-timepicker contributors\n *\n * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\n(function($, window, document) {\n 'use strict';\n\n // TIMEPICKER PUBLIC CLASS DEFINITION\n var Timepicker = function(element, options) {\n this.widget = '';\n this.$element = $(element);\n this.defaultTime = options.defaultTime;\n this.disableFocus = options.disableFocus;\n this.disableMousewheel = options.disableMousewheel;\n this.isOpen = options.isOpen;\n this.minuteStep = options.minuteStep;\n this.modalBackdrop = options.modalBackdrop;\n this.orientation = options.orientation;\n this.secondStep = options.secondStep;\n this.snapToStep = options.snapToStep;\n this.showInputs = options.showInputs;\n this.showMeridian = options.showMeridian;\n this.showSeconds = options.showSeconds;\n this.template = options.template;\n this.appendWidgetTo = options.appendWidgetTo;\n this.showWidgetOnAddonClick = options.showWidgetOnAddonClick;\n this.icons = options.icons;\n this.maxHours = options.maxHours;\n this.explicitMode = options.explicitMode; // If true 123 = 1:23, 12345 = 1:23:45, else invalid.\n\n this.handleDocumentClick = function (e) {\n var self = e.data.scope;\n // This condition was inspired by bootstrap-datepicker.\n // The element the timepicker is invoked on is the input but it has a sibling for addon/button.\n if (!(self.$element.parent().find(e.target).length ||\n self.$widget.is(e.target) ||\n self.$widget.find(e.target).length)) {\n self.hideWidget();\n }\n };\n\n this._init();\n };\n\n Timepicker.prototype = {\n\n constructor: Timepicker,\n _init: function() {\n var self = this;\n\n if (this.showWidgetOnAddonClick && (this.$element.parent().hasClass('input-group') && this.$element.parent().hasClass('bootstrap-timepicker'))) {\n this.$element.parent('.input-group.bootstrap-timepicker').find('.input-group-addon').on({\n 'click.timepicker': $.proxy(this.showWidget, this)\n });\n this.$element.on({\n 'focus.timepicker': $.proxy(this.highlightUnit, this),\n 'click.timepicker': $.proxy(this.highlightUnit, this),\n 'keydown.timepicker': $.proxy(this.elementKeydown, this),\n 'blur.timepicker': $.proxy(this.blurElement, this),\n 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)\n });\n } else {\n if (this.template) {\n this.$element.on({\n 'focus.timepicker': $.proxy(this.showWidget, this),\n 'click.timepicker': $.proxy(this.showWidget, this),\n 'blur.timepicker': $.proxy(this.blurElement, this),\n 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)\n });\n } else {\n this.$element.on({\n 'focus.timepicker': $.proxy(this.highlightUnit, this),\n 'click.timepicker': $.proxy(this.highlightUnit, this),\n 'keydown.timepicker': $.proxy(this.elementKeydown, this),\n 'blur.timepicker': $.proxy(this.blurElement, this),\n 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this)\n });\n }\n }\n\n if (this.template !== false) {\n this.$widget = $(this.getTemplate()).on('click', $.proxy(this.widgetClick, this));\n } else {\n this.$widget = false;\n }\n\n if (this.showInputs && this.$widget !== false) {\n this.$widget.find('input').each(function() {\n $(this).on({\n 'click.timepicker': function() { $(this).select(); },\n 'keydown.timepicker': $.proxy(self.widgetKeydown, self),\n 'keyup.timepicker': $.proxy(self.widgetKeyup, self)\n });\n });\n }\n\n this.setDefaultTime(this.defaultTime);\n },\n\n blurElement: function() {\n this.highlightedUnit = null;\n this.updateFromElementVal();\n },\n\n clear: function() {\n this.hour = '';\n this.minute = '';\n this.second = '';\n this.meridian = '';\n\n this.$element.val('');\n },\n\n decrementHour: function() {\n if (this.showMeridian) {\n if (this.hour === 1) {\n this.hour = 12;\n } else if (this.hour === 12) {\n this.hour--;\n\n return this.toggleMeridian();\n } else if (this.hour === 0) {\n this.hour = 11;\n\n return this.toggleMeridian();\n } else {\n this.hour--;\n }\n } else {\n if (this.hour <= 0) {\n this.hour = this.maxHours - 1;\n } else {\n this.hour--;\n }\n }\n },\n\n decrementMinute: function(step) {\n var newVal;\n\n if (step) {\n newVal = this.minute - step;\n } else {\n newVal = this.minute - this.minuteStep;\n }\n\n if (newVal < 0) {\n this.decrementHour();\n this.minute = newVal + 60;\n } else {\n this.minute = newVal;\n }\n },\n\n decrementSecond: function() {\n var newVal = this.second - this.secondStep;\n\n if (newVal < 0) {\n this.decrementMinute(true);\n this.second = newVal + 60;\n } else {\n this.second = newVal;\n }\n },\n\n elementKeydown: function(e) {\n switch (e.which) {\n case 9: //tab\n if (e.shiftKey) {\n if (this.highlightedUnit === 'hour') {\n this.hideWidget();\n break;\n }\n this.highlightPrevUnit();\n } else if ((this.showMeridian && this.highlightedUnit === 'meridian') || (this.showSeconds && this.highlightedUnit === 'second') || (!this.showMeridian && !this.showSeconds && this.highlightedUnit ==='minute')) {\n this.hideWidget();\n break;\n } else {\n this.highlightNextUnit();\n }\n e.preventDefault();\n this.updateFromElementVal();\n break;\n case 27: // escape\n this.updateFromElementVal();\n break;\n case 37: // left arrow\n e.preventDefault();\n this.highlightPrevUnit();\n this.updateFromElementVal();\n break;\n case 38: // up arrow\n e.preventDefault();\n switch (this.highlightedUnit) {\n case 'hour':\n this.incrementHour();\n this.highlightHour();\n break;\n case 'minute':\n this.incrementMinute();\n this.highlightMinute();\n break;\n case 'second':\n this.incrementSecond();\n this.highlightSecond();\n break;\n case 'meridian':\n this.toggleMeridian();\n this.highlightMeridian();\n break;\n }\n this.update();\n break;\n case 39: // right arrow\n e.preventDefault();\n this.highlightNextUnit();\n this.updateFromElementVal();\n break;\n case 40: // down arrow\n e.preventDefault();\n switch (this.highlightedUnit) {\n case 'hour':\n this.decrementHour();\n this.highlightHour();\n break;\n case 'minute':\n this.decrementMinute();\n this.highlightMinute();\n break;\n case 'second':\n this.decrementSecond();\n this.highlightSecond();\n break;\n case 'meridian':\n this.toggleMeridian();\n this.highlightMeridian();\n break;\n }\n\n this.update();\n break;\n }\n },\n\n getCursorPosition: function() {\n var input = this.$element.get(0);\n\n if ('selectionStart' in input) {// Standard-compliant browsers\n\n return input.selectionStart;\n } else if (document.selection) {// IE fix\n input.focus();\n var sel = document.selection.createRange(),\n selLen = document.selection.createRange().text.length;\n\n sel.moveStart('character', - input.value.length);\n\n return sel.text.length - selLen;\n }\n },\n\n getTemplate: function() {\n var template,\n hourTemplate,\n minuteTemplate,\n secondTemplate,\n meridianTemplate,\n templateContent;\n\n if (this.showInputs) {\n hourTemplate = '';\n minuteTemplate = '';\n secondTemplate = '';\n meridianTemplate = '';\n } else {\n hourTemplate = '';\n minuteTemplate = '';\n secondTemplate = '';\n meridianTemplate = '';\n }\n\n templateContent = ''+\n ''+\n ''+\n ''+\n ''+\n (this.showSeconds ?\n ''+\n ''\n : '') +\n (this.showMeridian ?\n ''+\n ''\n : '') +\n ''+\n ''+\n ' '+\n ''+\n ' '+\n (this.showSeconds ?\n ''+\n ''\n : '') +\n (this.showMeridian ?\n ''+\n ''\n : '') +\n ''+\n ''+\n ''+\n ''+\n ''+\n (this.showSeconds ?\n ''+\n ''\n : '') +\n (this.showMeridian ?\n ''+\n ''\n : '') +\n ''+\n '
           
        '+ hourTemplate +':'+ minuteTemplate +':'+ secondTemplate +' '+ meridianTemplate +'
          
        ';\n\n switch(this.template) {\n case 'modal':\n template = '
        '+\n '
        '+\n '×'+\n '

        Pick a Time

        '+\n '
        '+\n '
        '+\n templateContent +\n '
        '+\n '
        '+\n 'OK'+\n '
        '+\n '
        ';\n break;\n case 'dropdown':\n template = '
        '+ templateContent +'
        ';\n break;\n }\n\n return template;\n },\n\n getTime: function() {\n if (this.hour === '') {\n return '';\n }\n\n return this.hour + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : '');\n },\n\n hideWidget: function() {\n if (this.isOpen === false) {\n return;\n }\n\n this.$element.trigger({\n 'type': 'hide.timepicker',\n 'time': {\n 'value': this.getTime(),\n 'hours': this.hour,\n 'minutes': this.minute,\n 'seconds': this.second,\n 'meridian': this.meridian\n }\n });\n\n if (this.template === 'modal' && this.$widget.modal) {\n this.$widget.modal('hide');\n } else {\n this.$widget.removeClass('open');\n }\n\n $(document).off('mousedown.timepicker, touchend.timepicker', this.handleDocumentClick);\n\n this.isOpen = false;\n // m_show/hide approach taken by datepicker\n this.$widget.detach();\n },\n\n highlightUnit: function() {\n this.position = this.getCursorPosition();\n if (this.position >= 0 && this.position <= 2) {\n this.highlightHour();\n } else if (this.position >= 3 && this.position <= 5) {\n this.highlightMinute();\n } else if (this.position >= 6 && this.position <= 8) {\n if (this.showSeconds) {\n this.highlightSecond();\n } else {\n this.highlightMeridian();\n }\n } else if (this.position >= 9 && this.position <= 11) {\n this.highlightMeridian();\n }\n },\n\n highlightNextUnit: function() {\n switch (this.highlightedUnit) {\n case 'hour':\n this.highlightMinute();\n break;\n case 'minute':\n if (this.showSeconds) {\n this.highlightSecond();\n } else if (this.showMeridian){\n this.highlightMeridian();\n } else {\n this.highlightHour();\n }\n break;\n case 'second':\n if (this.showMeridian) {\n this.highlightMeridian();\n } else {\n this.highlightHour();\n }\n break;\n case 'meridian':\n this.highlightHour();\n break;\n }\n },\n\n highlightPrevUnit: function() {\n switch (this.highlightedUnit) {\n case 'hour':\n if(this.showMeridian){\n this.highlightMeridian();\n } else if (this.showSeconds) {\n this.highlightSecond();\n } else {\n this.highlightMinute();\n }\n break;\n case 'minute':\n this.highlightHour();\n break;\n case 'second':\n this.highlightMinute();\n break;\n case 'meridian':\n if (this.showSeconds) {\n this.highlightSecond();\n } else {\n this.highlightMinute();\n }\n break;\n }\n },\n\n highlightHour: function() {\n var $element = this.$element.get(0),\n self = this;\n\n this.highlightedUnit = 'hour';\n\n if ($element.setSelectionRange) {\n setTimeout(function() {\n if (self.hour < 10) {\n $element.setSelectionRange(0,1);\n } else {\n $element.setSelectionRange(0,2);\n }\n }, 0);\n }\n },\n\n highlightMinute: function() {\n var $element = this.$element.get(0),\n self = this;\n\n this.highlightedUnit = 'minute';\n\n if ($element.setSelectionRange) {\n setTimeout(function() {\n if (self.hour < 10) {\n $element.setSelectionRange(2,4);\n } else {\n $element.setSelectionRange(3,5);\n }\n }, 0);\n }\n },\n\n highlightSecond: function() {\n var $element = this.$element.get(0),\n self = this;\n\n this.highlightedUnit = 'second';\n\n if ($element.setSelectionRange) {\n setTimeout(function() {\n if (self.hour < 10) {\n $element.setSelectionRange(5,7);\n } else {\n $element.setSelectionRange(6,8);\n }\n }, 0);\n }\n },\n\n highlightMeridian: function() {\n var $element = this.$element.get(0),\n self = this;\n\n this.highlightedUnit = 'meridian';\n\n if ($element.setSelectionRange) {\n if (this.showSeconds) {\n setTimeout(function() {\n if (self.hour < 10) {\n $element.setSelectionRange(8,10);\n } else {\n $element.setSelectionRange(9,11);\n }\n }, 0);\n } else {\n setTimeout(function() {\n if (self.hour < 10) {\n $element.setSelectionRange(5,7);\n } else {\n $element.setSelectionRange(6,8);\n }\n }, 0);\n }\n }\n },\n\n incrementHour: function() {\n if (this.showMeridian) {\n if (this.hour === 11) {\n this.hour++;\n return this.toggleMeridian();\n } else if (this.hour === 12) {\n this.hour = 0;\n }\n }\n if (this.hour === this.maxHours - 1) {\n this.hour = 0;\n\n return;\n }\n this.hour++;\n },\n\n incrementMinute: function(step) {\n var newVal;\n\n if (step) {\n newVal = this.minute + step;\n } else {\n newVal = this.minute + this.minuteStep - (this.minute % this.minuteStep);\n }\n\n if (newVal > 59) {\n this.incrementHour();\n this.minute = newVal - 60;\n } else {\n this.minute = newVal;\n }\n },\n\n incrementSecond: function() {\n var newVal = this.second + this.secondStep - (this.second % this.secondStep);\n\n if (newVal > 59) {\n this.incrementMinute(true);\n this.second = newVal - 60;\n } else {\n this.second = newVal;\n }\n },\n\n mousewheel: function(e) {\n if (this.disableMousewheel) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail,\n scrollTo = null;\n\n if (e.type === 'mousewheel') {\n scrollTo = (e.originalEvent.wheelDelta * -1);\n }\n else if (e.type === 'DOMMouseScroll') {\n scrollTo = 40 * e.originalEvent.detail;\n }\n\n if (scrollTo) {\n e.preventDefault();\n $(this).scrollTop(scrollTo + $(this).scrollTop());\n }\n\n switch (this.highlightedUnit) {\n case 'minute':\n if (delta > 0) {\n this.incrementMinute();\n } else {\n this.decrementMinute();\n }\n this.highlightMinute();\n break;\n case 'second':\n if (delta > 0) {\n this.incrementSecond();\n } else {\n this.decrementSecond();\n }\n this.highlightSecond();\n break;\n case 'meridian':\n this.toggleMeridian();\n this.highlightMeridian();\n break;\n default:\n if (delta > 0) {\n this.incrementHour();\n } else {\n this.decrementHour();\n }\n this.highlightHour();\n break;\n }\n\n return false;\n },\n\n /**\n * Given a segment value like 43, will round and snap the segment\n * to the nearest \"step\", like 45 if step is 15. Segment will\n * \"overflow\" to 0 if it's larger than 59 or would otherwise\n * round up to 60.\n */\n changeToNearestStep: function (segment, step) {\n if (segment % step === 0) {\n return segment;\n }\n if (Math.round((segment % step) / step)) {\n return (segment + (step - segment % step)) % 60;\n } else {\n return segment - segment % step;\n }\n },\n\n // This method was adapted from bootstrap-datepicker.\n place : function() {\n if (this.isInline) {\n return;\n }\n var widgetWidth = this.$widget.outerWidth(), widgetHeight = this.$widget.outerHeight(), visualPadding = 10, windowWidth =\n $(window).width(), windowHeight = $(window).height(), scrollTop = $(window).scrollTop();\n\n var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 10;\n var offset = this.component ? this.component.parent().offset() : this.$element.offset();\n var height = this.component ? this.component.outerHeight(true) : this.$element.outerHeight(false);\n var width = this.component ? this.component.outerWidth(true) : this.$element.outerWidth(false);\n var left = offset.left, top = offset.top;\n\n this.$widget.removeClass('timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left');\n\n if (this.orientation.x !== 'auto') {\n this.$widget.addClass('timepicker-orient-' + this.orientation.x);\n if (this.orientation.x === 'right') {\n left -= widgetWidth - width;\n }\n } else{\n // auto x orientation is best-placement: if it crosses a window edge, fudge it sideways\n // Default to left\n this.$widget.addClass('timepicker-orient-left');\n if (offset.left < 0) {\n left -= offset.left - visualPadding;\n } else if (offset.left + widgetWidth > windowWidth) {\n left = windowWidth - widgetWidth - visualPadding;\n }\n }\n // auto y orientation is best-situation: top or bottom, no fudging, decision based on which shows more of the widget\n var yorient = this.orientation.y, topOverflow, bottomOverflow;\n if (yorient === 'auto') {\n topOverflow = -scrollTop + offset.top - widgetHeight;\n bottomOverflow = scrollTop + windowHeight - (offset.top + height + widgetHeight);\n if (Math.max(topOverflow, bottomOverflow) === bottomOverflow) {\n yorient = 'top';\n } else {\n yorient = 'bottom';\n }\n }\n this.$widget.addClass('timepicker-orient-' + yorient);\n if (yorient === 'top'){\n top += height;\n } else{\n top -= widgetHeight + parseInt(this.$widget.css('padding-top'), 10);\n }\n\n this.$widget.css({\n top : top,\n left : left,\n zIndex : zIndex\n });\n },\n\n remove: function() {\n $('document').off('.timepicker');\n if (this.$widget) {\n this.$widget.remove();\n }\n delete this.$element.data().timepicker;\n },\n\n setDefaultTime: function(defaultTime) {\n if (!this.$element.val()) {\n if (defaultTime === 'current') {\n var dTime = new Date(),\n hours = dTime.getHours(),\n minutes = dTime.getMinutes(),\n seconds = dTime.getSeconds(),\n meridian = 'AM';\n\n if (seconds !== 0) {\n seconds = Math.ceil(dTime.getSeconds() / this.secondStep) * this.secondStep;\n if (seconds === 60) {\n minutes += 1;\n seconds = 0;\n }\n }\n\n if (minutes !== 0) {\n minutes = Math.ceil(dTime.getMinutes() / this.minuteStep) * this.minuteStep;\n if (minutes === 60) {\n hours += 1;\n minutes = 0;\n }\n }\n\n if (this.showMeridian) {\n if (hours === 0) {\n hours = 12;\n } else if (hours >= 12) {\n if (hours > 12) {\n hours = hours - 12;\n }\n meridian = 'PM';\n } else {\n meridian = 'AM';\n }\n }\n\n this.hour = hours;\n this.minute = minutes;\n this.second = seconds;\n this.meridian = meridian;\n\n this.update();\n\n } else if (defaultTime === false) {\n this.hour = 0;\n this.minute = 0;\n this.second = 0;\n this.meridian = 'AM';\n } else {\n this.setTime(defaultTime);\n }\n } else {\n this.updateFromElementVal();\n }\n },\n\n setTime: function(time, ignoreWidget) {\n if (!time) {\n this.clear();\n return;\n }\n\n var timeMode,\n timeArray,\n hour,\n minute,\n second,\n meridian;\n\n if (typeof time === 'object' && time.getMonth){\n // this is a date object\n hour = time.getHours();\n minute = time.getMinutes();\n second = time.getSeconds();\n\n if (this.showMeridian){\n meridian = 'AM';\n if (hour > 12){\n meridian = 'PM';\n hour = hour % 12;\n }\n\n if (hour === 12){\n meridian = 'PM';\n }\n }\n } else {\n timeMode = ((/a/i).test(time) ? 1 : 0) + ((/p/i).test(time) ? 2 : 0); // 0 = none, 1 = AM, 2 = PM, 3 = BOTH.\n if (timeMode > 2) { // If both are present, fail.\n this.clear();\n return;\n }\n\n timeArray = time.replace(/[^0-9\\:]/g, '').split(':');\n\n hour = timeArray[0] ? timeArray[0].toString() : timeArray.toString();\n\n if(this.explicitMode && hour.length > 2 && (hour.length % 2) !== 0 ) {\n this.clear();\n return;\n }\n\n minute = timeArray[1] ? timeArray[1].toString() : '';\n second = timeArray[2] ? timeArray[2].toString() : '';\n\n // adaptive time parsing\n if (hour.length > 4) {\n second = hour.slice(-2);\n hour = hour.slice(0, -2);\n }\n\n if (hour.length > 2) {\n minute = hour.slice(-2);\n hour = hour.slice(0, -2);\n }\n\n if (minute.length > 2) {\n second = minute.slice(-2);\n minute = minute.slice(0, -2);\n }\n\n hour = parseInt(hour, 10);\n minute = parseInt(minute, 10);\n second = parseInt(second, 10);\n\n if (isNaN(hour)) {\n hour = 0;\n }\n if (isNaN(minute)) {\n minute = 0;\n }\n if (isNaN(second)) {\n second = 0;\n }\n\n // Adjust the time based upon unit boundary.\n // NOTE: Negatives will never occur due to time.replace() above.\n if (second > 59) {\n second = 59;\n }\n\n if (minute > 59) {\n minute = 59;\n }\n\n if (hour >= this.maxHours) {\n // No day/date handling.\n hour = this.maxHours - 1;\n }\n\n if (this.showMeridian) {\n if (hour > 12) {\n // Force PM.\n timeMode = 2;\n hour -= 12;\n }\n if (!timeMode) {\n timeMode = 1;\n }\n if (hour === 0) {\n hour = 12; // AM or PM, reset to 12. 0 AM = 12 AM. 0 PM = 12 PM, etc.\n }\n meridian = timeMode === 1 ? 'AM' : 'PM';\n } else if (hour < 12 && timeMode === 2) {\n hour += 12;\n } else {\n if (hour >= this.maxHours) {\n hour = this.maxHours - 1;\n } else if ((hour < 0) || (hour === 12 && timeMode === 1)){\n hour = 0;\n }\n }\n }\n\n this.hour = hour;\n if (this.snapToStep) {\n this.minute = this.changeToNearestStep(minute, this.minuteStep);\n this.second = this.changeToNearestStep(second, this.secondStep);\n } else {\n this.minute = minute;\n this.second = second;\n }\n this.meridian = meridian;\n\n this.update(ignoreWidget);\n },\n\n showWidget: function() {\n if (this.isOpen) {\n return;\n }\n\n if (this.$element.is(':disabled')) {\n return;\n }\n\n // m_show/hide approach taken by datepicker\n this.$widget.appendTo(this.appendWidgetTo);\n $(document).on('mousedown.timepicker, touchend.timepicker', {scope: this}, this.handleDocumentClick);\n\n this.$element.trigger({\n 'type': 'show.timepicker',\n 'time': {\n 'value': this.getTime(),\n 'hours': this.hour,\n 'minutes': this.minute,\n 'seconds': this.second,\n 'meridian': this.meridian\n }\n });\n\n this.place();\n if (this.disableFocus) {\n this.$element.blur();\n }\n\n // widget shouldn't be empty on open\n if (this.hour === '') {\n if (this.defaultTime) {\n this.setDefaultTime(this.defaultTime);\n } else {\n this.setTime('0:0:0');\n }\n }\n\n if (this.template === 'modal' && this.$widget.modal) {\n this.$widget.modal('show').on('hidden', $.proxy(this.hideWidget, this));\n } else {\n if (this.isOpen === false) {\n this.$widget.addClass('open');\n }\n }\n\n this.isOpen = true;\n },\n\n toggleMeridian: function() {\n this.meridian = this.meridian === 'AM' ? 'PM' : 'AM';\n },\n\n update: function(ignoreWidget) {\n this.updateElement();\n if (!ignoreWidget) {\n this.updateWidget();\n }\n\n this.$element.trigger({\n 'type': 'changeTime.timepicker',\n 'time': {\n 'value': this.getTime(),\n 'hours': this.hour,\n 'minutes': this.minute,\n 'seconds': this.second,\n 'meridian': this.meridian\n }\n });\n },\n\n updateElement: function() {\n this.$element.val(this.getTime()).change();\n },\n\n updateFromElementVal: function() {\n this.setTime(this.$element.val());\n },\n\n updateWidget: function() {\n if (this.$widget === false) {\n return;\n }\n\n var hour = this.hour,\n minute = this.minute.toString().length === 1 ? '0' + this.minute : this.minute,\n second = this.second.toString().length === 1 ? '0' + this.second : this.second;\n\n if (this.showInputs) {\n this.$widget.find('input.bootstrap-timepicker-hour').val(hour);\n this.$widget.find('input.bootstrap-timepicker-minute').val(minute);\n\n if (this.showSeconds) {\n this.$widget.find('input.bootstrap-timepicker-second').val(second);\n }\n if (this.showMeridian) {\n this.$widget.find('input.bootstrap-timepicker-meridian').val(this.meridian);\n }\n } else {\n this.$widget.find('span.bootstrap-timepicker-hour').text(hour);\n this.$widget.find('span.bootstrap-timepicker-minute').text(minute);\n\n if (this.showSeconds) {\n this.$widget.find('span.bootstrap-timepicker-second').text(second);\n }\n if (this.showMeridian) {\n this.$widget.find('span.bootstrap-timepicker-meridian').text(this.meridian);\n }\n }\n },\n\n updateFromWidgetInputs: function() {\n if (this.$widget === false) {\n return;\n }\n\n var t = this.$widget.find('input.bootstrap-timepicker-hour').val() + ':' +\n this.$widget.find('input.bootstrap-timepicker-minute').val() +\n (this.showSeconds ? ':' + this.$widget.find('input.bootstrap-timepicker-second').val() : '') +\n (this.showMeridian ? this.$widget.find('input.bootstrap-timepicker-meridian').val() : '')\n ;\n\n this.setTime(t, true);\n },\n\n widgetClick: function(e) {\n e.stopPropagation();\n e.preventDefault();\n\n var $input = $(e.target),\n action = $input.closest('a').data('action');\n\n if (action) {\n this[action]();\n }\n this.update();\n\n if ($input.is('input')) {\n $input.get(0).setSelectionRange(0,2);\n }\n },\n\n widgetKeydown: function(e) {\n var $input = $(e.target),\n name = $input.attr('class').replace('bootstrap-timepicker-', '');\n\n switch (e.which) {\n case 9: //tab\n if (e.shiftKey) {\n if (name === 'hour') {\n return this.hideWidget();\n }\n } else if ((this.showMeridian && name === 'meridian') || (this.showSeconds && name === 'second') || (!this.showMeridian && !this.showSeconds && name === 'minute')) {\n return this.hideWidget();\n }\n break;\n case 27: // escape\n this.hideWidget();\n break;\n case 38: // up arrow\n e.preventDefault();\n switch (name) {\n case 'hour':\n this.incrementHour();\n break;\n case 'minute':\n this.incrementMinute();\n break;\n case 'second':\n this.incrementSecond();\n break;\n case 'meridian':\n this.toggleMeridian();\n break;\n }\n this.setTime(this.getTime());\n $input.get(0).setSelectionRange(0,2);\n break;\n case 40: // down arrow\n e.preventDefault();\n switch (name) {\n case 'hour':\n this.decrementHour();\n break;\n case 'minute':\n this.decrementMinute();\n break;\n case 'second':\n this.decrementSecond();\n break;\n case 'meridian':\n this.toggleMeridian();\n break;\n }\n this.setTime(this.getTime());\n $input.get(0).setSelectionRange(0,2);\n break;\n }\n },\n\n widgetKeyup: function(e) {\n if ((e.which === 65) || (e.which === 77) || (e.which === 80) || (e.which === 46) || (e.which === 8) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) {\n this.updateFromWidgetInputs();\n }\n }\n };\n\n //TIMEPICKER PLUGIN DEFINITION\n $.fn.timepicker = function(option) {\n var args = Array.apply(null, arguments);\n args.shift();\n return this.each(function() {\n var $this = $(this),\n data = $this.data('timepicker'),\n options = typeof option === 'object' && option;\n\n if (!data) {\n $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data()))));\n }\n\n if (typeof option === 'string') {\n data[option].apply(data, args);\n }\n });\n };\n\n $.fn.timepicker.defaults = {\n defaultTime: 'current',\n disableFocus: false,\n disableMousewheel: false,\n isOpen: false,\n minuteStep: 15,\n modalBackdrop: false,\n orientation: { x: 'auto', y: 'auto'},\n secondStep: 15,\n snapToStep: false,\n showSeconds: false,\n showInputs: true,\n showMeridian: true,\n template: 'dropdown',\n appendWidgetTo: 'body',\n showWidgetOnAddonClick: true,\n icons: {\n up: 'glyphicon glyphicon-chevron-up',\n down: 'glyphicon glyphicon-chevron-down'\n },\n maxHours: 24,\n explicitMode: false\n };\n\n $.fn.timepicker.Constructor = Timepicker;\n\n $(document).on(\n 'focus.timepicker.data-api click.timepicker.data-api',\n '[data-provide=\"timepicker\"]',\n function(e){\n var $this = $(this);\n if ($this.data('timepicker')) {\n return;\n }\n e.preventDefault();\n // component click requires us to explicitly m_show it\n $this.timepicker();\n }\n );\n\n})(jQuery, window, document);\n" }, { "path": "src/libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js", "content": "/*! bootstrap-timepicker v0.5.2 \n* http://jdewit.github.com/bootstrap-timepicker \n* Copyright (c) 2016 Joris de Wit and bootstrap-timepicker contributors \n* MIT License \n*/!function(a,b,c){\"use strict\";var d=function(b,c){this.widget=\"\",this.$element=a(b),this.defaultTime=c.defaultTime,this.disableFocus=c.disableFocus,this.disableMousewheel=c.disableMousewheel,this.isOpen=c.isOpen,this.minuteStep=c.minuteStep,this.modalBackdrop=c.modalBackdrop,this.orientation=c.orientation,this.secondStep=c.secondStep,this.snapToStep=c.snapToStep,this.showInputs=c.showInputs,this.showMeridian=c.showMeridian,this.showSeconds=c.showSeconds,this.template=c.template,this.appendWidgetTo=c.appendWidgetTo,this.showWidgetOnAddonClick=c.showWidgetOnAddonClick,this.icons=c.icons,this.maxHours=c.maxHours,this.explicitMode=c.explicitMode,this.handleDocumentClick=function(a){var b=a.data.scope;b.$element.parent().find(a.target).length||b.$widget.is(a.target)||b.$widget.find(a.target).length||b.hideWidget()},this._init()};d.prototype={constructor:d,_init:function(){var b=this;this.showWidgetOnAddonClick&&this.$element.parent().hasClass(\"input-group\")&&this.$element.parent().hasClass(\"bootstrap-timepicker\")?(this.$element.parent(\".input-group.bootstrap-timepicker\").find(\".input-group-addon\").on({\"click.timepicker\":a.proxy(this.showWidget,this)}),this.$element.on({\"focus.timepicker\":a.proxy(this.highlightUnit,this),\"click.timepicker\":a.proxy(this.highlightUnit,this),\"keydown.timepicker\":a.proxy(this.elementKeydown,this),\"blur.timepicker\":a.proxy(this.blurElement,this),\"mousewheel.timepicker DOMMouseScroll.timepicker\":a.proxy(this.mousewheel,this)})):this.template?this.$element.on({\"focus.timepicker\":a.proxy(this.showWidget,this),\"click.timepicker\":a.proxy(this.showWidget,this),\"blur.timepicker\":a.proxy(this.blurElement,this),\"mousewheel.timepicker DOMMouseScroll.timepicker\":a.proxy(this.mousewheel,this)}):this.$element.on({\"focus.timepicker\":a.proxy(this.highlightUnit,this),\"click.timepicker\":a.proxy(this.highlightUnit,this),\"keydown.timepicker\":a.proxy(this.elementKeydown,this),\"blur.timepicker\":a.proxy(this.blurElement,this),\"mousewheel.timepicker DOMMouseScroll.timepicker\":a.proxy(this.mousewheel,this)}),this.template!==!1?this.$widget=a(this.getTemplate()).on(\"click\",a.proxy(this.widgetClick,this)):this.$widget=!1,this.showInputs&&this.$widget!==!1&&this.$widget.find(\"input\").each(function(){a(this).on({\"click.timepicker\":function(){a(this).select()},\"keydown.timepicker\":a.proxy(b.widgetKeydown,b),\"keyup.timepicker\":a.proxy(b.widgetKeyup,b)})}),this.setDefaultTime(this.defaultTime)},blurElement:function(){this.highlightedUnit=null,this.updateFromElementVal()},clear:function(){this.hour=\"\",this.minute=\"\",this.second=\"\",this.meridian=\"\",this.$element.val(\"\")},decrementHour:function(){if(this.showMeridian)if(1===this.hour)this.hour=12;else{if(12===this.hour)return this.hour--,this.toggleMeridian();if(0===this.hour)return this.hour=11,this.toggleMeridian();this.hour--}else this.hour<=0?this.hour=this.maxHours-1:this.hour--},decrementMinute:function(a){var b;b=a?this.minute-a:this.minute-this.minuteStep,0>b?(this.decrementHour(),this.minute=b+60):this.minute=b},decrementSecond:function(){var a=this.second-this.secondStep;0>a?(this.decrementMinute(!0),this.second=a+60):this.second=a},elementKeydown:function(a){switch(a.which){case 9:if(a.shiftKey){if(\"hour\"===this.highlightedUnit){this.hideWidget();break}this.highlightPrevUnit()}else{if(this.showMeridian&&\"meridian\"===this.highlightedUnit||this.showSeconds&&\"second\"===this.highlightedUnit||!this.showMeridian&&!this.showSeconds&&\"minute\"===this.highlightedUnit){this.hideWidget();break}this.highlightNextUnit()}a.preventDefault(),this.updateFromElementVal();break;case 27:this.updateFromElementVal();break;case 37:a.preventDefault(),this.highlightPrevUnit(),this.updateFromElementVal();break;case 38:switch(a.preventDefault(),this.highlightedUnit){case\"hour\":this.incrementHour(),this.highlightHour();break;case\"minute\":this.incrementMinute(),this.highlightMinute();break;case\"second\":this.incrementSecond(),this.highlightSecond();break;case\"meridian\":this.toggleMeridian(),this.highlightMeridian()}this.update();break;case 39:a.preventDefault(),this.highlightNextUnit(),this.updateFromElementVal();break;case 40:switch(a.preventDefault(),this.highlightedUnit){case\"hour\":this.decrementHour(),this.highlightHour();break;case\"minute\":this.decrementMinute(),this.highlightMinute();break;case\"second\":this.decrementSecond(),this.highlightSecond();break;case\"meridian\":this.toggleMeridian(),this.highlightMeridian()}this.update()}},getCursorPosition:function(){var a=this.$element.get(0);if(\"selectionStart\"in a)return a.selectionStart;if(c.selection){a.focus();var b=c.selection.createRange(),d=c.selection.createRange().text.length;return b.moveStart(\"character\",-a.value.length),b.text.length-d}},getTemplate:function(){var a,b,c,d,e,f;switch(this.showInputs?(b='',c='',d='',e=''):(b='',c='',d='',e=''),f=''+(this.showSeconds?'':\"\")+(this.showMeridian?'':\"\")+\" \"+(this.showSeconds?'\":\"\")+(this.showMeridian?'\":\"\")+''+(this.showSeconds?'':\"\")+(this.showMeridian?'':\"\")+\"
           
        \"+b+' :'+c+\":'+d+\" '+e+\"
          
        \",this.template){case\"modal\":a='
        ×

        Pick a Time

        '+f+'
        OK
        ';break;case\"dropdown\":a='
        '+f+\"
        \"}return a},getTime:function(){return\"\"===this.hour?\"\":this.hour+\":\"+(1===this.minute.toString().length?\"0\"+this.minute:this.minute)+(this.showSeconds?\":\"+(1===this.second.toString().length?\"0\"+this.second:this.second):\"\")+(this.showMeridian?\" \"+this.meridian:\"\")},hideWidget:function(){this.isOpen!==!1&&(this.$element.trigger({type:\"hide.timepicker\",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}}),\"modal\"===this.template&&this.$widget.modal?this.$widget.modal(\"hide\"):this.$widget.removeClass(\"open\"),a(c).off(\"mousedown.timepicker, touchend.timepicker\",this.handleDocumentClick),this.isOpen=!1,this.$widget.detach())},highlightUnit:function(){this.position=this.getCursorPosition(),this.position>=0&&this.position<=2?this.highlightHour():this.position>=3&&this.position<=5?this.highlightMinute():this.position>=6&&this.position<=8?this.showSeconds?this.highlightSecond():this.highlightMeridian():this.position>=9&&this.position<=11&&this.highlightMeridian()},highlightNextUnit:function(){switch(this.highlightedUnit){case\"hour\":this.highlightMinute();break;case\"minute\":this.showSeconds?this.highlightSecond():this.showMeridian?this.highlightMeridian():this.highlightHour();break;case\"second\":this.showMeridian?this.highlightMeridian():this.highlightHour();break;case\"meridian\":this.highlightHour()}},highlightPrevUnit:function(){switch(this.highlightedUnit){case\"hour\":this.showMeridian?this.highlightMeridian():this.showSeconds?this.highlightSecond():this.highlightMinute();break;case\"minute\":this.highlightHour();break;case\"second\":this.highlightMinute();break;case\"meridian\":this.showSeconds?this.highlightSecond():this.highlightMinute()}},highlightHour:function(){var a=this.$element.get(0),b=this;this.highlightedUnit=\"hour\",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(0,1):a.setSelectionRange(0,2)},0)},highlightMinute:function(){var a=this.$element.get(0),b=this;this.highlightedUnit=\"minute\",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(2,4):a.setSelectionRange(3,5)},0)},highlightSecond:function(){var a=this.$element.get(0),b=this;this.highlightedUnit=\"second\",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(5,7):a.setSelectionRange(6,8)},0)},highlightMeridian:function(){var a=this.$element.get(0),b=this;this.highlightedUnit=\"meridian\",a.setSelectionRange&&(this.showSeconds?setTimeout(function(){b.hour<10?a.setSelectionRange(8,10):a.setSelectionRange(9,11)},0):setTimeout(function(){b.hour<10?a.setSelectionRange(5,7):a.setSelectionRange(6,8)},0))},incrementHour:function(){if(this.showMeridian){if(11===this.hour)return this.hour++,this.toggleMeridian();12===this.hour&&(this.hour=0)}return this.hour===this.maxHours-1?void(this.hour=0):void this.hour++},incrementMinute:function(a){var b;b=a?this.minute+a:this.minute+this.minuteStep-this.minute%this.minuteStep,b>59?(this.incrementHour(),this.minute=b-60):this.minute=b},incrementSecond:function(){var a=this.second+this.secondStep-this.second%this.secondStep;a>59?(this.incrementMinute(!0),this.second=a-60):this.second=a},mousewheel:function(b){if(!this.disableMousewheel){b.preventDefault(),b.stopPropagation();var c=b.originalEvent.wheelDelta||-b.originalEvent.detail,d=null;switch(\"mousewheel\"===b.type?d=-1*b.originalEvent.wheelDelta:\"DOMMouseScroll\"===b.type&&(d=40*b.originalEvent.detail),d&&(b.preventDefault(),a(this).scrollTop(d+a(this).scrollTop())),this.highlightedUnit){case\"minute\":c>0?this.incrementMinute():this.decrementMinute(),this.highlightMinute();break;case\"second\":c>0?this.incrementSecond():this.decrementSecond(),this.highlightSecond();break;case\"meridian\":this.toggleMeridian(),this.highlightMeridian();break;default:c>0?this.incrementHour():this.decrementHour(),this.highlightHour()}return!1}},changeToNearestStep:function(a,b){return a%b===0?a:Math.round(a%b/b)?(a+(b-a%b))%60:a-a%b},place:function(){if(!this.isInline){var c=this.$widget.outerWidth(),d=this.$widget.outerHeight(),e=10,f=a(b).width(),g=a(b).height(),h=a(b).scrollTop(),i=parseInt(this.$element.parents().filter(function(){return\"auto\"!==a(this).css(\"z-index\")}).first().css(\"z-index\"),10)+10,j=this.component?this.component.parent().offset():this.$element.offset(),k=this.component?this.component.outerHeight(!0):this.$element.outerHeight(!1),l=this.component?this.component.outerWidth(!0):this.$element.outerWidth(!1),m=j.left,n=j.top;this.$widget.removeClass(\"timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left\"),\"auto\"!==this.orientation.x?(this.$widget.addClass(\"timepicker-orient-\"+this.orientation.x),\"right\"===this.orientation.x&&(m-=c-l)):(this.$widget.addClass(\"timepicker-orient-left\"),j.left<0?m-=j.left-e:j.left+c>f&&(m=f-c-e));var o,p,q=this.orientation.y;\"auto\"===q&&(o=-h+j.top-d,p=h+g-(j.top+k+d),q=Math.max(o,p)===p?\"top\":\"bottom\"),this.$widget.addClass(\"timepicker-orient-\"+q),\"top\"===q?n+=k:n-=d+parseInt(this.$widget.css(\"padding-top\"),10),this.$widget.css({top:n,left:m,zIndex:i})}},remove:function(){a(\"document\").off(\".timepicker\"),this.$widget&&this.$widget.remove(),delete this.$element.data().timepicker},setDefaultTime:function(a){if(this.$element.val())this.updateFromElementVal();else if(\"current\"===a){var b=new Date,c=b.getHours(),d=b.getMinutes(),e=b.getSeconds(),f=\"AM\";0!==e&&(e=Math.ceil(b.getSeconds()/this.secondStep)*this.secondStep,60===e&&(d+=1,e=0)),0!==d&&(d=Math.ceil(b.getMinutes()/this.minuteStep)*this.minuteStep,60===d&&(c+=1,d=0)),this.showMeridian&&(0===c?c=12:c>=12?(c>12&&(c-=12),f=\"PM\"):f=\"AM\"),this.hour=c,this.minute=d,this.second=e,this.meridian=f,this.update()}else a===!1?(this.hour=0,this.minute=0,this.second=0,this.meridian=\"AM\"):this.setTime(a)},setTime:function(a,b){if(!a)return void this.clear();var c,d,e,f,g,h;if(\"object\"==typeof a&&a.getMonth)e=a.getHours(),f=a.getMinutes(),g=a.getSeconds(),this.showMeridian&&(h=\"AM\",e>12&&(h=\"PM\",e%=12),12===e&&(h=\"PM\"));else{if(c=(/a/i.test(a)?1:0)+(/p/i.test(a)?2:0),c>2)return void this.clear();if(d=a.replace(/[^0-9\\:]/g,\"\").split(\":\"),e=d[0]?d[0].toString():d.toString(),this.explicitMode&&e.length>2&&e.length%2!==0)return void this.clear();f=d[1]?d[1].toString():\"\",g=d[2]?d[2].toString():\"\",e.length>4&&(g=e.slice(-2),e=e.slice(0,-2)),e.length>2&&(f=e.slice(-2),e=e.slice(0,-2)),f.length>2&&(g=f.slice(-2),f=f.slice(0,-2)),e=parseInt(e,10),f=parseInt(f,10),g=parseInt(g,10),isNaN(e)&&(e=0),isNaN(f)&&(f=0),isNaN(g)&&(g=0),g>59&&(g=59),f>59&&(f=59),e>=this.maxHours&&(e=this.maxHours-1),this.showMeridian?(e>12&&(c=2,e-=12),c||(c=1),0===e&&(e=12),h=1===c?\"AM\":\"PM\"):12>e&&2===c?e+=12:e>=this.maxHours?e=this.maxHours-1:(0>e||12===e&&1===c)&&(e=0)}this.hour=e,this.snapToStep?(this.minute=this.changeToNearestStep(f,this.minuteStep),this.second=this.changeToNearestStep(g,this.secondStep)):(this.minute=f,this.second=g),this.meridian=h,this.update(b)},showWidget:function(){this.isOpen||this.$element.is(\":disabled\")||(this.$widget.appendTo(this.appendWidgetTo),a(c).on(\"mousedown.timepicker, touchend.timepicker\",{scope:this},this.handleDocumentClick),this.$element.trigger({type:\"show.timepicker\",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}}),this.place(),this.disableFocus&&this.$element.blur(),\"\"===this.hour&&(this.defaultTime?this.setDefaultTime(this.defaultTime):this.setTime(\"0:0:0\")),\"modal\"===this.template&&this.$widget.modal?this.$widget.modal(\"show\").on(\"hidden\",a.proxy(this.hideWidget,this)):this.isOpen===!1&&this.$widget.addClass(\"open\"),this.isOpen=!0)},toggleMeridian:function(){this.meridian=\"AM\"===this.meridian?\"PM\":\"AM\"},update:function(a){this.updateElement(),a||this.updateWidget(),this.$element.trigger({type:\"changeTime.timepicker\",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}})},updateElement:function(){this.$element.val(this.getTime()).change()},updateFromElementVal:function(){this.setTime(this.$element.val())},updateWidget:function(){if(this.$widget!==!1){var a=this.hour,b=1===this.minute.toString().length?\"0\"+this.minute:this.minute,c=1===this.second.toString().length?\"0\"+this.second:this.second;this.showInputs?(this.$widget.find(\"input.bootstrap-timepicker-hour\").val(a),this.$widget.find(\"input.bootstrap-timepicker-minute\").val(b),this.showSeconds&&this.$widget.find(\"input.bootstrap-timepicker-second\").val(c),this.showMeridian&&this.$widget.find(\"input.bootstrap-timepicker-meridian\").val(this.meridian)):(this.$widget.find(\"span.bootstrap-timepicker-hour\").text(a),this.$widget.find(\"span.bootstrap-timepicker-minute\").text(b),this.showSeconds&&this.$widget.find(\"span.bootstrap-timepicker-second\").text(c),this.showMeridian&&this.$widget.find(\"span.bootstrap-timepicker-meridian\").text(this.meridian))}},updateFromWidgetInputs:function(){if(this.$widget!==!1){var a=this.$widget.find(\"input.bootstrap-timepicker-hour\").val()+\":\"+this.$widget.find(\"input.bootstrap-timepicker-minute\").val()+(this.showSeconds?\":\"+this.$widget.find(\"input.bootstrap-timepicker-second\").val():\"\")+(this.showMeridian?this.$widget.find(\"input.bootstrap-timepicker-meridian\").val():\"\");this.setTime(a,!0)}},widgetClick:function(b){b.stopPropagation(),b.preventDefault();var c=a(b.target),d=c.closest(\"a\").data(\"action\");d&&this[d](),this.update(),c.is(\"input\")&&c.get(0).setSelectionRange(0,2)},widgetKeydown:function(b){var c=a(b.target),d=c.attr(\"class\").replace(\"bootstrap-timepicker-\",\"\");switch(b.which){case 9:if(b.shiftKey){if(\"hour\"===d)return this.hideWidget()}else if(this.showMeridian&&\"meridian\"===d||this.showSeconds&&\"second\"===d||!this.showMeridian&&!this.showSeconds&&\"minute\"===d)return this.hideWidget();break;case 27:this.hideWidget();break;case 38:switch(b.preventDefault(),d){case\"hour\":this.incrementHour();break;case\"minute\":this.incrementMinute();break;case\"second\":this.incrementSecond();break;case\"meridian\":this.toggleMeridian()}this.setTime(this.getTime()),c.get(0).setSelectionRange(0,2);break;case 40:switch(b.preventDefault(),d){case\"hour\":this.decrementHour();break;case\"minute\":this.decrementMinute();break;case\"second\":this.decrementSecond();break;case\"meridian\":this.toggleMeridian()}this.setTime(this.getTime()),c.get(0).setSelectionRange(0,2)}},widgetKeyup:function(a){(65===a.which||77===a.which||80===a.which||46===a.which||8===a.which||a.which>=48&&a.which<=57||a.which>=96&&a.which<=105)&&this.updateFromWidgetInputs()}},a.fn.timepicker=function(b){var c=Array.apply(null,arguments);return c.shift(),this.each(function(){var e=a(this),f=e.data(\"timepicker\"),g=\"object\"==typeof b&&b;f||e.data(\"timepicker\",f=new d(this,a.extend({},a.fn.timepicker.defaults,g,a(this).data()))),\"string\"==typeof b&&f[b].apply(f,c)})},a.fn.timepicker.defaults={defaultTime:\"current\",disableFocus:!1,disableMousewheel:!1,isOpen:!1,minuteStep:15,modalBackdrop:!1,orientation:{x:\"auto\",y:\"auto\"},secondStep:15,snapToStep:!1,showSeconds:!1,showInputs:!0,showMeridian:!0,template:\"dropdown\",appendWidgetTo:\"body\",showWidgetOnAddonClick:!0,icons:{up:\"glyphicon glyphicon-chevron-up\",down:\"glyphicon glyphicon-chevron-down\"},maxHours:24,explicitMode:!1},a.fn.timepicker.Constructor=d,a(c).on(\"focus.timepicker.data-api click.timepicker.data-api\",'[data-provide=\"timepicker\"]',function(b){var c=a(this);c.data(\"timepicker\")||(b.preventDefault(),c.timepicker())})}(jQuery,window,document);" }, { "path": "src/libs/bootstrap-timepicker/package.json", "content": "{\n \"name\": \"bootstrap-timepicker\",\n \"description\": \"Timepicker widget for Twitter Bootstrap\",\n \"version\": \"0.5.2\",\n \"license\": \"MIT\",\n \"homepage\": \"http://jdewit.github.com/bootstrap-timepicker\",\n \"author\": {\n \"name\": \"Joris de Wit\",\n \"email\": \"joris.w.dewit@gmail.com\",\n \"url\": \"http://jorisdewit.ca\"\n },\n \"main\": \"js/bootstrap-timepicker.js\",\n \"files\": [\"js\", \"css\"],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git://github.com/jdewit/bootstrap-timepicker\"\n },\n \"scripts\": {\n \"test\": \"bower install; grunt test;\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/jdewit/bootstrap-timepicker/issues\"\n },\n \"devDependencies\": {\n \"grunt-cli\": \"~0.1\",\n \"grunt\": \"~0.4.1\",\n \"bower\": \"latest\",\n \"grunt-contrib-less\": \"~0.5.0\",\n \"grunt-contrib-jshint\": \"~0.4.3\",\n \"grunt-contrib-uglify\": \"~0.2.0\",\n \"grunt-contrib-jasmine\": \"~0.4.2\",\n \"grunt-contrib-watch\": \"~0.4.3\",\n \"grunt-shell\": \"~0.2.2\",\n \"grunt-bump\": \"0.0.11\"\n }\n}\n" }, { "path": "src/libs/contextmenu/bootstrap-contextmenu.js", "content": "/*!\n * Bootstrap Context Menu\n * Version: 0.2.0\n * Author: @sydcanem\n * https://github.com/sydcanem/bootstrap-contextmenu\n *\n * Inspired by Twitter Bootstrap's dropdown plugin.\n * Twitter Bootstrap (http://twitter.github.com/bootstrap).\n *\n * Licensed under MIT\n * ========================================================= */\n\n;\n(function ($) {\n\n 'use strict';\n\n /* CONTEXTMENU CLASS DEFINITION\n * ============================ */\n var toggle = '[data-toggle=\"context\"]';\n\n var ContextMenu = function (element, options) {\n this.$element = $(element);\n\n this.before = options.before || this.before;\n this.onItem = options.onItem || this.onItem;\n this.scopes = options.scopes || null;\n\n if (options.target) {\n this.$element.data('target', options.target);\n }\n\n this.listen();\n };\n\n ContextMenu.prototype = {\n\n constructor: ContextMenu, show: function (e) {\n\n var $menu\n , evt\n , tp\n , items\n , relatedTarget = { relatedTarget: this };\n\n if (this.isDisabled()) return;\n\n this.closemenu();\n\n if (!this.before.call(this, e, $(e.currentTarget))) return;\n\n $menu = this.getMenu();\n $menu.trigger(evt = $.Event('show.bs.context', relatedTarget));\n\n tp = this.getPosition(e, $menu);\n items = 'li:not(.divider)';\n $menu.attr('style', '')\n .css(tp)\n .addClass('open')\n .on('click.context.data-api', items, $.proxy(this.onItem, this, $(e.currentTarget)))\n .trigger('shown.bs.context', relatedTarget);\n\n // Delegating the `closemenu` only on the currently opened menu.\n // This prevents other opened menus from closing.\n $('html')\n .on('click.context.data-api', $menu.selector, $.proxy(this.closemenu, this));\n\n return false;\n }, closemenu: function (e) {\n var $menu\n , evt\n , items\n , relatedTarget;\n\n $menu = this.getMenu();\n\n if (!$menu.hasClass('open')) return;\n\n relatedTarget = { relatedTarget: this };\n $menu.trigger(evt = $.Event('hide.bs.context', relatedTarget));\n\n items = 'li:not(.divider)';\n $menu.removeClass('open')\n .off('click.context.data-api', items)\n .trigger('hidden.bs.context', relatedTarget);\n\n $('html')\n .off('click.context.data-api', $menu.selector);\n // Don't propagate click event so other currently\n // opened menus won't close.\n return false;\n }, before: function (e) {\n return true;\n }, onItem: function (e) {\n return true;\n }, listen: function () {\n this.$element.on('contextmenu.context.data-api', this.scopes, $.proxy(this.show, this));\n $('html').on('click.context.data-api', $.proxy(this.closemenu, this));\n }, destroy: function () {\n this.$element.off('.context.data-api').removeData('context');\n $('html').off('.context.data-api');\n }, isDisabled: function () {\n return this.$element.hasClass('.disabled') ||\n this.$element.attr('disabled');\n }, getMenu: function () {\n var selector = this.$element.data('target')\n , $menu;\n\n if (!selector) {\n selector = this.$element.attr('href');\n selector = selector && selector.replace(/.*(?=#[^\\s]*$)/, ''); //strip for ie7\n }\n\n $menu = $(selector);\n\n return $menu && $menu.length ? $menu : this.$element.find(selector);\n }, getPosition: function (e, $menu) {\n var mouseX = e.clientX\n , mouseY = e.clientY\n , boundsX = $(window).width()\n , boundsY = $(window).height()\n , menuWidth = $menu.find('.dropdown-menu').outerWidth()\n , menuHeight = $menu.find('.dropdown-menu').outerHeight()\n , tp = {\"position\": \"absolute\", \"z-index\": 9999}\n , Y, X, parentOffset;\n\n if (mouseY + menuHeight > boundsY) {\n Y = {\"top\": mouseY - menuHeight + $(window).scrollTop()};\n } else {\n Y = {\"top\": mouseY + $(window).scrollTop()};\n }\n\n if ((mouseX + menuWidth > boundsX) && ((mouseX - menuWidth) > 0)) {\n X = {\"left\": mouseX - menuWidth + $(window).scrollLeft()};\n } else {\n X = {\"left\": mouseX + $(window).scrollLeft()};\n }\n\n // If context-menu's parent is positioned using absolute or relative positioning,\n // the calculated mouse position will be incorrect.\n // Adjust the position of the menu by its offset parent position.\n parentOffset = $menu.offsetParent().offset();\n X.left = X.left - parentOffset.left;\n Y.top = Y.top - parentOffset.top;\n\n return $.extend(tp, Y, X);\n }\n\n };\n\n /* CONTEXT MENU PLUGIN DEFINITION\n * ========================== */\n\n $.fn.contextmenu = function (option, e) {\n return this.each(function () {\n var $this = $(this)\n , data = $this.data('context')\n , options = (typeof option == 'object') && option;\n\n if (!data) $this.data('context', (data = new ContextMenu($this, options)));\n if (typeof option == 'string') data[option].call(data, e);\n });\n };\n\n $.fn.contextmenu.Constructor = ContextMenu;\n\n /* APPLY TO STANDARD CONTEXT MENU ELEMENTS\n * =================================== */\n\n $(document)\n .on('contextmenu.context.data-api', toggle, function (e) {\n $(this).contextmenu('show', e);\n e.preventDefault();\n });\n\n}(jQuery));\n" }, { "path": "src/libs/enjoyhint/enjoyhint.js", "content": "var EnjoyHint = function (_options) {\n var that = this;\n // Some options\n var defaults = {\n onStart: function () {\n\n },\n onEnd: function () {\n\n }\n };\n var options = $.extend(defaults, _options);\n\n\n var data = [];\n var current_step = 0;\n\n $body = $('body');\n\n /********************* PRIVAT METHODS ***************************************/\n var init = function () {\n if ($('.enjoyhint'))\n $('.enjoyhint').remove();\n $('body').css({'overflow':'hidden'});\n $(document).on(\"touchmove\",lockTouch);\n\n $body.enjoyhint({\n onNextClick: function () {\n current_step++;\n stepAction();\n },\n onSkipClick: function () {\n var step_data = data[current_step];\n var $element = $(step_data.selector);\n off(step_data.event);\n $element.off(makeEventName(step_data.event));\n destroyEnjoy();\n }\n });\n };\n\n var lockTouch = function(e) {\n e.preventDefault();\n };\n\n var destroyEnjoy = function () {\n $body = $('body');\n $('.enjoyhint').remove();\n $(\"body\").css({'overflow':'auto'});\n $(document).off(\"touchmove\", lockTouch);\n\n };\n\n that.clear = function(){\n //(Remove userClass and set default text)\n $(\".enjoyhint_next_btn\").removeClass(that.nextUserClass);\n $(\".enjoyhint_next_btn\").text(\"Next\");\n $(\".enjoyhint_skip_btn\").removeClass(that.skipUserClass);\n $(\".enjoyhint_skip_btn\").text(\"Skip\");\n }\n\n var $body = $('body');\n\n var stepAction = function () {\n if (data && data[current_step]) {\n $(\".enjoyhint\").removeClass(\"enjoyhint-step-\"+current_step);\n $(\".enjoyhint\").addClass(\"enjoyhint-step-\"+(current_step+1));\n var step_data = data[current_step];\n if (step_data.onBeforeStart && typeof step_data.onBeforeStart === 'function') {\n step_data.onBeforeStart();\n }\n var timeout = step_data.timeout || 0;\n setTimeout(function () {\n if (!step_data.selector) {\n for (var prop in step_data) {\n if (step_data.hasOwnProperty(prop) && prop.split(\" \")[1]) {\n step_data.selector = prop.split(\" \")[1];\n step_data.event = prop.split(\" \")[0];\n if (prop.split(\" \")[0] == 'next' || prop.split(\" \")[0] == 'auto' || prop.split(\" \")[0] == 'custom') {\n step_data.event_type = prop.split(\" \")[0];\n }\n step_data.description = step_data[prop];\n }\n }\n }\n setTimeout(function(){\n that.clear();\n }, 250);\n $(document.body).scrollTo(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -100});\n setTimeout(function () {\n var $element = $(step_data.selector);\n var event = makeEventName(step_data.event);\n\n $body.enjoyhint('show');\n $body.enjoyhint('hide_next');\n var $event_element = $element;\n if (step_data.event_selector) {\n $event_element = $(step_data.event_selector);\n }\n if (!step_data.event_type && step_data.event == \"key\"){\n $element.keydown(function( event ) {\n if ( event.which == step_data.keyCode ) {\n current_step++;\n stepAction();\n }\n });\n }\n if (step_data.showNext == true){\n $body.enjoyhint('show_next');\n }\n if (step_data.showSkip == false){\n $body.enjoyhint('hide_skip');\n }else{\n $body.enjoyhint('show_skip');\n }\n if (step_data.showSkip == true){\n\n }\n\n\n if (step_data.nextButton){\n $(\".enjoyhint_next_btn\").addClass(step_data.nextButton.className || \"\");\n $(\".enjoyhint_next_btn\").text(step_data.nextButton.text || \"Next\");\n that.nextUserClass = step_data.nextButton.className\n }\n\n if (step_data.skipButton){\n $(\".enjoyhint_skip_btn\").addClass(step_data.skipButton.className || \"\");\n $(\".enjoyhint_skip_btn\").text(step_data.skipButton.text || \"Skip\");\n that.skipUserClass = step_data.skipButton.className\n }\n\n if (step_data.event_type) {\n switch (step_data.event_type) {\n case 'auto':\n $element[step_data.event]();\n switch (step_data.event) {\n case 'click':\n break;\n }\n current_step++;\n stepAction();\n return;\n break;\n case 'custom':\n on(step_data.event, function () {\n current_step++;\n off(step_data.event);\n stepAction();\n });\n break;\n case 'next':\n $body.enjoyhint('show_next');\n break;\n\n }\n\n } else {\n $event_element.on(event, function (e) {\n if (step_data.keyCode && e.keyCode != step_data.keyCode) {\n return;\n }\n current_step++;\n $(this).off(event);\n\n stepAction();\n });\n\n }\n var max_habarites = Math.max($element.outerWidth(), $element.outerHeight());\n var radius = step_data.radius || Math.round(max_habarites / 2) + 5;\n var offset = $element.offset();\n var w = $element.outerWidth();\n var h = $element.outerHeight();\n var shape_margin = (step_data.margin !== undefined) ? step_data.margin : 10;\n var coords = {\n x: offset.left + Math.round(w / 2) ,\n y: offset.top + Math.round(h / 2) - $(document).scrollTop()\n };\n var shape_data = {\n center_x: coords.x,\n center_y: coords.y,\n text: step_data.description,\n top: step_data.top,\n bottom: step_data.bottom,\n left: step_data.left,\n right: step_data.right,\n margin: step_data.margin,\n scroll: step_data.scroll\n };\n\n if (step_data.shape && step_data.shape == 'circle') {\n shape_data.shape = 'circle';\n shape_data.radius = radius;\n } else {\n shape_data.radius = 0;\n shape_data.width = w + shape_margin;\n shape_data.height = h + shape_margin;\n }\n $body.enjoyhint('render_label_with_shape', shape_data);\n }, step_data.scrollAnimationSpeed + 20 || 270);\n }, timeout);\n } else {\n $body.enjoyhint('hide');\n options.onEnd();\n destroyEnjoy();\n }\n\n };\n\n var makeEventName = function (name, is_custom) {\n return name + (is_custom ? 'custom' : '') + '.enjoy_hint';\n };\n\n var on = function (event_name, callback) {\n $body.on(makeEventName(event_name, true), callback);\n };\n var off = function (event_name) {\n $body.off(makeEventName(event_name, true));\n };\n\n /********************* PUBLIC METHODS ***************************************/\n that.runScript = function () {\n current_step = 0;\n options.onStart();\n stepAction();\n };\n\n this.end = function(){\n destroyEnjoy();\n }\n\n that.resumeScript = function () {\n stepAction();\n };\n\n that.getCurrentStep = function () {\n return current_step;\n };\n\n\n that.trigger = function (event_name) {\n $body.trigger(makeEventName(event_name, true));\n };\n\n that.setScript = function (_data) {\n if (_data) {\n data = _data;\n }\n };\n\n //support deprecated API methods\n that.set = function (_data) {\n that.setScript(_data);\n };\n\n that.setSteps = function (_data) {\n that.setScript(_data);\n };\n\n that.run = function () {\n that.runScript();\n };\n\n that.resume = function () {\n that.resumeScript();\n };\n\n\n init();\n};\n;CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {\n if (w < 2 * r) r = w / 2;\n if (h < 2 * r) r = h / 2;\n this.beginPath();\n this.moveTo(x + r, y);\n this.arcTo(x + w, y, x + w, y + h, r);\n this.arcTo(x + w, y + h, x, y + h, r);\n this.arcTo(x, y + h, x, y, r);\n this.arcTo(x, y, x + w, y, r);\n this.closePath();\n return this;\n};\n\n(function ($) {\n var methods = {\n init: function (options) {\n console.log(options,'-------------');\n return this.each(function () {\n var defaults = {\n onNextClick: function () {\n },\n onSkipClick: function () {\n },\n animation_time: 800\n };\n\n\n this.enjoyhint_obj = {};\n var that = this.enjoyhint_obj;\n var $that = $(this);\n var $body = $('body');\n that.options = jQuery.extend(defaults, options);\n\n //general classes\n that.gcl = {\n chooser: 'enjoyhint'\n };\n\n // classes\n that.cl = {\n enjoy_hint: 'enjoyhint',\n hide: 'enjoyhint_hide',\n disable_events_element: 'enjoyhint_disable_events',\n btn: 'enjoyhint_btn',\n skip_btn: 'enjoyhint_skip_btn',\n close_btn: 'enjoyhint_close_btn',\n next_btn: 'enjoyhint_next_btn',\n main_canvas: 'enjoyhint_canvas',\n main_svg: 'enjoyhint_svg',\n svg_wrapper: 'enjoyhint_svg_wrapper',\n svg_transparent: 'enjoyhint_svg_transparent',\n kinetic_container: 'kinetic_container'\n };\n function makeSVG(tag, attrs) {\n var el = document.createElementNS('http://www.w3.org/2000/svg', tag);\n for (var k in attrs)\n el.setAttribute(k, attrs[k]);\n return el;\n }\n\n // =======================================================================\n // ========================---- enjoyhint ----==============================\n // =======================================================================\n that.canvas_size = {\n w: $(window).width()*1.4,\n h: $(window).height()*1.4\n };\n var canvas_id = \"enj_canvas\";\n\n that.enjoyhint = $('
        ', {'class': that.cl.enjoy_hint + ' ' + that.cl.svg_transparent}).appendTo($that);\n that.enjoyhint_svg_wrapper = $('
        ', {'class': that.cl.svg_wrapper + ' ' + that.cl.svg_transparent}).appendTo(that.enjoyhint);\n that.$stage_container = $('
        ').appendTo(that.enjoyhint);\n that.$canvas = $('').appendTo(that.enjoyhint);\n that.$svg = $('').appendTo(that.enjoyhint_svg_wrapper);\n var defs = $(makeSVG('defs'));\n var marker = $(makeSVG('marker', {id: \"arrowMarker\", viewBox: \"0 0 36 21\", refX: \"21\", refY: \"10\", markerUnits: \"strokeWidth\", orient: \"auto\", markerWidth: \"16\", markerHeight: \"12\"}));\n var polilyne = $(makeSVG('path', {style: \"fill:none; stroke:rgb(255,255,255); stroke-width:2\", d: \"M0,0 c30,11 30,9 0,20\"}));\n defs.append(marker.append(polilyne)).appendTo(that.$svg);\n that.kinetic_stage = new Kinetic.Stage({\n container: that.cl.kinetic_container,\n width: that.canvas_size.w,\n height: that.canvas_size.h\n });\n console.log(that.enjoyhint);\n\n that.layer = new Kinetic.Layer();\n that.rect = new Kinetic.Rect({\n// x: 0,\n// y: 0,\n fill: 'rgba(0,0,0,0.6)',\n width: that.canvas_size.w,\n height: that.canvas_size.h\n });\n\n var $top_dis_events = $('
        ', {'class': that.cl.disable_events_element}).appendTo(that.enjoyhint);\n var $bottom_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);\n var $left_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);\n var $right_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);\n\n that.$skip_btn = $('
        ', {'class': that.cl.skip_btn}).appendTo(that.enjoyhint).html('Skip').click(function (e) {\n that.hide();\n that.options.onSkipClick();\n });\n that.$next_btn = $('
        ', {'class': that.cl.next_btn}).appendTo(that.enjoyhint).html('Next').click(function (e) {\n that.options.onNextClick();\n });\n\n that.$close_btn = $('
        ', {'class': that.cl.close_btn}).appendTo(that.enjoyhint).html('').click(function (e){\n that.hide();\n that.options.onSkipClick();\n });\n\n that.$canvas.mousedown(function (e) {\n console.log('cl')\n $('canvas').css({left: '4000px'});\n\n var BottomElement = document.elementFromPoint(e.clientX, e.clientY);\n console.log(BottomElement.tagName)\n $('canvas').css({left: '0px'});\n\n $(BottomElement).click();\n// that.$canvas.show();\n return false;\n });\n\n\n var circle_r = 0;\n var shape_init_shift = 130;\n that.shape = new Kinetic.Shape({\n radius: circle_r,\n center_x: -shape_init_shift,\n center_y: -shape_init_shift,\n width: 0,\n height: 0,\n sceneFunc: function (context) {\n var ctx = this.getContext(\"2d\")._context;\n var pos = this.pos;\n var def_comp = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = 'destination-out';\n ctx.beginPath();\n\n var x = this.attrs.center_x - Math.round(this.attrs.width / 2);\n var y = this.attrs.center_y - Math.round(this.attrs.height / 2);\n ctx.roundRect(x, y, this.attrs.width, this.attrs.height, this.attrs.radius);\n ctx.fillStyle = \"red\";\n ctx.fill();\n\n ctx.globalCompositeOperation = def_comp;\n }\n });\n that.shape.radius = circle_r;\n that.layer.add(that.rect);\n that.layer.add(that.shape);\n that.kinetic_stage.add(that.layer);\n\n var enjoyhint_elements = [\n that.enjoyhint,\n $top_dis_events,\n $bottom_dis_events,\n $left_dis_events,\n $right_dis_events\n ];\n\n that.show = function () {\n that.enjoyhint.removeClass(that.cl.hide);\n };\n\n that.hide = function () {\n that.enjoyhint.addClass(that.cl.hide);\n var tween = new Kinetic.Tween({\n node: that.shape,\n duration: 0.002,\n center_x: -shape_init_shift,\n center_y: -shape_init_shift\n });\n tween.play();\n };\n\n that.hide();\n\n that.hideNextBtn = function () {\n that.$next_btn.addClass(that.cl.hide);\n that.nextBtn = \"hide\";\n };\n that.showNextBtn = function () {\n that.$next_btn.removeClass(that.cl.hide);\n that.nextBtn = \"show\";\n };\n\n that.hideSkipBtn = function () {\n that.$skip_btn.addClass(that.cl.hide);\n };\n that.showSkipBtn = function () {\n that.$skip_btn.removeClass(that.cl.hide);\n };\n\n\n\n\n\n that.renderCircle = function (data) {\n var r = data.r || 0;\n var x = data.x || 0;\n var y = data.y || 0;\n\n var tween = new Kinetic.Tween({\n node: that.shape,\n duration: 0.2,\n center_x: x,\n center_y: y,\n width: r * 2,\n height: r * 2,\n radius: r\n });\n tween.play();\n\n var left = x - r;\n var right = x + r;\n var top = y - r;\n var bottom = y + r;\n var margin = 20;\n return {\n x: x,\n y: y,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n conn: {\n left: {\n x: left - margin,\n y: y\n },\n right: {\n x: right + margin,\n y: y\n },\n top: {\n x: x,\n y: top - margin\n },\n bottom: {\n x: x,\n y: bottom + margin\n }\n }\n };\n\n };\n\n\n that.renderRect = function (data) {\n var r = data.r || 0;\n var x = data.x || 0;\n var y = data.y || 0;\n var w = data.w || 0;\n var h = data.h || 0;\n var margin = 20;\n var tween = new Kinetic.Tween({\n node: that.shape,\n duration: 0.2,\n center_x: x,\n center_y: y,\n width: w,\n height: h,\n radius: r\n });\n tween.play();\n var half_w = Math.round(w / 2);\n var half_h = Math.round(h / 2);\n var left = x - half_w;\n var right = x + half_w;\n var top = y - half_h;\n var bottom = y + half_h;\n return {\n x: x,\n y: y,\n left: left,\n right: right,\n top: top,\n bottom: bottom,\n conn: {\n left: {\n x: left - margin,\n y: y\n },\n right: {\n x: right + margin,\n y: y\n },\n top: {\n x: x,\n y: top - margin\n },\n bottom: {\n x: x,\n y: bottom + margin\n }\n }\n };\n\n };\n that.renderLabel = function (data) {\n var x = data.x || 0;\n var y = data.y || 0;\n var text = data.text || 0;\n\n var label = that.getLabelElement({\n x: x,\n y: y,\n text: data.text\n });\n var label_w = label.width();\n var label_h = label.height();\n var label_left = label.offset().left;\n var label_right = label.offset().left + label_w;\n var label_top = label.offset().top - $(document).scrollTop();;\n var label_bottom = label.offset().top + label_h;\n\n var margin = 10;\n var conn_left = {\n x: label_left - margin,\n y: label_top + Math.round(label_h / 2)\n };\n var conn_right = {\n x: label_right + margin,\n y: label_top + Math.round(label_h / 2)\n };\n var conn_top = {\n x: label_left + Math.round(label_w / 2),\n y: label_top - margin\n };\n var conn_bottom = {\n x: label_left + Math.round(label_w / 2),\n y: label_bottom + margin\n };\n label.detach();\n setTimeout(function () {\n $('#enjoyhint_label').remove();\n label.appendTo(that.enjoyhint);\n\n }, that.options.animation_time / 2);\n return {\n label: label,\n left: label_left,\n right: label_right,\n top: label_top,\n bottom: label_bottom,\n conn: {\n left: conn_left,\n right: conn_right,\n top: conn_top,\n bottom: conn_bottom\n }\n\n };\n };\n that.renderArrow = function (data) {\n var x_from = data.x_from || 0;\n var y_from = data.y_from || 0;\n var x_to = data.x_to || 0;\n var y_to = data.y_to || 0;\n var by_top_side = data.by_top_side;\n var control_point_x = 0;\n var control_point_y = 0;\n if (by_top_side) {\n if (y_from >= y_to) {\n control_point_y = y_to;\n control_point_x = x_from;\n } else {\n control_point_y = y_from;\n control_point_x = x_to;\n }\n } else {\n if (y_from >= y_to) {\n control_point_y = y_from;\n control_point_x = x_to;\n } else {\n control_point_y = y_to;\n control_point_x = x_from;\n }\n }\n\n var text = data.text || '';\n that.enjoyhint.addClass(that.cl.svg_transparent);\n setTimeout(function () {\n $('#enjoyhint_arrpw_line').remove();\n var d = 'M' + x_from + ',' + y_from + ' Q' + control_point_x + ',' + control_point_y + ' ' + x_to + ',' + y_to;\n that.$svg.append(makeSVG('path', {style: \"fill:none; stroke:rgb(255,255,255); stroke-width:3\", 'marker-end': \"url(#arrowMarker)\", d: d, id: 'enjoyhint_arrpw_line'}));\n that.enjoyhint.removeClass(that.cl.svg_transparent);\n\n }, that.options.animation_time / 2);\n };\n\n\n that.getLabelElement = function (data) {\n return $('
        ', {\"class\": 'enjoy_hint_label', id: 'enjoyhint_label'})\n .css({\n 'top': data.y + 'px',\n 'left': data.x + 'px'\n })\n .html(data.text).appendTo(that.enjoyhint);\n\n };\n\n\n that.disableEventsNearRect = function (rect) {\n $top_dis_events.css({\n top: '0',\n left: '0'\n }).height(rect.top);\n $bottom_dis_events.css({\n top: rect.bottom + 'px',\n left: '0'\n });\n $left_dis_events.css({\n top: '0',\n left: 0 + 'px'\n }).width(rect.left);\n $right_dis_events.css({\n top: '0',\n left: rect.right + 'px'\n });\n };\n\n\n that.renderLabelWithShape = function (data) {\n var shape_type = data.shape || 'rect';\n var shape_data = {};\n\n\n var half_w = 0;\n var half_h = 0;\n\n var shape_offsets = {\n top: data.top || 0,\n bottom: data.bottom || 0,\n left: data.left || 0,\n right: data.right || 0\n };\n\n switch (shape_type) {\n case 'circle':\n half_w = half_h = data.radius;\n var sides_pos = {\n top: data.center_y - half_h + shape_offsets.top,\n bottom: data.center_y + half_h - shape_offsets.bottom,\n left: data.center_x - half_w + shape_offsets.left,\n right: data.center_x + half_w - shape_offsets.right\n };\n var width = sides_pos.right - sides_pos.left;\n var height = sides_pos.bottom - sides_pos.top;\n data.radius = Math.round(Math.min(width, height) / 2);\n //new half habarites\n half_w = half_h = Math.round(data.radius / 2);\n\n var new_half_w = Math.round(width / 2);\n var new_half_h = Math.round(height / 2);\n //new center_x and center_y\n data.center_x = sides_pos.left + new_half_w;\n data.center_y = sides_pos.top + new_half_h;\n\n shape_data = that.renderCircle({\n x: data.center_x,\n y: data.center_y,\n r: data.radius\n });\n\n break;\n case 'rect':\n half_w = Math.round(data.width / 2);\n half_h = Math.round(data.height / 2);\n\n var sides_pos = {\n top: data.center_y - half_h + shape_offsets.top,\n bottom: data.center_y + half_h - shape_offsets.bottom,\n left: data.center_x - half_w + shape_offsets.left,\n right: data.center_x + half_w - shape_offsets.right\n };\n data.width = sides_pos.right - sides_pos.left;\n data.height = sides_pos.bottom - sides_pos.top;\n\n half_w = Math.round(data.width / 2);\n half_h = Math.round(data.height / 2);\n //new center_x and center_y\n data.center_x = sides_pos.left + half_w;\n data.center_y = sides_pos.top + half_h;\n shape_data = that.renderRect({\n x: data.center_x,\n y: data.center_y,\n w: data.width,\n h: data.height,\n r: data.radius,\n });\n break;\n }\n\n\n var body_size = {\n w: that.enjoyhint.width(),\n h: that.enjoyhint.height()\n };\n\n\n var label = that.getLabelElement({\n x: 0,\n y: 0,\n text: data.text\n });\n var label_width = label.outerWidth();\n var label_height = label.outerHeight();\n label.remove();\n var top_offset = data.center_y - half_h;\n var bottom_offset = body_size.h - (data.center_y + half_h);\n var left_offset = data.center_x - half_w;\n var right_offset = body_size.w - (data.center_x + half_w);\n\n var label_hor_side = (body_size.w - data.center_x) < data.center_x ? 'left' : 'right';\n var label_ver_side = (body_size.h - data.center_y) < data.center_y ? 'top' : 'bottom';\n var label_shift = 150;\n var label_margin = 40;\n var label_shift_with_label_width = label_shift + label_width + label_margin;\n var label_shift_with_label_height = label_shift + label_height + label_margin;\n var label_hor_offset = half_w + label_shift;\n var label_ver_offset = half_h + label_shift;\n\n var label_x = (label_hor_side == 'left') ? data.center_x - label_hor_offset - label_width : data.center_x + label_hor_offset;\n var label_y = (label_ver_side == 'top') ? data.center_y - label_ver_offset - label_height : data.center_y + label_ver_offset;\n if (top_offset < label_shift_with_label_height && bottom_offset < label_shift_with_label_height) {\n label_y = data.center_y + label_margin;\n }\n if (left_offset < label_shift_with_label_width && right_offset < label_shift_with_label_width) {\n label_x = data.center_x;\n }\n\n var label_data = that.renderLabel({\n x: label_x,\n y: label_y,\n text: data.text\n });\n\n that.$next_btn.css({\n left: label_x,\n top: label_y + label_height + 20\n });\n var left_skip = label_x + that.$next_btn.width() + 10;\n console.log(that.nextBtn);\n if (that.nextBtn == \"hide\"){\n left_skip = label_x;\n }\n\n that.$skip_btn.css({\n left: left_skip,\n top: label_y + label_height + 20\n });\n that.$close_btn.css({\n right : 10,\n top: 10\n });\n\n\n that.disableEventsNearRect({\n top: shape_data.top,\n bottom: shape_data.bottom,\n left: shape_data.left,\n right: shape_data.right\n });\n\n\n var x_to = 0;\n var y_to = 0;\n var arrow_side = false;\n var conn_label_side = 'left';\n var conn_circle_side = 'left';\n\n var is_center = (label_data.left <= shape_data.x && label_data.right >= shape_data.x);\n var is_left = (label_data.right < shape_data.x);\n var is_right = (label_data.left > shape_data.x);\n\n var is_abs_left = (label_data.right < shape_data.left);\n var is_abs_right = (label_data.left > shape_data.right);\n\n var is_top = (label_data.bottom < shape_data.top);\n var is_bottom = (label_data.top > shape_data.bottom);\n var is_mid = (label_data.bottom >= shape_data.y && label_data.top <= shape_data.y);\n var is_mid_top = (label_data.bottom <= shape_data.y && !is_top);\n var is_mid_bottom = (label_data.top >= shape_data.y && !is_bottom);\n\n\n function setArrowData(l_s, c_s, a_s) {\n conn_label_side = l_s;\n conn_circle_side = c_s;\n arrow_side = a_s;\n }\n\n function sideStatements(top_s, mid_top_s, mid_s, mid_bottom_s, bottom_s) {\n var statement = [];\n if (is_top) {\n statement = top_s;\n } else if (is_mid_top) {\n statement = mid_top_s;\n } else if (is_mid) {\n statement = mid_s;\n } else if (is_mid_bottom) {\n statement = mid_bottom_s;\n } else {//bottom\n statement = bottom_s;\n }\n if (!statement) {\n return;\n } else {\n setArrowData(statement[0], statement[1], statement[2]);\n }\n }\n\n\n if (is_center) {\n if (is_top) {\n setArrowData('bottom', 'top', 'top');\n } else if (is_bottom) {\n setArrowData('top', 'bottom', 'bottom');\n } else {\n return;\n }\n } else if (is_left) {\n sideStatements(\n ['right', 'top', 'top'],//top\n ['bottom', 'left', 'bottom'],//mid_top\n ['right', 'left', 'top'],//mid\n ['top', 'left', 'top'],//mid_bot\n ['right', 'bottom', 'bottom']//bot\n );\n } else {//right\n sideStatements(\n ['left', 'top', 'top'],//top\n ['bottom', 'right', 'bottom'],//mid_top\n ['left', 'right', 'top'],//mid\n ['top', 'right', 'top'],//mid_bot\n ['left', 'bottom', 'bottom']//bot\n );\n }\n\n var label_conn_coordinates = label_data.conn[conn_label_side];\n var circle_conn_coordinates = shape_data.conn[conn_circle_side];\n var by_top_side = (arrow_side == 'top') ? true : false;\n that.renderArrow({\n x_from: label_conn_coordinates.x,\n y_from: label_conn_coordinates.y,\n x_to: circle_conn_coordinates.x,\n y_to: circle_conn_coordinates.y,\n by_top_side: by_top_side\n });\n\n };\n\n that.clear = function () {\n that.ctx.clearRect(0, 0, 3000, 2000);\n };\n\n return this;\n });\n },\n\n set: function (val) {\n this.each(function () {\n this.enjoyhint_obj.setValue(val);\n });\n return this;\n },\n\n show: function () {\n this.each(function () {\n this.enjoyhint_obj.show();\n });\n return this;\n },\n\n hide: function () {\n this.each(function () {\n this.enjoyhint_obj.hide();\n });\n return this;\n },\n\n hide_next: function () {\n this.each(function () {\n this.enjoyhint_obj.hideNextBtn();\n });\n return this;\n },\n\n show_next: function () {\n this.each(function () {\n this.enjoyhint_obj.showNextBtn();\n });\n return this;\n },\n\n hide_skip: function () {\n this.each(function () {\n this.enjoyhint_obj.hideSkipBtn();\n });\n return this;\n },\n\n show_skip: function () {\n this.each(function () {\n this.enjoyhint_obj.showSkipBtn();\n });\n return this;\n },\n\n render_circle: function (x, y, r) {\n this.each(function () {\n this.enjoyhint_obj.renderCircle(x, y, r);\n });\n return this;\n },\n\n render_label: function (x, y, r) {\n this.each(function () {\n this.enjoyhint_obj.renderLabel(x, y, r);\n });\n return this;\n },\n\n render_label_with_shape: function (data) {\n this.each(function () {\n this.enjoyhint_obj.renderLabelWithShape(data);\n });\n return this;\n },\n\n clear: function () {\n this.each(function () {\n this.enjoyhint_obj.clear();\n });\n return this;\n },\n\n close: function (val) {\n this.each(function () {\n this.enjoyhint_obj.closePopdown();\n });\n return this;\n }\n };\n\n $.fn.enjoyhint = function (method) {\n console.log(method);\n if (methods[method]) {\n return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));\n } else if (typeof method === 'object' || !method) {\n return methods.init.apply(this, arguments);\n } else {\n $.error('Method ' + method + ' does not exist on $.numinput');\n }\n return this;\n };\n})(window.jQuery);\n\n;/*! KineticJS v5.2.0 2015-01-22 http://lavrton.github.io/KineticJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KineticJS/wiki/License*/\nvar Kinetic={};!function(a){var b=Math.PI/180;Kinetic={version:\"5.2.0\",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,showWarnings:!0,Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Kinetic.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Kinetic.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){if(void 0!==b)for(var c=b.split(/\\s/g),d=0;d\"),Kinetic.window=Kinetic.document.createWindow(),Kinetic.window.Image=d.Image,Kinetic._nodeCanvas=d}return Kinetic.root=a,void(module.exports=c)}\"function\"==typeof define&&define.amd&&define(b),Kinetic.document=document,Kinetic.window=window,Kinetic.root=a}(this,function(){return Kinetic}),function(){Kinetic.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Kinetic.Collection.prototype=[],Kinetic.Collection.prototype.each=function(a){for(var b=0;ba;a++)b.push(this[a]);return b},Kinetic.Collection.toCollection=function(a){var b,c=new Kinetic.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Kinetic.Collection._mapMethod=function(a){Kinetic.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Kinetic.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Kinetic.Collection._mapMethod(c)},Kinetic.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Kinetic.Transform.prototype={copy:function(){return new Kinetic.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},getMatrix:function(){return this.m},setAbsolutePosition:function(a,b){var c=this.m[0],d=this.m[1],e=this.m[2],f=this.m[3],g=this.m[4],h=this.m[5],i=(c*(b-h)-d*(a-g))/(c*f-d*e),j=(a-g-e*i)/c;return this.translate(j,i)}};var a=\"2d\",b=\"[object Array]\",c=\"[object Number]\",d=\"[object String]\",e=Math.PI/180,f=180/Math.PI,g=\"#\",h=\"\",i=\"0\",j=\"Kinetic warning: \",k=\"Kinetic error: \",l=\"rgb(\",m={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},n=/rgb\\((\\d{1,3}),(\\d{1,3}),(\\d{1,3})\\)/;Kinetic.Util={_isElement:function(a){return!(!a||1!=a.nodeType)},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)==b},_isNumber:function(a){return Object.prototype.toString.call(a)==c},_isString:function(a){return Object.prototype.toString.call(a)==d},_throttle:function(a,b,c){var d,e,f,g=null,h=0,i=c||{},j=function(){h=i.leading===!1?0:(new Date).getTime(),g=null,f=a.apply(d,e),d=e=null};return function(){var c=(new Date).getTime();h||i.leading!==!1||(h=c);var k=b-(c-h);return d=this,e=arguments,0>=k?(clearTimeout(g),g=null,h=c,f=a.apply(d,e),d=e=null):g||i.trailing===!1||(g=setTimeout(j,k)),f}},_hasMethods:function(a){var b,c=[];for(b in a)this._isFunction(a[b])&&c.push(b);return c.length>0},createCanvasElement:function(){var a=Kinetic.document.createElement(\"canvas\");try{a.style=a.style||{}}catch(b){}return a},isBrowser:function(){return\"object\"!=typeof exports},_isInDocument:function(a){for(;a=a.parentNode;)if(a==Kinetic.document)return!0;return!1},_simplifyArray:function(a){var b,c,d=[],e=a.length,f=Kinetic.Util;for(b=0;e>b;b++)c=a[b],f._isNumber(c)?c=Math.round(1e3*c)/1e3:f._isString(c)||(c=c.toString()),d.push(c);return d},_getImage:function(b,c){var d,e;if(b)if(this._isElement(b))c(b);else if(this._isString(b))d=new Kinetic.window.Image,d.onload=function(){c(d)},d.src=b;else if(b.data){e=Kinetic.Util.createCanvasElement(),e.width=b.width,e.height=b.height;var f=e.getContext(a);f.putImageData(b,0,0),this._getImage(e.toDataURL(),c)}else c(null);else c(null)},_getRGBAString:function(a){var b=a.red||0,c=a.green||0,d=a.blue||0,e=a.alpha||1;return[\"rgba(\",b,\",\",c,\",\",d,\",\",e,\")\"].join(h)},_rgbToHex:function(a,b,c){return((1<<24)+(a<<16)+(b<<8)+c).toString(16).slice(1)},_hexToRgb:function(a){a=a.replace(g,h);var b=parseInt(a,16);return{r:b>>16&255,g:b>>8&255,b:255&b}},getRandomColor:function(){for(var a=(16777215*Math.random()<<0).toString(16);a.length<6;)a=i+a;return g+a},get:function(a,b){return void 0===a?b:a},getRGB:function(a){var b;return a in m?(b=m[a],{r:b[0],g:b[1],b:b[2]}):a[0]===g?this._hexToRgb(a.substring(1)):a.substr(0,4)===l?(b=n.exec(a.replace(/ /g,\"\")),{r:parseInt(b[1],10),g:parseInt(b[2],10),b:parseInt(b[3],10)}):{r:0,g:0,b:0}},_merge:function(a,b){var c=this._clone(b);for(var d in a)c[d]=this._isObject(a[d])?this._merge(a[d],c[d]):a[d];return c},cloneObject:function(a){var b={};for(var c in a)b[c]=this._isObject(a[c])?this.cloneObject(a[c]):this._isArray(a[c])?this.cloneArray(a[c]):a[c];return b},cloneArray:function(a){return a.slice(0)},_degToRad:function(a){return a*e},_radToDeg:function(a){return a*f},_capitalize:function(a){return a.charAt(0).toUpperCase()+a.slice(1)},error:function(a){throw new Error(k+a)},warn:function(a){Kinetic.root.console&&console.warn&&Kinetic.showWarnings&&console.warn(j+a)},extend:function(a,b){function c(){this.constructor=a}c.prototype=b.prototype;var d=a.prototype;a.prototype=new c;for(var e in d)d.hasOwnProperty(e)&&(a.prototype[e]=d[e]);a.__super__=b.prototype},addMethods:function(a,b){var c;for(c in b)a.prototype[c]=b[c]},_getControlPoints:function(a,b,c,d,e,f,g){var h=Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2)),i=Math.sqrt(Math.pow(e-c,2)+Math.pow(f-d,2)),j=g*h/(h+i),k=g*i/(h+i),l=c-j*(e-a),m=d-j*(f-b),n=c+k*(e-a),o=d+k*(f-b);return[l,m,n,o]},_expandPoints:function(a,b){var c,d,e=a.length,f=[];for(c=2;e-2>c;c+=2)d=Kinetic.Util._getControlPoints(a[c-2],a[c-1],a[c],a[c+1],a[c+2],a[c+3],b),f.push(d[0]),f.push(d[1]),f.push(a[c]),f.push(a[c+1]),f.push(d[2]),f.push(d[3]);return f},_removeLastLetter:function(a){return a.substring(0,a.length-1)}}}(),function(){var a=Kinetic.Util.createCanvasElement(),b=a.getContext(\"2d\"),c=Kinetic.UA.mobile?function(){var a=window.devicePixelRatio||1,c=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return a/c}():1;Kinetic.Canvas=function(a){this.init(a)},Kinetic.Canvas.prototype={init:function(a){var b=a||{},d=b.pixelRatio||Kinetic.pixelRatio||c;this.pixelRatio=d,this._canvas=Kinetic.Util.createCanvasElement(),this._canvas.style.padding=0,this._canvas.style.margin=0,this._canvas.style.border=0,this._canvas.style.background=\"transparent\",this._canvas.style.position=\"absolute\",this._canvas.style.top=0,this._canvas.style.left=0},getContext:function(){return this.context},getPixelRatio:function(){return this.pixelRatio},setPixelRatio:function(a){this.pixelRatio=a,this.setSize(this.getWidth(),this.getHeight())},setWidth:function(a){this.width=this._canvas.width=a*this.pixelRatio,this._canvas.style.width=a+\"px\"},setHeight:function(a){this.height=this._canvas.height=a*this.pixelRatio,this._canvas.style.height=a+\"px\"},getWidth:function(){return this.width},getHeight:function(){return this.height},setSize:function(a,b){this.setWidth(a),this.setHeight(b)},toDataURL:function(a,b){try{return this._canvas.toDataURL(a,b)}catch(c){try{return this._canvas.toDataURL()}catch(d){return Kinetic.Util.warn(\"Unable to get data URL. \"+d.message),\"\"}}}},Kinetic.SceneCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Kinetic.Canvas.call(this,b),this.context=new Kinetic.SceneContext(this),this.setSize(c,d)},Kinetic.SceneCanvas.prototype={setWidth:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setWidth.call(this,a),c.scale(b,b)},setHeight:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setHeight.call(this,a),c.scale(b,b)}},Kinetic.Util.extend(Kinetic.SceneCanvas,Kinetic.Canvas),Kinetic.HitCanvas=function(a){var b=a||{},c=b.width||0,d=b.height||0;Kinetic.Canvas.call(this,b),this.context=new Kinetic.HitContext(this),this.setSize(c,d),this.hitCanvas=!0},Kinetic.Util.extend(Kinetic.HitCanvas,Kinetic.Canvas)}(),function(){var a=\",\",b=\"(\",c=\")\",d=\"([\",e=\"])\",f=\";\",g=\"()\",h=\"=\",i=[\"arc\",\"arcTo\",\"beginPath\",\"bezierCurveTo\",\"clearRect\",\"clip\",\"closePath\",\"createLinearGradient\",\"createPattern\",\"createRadialGradient\",\"drawImage\",\"fill\",\"fillText\",\"getImageData\",\"createImageData\",\"lineTo\",\"moveTo\",\"putImageData\",\"quadraticCurveTo\",\"rect\",\"restore\",\"rotate\",\"save\",\"scale\",\"setLineDash\",\"setTransform\",\"stroke\",\"strokeText\",\"transform\",\"translate\"];Kinetic.Context=function(a){this.init(a)},Kinetic.Context.prototype={init:function(a){this.canvas=a,this._context=a._canvas.getContext(\"2d\"),Kinetic.enableTrace&&(this.traceArr=[],this._enableTrace())},fillShape:function(a){a.getFillEnabled()&&this._fill(a)},strokeShape:function(a){a.getStrokeEnabled()&&this._stroke(a)},fillStrokeShape:function(a){var b=a.getFillEnabled();b&&this._fill(a),a.getStrokeEnabled()&&this._stroke(a)},getTrace:function(i){var j,k,l,m,n=this.traceArr,o=n.length,p=\"\";for(j=0;o>j;j++)k=n[j],l=k.method,l?(m=k.args,p+=l,p+=i?g:Kinetic.Util._isArray(m[0])?d+m.join(a)+e:b+m.join(a)+c):(p+=k.property,i||(p+=h+k.val)),p+=f;return p},clearTrace:function(){this.traceArr=[]},_trace:function(a){var b,c=this.traceArr;c.push(a),b=c.length,b>=Kinetic.traceArrMax&&c.shift()},reset:function(){var a=this.getCanvas().getPixelRatio();this.setTransform(1*a,0,0,1*a,0,0)},getCanvas:function(){return this.canvas},clear:function(a){var b=this.getCanvas();a?this.clearRect(a.x||0,a.y||0,a.width||0,a.height||0):this.clearRect(0,0,b.getWidth(),b.getHeight())},_applyLineCap:function(a){var b=a.getLineCap();b&&this.setAttr(\"lineCap\",b)},_applyOpacity:function(a){var b=a.getAbsoluteOpacity();1!==b&&this.setAttr(\"globalAlpha\",b)},_applyLineJoin:function(a){var b=a.getLineJoin();b&&this.setAttr(\"lineJoin\",b)},setAttr:function(a,b){this._context[a]=b},arc:function(){var a=arguments;this._context.arc(a[0],a[1],a[2],a[3],a[4],a[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var a=arguments;this._context.bezierCurveTo(a[0],a[1],a[2],a[3],a[4],a[5])},clearRect:function(){var a=arguments;this._context.clearRect(a[0],a[1],a[2],a[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var a=arguments;return 2===a.length?this._context.createImageData(a[0],a[1]):1===a.length?this._context.createImageData(a[0]):void 0},createLinearGradient:function(){var a=arguments;return this._context.createLinearGradient(a[0],a[1],a[2],a[3])},createPattern:function(){var a=arguments;return this._context.createPattern(a[0],a[1])},createRadialGradient:function(){var a=arguments;return this._context.createRadialGradient(a[0],a[1],a[2],a[3],a[4],a[5])},drawImage:function(){var a=arguments,b=this._context;3===a.length?b.drawImage(a[0],a[1],a[2]):5===a.length?b.drawImage(a[0],a[1],a[2],a[3],a[4]):9===a.length&&b.drawImage(a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8])},fill:function(){this._context.fill()},fillText:function(){var a=arguments;this._context.fillText(a[0],a[1],a[2])},getImageData:function(){var a=arguments;return this._context.getImageData(a[0],a[1],a[2],a[3])},lineTo:function(){var a=arguments;this._context.lineTo(a[0],a[1])},moveTo:function(){var a=arguments;this._context.moveTo(a[0],a[1])},rect:function(){var a=arguments;this._context.rect(a[0],a[1],a[2],a[3])},putImageData:function(){var a=arguments;this._context.putImageData(a[0],a[1],a[2])},quadraticCurveTo:function(){var a=arguments;this._context.quadraticCurveTo(a[0],a[1],a[2],a[3])},restore:function(){this._context.restore()},rotate:function(){var a=arguments;this._context.rotate(a[0])},save:function(){this._context.save()},scale:function(){var a=arguments;this._context.scale(a[0],a[1])},setLineDash:function(){var a=arguments,b=this._context;this._context.setLineDash?b.setLineDash(a[0]):\"mozDash\"in b?b.mozDash=a[0]:\"webkitLineDash\"in b&&(b.webkitLineDash=a[0])},setTransform:function(){var a=arguments;this._context.setTransform(a[0],a[1],a[2],a[3],a[4],a[5])},stroke:function(){this._context.stroke()},strokeText:function(){var a=arguments;this._context.strokeText(a[0],a[1],a[2])},transform:function(){var a=arguments;this._context.transform(a[0],a[1],a[2],a[3],a[4],a[5])},translate:function(){var a=arguments;this._context.translate(a[0],a[1])},_enableTrace:function(){var a,b,c=this,d=i.length,e=Kinetic.Util._simplifyArray,f=this.setAttr,g=function(a){var d,f=c[a];c[a]=function(){return b=e(Array.prototype.slice.call(arguments,0)),d=f.apply(c,arguments),c._trace({method:a,args:b}),d}};for(a=0;d>a;a++)g(i[a]);c.setAttr=function(){f.apply(c,arguments),c._trace({property:arguments[0],val:arguments[1]})}}},Kinetic.SceneContext=function(a){Kinetic.Context.call(this,a)},Kinetic.SceneContext.prototype={_fillColor:function(a){var b=a.fill()||Kinetic.Util._getRGBAString({red:a.fillRed(),green:a.fillGreen(),blue:a.fillBlue(),alpha:a.fillAlpha()});this.setAttr(\"fillStyle\",b),a._fillFunc(this)},_fillPattern:function(a){var b=a.getFillPatternImage(),c=a.getFillPatternX(),d=a.getFillPatternY(),e=a.getFillPatternScale(),f=Kinetic.getAngle(a.getFillPatternRotation()),g=a.getFillPatternOffset(),h=a.getFillPatternRepeat();(c||d)&&this.translate(c||0,d||0),f&&this.rotate(f),e&&this.scale(e.x,e.y),g&&this.translate(-1*g.x,-1*g.y),this.setAttr(\"fillStyle\",this.createPattern(b,h||\"repeat\")),this.fill()},_fillLinearGradient:function(a){var b=a.getFillLinearGradientStartPoint(),c=a.getFillLinearGradientEndPoint(),d=a.getFillLinearGradientColorStops(),e=this.createLinearGradient(b.x,b.y,c.x,c.y);if(d){for(var f=0;fh;h++)i=e[h],a[i]=this.getAttr(d+k(i));return a},c.prototype[m]=function(a){var b,c=this.attrs[d];f&&(a=f.call(this,a));for(b in a)this._setAttr(d+k(b),a[b]);return this._fireChangeEvent(d,c,a),g&&g.call(this),this},this.addOverloadedGetterSetter(c,d)},addOverloadedGetterSetter:function(c,d){var e=Kinetic.Util._capitalize(d),f=b+e,g=a+e;c.prototype[d]=function(){return arguments.length?(this[f](arguments[0]),this):this[g]()}},backCompat:function(a,b){var c;for(c in b)a.prototype[c]=a.prototype[b[c]]},afterSetFilter:function(){this._filterUpToDate=!1}},Kinetic.Validators={RGBComponent:function(a){return a>255?255:0>a?0:Math.round(a)},alphaComponent:function(a){return a>1?1:1e-4>a?1e-4:a}}}(),function(){var a=\"absoluteOpacity\",b=\"absoluteTransform\",c=\"Change\",d=\"children\",e=\".\",f=\"\",g=\"get\",h=\"id\",i=\"kinetic\",j=\"listening\",k=\"mouseenter\",l=\"mouseleave\",m=\"name\",n=\"set\",o=\"Shape\",p=\" \",q=\"stage\",r=\"transform\",s=\"Stage\",t=\"visible\",u=[\"id\"],v=[\"xChange.kinetic\",\"yChange.kinetic\",\"scaleXChange.kinetic\",\"scaleYChange.kinetic\",\"skewXChange.kinetic\",\"skewYChange.kinetic\",\"rotationChange.kinetic\",\"offsetXChange.kinetic\",\"offsetYChange.kinetic\",\"transformsEnabledChange.kinetic\"].join(p);Kinetic.Util.addMethods(Kinetic.Node,{_init:function(c){var d=this;this._id=Kinetic.idCounter++,this.eventListeners={},this.attrs={},this._cache={},this._filterUpToDate=!1,this.setAttrs(c),this.on(v,function(){this._clearCache(r),d._clearSelfAndDescendantCache(b)}),this.on(\"visibleChange.kinetic\",function(){d._clearSelfAndDescendantCache(t)}),this.on(\"listeningChange.kinetic\",function(){d._clearSelfAndDescendantCache(j)}),this.on(\"opacityChange.kinetic\",function(){d._clearSelfAndDescendantCache(a)})},_clearCache:function(a){a?delete this._cache[a]:this._cache={}},_getCache:function(a,b){var c=this._cache[a];return void 0===c&&(this._cache[a]=b.call(this)),this._cache[a]},_clearSelfAndDescendantCache:function(a){this._clearCache(a),this.children&&this.getChildren().each(function(b){b._clearSelfAndDescendantCache(a)})},clearCache:function(){return delete this._cache.canvas,this._filterUpToDate=!1,this},cache:function(a){var b=a||{},c=b.x||0,d=b.y||0,e=b.width||this.width(),f=b.height||this.height(),g=b.drawBorder||!1;if(0===e||0===f)return void Kinetic.Util.warn(\"Width or height of caching configuration equals 0. Cache is ignored.\");var h=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),i=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),j=new Kinetic.HitCanvas({width:e,height:f}),k=h.getContext(),l=j.getContext();return j.isCache=!0,this.clearCache(),k.save(),l.save(),g&&(k.save(),k.beginPath(),k.rect(0,0,e,f),k.closePath(),k.setAttr(\"strokeStyle\",\"red\"),k.setAttr(\"lineWidth\",5),k.stroke(),k.restore()),k.translate(-1*c,-1*d),l.translate(-1*c,-1*d),\"Shape\"===this.nodeType&&(k.translate(-1*this.x(),-1*this.y()),l.translate(-1*this.x(),-1*this.y())),this.drawScene(h,this),this.drawHit(j,this),k.restore(),l.restore(),this._cache.canvas={scene:h,filter:i,hit:j},this},_drawCachedSceneCanvas:function(a){a.save(),this.getLayer()._applyTransform(this,a),a._applyOpacity(this),a.drawImage(this._getCachedSceneCanvas()._canvas,0,0),a.restore()},_getCachedSceneCanvas:function(){var a,b,c,d,e=this.filters(),f=this._cache.canvas,g=f.scene,h=f.filter,i=h.getContext();if(e){if(!this._filterUpToDate){try{for(a=e.length,i.clear(),i.drawImage(g._canvas,0,0),b=i.getImageData(0,0,h.getWidth(),h.getHeight()),c=0;a>c;c++)d=e[c],d.call(this,b),i.putImageData(b,0,0)}catch(j){Kinetic.Util.warn(\"Unable to apply filter. \"+j.message)}this._filterUpToDate=!0}return h}return g},_drawCachedHitCanvas:function(a){var b=this._cache.canvas,c=b.hit;a.save(),this.getLayer()._applyTransform(this,a),a.drawImage(c._canvas,0,0),a.restore()},on:function(a,b){var c,d,g,h,i,j=a.split(p),k=j.length;for(c=0;k>c;c++)d=j[c],g=d.split(e),h=g[0],i=g[1]||f,this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b});return this},off:function(a){var b,c,d,f,g,h,i=(a||\"\").split(p),j=i.length;if(!a)for(c in this.eventListeners)this._off(c);for(b=0;j>b;b++)if(d=i[b],f=d.split(e),g=f[0],h=f[1],g)this.eventListeners[g]&&this._off(g,h);else for(c in this.eventListeners)this._off(c,h);return this},dispatchEvent:function(a){var b={target:this,type:a.type,evt:a};this.fire(a.type,b)},addEventListener:function(a,b){this.on(a,function(a){b.call(this,a.evt)})},removeEventListener:function(a){this.off(a)},remove:function(){var c=this.getParent();return c&&c.children&&(c.children.splice(this.index,1),c._setChildrenIndices(),delete this.parent),this._clearSelfAndDescendantCache(q),this._clearSelfAndDescendantCache(b),this._clearSelfAndDescendantCache(t),this._clearSelfAndDescendantCache(j),this._clearSelfAndDescendantCache(a),this},destroy:function(){Kinetic._removeId(this.getId()),Kinetic._removeName(this.getName(),this._id),this.remove()},getAttr:function(a){var b=g+Kinetic.Util._capitalize(a);return Kinetic.Util._isFunction(this[b])?this[b]():this.attrs[a]},getAncestors:function(){for(var a=this.getParent(),b=new Kinetic.Collection;a;)b.push(a),a=a.getParent();return b},getAttrs:function(){return this.attrs||{}},setAttrs:function(a){var b,c;if(a)for(b in a)b===d||a[b]instanceof Kinetic.Node||(c=n+Kinetic.Util._capitalize(b),Kinetic.Util._isFunction(this[c])?this[c](a[b]):this._setAttr(b,a[b]));return this},isListening:function(){return this._getCache(j,this._isListening)},_isListening:function(){var a=this.getListening(),b=this.getParent();return\"inherit\"===a?b?b.isListening():!0:a},isVisible:function(){return this._getCache(t,this._isVisible)},_isVisible:function(){var a=this.getVisible(),b=this.getParent();return\"inherit\"===a?b?b.isVisible():!0:a},shouldDrawHit:function(a){var b=this.getLayer();return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isListening()&&this.isVisible()},show:function(){return this.setVisible(!0),this},hide:function(){return this.setVisible(!1),this},getZIndex:function(){return this.index||0},getAbsoluteZIndex:function(){function a(i){for(b=[],c=i.length,d=0;c>d;d++)e=i[d],h++,e.nodeType!==o&&(b=b.concat(e.getChildren().toArray())),e._id===g._id&&(d=c);b.length>0&&b[0].getDepth()<=f&&a(b)}var b,c,d,e,f=this.getDepth(),g=this,h=0;return g.nodeType!==s&&a(g.getStage().getChildren()),h},getDepth:function(){for(var a=0,b=this.parent;b;)a++,b=b.parent;return a},setPosition:function(a){return this.setX(a.x),this.setY(a.y),this},getPosition:function(){return{x:this.getX(),y:this.getY()}},getAbsolutePosition:function(){var a=this.getAbsoluteTransform().getMatrix(),b=new Kinetic.Transform,c=this.offset();return b.m=a.slice(),b.translate(c.x,c.y),b.getTranslation()},setAbsolutePosition:function(a){var b,c=this._clearTransform();return this.attrs.x=c.x,this.attrs.y=c.y,delete c.x,delete c.y,b=this.getAbsoluteTransform(),b.invert(),b.translate(a.x,a.y),a={x:this.attrs.x+b.getTranslation().x,y:this.attrs.y+b.getTranslation().y},this.setPosition({x:a.x,y:a.y}),this._setTransform(c),this},_setTransform:function(a){var c;for(c in a)this.attrs[c]=a[c];this._clearCache(r),this._clearSelfAndDescendantCache(b)},_clearTransform:function(){var a={x:this.getX(),y:this.getY(),rotation:this.getRotation(),scaleX:this.getScaleX(),scaleY:this.getScaleY(),offsetX:this.getOffsetX(),offsetY:this.getOffsetY(),skewX:this.getSkewX(),skewY:this.getSkewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,this._clearCache(r),this._clearSelfAndDescendantCache(b),a},move:function(a){var b=a.x,c=a.y,d=this.getX(),e=this.getY();return void 0!==b&&(d+=b),void 0!==c&&(e+=c),this.setPosition({x:d,y:e}),this},_eachAncestorReverse:function(a,b){var c,d,e=[],f=this.getParent();if(b&&b._id===this._id)return a(this),!0;for(e.unshift(this);f&&(!b||f._id!==b._id);)e.unshift(f),f=f.parent;for(c=e.length,d=0;c>d;d++)a(e[d])},rotate:function(a){return this.setRotation(this.getRotation()+a),this},moveToTop:function(){if(!this.parent)return void Kinetic.Util.warn(\"Node has no parent. moveToTop function is ignored.\");var a=this.index;return this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0},moveUp:function(){if(!this.parent)return void Kinetic.Util.warn(\"Node has no parent. moveUp function is ignored.\");var a=this.index,b=this.parent.getChildren().length;return b-1>a?(this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices(),!0):!1},moveDown:function(){if(!this.parent)return void Kinetic.Util.warn(\"Node has no parent. moveDown function is ignored.\");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices(),!0):!1},moveToBottom:function(){if(!this.parent)return void Kinetic.Util.warn(\"Node has no parent. moveToBottom function is ignored.\");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0):!1},setZIndex:function(a){if(!this.parent)return void Kinetic.Util.warn(\"Node has no parent. zIndex parameter is ignored.\");var b=this.index;return this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices(),this},getAbsoluteOpacity:function(){return this._getCache(a,this._getAbsoluteOpacity)},_getAbsoluteOpacity:function(){var a=this.getOpacity();return this.getParent()&&(a*=this.getParent().getAbsoluteOpacity()),a},moveTo:function(a){return this.getParent()!==a&&(this.remove(),a.add(this)),this},toObject:function(){var a,b,c,d,e=Kinetic.Util,f={},g=this.getAttrs();f.attrs={};for(a in g)b=g[a],e._isFunction(b)||e._isElement(b)||e._isObject(b)&&e._hasMethods(b)||(c=this[a],delete g[a],d=c?c.call(this):null,g[a]=b,d!==b&&(f.attrs[a]=b));return f.className=this.getClassName(),f},toJSON:function(){return JSON.stringify(this.toObject())},getParent:function(){return this.parent},getLayer:function(){var a=this.getParent();return a?a.getLayer():null},getStage:function(){return this._getCache(q,this._getStage)},_getStage:function(){var a=this.getParent();return a?a.getStage():void 0},fire:function(a,b,c){return c?this._fireAndBubble(a,b||{}):this._fire(a,b||{}),this},getAbsoluteTransform:function(a){return a?this._getAbsoluteTransform(a):this._getCache(b,this._getAbsoluteTransform)},_getAbsoluteTransform:function(a){var b,c,d=new Kinetic.Transform;return this._eachAncestorReverse(function(a){b=a.transformsEnabled(),c=a.getTransform(),\"all\"===b?d.multiply(c):\"position\"===b&&d.translate(a.x(),a.y())},a),d},getTransform:function(){return this._getCache(r,this._getTransform)},_getTransform:function(){var a=new Kinetic.Transform,b=this.getX(),c=this.getY(),d=Kinetic.getAngle(this.getRotation()),e=this.getScaleX(),f=this.getScaleY(),g=this.getSkewX(),h=this.getSkewY(),i=this.getOffsetX(),j=this.getOffsetY();return(0!==b||0!==c)&&a.translate(b,c),0!==d&&a.rotate(d),(0!==g||0!==h)&&a.skew(g,h),(1!==e||1!==f)&&a.scale(e,f),(0!==i||0!==j)&&a.translate(-1*i,-1*j),a},clone:function(a){var b,c,d,e,f,g=this.getClassName(),h=Kinetic.Util.cloneObject(this.attrs);for(var j in u){var k=u[j];delete h[k]}for(b in a)h[b]=a[b];var l=new Kinetic[g](h);for(b in this.eventListeners)for(c=this.eventListeners[b],d=c.length,e=0;d>e;e++)f=c[e],f.name.indexOf(i)<0&&(l.eventListeners[b]||(l.eventListeners[b]=[]),l.eventListeners[b].push(f));return l},toDataURL:function(a){a=a||{};var b=a.mimeType||null,c=a.quality||null,d=this.getStage(),e=a.x||0,f=a.y||0,g=new Kinetic.SceneCanvas({width:a.width||this.getWidth()||(d?d.getWidth():0),height:a.height||this.getHeight()||(d?d.getHeight():0),pixelRatio:1}),h=g.getContext();return h.save(),(e||f)&&h.translate(-1*e,-1*f),this.drawScene(g),h.restore(),g.toDataURL(b,c)},toImage:function(a){Kinetic.Util._getImage(this.toDataURL(a),function(b){a.callback(b)})},setSize:function(a){return this.setWidth(a.width),this.setHeight(a.height),this},getSize:function(){return{width:this.getWidth(),height:this.getHeight()}},getWidth:function(){return this.attrs.width||0},getHeight:function(){return this.attrs.height||0},getClassName:function(){return this.className||this.nodeType},getType:function(){return this.nodeType},getDragDistance:function(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():Kinetic.dragDistance\n},_get:function(a){return this.className===a||this.nodeType===a?[this]:[]},_off:function(a,b){var c,d,e=this.eventListeners[a];for(c=0;ce;e++)c.add(this._createNode(g[e]));return c},Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"position\"),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"x\",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"y\",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"opacity\",1),Kinetic.Factory.addGetter(Kinetic.Node,\"name\"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"name\"),Kinetic.Factory.addGetter(Kinetic.Node,\"id\"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"id\"),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"rotation\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,\"scale\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"scaleX\",1),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"scaleY\",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,\"skew\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"skewX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"skewY\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,\"offset\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"offsetX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"offsetY\",0),Kinetic.Factory.addSetter(Kinetic.Node,\"dragDistance\"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"dragDistance\"),Kinetic.Factory.addSetter(Kinetic.Node,\"width\",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"width\"),Kinetic.Factory.addSetter(Kinetic.Node,\"height\",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"height\"),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"listening\",\"inherit\"),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"filters\",void 0,function(a){return this._filterUpToDate=!1,a}),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"visible\",\"inherit\"),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"transformsEnabled\",\"all\"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"size\"),Kinetic.Factory.backCompat(Kinetic.Node,{rotateDeg:\"rotate\",setRotationDeg:\"setRotation\",getRotationDeg:\"getRotation\"}),Kinetic.Collection.mapMethods(Kinetic.Node)}(),function(){Kinetic.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d[b]=c,d[b+1]=c,d[b+2]=c}}(),function(){Kinetic.Filters.Brighten=function(a){var b,c=255*this.brightness(),d=a.data,e=d.length;for(b=0;e>b;b+=4)d[b]+=c,d[b+1]+=c,d[b+2]+=c},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"brightness\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Invert=function(a){var b,c=a.data,d=c.length;for(b=0;d>b;b+=4)c[b]=255-c[b],c[b+1]=255-c[b+1],c[b+2]=255-c[b+2]}}(),function(){function a(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function b(b,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=b.data,E=b.width,F=b.height,G=e+e+1,H=E-1,I=F-1,J=e+1,K=J*(J+1)/2,L=new a,M=null,N=L,O=null,P=null,Q=c[e],R=d[e];for(h=1;G>h;h++)N=N.next=new a,h==J&&(M=N);for(N.next=L,l=k=0,g=0;F>g;g++){for(u=v=w=x=m=n=o=p=0,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(h=1;J>h;h++)i=k+((h>H?H:h)<<2),m+=(N.r=y=D[i])*(C=J-h),n+=(N.g=z=D[i+1])*C,o+=(N.b=A=D[i+2])*C,p+=(N.a=B=D[i+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next;for(O=L,P=M,f=0;E>f;f++)D[k+3]=B=p*Q>>R,0!==B?(B=255/B,D[k]=(m*Q>>R)*B,D[k+1]=(n*Q>>R)*B,D[k+2]=(o*Q>>R)*B):D[k]=D[k+1]=D[k+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=l+((i=f+e+1)f;f++){for(v=w=x=u=n=o=p=m=0,k=f<<2,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(j=E,h=1;e>=h;h++)k=j+f<<2,m+=(N.r=y=D[k])*(C=J-h),n+=(N.g=z=D[k+1])*C,o+=(N.b=A=D[k+2])*C,p+=(N.a=B=D[k+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next,I>h&&(j+=E);for(k=f,O=L,P=M,g=0;F>g;g++)i=k<<2,D[i+3]=B=p*Q>>R,B>0?(B=255/B,D[i]=(m*Q>>R)*B,D[i+1]=(n*Q>>R)*B,D[i+2]=(o*Q>>R)*B):D[i]=D[i+1]=D[i+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=f+((i=g+J)0&&b(a,c)},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"blurRadius\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c){var d=4*(c*a.width+b),e=[];return e.push(a.data[d++],a.data[d++],a.data[d++],a.data[d++]),e}function b(a,b){return Math.sqrt(Math.pow(a[0]-b[0],2)+Math.pow(a[1]-b[1],2)+Math.pow(a[2]-b[2],2))}function c(a){for(var b=[0,0,0],c=0;cn?0:255}return l}}function e(a,b){for(var c=0;ch;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=2040===k?255:0}return g}function g(a,b,c){for(var d=[1,1,1,1,1,1,1,1,1],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k>=1020?255:0}return g}function h(a,b,c){for(var d=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k}return g}Kinetic.Filters.Mask=function(a){var b=this.threshold(),c=d(a,b);return c&&(c=f(c,a.width,a.height),c=g(c,a.width,a.height),c=h(c,a.width,a.height),e(a,c)),a},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"threshold\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.RGB=function(a){var b,c,d=a.data,e=d.length,f=this.red(),g=this.green(),h=this.blue();for(b=0;e>b;b+=4)c=(.34*d[b]+.5*d[b+1]+.16*d[b+2])/255,d[b]=c*f,d[b+1]=c*g,d[b+2]=c*h,d[b+3]=d[b+3]},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"red\",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"green\",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"blue\",0,Kinetic.Validators.RGBComponent,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.HSV=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=Math.pow(2,this.value()),j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=i*j*Math.cos(k*Math.PI/180),m=i*j*Math.sin(k*Math.PI/180),n=.299*i+.701*l+.167*m,o=.587*i-.587*l+.33*m,p=.114*i-.114*l-.497*m,q=.299*i-.299*l-.328*m,r=.587*i+.413*l+.035*m,s=.114*i-.114*l+.293*m,t=.299*i-.3*l+1.25*m,u=.587*i-.586*l-1.05*m,v=.114*i+.886*l-.2*m;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=n*c+o*d+p*e,g[b+1]=q*c+r*d+s*e,g[b+2]=t*c+u*d+v*e,g[b+3]=f},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"hue\",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"saturation\",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"value\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Factory.addGetterSetter(Kinetic.Node,\"hue\",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"saturation\",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"luminance\",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Filters.HSL=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=1,j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=127*this.luminance(),m=i*j*Math.cos(k*Math.PI/180),n=i*j*Math.sin(k*Math.PI/180),o=.299*i+.701*m+.167*n,p=.587*i-.587*m+.33*n,q=.114*i-.114*m-.497*n,r=.299*i-.299*m-.328*n,s=.587*i+.413*m+.035*n,t=.114*i-.114*m+.293*n,u=.299*i-.3*m+1.25*n,v=.587*i-.586*m-1.05*n,w=.114*i+.886*m-.2*n;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=o*c+p*d+q*e+l,g[b+1]=r*c+s*d+t*e+l,g[b+2]=u*c+v*d+w*e+l,g[b+3]=f}}(),function(){Kinetic.Filters.Emboss=function(a){var b=10*this.embossStrength(),c=255*this.embossWhiteLevel(),d=this.embossDirection(),e=this.embossBlend(),f=0,g=0,h=a.data,i=a.width,j=a.height,k=4*i,l=j;switch(d){case\"top-left\":f=-1,g=-1;break;case\"top\":f=-1,g=0;break;case\"top-right\":f=-1,g=1;break;case\"right\":f=0,g=1;break;case\"bottom-right\":f=1,g=1;break;case\"bottom\":f=1,g=0;break;case\"bottom-left\":f=1,g=-1;break;case\"left\":f=0,g=-1}do{var m=(l-1)*k,n=f;1>l+n&&(n=0),l+n>j&&(n=0);var o=(l-1+n)*i*4,p=i;do{var q=m+4*(p-1),r=g;1>p+r&&(r=0),p+r>i&&(r=0);var s=o+4*(p-1+r),t=h[q]-h[s],u=h[q+1]-h[s+1],v=h[q+2]-h[s+2],w=t,x=w>0?w:-w,y=u>0?u:-u,z=v>0?v:-v;if(y>x&&(w=u),z>x&&(w=v),w*=b,e){var A=h[q]+w,B=h[q+1]+w,C=h[q+2]+w;h[q]=A>255?255:0>A?0:A,h[q+1]=B>255?255:0>B?0:B,h[q+2]=C>255?255:0>C?0:C}else{var D=c-w;0>D?D=0:D>255&&(D=255),h[q]=h[q+1]=h[q+2]=D}}while(--p)}while(--l)},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"embossStrength\",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"embossWhiteLevel\",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"embossDirection\",\"top-left\",null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"embossBlend\",!1,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c,d,e){var f,g=c-b,h=e-d;return 0===g?d+h/2:0===h?d:(f=(a-b)/g,f=h*f+d)}Kinetic.Filters.Enhance=function(b){var c,d,e,f,g=b.data,h=g.length,i=g[0],j=i,k=g[1],l=k,m=g[2],n=m,o=this.enhance();if(0!==o){for(f=0;h>f;f+=4)c=g[f+0],i>c?i=c:c>j&&(j=c),d=g[f+1],k>d?k=d:d>l&&(l=d),e=g[f+2],m>e?m=e:e>n&&(n=e);j===i&&(j=255,i=0),l===k&&(l=255,k=0),n===m&&(n=255,m=0);var p,q,r,s,t,u,v,w,x;for(o>0?(q=j+o*(255-j),r=i-o*(i-0),t=l+o*(255-l),u=k-o*(k-0),w=n+o*(255-n),x=m-o*(m-0)):(p=.5*(j+i),q=j+o*(j-p),r=i+o*(i-p),s=.5*(l+k),t=l+o*(l-s),u=k+o*(k-s),v=.5*(n+m),w=n+o*(n-v),x=m+o*(m-v)),f=0;h>f;f+=4)g[f+0]=a(g[f+0],i,j,r,q),g[f+1]=a(g[f+1],k,l,u,t),g[f+2]=a(g[f+2],m,n,x,w)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"enhance\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Posterize=function(a){var b,c=Math.round(254*this.levels())+1,d=a.data,e=d.length,f=255/c;for(b=0;e>b;b+=1)d[b]=Math.floor(d[b]/f)*f},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"levels\",.5,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Noise=function(a){var b,c=255*this.noise(),d=a.data,e=d.length,f=c/2;for(b=0;e>b;b+=4)d[b+0]+=f-2*f*Math.random(),d[b+1]+=f-2*f*Math.random(),d[b+2]+=f-2*f*Math.random()},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"noise\",.2,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Pixelate=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=Math.ceil(this.pixelSize()),q=a.width,r=a.height,s=Math.ceil(q/p),t=Math.ceil(r/p);for(a=a.data,m=0;s>m;m+=1)for(n=0;t>n;n+=1){for(e=0,f=0,g=0,h=0,i=m*p,j=i+p,k=n*p,l=k+p,o=0,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),e+=a[d+0],f+=a[d+1],g+=a[d+2],h+=a[d+3],o+=1);for(e/=o,f/=o,g/=o,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),a[d+0]=e,a[d+1]=f,a[d+2]=g,a[d+3]=h)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"pixelSize\",8,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Threshold=function(a){var b,c=255*this.threshold(),d=a.data,e=d.length;for(b=0;e>b;b+=1)d[b]=d[b]255?255:h,k[d+1]=i>255?255:i,k[d+2]=j>255?255:j,k[d+3]=k[d+3];while(--c)}while(--m)}}(),function(){Kinetic.Filters.Solarize=function(a){var b=a.data,c=a.width,d=a.height,e=4*c,f=d;do{var g=(f-1)*e,h=c;do{var i=g+4*(h-1),j=b[i],k=b[i+1],l=b[i+2];j>127&&(j=255-j),k>127&&(k=255-k),l>127&&(l=255-l),b[i]=j,b[i+1]=k,b[i+2]=l}while(--h)}while(--f)}}(),function(){var a=function(a,b,c){var d,e,f,g,h=a.data,i=b.data,j=a.width,k=a.height,l=c.polarCenterX||j/2,m=c.polarCenterY||k/2,n=0,o=0,p=0,q=0,r=Math.sqrt(l*l+m*m);e=j-l,f=k-m,g=Math.sqrt(e*e+f*f),r=g>r?g:r;var s,t,u,v,w=k,x=j,y=360/x*Math.PI/180;for(t=0;x>t;t+=1)for(u=Math.sin(t*y),v=Math.cos(t*y),s=0;w>s;s+=1)e=Math.floor(l+r*s/w*v),f=Math.floor(m+r*s/w*u),d=4*(f*j+e),n=h[d+0],o=h[d+1],p=h[d+2],q=h[d+3],d=4*(t+s*j),i[d+0]=n,i[d+1]=o,i[d+2]=p,i[d+3]=q},b=function(a,b,c){var d,e,f,g,h,i,j=a.data,k=b.data,l=a.width,m=a.height,n=c.polarCenterX||l/2,o=c.polarCenterY||m/2,p=0,q=0,r=0,s=0,t=Math.sqrt(n*n+o*o);e=l-n,f=m-o,i=Math.sqrt(e*e+f*f),t=i>t?i:t;var u,v,w,x,y=m,z=l,A=c.polarRotation||0;for(e=0;l>e;e+=1)for(f=0;m>f;f+=1)g=e-n,h=f-o,u=Math.sqrt(g*g+h*h)*y/t,v=(180*Math.atan2(h,g)/Math.PI+360+A)%360,v=v*z/360,w=Math.floor(v),x=Math.floor(u),d=4*(x*l+w),p=j[d+0],q=j[d+1],r=j[d+2],s=j[d+3],d=4*(f*l+e),k[d+0]=p,k[d+1]=q,k[d+2]=r,k[d+3]=s},c=Kinetic.Util.createCanvasElement();Kinetic.Filters.Kaleidoscope=function(d){var e,f,g,h,i,j,k,l,m,n,o=d.width,p=d.height,q=Math.round(this.kaleidoscopePower()),r=Math.round(this.kaleidoscopeAngle()),s=Math.floor(o*(r%360)/360);if(!(1>q)){c.width=o,c.height=p;var t=c.getContext(\"2d\").getImageData(0,0,o,p);a(d,t,{polarCenterX:o/2,polarCenterY:p/2});for(var u=o/Math.pow(2,q);8>=u;)u=2*u,q-=1;u=Math.ceil(u);var v=u,w=0,x=v,y=1;for(s+u>o&&(w=v,x=0,y=-1),f=0;p>f;f+=1)for(e=w;e!==x;e+=y)g=Math.round(e+s)%o,m=4*(o*f+g),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+e),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;for(f=0;p>f;f+=1)for(v=Math.floor(u),h=0;q>h;h+=1){for(e=0;v+1>e;e+=1)m=4*(o*f+e),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+2*v-e-1),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;v*=2}b(t,d,{polarRotation:0})}},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"kaleidoscopePower\",2,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,\"kaleidoscopeAngle\",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a){setTimeout(a,1e3/60)}function b(){return e.apply(Kinetic.root,arguments)}var c=500,d=function(){return Kinetic.root.performance&&Kinetic.root.performance.now?function(){return Kinetic.root.performance.now()}:function(){return(new Date).getTime()}}(),e=function(){return Kinetic.root.requestAnimationFrame||Kinetic.root.webkitRequestAnimationFrame||Kinetic.root.mozRequestAnimationFrame||Kinetic.root.oRequestAnimationFrame||Kinetic.root.msRequestAnimationFrame||a}();Kinetic.Animation=function(a,b){var c=Kinetic.Animation;this.func=a,this.setLayers(b),this.id=c.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:d()}},Kinetic.Animation.prototype={setLayers:function(a){var b=[];b=a?a.length>0?a:[a]:[],this.layers=b},getLayers:function(){return this.layers},addLayer:function(a){var b,c,d=this.layers;if(d){for(b=d.length,c=0;b>c;c++)if(d[c]._id===a._id)return!1}else this.layers=[];return this.layers.push(a),!0},isRunning:function(){var a,b=Kinetic.Animation,c=b.animations,d=c.length;for(a=0;d>a;a++)if(c[a].id===this.id)return!0;return!1},start:function(){var a=Kinetic.Animation;this.stop(),this.frame.timeDiff=0,this.frame.lastTime=d(),a._addAnimation(this)},stop:function(){Kinetic.Animation._removeAnimation(this)},_updateFrameObject:function(a){this.frame.timeDiff=a-this.frame.lastTime,this.frame.lastTime=a,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}},Kinetic.Animation.animations=[],Kinetic.Animation.animIdCounter=0,Kinetic.Animation.animRunning=!1,Kinetic.Animation._addAnimation=function(a){this.animations.push(a),this._handleAnimation()},Kinetic.Animation._removeAnimation=function(a){var b,c=a.id,d=this.animations,e=d.length;for(b=0;e>b;b++)if(d[b].id===c){this.animations.splice(b,1);break}},Kinetic.Animation._runFrames=function(){var a,b,c,e,f,g,h,i,j,k={},l=this.animations;for(e=0;ef;f++)h=b[f],void 0!==h._id&&(k[h._id]=h);for(i in k)k[i].draw()},Kinetic.Animation._animationLoop=function(){var a=Kinetic.Animation;a.animations.length?(b(a._animationLoop),a._runFrames()):a.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())};var f=Kinetic.Node.prototype.moveTo;Kinetic.Node.prototype.moveTo=function(a){f.call(this,a)},Kinetic.BaseLayer.prototype.batchDraw=function(){var a=this,b=Kinetic.Animation;this.batchAnim||(this.batchAnim=new b(function(){a.lastBatchDrawTime&&d()-a.lastBatchDrawTime>c&&a.batchAnim.stop()},this)),this.lastBatchDrawTime=d(),this.batchAnim.isRunning()||(this.draw(),this.batchAnim.start())},Kinetic.Stage.prototype.batchDraw=function(){this.getChildren().each(function(a){a.batchDraw()})}}(this),function(){var a={node:1,duration:1,easing:1,onFinish:1,yoyo:1},b=1,c=2,d=3,e=0;Kinetic.Tween=function(b){var c,d,g=this,h=b.node,i=h._id,j=b.easing||Kinetic.Easings.Linear,k=!!b.yoyo;c=\"undefined\"==typeof b.duration?1:0===b.duration?.001:b.duration,this.node=h,this._id=e++,this.anim=new Kinetic.Animation(function(){g.tween.onEnterFrame()},h.getLayer()||(h instanceof Kinetic.Stage?h.getLayers():null)),this.tween=new f(d,function(a){g._tweenFunc(a)},j,0,1,1e3*c,k),this._addListeners(),Kinetic.Tween.attrs[i]||(Kinetic.Tween.attrs[i]={}),Kinetic.Tween.attrs[i][this._id]||(Kinetic.Tween.attrs[i][this._id]={}),Kinetic.Tween.tweens[i]||(Kinetic.Tween.tweens[i]={});for(d in b)void 0===a[d]&&this._addAttr(d,b[d]);this.reset(),this.onFinish=b.onFinish,this.onReset=b.onReset},Kinetic.Tween.attrs={},Kinetic.Tween.tweens={},Kinetic.Tween.prototype={_addAttr:function(a,b){var c,d,e,f,g,h=this.node,i=h._id;if(e=Kinetic.Tween.tweens[i][a],e&&delete Kinetic.Tween.attrs[i][e][a],c=h.getAttr(a),Kinetic.Util._isArray(b))for(d=[],g=b.length,f=0;g>f;f++)d.push(b[f]-c[f]);else d=b-c;Kinetic.Tween.attrs[i][this._id][a]={start:c,diff:d},Kinetic.Tween.tweens[i][a]=this._id},_tweenFunc:function(a){var b,c,d,e,f,g,h,i=this.node,j=Kinetic.Tween.attrs[i._id][this._id];for(b in j){if(c=j[b],d=c.start,e=c.diff,Kinetic.Util._isArray(d))for(f=[],h=d.length,g=0;h>g;g++)f.push(d[g]+e[g]*a);else f=d+e*a;i.setAttr(b,f)}},_addListeners:function(){var a=this;this.tween.onPlay=function(){a.anim.start()},this.tween.onReverse=function(){a.anim.start()},this.tween.onPause=function(){a.anim.stop()},this.tween.onFinish=function(){a.onFinish&&a.onFinish()},this.tween.onReset=function(){a.onReset&&a.onReset()}},play:function(){return this.tween.play(),this},reverse:function(){return this.tween.reverse(),this},reset:function(){return this.tween.reset(),this},seek:function(a){return this.tween.seek(1e3*a),this},pause:function(){return this.tween.pause(),this},finish:function(){return this.tween.finish(),this},destroy:function(){var a,b=this.node._id,c=this._id,d=Kinetic.Tween.tweens[b];this.pause();for(a in d)delete Kinetic.Tween.tweens[b][a];delete Kinetic.Tween.attrs[b][c]}};var f=function(a,b,c,d,e,f,g){this.prop=a,this.propFunc=b,this.begin=d,this._pos=d,this.duration=f,this._change=0,this.prevPos=0,this.yoyo=g,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=c,this._change=e-this.begin,this.pause()};f.prototype={fire:function(a){var b=this[a];b&&b()},setTime:function(a){a>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():0>a?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=a,this.update())},getTime:function(){return this._time},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a},getPosition:function(a){return void 0===a&&(a=this._time),this.func(a,this.begin,this._change,this.duration)},play:function(){this.state=c,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire(\"onPlay\")},reverse:function(){this.state=d,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire(\"onReverse\")},seek:function(a){this.pause(),this._time=a,this.update(),this.fire(\"onSeek\")},reset:function(){this.pause(),this._time=0,this.update(),this.fire(\"onReset\")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire(\"onFinish\")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var a=this.getTimer()-this._startTime;this.state===c?this.setTime(a):this.state===d&&this.setTime(this.duration-a)},pause:function(){this.state=b,this.fire(\"onPause\")},getTimer:function(){return(new Date).getTime()}},Kinetic.Easings={BackEaseIn:function(a,b,c,d){var e=1.70158;return c*(a/=d)*a*((e+1)*a-e)+b},BackEaseOut:function(a,b,c,d){var e=1.70158;return c*((a=a/d-1)*a*((e+1)*a+e)+1)+b},BackEaseInOut:function(a,b,c,d){var e=1.70158;return(a/=d/2)<1?c/2*a*a*(((e*=1.525)+1)*a-e)+b:c/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+b},ElasticEaseIn:function(a,b,c,d,e,f){var g=0;return 0===a?b:1==(a/=d)?b+c:(f||(f=.3*d),!e||ea?-.5*e*Math.pow(2,10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)*.5+c+b)},BounceEaseOut:function(a,b,c,d){return(a/=d)<1/2.75?7.5625*c*a*a+b:2/2.75>a?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:2.5/2.75>a?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},BounceEaseIn:function(a,b,c,d){return c-Kinetic.Easings.BounceEaseOut(d-a,0,c,d)+b},BounceEaseInOut:function(a,b,c,d){return d/2>a?.5*Kinetic.Easings.BounceEaseIn(2*a,0,c,d)+b:.5*Kinetic.Easings.BounceEaseOut(2*a-d,0,c,d)+.5*c+b},EaseIn:function(a,b,c,d){return c*(a/=d)*a+b},EaseOut:function(a,b,c,d){return-c*(a/=d)*(a-2)+b},EaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},StrongEaseIn:function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},StrongEaseOut:function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},StrongEaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},Linear:function(a,b,c,d){return c*a/d+b}}}(),function(){Kinetic.DD={anim:new Kinetic.Animation(function(){var a=this.dirty;return this.dirty=!1,a}),isDragging:!1,justDragged:!1,offset:{x:0,y:0},node:null,_drag:function(a){var b=Kinetic.DD,c=b.node;if(c){if(!b.isDragging){var d=c.getStage().getPointerPosition(),e=c.dragDistance(),f=Math.max(Math.abs(d.x-b.startPointerPos.x),Math.abs(d.y-b.startPointerPos.y));if(e>f)return}c._setDragPosition(a),b.isDragging||(b.isDragging=!0,c.fire(\"dragstart\",{type:\"dragstart\",target:c,evt:a},!0)),c.fire(\"dragmove\",{type:\"dragmove\",target:c,evt:a},!0)}},_endDragBefore:function(a){var b,c,d=Kinetic.DD,e=d.node;e&&(b=e.nodeType,c=e.getLayer(),d.anim.stop(),d.isDragging&&(d.isDragging=!1,d.justDragged=!0,Kinetic.listenClickTap=!1,a&&(a.dragEndNode=e)),delete d.node,(c||e).draw())},_endDragAfter:function(a){a=a||{};var b=a.dragEndNode;a&&b&&b.fire(\"dragend\",{type:\"dragend\",target:b,evt:a},!0)}},Kinetic.Node.prototype.startDrag=function(){var a=Kinetic.DD,b=this.getStage(),c=this.getLayer(),d=b.getPointerPosition(),e=this.getAbsolutePosition();d&&(a.node&&a.node.stopDrag(),a.node=this,a.startPointerPos=d,a.offset.x=d.x-e.x,a.offset.y=d.y-e.y,a.anim.setLayers(c||this.getLayers()),a.anim.start(),this._setDragPosition())},Kinetic.Node.prototype._setDragPosition=function(a){var b=Kinetic.DD,c=this.getStage().getPointerPosition(),d=this.getDragBoundFunc();if(c){var e={x:c.x-b.offset.x,y:c.y-b.offset.y};void 0!==d&&(e=d.call(this,e,a)),this.setAbsolutePosition(e),this._lastPos&&this._lastPos.x===e.x&&this._lastPos.y===e.y||(b.anim.dirty=!0),this._lastPos=e}},Kinetic.Node.prototype.stopDrag=function(){var a=Kinetic.DD,b={};a._endDragBefore(b),a._endDragAfter(b)},Kinetic.Node.prototype.setDraggable=function(a){this._setAttr(\"draggable\",a),this._dragChange()};var a=Kinetic.Node.prototype.destroy;Kinetic.Node.prototype.destroy=function(){var b=Kinetic.DD;b.node&&b.node._id===this._id&&this.stopDrag(),a.call(this)},Kinetic.Node.prototype.isDragging=function(){var a=Kinetic.DD;return!(!a.node||a.node._id!==this._id||!a.isDragging)},Kinetic.Node.prototype._listenDrag=function(){var a=this;this._dragCleanup(),\"Stage\"===this.getClassName()?this.on(\"contentMousedown.kinetic contentTouchstart.kinetic\",function(b){Kinetic.DD.node||a.startDrag(b)}):this.on(\"mousedown.kinetic touchstart.kinetic\",function(b){1!==b.evt.button&&2!==b.evt.button&&(Kinetic.DD.node||a.startDrag(b))})},Kinetic.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.DD;a&&b.node&&b.node._id===this._id&&b.node.stopDrag()}},Kinetic.Node.prototype._dragCleanup=function(){\"Stage\"===this.getClassName()?(this.off(\"contentMousedown.kinetic\"),this.off(\"contentTouchstart.kinetic\")):(this.off(\"mousedown.kinetic\"),this.off(\"touchstart.kinetic\"))},Kinetic.Factory.addGetterSetter(Kinetic.Node,\"dragBoundFunc\"),Kinetic.Factory.addGetter(Kinetic.Node,\"draggable\",!1),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,\"draggable\");var b=Kinetic.document.documentElement;b.addEventListener(\"mouseup\",Kinetic.DD._endDragBefore,!0),b.addEventListener(\"touchend\",Kinetic.DD._endDragBefore,!0),b.addEventListener(\"mouseup\",Kinetic.DD._endDragAfter,!1),b.addEventListener(\"touchend\",Kinetic.DD._endDragAfter,!1)}(),function(){Kinetic.Util.addMethods(Kinetic.Container,{__init:function(a){this.children=new Kinetic.Collection,Kinetic.Node.call(this,a)},getChildren:function(a){if(a){var b=new Kinetic.Collection;return this.children.each(function(c){a(c)&&b.push(c)}),b}return this.children},hasChildren:function(){return this.getChildren().length>0},removeChildren:function(){for(var a,b=Kinetic.Collection.toCollection(this.children),c=0;c1){for(var b=0;bb;b++)if(d=j[b],\"#\"===d.charAt(0))f=this._getNodeById(d.slice(1)),f&&i.push(f);else if(\".\"===d.charAt(0))e=this._getNodesByName(d.slice(1)),i=i.concat(e);else for(g=this.getChildren(),h=g.length,c=0;h>c;c++)i=i.concat(g[c]._get(d));return Kinetic.Collection.toCollection(i)},_getNodeById:function(a){var b=Kinetic.ids[a];return void 0!==b&&this.isAncestorOf(b)?b:null},_getNodesByName:function(a){var b=Kinetic.names[a]||[];return this._getDescendants(b)},_get:function(a){for(var b=Kinetic.Node.prototype._get.call(this,a),c=this.getChildren(),d=c.length,e=0;d>e;e++)b=b.concat(c[e]._get(a));return b},toObject:function(){var a=Kinetic.Node.prototype.toObject.call(this);\n a.children=[];for(var b=this.getChildren(),c=b.length,d=0;c>d;d++){var e=b[d];a.children.push(e.toObject())}return a},_getDescendants:function(a){for(var b=[],c=a.length,d=0;c>d;d++){var e=a[d];this.isAncestorOf(e)&&b.push(e)}return b},isAncestorOf:function(a){for(var b=a.getParent();b;){if(b._id===this._id)return!0;b=b.getParent()}return!1},clone:function(a){var b=Kinetic.Node.prototype.clone.call(this,a);return this.getChildren().each(function(a){b.add(a.clone())}),b},getAllIntersections:function(a){var b=[];return this.find(\"Shape\").each(function(c){c.isVisible()&&c.intersects(a)&&b.push(c)}),b},_setChildrenIndices:function(){this.children.each(function(a,b){a.index=b})},drawScene:function(a,b){var c=this.getLayer(),d=a||c&&c.getCanvas(),e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.scene;return this.isVisible()&&(g?this._drawCachedSceneCanvas(e):this._drawChildren(d,\"drawScene\",b)),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit(d)&&(c&&c.clearHitCache(),g?this._drawCachedHitCanvas(e):this._drawChildren(d,\"drawHit\",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()},shouldDrawHit:function(a){var b=this.getLayer(),c=Kinetic.DD,d=c&&Kinetic.isDragging()&&-1!==Kinetic.DD.anim.getLayers().indexOf(b);return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isVisible()&&!d}}),Kinetic.Util.extend(Kinetic.Container,Kinetic.Node),Kinetic.Container.prototype.get=Kinetic.Container.prototype.find,Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container,\"clip\",[\"x\",\"y\",\"width\",\"height\"]),Kinetic.Factory.addGetterSetter(Kinetic.Container,\"clipX\"),Kinetic.Factory.addGetterSetter(Kinetic.Container,\"clipY\"),Kinetic.Factory.addGetterSetter(Kinetic.Container,\"clipWidth\"),Kinetic.Factory.addGetterSetter(Kinetic.Container,\"clipHeight\"),Kinetic.Collection.mapMethods(Kinetic.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f=\"hasShadow\";Kinetic.Util.addMethods(Kinetic.Shape,{__init:function(f){this.nodeType=\"Shape\",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Kinetic.shapes;;)if(g=Kinetic.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Kinetic.Node.call(this,f),this.on(\"shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic\",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Kinetic.Node.prototype.destroy.call(this),delete Kinetic.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();if(this.isVisible())if(i)this._drawCachedSceneCanvas(h);else if(j){if(h.save(),this._useBufferCanvas()){if(c=this.getStage(),d=c.bufferCanvas,e=d.getContext(),e.clear(),e.save(),e._applyLineJoin(this),f)f._applyTransform(this,e,b);else{var l=this.getAbsoluteTransform(b).getMatrix();h.transform(l[0],l[1],l[2],l[3],l[4],l[5])}j.call(this,e),e.restore(),k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),h.drawImage(d._canvas,0,0),h.restore()),h._applyOpacity(this),h.drawImage(d._canvas,0,0)}else{if(h._applyLineJoin(this),f)f._applyTransform(this,h,b);else{var m=this.getAbsoluteTransform(b).getMatrix();h.transform(m[0],m[1],m[2],m[3],m[4],m[5])}k&&!g.hitCanvas&&(h.save(),h._applyShadow(this),j.call(this,h),h.restore()),h._applyOpacity(this),j.call(this,h)}h.restore()}return this},drawHit:function(a,b){var c=this.getLayer(),d=a||c.hitCanvas,e=d.getContext(),f=this.hitFunc()||this.sceneFunc(),g=this._cache.canvas,h=g&&g.hit;if(this.shouldDrawHit(d))if(c&&c.clearHitCache(),h)this._drawCachedHitCanvas(e);else if(f){if(e.save(),e._applyLineJoin(this),c)c._applyTransform(this,e,b);else{var i=this.getAbsoluteTransform(b).getMatrix();e.transform(i[0],i[1],i[2],i[3],i[4],i[5])}f.call(this,e),e.restore()}return this},drawHitFromCache:function(a){var b,c,d,e,f,g,h,i,j=a||0,k=this._cache.canvas,l=this._getCachedSceneCanvas(),m=l.getContext(),n=k.hit,o=n.getContext(),p=l.getWidth(),q=l.getHeight();o.clear();try{for(b=m.getImageData(0,0,p,q),c=b.data,d=o.getImageData(0,0,p,q),e=d.data,f=c.length,g=Kinetic.Util._hexToRgb(this.colorKey),h=0;f>h;h+=4)i=c[h+3],i>j&&(e[h]=g.r,e[h+1]=g.g,e[h+2]=g.b,e[h+3]=255);o.putImageData(d,0,0)}catch(r){Kinetic.Util.warn(\"Unable to draw hit graph from cached scene canvas. \"+r.message)}return this}}),Kinetic.Util.extend(Kinetic.Shape,Kinetic.Node),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"stroke\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeRed\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeGreen\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeBlue\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeAlpha\",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeWidth\",2),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"lineJoin\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"lineCap\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"sceneFunc\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"hitFunc\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"dash\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowColor\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowRed\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowGreen\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowBlue\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowAlpha\",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowBlur\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowOpacity\"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"shadowOffset\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowOffsetX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowOffsetY\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternImage\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fill\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRed\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillGreen\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillBlue\",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillAlpha\",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternY\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillLinearGradientColorStops\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientStartRadius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientEndRadius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientColorStops\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternRepeat\",\"repeat\"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillEnabled\",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeEnabled\",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"shadowEnabled\",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"dashEnabled\",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"strokeScaleEnabled\",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPriority\",\"color\"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillPatternOffset\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternOffsetX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternOffsetY\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillPatternScale\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternScaleX\",1),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternScaleY\",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillLinearGradientStartPoint\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillLinearGradientStartPointX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillLinearGradientStartPointY\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillLinearGradientEndPoint\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillLinearGradientEndPointX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillLinearGradientEndPointY\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillRadialGradientStartPoint\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientStartPointX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientStartPointY\",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,\"fillRadialGradientEndPoint\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientEndPointX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillRadialGradientEndPointY\",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,\"fillPatternRotation\",0),Kinetic.Factory.backCompat(Kinetic.Shape,{dashArray:\"dash\",getDashArray:\"getDash\",setDashArray:\"getDash\",drawFunc:\"sceneFunc\",getDrawFunc:\"getSceneFunc\",setDrawFunc:\"setSceneFunc\",drawHitFunc:\"hitFunc\",getDrawHitFunc:\"getHitFunc\",setDrawHitFunc:\"setHitFunc\"}),Kinetic.Collection.mapMethods(Kinetic.Shape)}(),function(){function a(a,b){a.content.addEventListener(b,function(c){a[L+b](c)},!1)}var b=\"Stage\",c=\"string\",d=\"px\",e=\"mouseout\",f=\"mouseleave\",g=\"mouseover\",h=\"mouseenter\",i=\"mousemove\",j=\"mousedown\",k=\"mouseup\",l=\"click\",m=\"dblclick\",n=\"touchstart\",o=\"touchend\",p=\"tap\",q=\"dbltap\",r=\"touchmove\",s=\"DOMMouseScroll\",t=\"mousewheel\",u=\"wheel\",v=\"contentMouseout\",w=\"contentMouseover\",x=\"contentMousemove\",y=\"contentMousedown\",z=\"contentMouseup\",A=\"contentClick\",B=\"contentDblclick\",C=\"contentTouchstart\",D=\"contentTouchend\",E=\"contentDbltap\",F=\"contentTouchmove\",G=\"div\",H=\"relative\",I=\"inline-block\",J=\"kineticjs-content\",K=\" \",L=\"_\",M=\"container\",N=\"\",O=[j,i,k,e,n,r,o,g,s,t,u],P=O.length;Kinetic.Util.addMethods(Kinetic.Stage,{___init:function(a){this.nodeType=b,Kinetic.Container.call(this,a),this._id=Kinetic.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Kinetic.stages.push(this)},_validateAdd:function(a){\"Layer\"!==a.getType()&&Kinetic.Util.error(\"You may only add layers to the stage.\")},setContainer:function(a){if(typeof a===c){var b=a;if(a=Kinetic.document.getElementById(a),!a)throw\"Can not find container in document with id \"+b}return this._setAttr(M,a),this},shouldDrawHit:function(){return!0},draw:function(){return Kinetic.Node.prototype.draw.call(this),this},setHeight:function(a){return Kinetic.Node.prototype.setHeight.call(this,a),this._resizeDOM(),this},setWidth:function(a){return Kinetic.Node.prototype.setWidth.call(this,a),this._resizeDOM(),this},clear:function(){var a,b=this.children,c=b.length;for(a=0;c>a;a++)b[a].clear();return this},clone:function(a){return a||(a={}),a.container=Kinetic.document.createElement(G),Kinetic.Container.prototype.clone.call(this,a)},destroy:function(){var a=this.content;Kinetic.Container.prototype.destroy.call(this),a&&Kinetic.Util._isInDocument(a)&&this.getContainer().removeChild(a);var b=Kinetic.stages.indexOf(this);b>-1&&Kinetic.stages.splice(b,1)},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(a){function b(e){var f=i[e],j=f.toDataURL(),k=new Kinetic.window.Image;k.onload=function(){h.drawImage(k,0,0),e=0;b--)if(c=d[b].getIntersection(a))return c;return null},_resizeDOM:function(){if(this.content){var a,b,c=this.getWidth(),e=this.getHeight(),f=this.getChildren(),g=f.length;for(this.content.style.width=c+d,this.content.style.height=e+d,this.bufferCanvas.setSize(c,e),this.bufferHitCanvas.setSize(c,e),a=0;g>a;a++)b=f[a],b.setSize(c,e),b.draw()}},add:function(a){if(!(arguments.length>1))return Kinetic.Container.prototype.add.call(this,a),a._setCanvasSize(this.width(),this.height()),a.draw(),this.content.appendChild(a.canvas._canvas),this;for(var b=0;bb;b++)a(this,O[b])},_mouseover:function(a){Kinetic.UA.mobile||(this._setPointerPosition(a),this._fire(w,{evt:a}))},_mouseout:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.targetShape;b&&!Kinetic.isDragging()&&(b._fireAndBubble(e,{evt:a}),b._fireAndBubble(f,{evt:a}),this.targetShape=null),this.pointerPos=void 0,this._fire(v,{evt:a})}},_mousemove:function(a){if(Kinetic.UA.ieMobile)return this._touchmove(a);if((\"undefined\"==typeof a.webkitMovementX&&\"undefined\"==typeof a.webkitMovementY||0!==a.webkitMovementY||0!==a.webkitMovementX)&&!Kinetic.UA.mobile){this._setPointerPosition(a);var b,c=Kinetic.DD;Kinetic.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()?Kinetic.isDragging()||this.targetShape&&this.targetShape._id===b._id?b._fireAndBubble(i,{evt:a}):(this.targetShape&&(this.targetShape._fireAndBubble(e,{evt:a},b),this.targetShape._fireAndBubble(f,{evt:a},b)),b._fireAndBubble(g,{evt:a},this.targetShape),b._fireAndBubble(h,{evt:a},this.targetShape),this.targetShape=b):this.targetShape&&!Kinetic.isDragging()&&(this.targetShape._fireAndBubble(e,{evt:a}),this.targetShape._fireAndBubble(f,{evt:a}),this.targetShape=null),this._fire(x,{evt:a})),c&&c._drag(a),a.preventDefault&&a.preventDefault()}},_mousedown:function(a){if(Kinetic.UA.ieMobile)return this._touchstart(a);if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.clickStartShape=b,b._fireAndBubble(j,{evt:a})),this._fire(y,{evt:a})}a.preventDefault&&a.preventDefault()},_mouseup:function(a){if(Kinetic.UA.ieMobile)return this._touchend(a);if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=this.clickStartShape,d=!1,e=Kinetic.DD;Kinetic.inDblClickWindow?(d=!0,Kinetic.inDblClickWindow=!1):e&&e.justDragged?e&&(e.justDragged=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(k,{evt:a}),Kinetic.listenClickTap&&c&&c._id===b._id&&(b._fireAndBubble(l,{evt:a}),d&&b._fireAndBubble(m,{evt:a}))),this._fire(z,{evt:a}),Kinetic.listenClickTap&&(this._fire(A,{evt:a}),d&&this._fire(B,{evt:a})),Kinetic.listenClickTap=!1}a.preventDefault&&a.preventDefault()},_touchstart:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.tapStartShape=b,b._fireAndBubble(n,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(C,{evt:a})},_touchend:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=!1;Kinetic.inDblClickWindow?(c=!0,Kinetic.inDblClickWindow=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(o,{evt:a}),Kinetic.listenClickTap&&b._id===this.tapStartShape._id&&(b._fireAndBubble(p,{evt:a}),c&&b._fireAndBubble(q,{evt:a})),b.isListening()&&a.preventDefault&&a.preventDefault()),Kinetic.listenClickTap&&(this._fire(D,{evt:a}),c&&this._fire(E,{evt:a})),Kinetic.listenClickTap=!1},_touchmove:function(a){this._setPointerPosition(a);var b,c=Kinetic.DD;Kinetic.isDragging()||(b=this.getIntersection(this.getPointerPosition()),b&&b.isListening()&&(b._fireAndBubble(r,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(F,{evt:a})),c&&(c._drag(a),Kinetic.isDragging()&&a.preventDefault())},_DOMMouseScroll:function(a){this._mousewheel(a)},_mousewheel:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());b&&b.isListening()&&b._fireAndBubble(t,{evt:a})},_wheel:function(a){this._mousewheel(a)},_setPointerPosition:function(a){var b,c=this._getContentPosition(),d=a.offsetX,e=a.clientX,f=null,g=null;a=a?a:window.event,void 0!==a.touches?a.touches.length>0&&(b=a.touches[0],f=b.clientX-c.left,g=b.clientY-c.top):void 0!==d?(f=d,g=a.offsetY):\"mozilla\"===Kinetic.UA.browser?(f=a.layerX,g=a.layerY):void 0!==e&&c&&(f=e-c.left,g=a.clientY-c.top),null!==f&&null!==g&&(this.pointerPos={x:f,y:g})},_getContentPosition:function(){var a=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:a.top,left:a.left}},_buildDOM:function(){var a=this.getContainer();if(!a){if(Kinetic.Util.isBrowser())throw\"Stage has no container. A container is required.\";a=Kinetic.document.createElement(G)}a.innerHTML=N,this.content=Kinetic.document.createElement(G),this.content.style.position=H,this.content.style.display=I,this.content.className=J,this.content.setAttribute(\"role\",\"presentation\"),a.appendChild(this.content),this.bufferCanvas=new Kinetic.SceneCanvas({pixelRatio:1}),this.bufferHitCanvas=new Kinetic.HitCanvas,this._resizeDOM()},_onContent:function(a,b){var c,d,e=a.split(K),f=e.length;for(c=0;f>c;c++)d=e[c],this.content.addEventListener(d,b,!1)},cache:function(){Kinetic.Util.warn(\"Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.\")},clearCache:function(){}}),Kinetic.Util.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Factory.addGetter(Kinetic.Stage,\"container\"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Stage,\"container\")}(),function(){Kinetic.Util.addMethods(Kinetic.BaseLayer,{___init:function(a){this.nodeType=\"Layer\",Kinetic.Container.call(this,a)},createPNGStream:function(){return this.canvas._canvas.createPNGStream()},getCanvas:function(){return this.canvas},getHitCanvas:function(){return this.hitCanvas},getContext:function(){return this.getCanvas().getContext()},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this},clearHitCache:function(){this._hitImageData=void 0},setZIndex:function(a){Kinetic.Node.prototype.setZIndex.call(this,a);var b=this.getStage();return b&&(b.content.removeChild(this.getCanvas()._canvas),ac;c++){if(f=d[c],b=this._getIntersection({x:a.x+f.x*h,y:a.y+f.y*h}),g=b.shape)return g;b.antialiased&&(i=!0)}if(!i)return;h+=1}},_getImageData:function(a,b){var c=this.hitCanvas.width||1,d=this.hitCanvas.height||1,e=Math.round(b)*c+Math.round(a);return this._hitImageData||(this._hitImageData=this.hitCanvas.context.getImageData(0,0,c,d)),[this._hitImageData.data[4*e+0],this._hitImageData.data[4*e+1],this._hitImageData.data[4*e+2],this._hitImageData.data[4*e+3]]},_getIntersection:function(b){var c,d,e=this.hitCanvas.context.getImageData(b.x,b.y,1,1).data,f=e[3];return 255===f?(c=Kinetic.Util._rgbToHex(e[0],e[1],e[2]),d=Kinetic.shapes[a+c],{shape:d}):f>0?{antialiased:!0}:{}},drawScene:function(a,d){var e=this.getLayer(),f=a||e&&e.getCanvas();return this._fire(b,{node:this}),this.getClearBeforeDraw()&&f.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,f,d),this._fire(c,{node:this}),this},_applyTransform:function(a,b,c){var d=a.getAbsoluteTransform(c).getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas;return c&&c.getClearBeforeDraw()&&c.getHitCanvas().getContext().clear(),Kinetic.Container.prototype.drawHit.call(this,d,b),this.imageData=null,this},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this.imageData=null,this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),a?(this.getCanvas()._canvas.style.display=\"block\",this.hitCanvas._canvas.style.display=\"block\"):(this.getCanvas()._canvas.style.display=\"none\",this.hitCanvas._canvas.style.display=\"none\"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this},setSize:function(a,b){Kinetic.BaseLayer.prototype.setSize.call(this,a,b),this.hitCanvas.setSize(a,b)}}),Kinetic.Util.extend(Kinetic.Layer,Kinetic.BaseLayer),Kinetic.Factory.addGetterSetter(Kinetic.Layer,\"hitGraphEnabled\",!0),Kinetic.Collection.mapMethods(Kinetic.Layer)}(),function(){Kinetic.Util.addMethods(Kinetic.FastLayer,{____init:function(a){this.nodeType=\"Layer\",this.canvas=new Kinetic.SceneCanvas,Kinetic.BaseLayer.call(this,a)},_validateAdd:function(a){var b=a.getType();\"Shape\"!==b&&Kinetic.Util.error(\"You may only add shapes to a fast layer.\")},_setCanvasSize:function(a,b){this.canvas.setSize(a,b)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(a){var b=this.getLayer(),c=a||b&&b.getCanvas();return this.getClearBeforeDraw()&&c.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,c),this},_applyTransform:function(a,b,c){if(!c||c._id!==this._id){var d=a.getTransform().getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])}},draw:function(){return this.drawScene(),this},clear:function(a){return this.getContext().clear(a),this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),this.getCanvas()._canvas.style.display=a?\"block\":\"none\",this}}),Kinetic.Util.extend(Kinetic.FastLayer,Kinetic.BaseLayer),Kinetic.Collection.mapMethods(Kinetic.FastLayer)}(),function(){Kinetic.Util.addMethods(Kinetic.Group,{___init:function(a){this.nodeType=\"Group\",Kinetic.Container.call(this,a)},_validateAdd:function(a){var b=a.getType();\"Group\"!==b&&\"Shape\"!==b&&Kinetic.Util.error(\"You may only add groups and shapes to groups.\")}}),Kinetic.Util.extend(Kinetic.Group,Kinetic.Container),Kinetic.Collection.mapMethods(Kinetic.Group)}(),function(){Kinetic.Rect=function(a){this.___init(a)},Kinetic.Rect.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Rect\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getCornerRadius(),c=this.getWidth(),d=this.getHeight();a.beginPath(),b?(a.moveTo(b,0),a.lineTo(c-b,0),a.arc(c-b,b,b,3*Math.PI/2,0,!1),a.lineTo(c,d-b),a.arc(c-b,d-b,b,0,Math.PI/2,!1),a.lineTo(b,d),a.arc(b,d-b,b,Math.PI/2,Math.PI,!1),a.lineTo(0,b),a.arc(b,b,b,Math.PI,3*Math.PI/2,!1)):a.rect(0,0,c,d),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Rect,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Rect,\"cornerRadius\",0),Kinetic.Collection.mapMethods(Kinetic.Rect)}(),function(){var a=2*Math.PI-1e-4,b=\"Circle\";Kinetic.Circle=function(a){this.___init(a)},Kinetic.Circle.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getRadius(),0,a,!1),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadius()},getHeight:function(){return 2*this.getRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.radius()!==a/2&&this.setRadius(a/2)},setRadius:function(a){this._setAttr(\"radius\",a),this.setWidth(2*a),this.setHeight(2*a)}},Kinetic.Util.extend(Kinetic.Circle,Kinetic.Shape),Kinetic.Factory.addGetter(Kinetic.Circle,\"radius\",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Circle,\"radius\"),Kinetic.Collection.mapMethods(Kinetic.Circle)}(),function(){var a=2*Math.PI-1e-4,b=\"Ellipse\";Kinetic.Ellipse=function(a){this.___init(a)},Kinetic.Ellipse.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){var c=this.getRadiusX(),d=this.getRadiusY();b.beginPath(),b.save(),c!==d&&b.scale(1,d/c),b.arc(0,0,c,0,a,!1),b.restore(),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadiusX()},getHeight:function(){return 2*this.getRadiusY()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.setRadius({x:a/2})},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.setRadius({y:a/2})}},Kinetic.Util.extend(Kinetic.Ellipse,Kinetic.Shape),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse,\"radius\",[\"x\",\"y\"]),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,\"radiusX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,\"radiusY\",0),Kinetic.Collection.mapMethods(Kinetic.Ellipse)}(),function(){var a=2*Math.PI-1e-4;Kinetic.Ring=function(a){this.___init(a)},Kinetic.Ring.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Ring\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getInnerRadius(),0,a,!1),b.moveTo(this.getOuterRadius(),0),b.arc(0,0,this.getOuterRadius(),a,0,!0),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getOuterRadius()},getHeight:function(){return 2*this.getOuterRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.outerRadius()!==a/2&&this.setOuterRadius(a/2)},setOuterRadius:function(a){this._setAttr(\"outerRadius\",a),this.setWidth(2*a),this.setHeight(2*a)}},Kinetic.Util.extend(Kinetic.Ring,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Ring,\"innerRadius\",0),Kinetic.Factory.addGetter(Kinetic.Ring,\"outerRadius\",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Ring,\"outerRadius\"),Kinetic.Collection.mapMethods(Kinetic.Ring)}(),function(){Kinetic.Wedge=function(a){this.___init(a)},Kinetic.Wedge.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Wedge\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.beginPath(),a.arc(0,0,this.getRadius(),0,Kinetic.getAngle(this.getAngle()),this.getClockwise()),a.lineTo(0,0),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Wedge,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,\"radius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,\"angle\",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,\"clockwise\",!1),Kinetic.Factory.backCompat(Kinetic.Wedge,{angleDeg:\"angle\",getAngleDeg:\"getAngle\",setAngleDeg:\"setAngle\"}),Kinetic.Collection.mapMethods(Kinetic.Wedge)}(),function(){Kinetic.Arc=function(a){this.___init(a)},Kinetic.Arc.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Arc\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=Kinetic.getAngle(this.angle()),c=this.clockwise();a.beginPath(),a.arc(0,0,this.getOuterRadius(),0,b,c),a.arc(0,0,this.getInnerRadius(),b,0,!c),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Arc,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Arc,\"innerRadius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,\"outerRadius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,\"angle\",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,\"clockwise\",!1),Kinetic.Collection.mapMethods(Kinetic.Arc)}(),function(){var a=\"Image\";Kinetic.Image=function(a){this.___init(a)},Kinetic.Image.prototype={___init:function(b){Kinetic.Shape.call(this,b),this.className=a,this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()&&this.getStage()},_sceneFunc:function(a){var b,c,d,e=this.getWidth(),f=this.getHeight(),g=this.getImage();g&&(b=this.getCropWidth(),c=this.getCropHeight(),d=b&&c?[g,this.getCropX(),this.getCropY(),b,c,0,0,e,f]:[g,0,0,e,f]),(this.hasFill()||this.hasStroke()||this.hasShadow())&&(a.beginPath(),a.rect(0,0,e,f),a.closePath(),a.fillStrokeShape(this)),g&&a.drawImage.apply(a,d)\n},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},getWidth:function(){var a=this.getImage();return this.attrs.width||(a?a.width:0)},getHeight:function(){var a=this.getImage();return this.attrs.height||(a?a.height:0)}},Kinetic.Util.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Image,\"image\"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image,\"crop\",[\"x\",\"y\",\"width\",\"height\"]),Kinetic.Factory.addGetterSetter(Kinetic.Image,\"cropX\",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,\"cropY\",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,\"cropWidth\",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,\"cropHeight\",0),Kinetic.Collection.mapMethods(Kinetic.Image)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c=\"auto\",d=\"center\",e=\"Change.kinetic\",f=\"2d\",g=\"-\",h=\"\",i=\"left\",j=\"text\",k=\"Text\",l=\"middle\",m=\"normal\",n=\"px \",o=\" \",p=\"right\",q=\"word\",r=\"char\",s=\"none\",t=[\"fontFamily\",\"fontSize\",\"fontStyle\",\"fontVariant\",\"padding\",\"align\",\"lineHeight\",\"text\",\"width\",\"height\",\"wrap\"],u=t.length,v=Kinetic.Util.createCanvasElement().getContext(f);Kinetic.Text=function(a){this.___init(a)},Kinetic.Text.prototype={___init:function(d){d=d||{},d.fill=d.fill||\"black\",void 0===d.width&&(d.width=c),void 0===d.height&&(d.height=c),Kinetic.Shape.call(this,d),this._fillFunc=a,this._strokeFunc=b,this.className=k;for(var f=0;u>f;f++)this.on(t[f]+e,this._setTextData);this._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b,c=this.getPadding(),e=this.getTextHeight(),f=this.getLineHeight()*e,g=this.textArr,h=g.length,j=this.getWidth();for(a.setAttr(\"font\",this._getContextFont()),a.setAttr(\"textBaseline\",l),a.setAttr(\"textAlign\",i),a.save(),a.translate(c,0),a.translate(0,c+e/2),b=0;h>b;b++){var k=g[b],m=k.text,n=k.width;a.save(),this.getAlign()===p?a.translate(j-n-2*c,0):this.getAlign()===d&&a.translate((j-n-2*c)/2,0),this.partialText=m,a.fillStrokeShape(this),a.restore(),a.translate(0,f)}a.restore()},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},setText:function(a){var b=Kinetic.Util._isString(a)?a:a.toString();return this._setAttr(j,b),this},getWidth:function(){return this.attrs.width===c?this.getTextWidth()+2*this.getPadding():this.attrs.width},getHeight:function(){return this.attrs.height===c?this.getTextHeight()*this.textArr.length*this.getLineHeight()+2*this.getPadding():this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b,c=v,d=this.getFontSize();return c.save(),c.font=this._getContextFont(),b=c.measureText(a),c.restore(),{width:b.width,height:parseInt(d,10)}},_getContextFont:function(){return this.getFontStyle()+o+this.getFontVariant()+o+this.getFontSize()+n+this.getFontFamily()},_addTextLine:function(a,b){return this.textArr.push({text:a,width:b})},_getTextWidth:function(a){return v.measureText(a).width},_setTextData:function(){var a=this.getText().split(\"\\n\"),b=+this.getFontSize(),d=0,e=this.getLineHeight()*b,f=this.attrs.width,h=this.attrs.height,i=f!==c,j=h!==c,k=this.getPadding(),l=f-2*k,m=h-2*k,n=0,p=this.getWrap(),q=p!==s,t=p!==r&&q;this.textArr=[],v.save(),v.font=this._getContextFont();for(var u=0,w=a.length;w>u;++u){var x=a[u],y=this._getTextWidth(x);if(i&&y>l)for(;x.length>0;){for(var z=0,A=x.length,B=\"\",C=0;A>z;){var D=z+A>>>1,E=x.slice(0,D+1),F=this._getTextWidth(E);l>=F?(z=D+1,B=E,C=F):A=D}if(!B)break;if(t){var G=Math.max(B.lastIndexOf(o),B.lastIndexOf(g))+1;G>0&&(z=G,B=B.slice(0,z),C=this._getTextWidth(B))}if(this._addTextLine(B,C),d=Math.max(d,C),n+=e,!q||j&&n+e>m)break;if(x=x.slice(z),x.length>0&&(y=this._getTextWidth(x),l>=y)){this._addTextLine(x,y),n+=e,d=Math.max(d,y);break}}else this._addTextLine(x,y),n+=e,d=Math.max(d,y);if(j&&n+e>m)break}v.restore(),this.textHeight=b,this.textWidth=d}},Kinetic.Util.extend(Kinetic.Text,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"fontFamily\",\"Arial\"),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"fontSize\",12),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"fontStyle\",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"fontVariant\",m),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"padding\",0),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"align\",i),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"lineHeight\",1),Kinetic.Factory.addGetterSetter(Kinetic.Text,\"wrap\",q),Kinetic.Factory.addGetter(Kinetic.Text,\"text\",h),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Text,\"text\"),Kinetic.Collection.mapMethods(Kinetic.Text)}(),function(){Kinetic.Line=function(a){this.___init(a)},Kinetic.Line.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Line\",this.on(\"pointsChange.kinetic tensionChange.kinetic closedChange.kinetic\",function(){this._clearCache(\"tensionPoints\")}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b,c,d,e=this.getPoints(),f=e.length,g=this.getTension(),h=this.getClosed();if(f){if(a.beginPath(),a.moveTo(e[0],e[1]),0!==g&&f>4){for(b=this.getTensionPoints(),c=b.length,d=h?0:4,h||a.quadraticCurveTo(b[0],b[1],b[2],b[3]);c-2>d;)a.bezierCurveTo(b[d++],b[d++],b[d++],b[d++],b[d++],b[d++]);h||a.quadraticCurveTo(b[c-2],b[c-1],e[f-2],e[f-1])}else for(d=2;f>d;d+=2)a.lineTo(e[d],e[d+1]);h?(a.closePath(),a.fillStrokeShape(this)):a.strokeShape(this)}},getTensionPoints:function(){return this._getCache(\"tensionPoints\",this._getTensionPoints)},_getTensionPoints:function(){return this.getClosed()?this._getTensionPointsClosed():Kinetic.Util._expandPoints(this.getPoints(),this.getTension())},_getTensionPointsClosed:function(){var a=this.getPoints(),b=a.length,c=this.getTension(),d=Kinetic.Util,e=d._getControlPoints(a[b-2],a[b-1],a[0],a[1],a[2],a[3],c),f=d._getControlPoints(a[b-4],a[b-3],a[b-2],a[b-1],a[0],a[1],c),g=Kinetic.Util._expandPoints(a,c),h=[e[2],e[3]].concat(g).concat([f[0],f[1],a[b-2],a[b-1],f[2],f[3],e[0],e[1],a[0],a[1]]);return h}},Kinetic.Util.extend(Kinetic.Line,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Line,\"closed\",!1),Kinetic.Factory.addGetterSetter(Kinetic.Line,\"tension\",0),Kinetic.Factory.addGetterSetter(Kinetic.Line,\"points\",[]),Kinetic.Collection.mapMethods(Kinetic.Line)}(),function(){Kinetic.Sprite=function(a){this.___init(a)},Kinetic.Sprite.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Sprite\",this._updated=!0;var b=this;this.anim=new Kinetic.Animation(function(){var a=b._updated;return b._updated=!1,a}),this.on(\"animationChange.kinetic\",function(){this.frameIndex(0)}),this.on(\"frameIndexChange.kinetic\",function(){this._updated=!0}),this.on(\"frameRateChange.kinetic\",function(){this.anim.isRunning()&&(clearInterval(this.interval),this._setInterval())}),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+0],h=e[d+1],i=e[d+2],j=e[d+3],k=this.getImage();if(k)if(f){var l=f[b],m=2*c;a.drawImage(k,g,h,i,j,l[m+0],l[m+1],i,j)}else a.drawImage(k,g,h,i,j,0,0,i,j)},_hitFunc:function(a){var b=this.getAnimation(),c=this.frameIndex(),d=4*c,e=this.getAnimations()[b],f=this.frameOffsets(),g=e[d+2],h=e[d+3];if(a.beginPath(),f){var i=f[b],j=2*c;a.rect(i[j+0],i[j+1],g,h)}else a.rect(0,0,g,h);a.closePath(),a.fillShape(this)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()},_setInterval:function(){var a=this;this.interval=setInterval(function(){a._updateIndex()},1e3/this.getFrameRate())},start:function(){var a=this.getLayer();this.anim.setLayers(a),this._setInterval(),this.anim.start()},stop:function(){this.anim.stop(),clearInterval(this.interval)},isRunning:function(){return this.anim.isRunning()},_updateIndex:function(){var a=this.frameIndex(),b=this.getAnimation(),c=this.getAnimations(),d=c[b],e=d.length/4;this.frameIndex(e-1>a?a+1:0)}},Kinetic.Util.extend(Kinetic.Sprite,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"animation\"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"animations\"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"frameOffsets\"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"image\"),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"frameIndex\",0),Kinetic.Factory.addGetterSetter(Kinetic.Sprite,\"frameRate\",17),Kinetic.Factory.backCompat(Kinetic.Sprite,{index:\"frameIndex\",getIndex:\"getFrameIndex\",setIndex:\"setFrameIndex\"}),Kinetic.Collection.mapMethods(Kinetic.Sprite)}(),function(){Kinetic.Path=function(a){this.___init(a)},Kinetic.Path.prototype={___init:function(a){this.dataArray=[];var b=this;Kinetic.Shape.call(this,a),this.className=\"Path\",this.dataArray=Kinetic.Path.parsePathData(this.getData()),this.on(\"dataChange.kinetic\",function(){b.dataArray=Kinetic.Path.parsePathData(this.getData())}),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.dataArray,c=!1;a.beginPath();for(var d=0;dj?i:j,p=i>j?1:i/j,q=i>j?j/i:1;a.translate(g,h),a.rotate(m),a.scale(p,q),a.arc(0,0,o,k,k+l,1-n),a.scale(1/p,1/q),a.rotate(-m),a.translate(-g,-h);break;case\"z\":a.closePath(),c=!0}}c?a.fillStrokeShape(this):a.strokeShape(this)}},Kinetic.Util.extend(Kinetic.Path,Kinetic.Shape),Kinetic.Path.getLineLength=function(a,b,c,d){return Math.sqrt((c-a)*(c-a)+(d-b)*(d-b))},Kinetic.Path.getPointOnLine=function(a,b,c,d,e,f,g){void 0===f&&(f=b),void 0===g&&(g=c);var h=(e-c)/(d-b+1e-8),i=Math.sqrt(a*a/(1+h*h));b>d&&(i*=-1);var j,k=h*i;if(d===b)j={x:f,y:g+k};else if((g-c)/(f-b+1e-8)===h)j={x:f+i,y:g+k};else{var l,m,n=this.getLineLength(b,c,d,e);if(1e-8>n)return void 0;var o=(f-b)*(d-b)+(g-c)*(e-c);o/=n*n,l=b+o*(d-b),m=c+o*(e-c);var p=this.getLineLength(f,g,l,m),q=Math.sqrt(a*a-p*p);i=Math.sqrt(q*q/(1+h*h)),b>d&&(i*=-1),k=h*i,j={x:l+i,y:m+k}}return j},Kinetic.Path.getPointOnCubicBezier=function(a,b,c,d,e,f,g,h,i){function j(a){return a*a*a}function k(a){return 3*a*a*(1-a)}function l(a){return 3*a*(1-a)*(1-a)}function m(a){return(1-a)*(1-a)*(1-a)}var n=h*j(a)+f*k(a)+d*l(a)+b*m(a),o=i*j(a)+g*k(a)+e*l(a)+c*m(a);return{x:n,y:o}},Kinetic.Path.getPointOnQuadraticBezier=function(a,b,c,d,e,f,g){function h(a){return a*a}function i(a){return 2*a*(1-a)}function j(a){return(1-a)*(1-a)}var k=f*h(a)+d*i(a)+b*j(a),l=g*h(a)+e*i(a)+c*j(a);return{x:k,y:l}},Kinetic.Path.getPointOnEllipticalArc=function(a,b,c,d,e,f){var g=Math.cos(f),h=Math.sin(f),i={x:c*Math.cos(e),y:d*Math.sin(e)};return{x:a+(i.x*g-i.y*h),y:b+(i.x*h+i.y*g)}},Kinetic.Path.parsePathData=function(a){if(!a)return[];var b=a,c=[\"m\",\"M\",\"l\",\"L\",\"v\",\"V\",\"h\",\"H\",\"z\",\"Z\",\"c\",\"C\",\"q\",\"Q\",\"t\",\"T\",\"s\",\"S\",\"a\",\"A\"];b=b.replace(new RegExp(\" \",\"g\"),\",\");for(var d=0;d0&&\"\"===k[0]&&k.shift();for(var l=0;l0&&!isNaN(k[0]);){var m,n,o,p,q,r,s,t,u,v,w=null,x=[],y=g,z=h;switch(j){case\"l\":g+=k.shift(),h+=k.shift(),w=\"L\",x.push(g,h);break;case\"L\":g=k.shift(),h=k.shift(),x.push(g,h);break;case\"m\":var A=k.shift(),B=k.shift();if(g+=A,h+=B,w=\"M\",f.length>2&&\"z\"===f[f.length-1].command)for(var C=f.length-2;C>=0;C--)if(\"M\"===f[C].command){g=f[C].points[0]+A,h=f[C].points[1]+B;break}x.push(g,h),j=\"l\";break;case\"M\":g=k.shift(),h=k.shift(),w=\"M\",x.push(g,h),j=\"L\";break;case\"h\":g+=k.shift(),w=\"L\",x.push(g,h);break;case\"H\":g=k.shift(),w=\"L\",x.push(g,h);break;case\"v\":h+=k.shift(),w=\"L\",x.push(g,h);break;case\"V\":h=k.shift(),w=\"L\",x.push(g,h);break;case\"C\":x.push(k.shift(),k.shift(),k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case\"c\":x.push(g+k.shift(),h+k.shift(),g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w=\"C\",x.push(g,h);break;case\"S\":n=g,o=h,m=f[f.length-1],\"C\"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,k.shift(),k.shift()),g=k.shift(),h=k.shift(),w=\"C\",x.push(g,h);break;case\"s\":n=g,o=h,m=f[f.length-1],\"C\"===m.command&&(n=g+(g-m.points[2]),o=h+(h-m.points[3])),x.push(n,o,g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w=\"C\",x.push(g,h);break;case\"Q\":x.push(k.shift(),k.shift()),g=k.shift(),h=k.shift(),x.push(g,h);break;case\"q\":x.push(g+k.shift(),h+k.shift()),g+=k.shift(),h+=k.shift(),w=\"Q\",x.push(g,h);break;case\"T\":n=g,o=h,m=f[f.length-1],\"Q\"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g=k.shift(),h=k.shift(),w=\"Q\",x.push(n,o,g,h);break;case\"t\":n=g,o=h,m=f[f.length-1],\"Q\"===m.command&&(n=g+(g-m.points[0]),o=h+(h-m.points[1])),g+=k.shift(),h+=k.shift(),w=\"Q\",x.push(n,o,g,h);break;case\"A\":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g=k.shift(),h=k.shift(),w=\"A\",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r);break;case\"a\":p=k.shift(),q=k.shift(),r=k.shift(),s=k.shift(),t=k.shift(),u=g,v=h,g+=k.shift(),h+=k.shift(),w=\"A\",x=this.convertEndpointToCenterParameterization(u,v,g,h,s,t,p,q,r)}f.push({command:w||j,points:x,start:{x:y,y:z},pathLength:this.calcLength(y,z,w||j,x)})}(\"z\"===j||\"Z\"===j)&&f.push({command:\"z\",points:[],start:void 0,pathLength:0})}return f},Kinetic.Path.calcLength=function(a,b,c,d){var e,f,g,h,i=Kinetic.Path;switch(c){case\"L\":return i.getLineLength(a,b,d[0],d[1]);case\"C\":for(e=0,f=i.getPointOnCubicBezier(0,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),h=.01;1>=h;h+=.01)g=i.getPointOnCubicBezier(h,a,b,d[0],d[1],d[2],d[3],d[4],d[5]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case\"Q\":for(e=0,f=i.getPointOnQuadraticBezier(0,a,b,d[0],d[1],d[2],d[3]),h=.01;1>=h;h+=.01)g=i.getPointOnQuadraticBezier(h,a,b,d[0],d[1],d[2],d[3]),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return e;case\"A\":e=0;var j=d[4],k=d[5],l=d[4]+k,m=Math.PI/180;if(Math.abs(j-l)k)for(h=j-m;h>l;h-=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;else for(h=j+m;l>h;h+=m)g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],h,0),e+=i.getLineLength(f.x,f.y,g.x,g.y),f=g;return g=i.getPointOnEllipticalArc(d[0],d[1],d[2],d[3],l,0),e+=i.getLineLength(f.x,f.y,g.x,g.y)}return 0},Kinetic.Path.convertEndpointToCenterParameterization=function(a,b,c,d,e,f,g,h,i){var j=i*(Math.PI/180),k=Math.cos(j)*(a-c)/2+Math.sin(j)*(b-d)/2,l=-1*Math.sin(j)*(a-c)/2+Math.cos(j)*(b-d)/2,m=k*k/(g*g)+l*l/(h*h);m>1&&(g*=Math.sqrt(m),h*=Math.sqrt(m));var n=Math.sqrt((g*g*h*h-g*g*l*l-h*h*k*k)/(g*g*l*l+h*h*k*k));e===f&&(n*=-1),isNaN(n)&&(n=0);var o=n*g*l/h,p=n*-h*k/g,q=(a+c)/2+Math.cos(j)*o-Math.sin(j)*p,r=(b+d)/2+Math.sin(j)*o+Math.cos(j)*p,s=function(a){return Math.sqrt(a[0]*a[0]+a[1]*a[1])},t=function(a,b){return(a[0]*b[0]+a[1]*b[1])/(s(a)*s(b))},u=function(a,b){return(a[0]*b[1]=1&&(y=0),0===f&&y>0&&(y-=2*Math.PI),1===f&&0>y&&(y+=2*Math.PI),[q,r,g,h,v,y,j,f]},Kinetic.Factory.addGetterSetter(Kinetic.Path,\"data\"),Kinetic.Collection.mapMethods(Kinetic.Path)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c=\"\",d=\"normal\";Kinetic.TextPath=function(a){this.___init(a)},Kinetic.TextPath.prototype={___init:function(c){var d=this;this.dummyCanvas=Kinetic.Util.createCanvasElement(),this.dataArray=[],Kinetic.Shape.call(this,c),this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=a,this._strokeFuncHit=b,this.className=\"TextPath\",this.dataArray=Kinetic.Path.parsePathData(this.attrs.data),this.on(\"dataChange.kinetic\",function(){d.dataArray=Kinetic.Path.parsePathData(this.attrs.data)}),this.on(\"textChange.kinetic textStroke.kinetic textStrokeWidth.kinetic\",d._setTextData),d._setTextData(),this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.setAttr(\"font\",this._getContextFont()),a.setAttr(\"textBaseline\",\"middle\"),a.setAttr(\"textAlign\",\"left\"),a.save();for(var b=this.glyphInfo,c=0;c0)return g=d,b[d];\"M\"==b[d].command&&(c={x:b[d].points[0],y:b[d].points[1]})}return{}},j=function(b){var f=a._getTextSize(b).width,g=0,j=0;for(d=void 0;Math.abs(f-g)/f>.01&&25>j;){j++;for(var k=g;void 0===e;)e=i(),e&&k+e.pathLengthf?d=Kinetic.Path.getPointOnLine(f,c.x,c.y,e.points[0],e.points[1],c.x,c.y):e=void 0;break;case\"A\":var m=e.points[4],n=e.points[5],o=e.points[4]+n;0===h?h=m+1e-8:f>g?h+=Math.PI/180*n/Math.abs(n):h-=Math.PI/360*n/Math.abs(n),(0>n&&o>h||n>=0&&h>o)&&(h=o,l=!0),d=Kinetic.Path.getPointOnEllipticalArc(e.points[0],e.points[1],e.points[2],e.points[3],h,e.points[6]);break;case\"C\":0===h?h=f>e.pathLength?1e-8:f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Kinetic.Path.getPointOnCubicBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3],e.points[4],e.points[5]);break;case\"Q\":0===h?h=f/e.pathLength:f>g?h+=(f-g)/e.pathLength:h-=(g-f)/e.pathLength,h>1&&(h=1,l=!0),d=Kinetic.Path.getPointOnQuadraticBezier(h,e.start.x,e.start.y,e.points[0],e.points[1],e.points[2],e.points[3])}void 0!==d&&(g=Kinetic.Path.getLineLength(c.x,c.y,d.x,d.y)),l&&(l=!1,e=void 0)}},k=0;kb;b++)c=f*Math.sin(2*b*Math.PI/e),d=-1*f*Math.cos(2*b*Math.PI/e),a.lineTo(c,d);a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.RegularPolygon,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon,\"radius\",0),Kinetic.Factory.addGetterSetter(Kinetic.RegularPolygon,\"sides\",0),Kinetic.Collection.mapMethods(Kinetic.RegularPolygon)}(),function(){Kinetic.Star=function(a){this.___init(a)},Kinetic.Star.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Star\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.innerRadius(),c=this.outerRadius(),d=this.numPoints();a.beginPath(),a.moveTo(0,0-c);for(var e=1;2*d>e;e++){var f=e%2===0?c:b,g=f*Math.sin(e*Math.PI/d),h=-1*f*Math.cos(e*Math.PI/d);a.lineTo(g,h)}a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Star,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Star,\"numPoints\",5),Kinetic.Factory.addGetterSetter(Kinetic.Star,\"innerRadius\",0),Kinetic.Factory.addGetterSetter(Kinetic.Star,\"outerRadius\",0),Kinetic.Collection.mapMethods(Kinetic.Star)}(),function(){var a=[\"fontFamily\",\"fontSize\",\"fontStyle\",\"padding\",\"lineHeight\",\"text\"],b=\"Change.kinetic\",c=\"none\",d=\"up\",e=\"right\",f=\"down\",g=\"left\",h=\"Label\",i=a.length;Kinetic.Label=function(a){this.____init(a)},Kinetic.Label.prototype={____init:function(a){var b=this;Kinetic.Group.call(this,a),this.className=h,this.on(\"add.kinetic\",function(a){b._addListeners(a.child),b._sync()})},getText:function(){return this.find(\"Text\")[0]},getTag:function(){return this.find(\"Tag\")[0]},_addListeners:function(c){var d,e=this,f=function(){e._sync()};for(d=0;i>d;d++)c.on(a[d]+b,f)},getWidth:function(){return this.getText().getWidth()},getHeight:function(){return this.getText().getHeight()},_sync:function(){var a,b,c,h,i,j,k,l=this.getText(),m=this.getTag();if(l&&m){switch(a=l.getWidth(),b=l.getHeight(),c=m.getPointerDirection(),h=m.getPointerWidth(),k=m.getPointerHeight(),i=0,j=0,c){case d:i=a/2,j=-1*k;break;case e:i=a+h,j=b/2;break;case f:i=a/2,j=b+k;break;case g:i=-1*h,j=b/2}m.setAttrs({x:-1*i,y:-1*j,width:a,height:b}),l.setAttrs({x:-1*i,y:-1*j})}}},Kinetic.Util.extend(Kinetic.Label,Kinetic.Group),Kinetic.Collection.mapMethods(Kinetic.Label),Kinetic.Tag=function(a){this.___init(a)},Kinetic.Tag.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=\"Tag\",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getWidth(),c=this.getHeight(),h=this.getPointerDirection(),i=this.getPointerWidth(),j=this.getPointerHeight(),k=this.getCornerRadius();a.beginPath(),a.moveTo(0,0),h===d&&(a.lineTo((b-i)/2,0),a.lineTo(b/2,-1*j),a.lineTo((b+i)/2,0)),k?(a.lineTo(b-k,0),a.arc(b-k,k,k,3*Math.PI/2,0,!1)):a.lineTo(b,0),h===e&&(a.lineTo(b,(c-j)/2),a.lineTo(b+i,c/2),a.lineTo(b,(c+j)/2)),k?(a.lineTo(b,c-k),a.arc(b-k,c-k,k,0,Math.PI/2,!1)):a.lineTo(b,c),h===f&&(a.lineTo((b+i)/2,c),a.lineTo(b/2,c+j),a.lineTo((b-i)/2,c)),k?(a.lineTo(k,c),a.arc(k,c-k,k,Math.PI/2,Math.PI,!1)):a.lineTo(0,c),h===g&&(a.lineTo(0,(c+j)/2),a.lineTo(-1*i,c/2),a.lineTo(0,(c-j)/2)),k&&(a.lineTo(0,k),a.arc(k,k,k,Math.PI,3*Math.PI/2,!1)),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Tag,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Tag,\"pointerDirection\",c),Kinetic.Factory.addGetterSetter(Kinetic.Tag,\"pointerWidth\",0),Kinetic.Factory.addGetterSetter(Kinetic.Tag,\"pointerHeight\",0),Kinetic.Factory.addGetterSetter(Kinetic.Tag,\"cornerRadius\",0),Kinetic.Collection.mapMethods(Kinetic.Tag)}(),function(){Kinetic.Arrow=function(a){this.____init(a)},Kinetic.Arrow.prototype={____init:function(a){Kinetic.Line.call(this,a),this.className=\"Arrow\"},_sceneFunc:function(a){var b=2*Math.PI,c=this.points(),d=c.length,e=c[d-2]-c[d-4],f=c[d-1]-c[d-3],g=(Math.atan2(f,e)+b)%b,h=this.pointerLength(),i=this.pointerWidth();a.save(),a.beginPath(),a.translate(c[d-2],c[d-1]),a.rotate(g),a.moveTo(0,0),a.lineTo(-h,i/2),a.lineTo(-h,-i/2),a.closePath(),a.restore(),this.pointerAtBeginning()&&(a.save(),a.translate(c[0],c[1]),e=c[2]-c[0],f=c[3]-c[1],a.rotate((Math.atan2(-f,-e)+b)%b),a.moveTo(0,0),a.lineTo(-10,6),a.lineTo(-10,-6),a.closePath(),a.restore()),a.fillStrokeShape(this),Kinetic.Line.prototype._sceneFunc.apply(this,arguments)}},Kinetic.Util.extend(Kinetic.Arrow,Kinetic.Line),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,\"pointerLength\",10),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,\"pointerWidth\",10),Kinetic.Factory.addGetterSetter(Kinetic.Arrow,\"pointerAtBeginning\",!1),Kinetic.Collection.mapMethods(Kinetic.Arrow)}();;/**\n * Copyright (c) 2007-2014 Ariel Flesler - afleslergmailcom | http://flesler.blogspot.com\n * Licensed under MIT\n * @author Ariel Flesler\n * @version 1.4.14\n */\n;(function(k){'use strict';k(['jquery'],function($){var j=$.scrollTo=function(a,b,c){return $(window).scrollTo(a,b,c)};j.defaults={axis:'xy',duration:0,limit:!0};j.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(f,g,h){if(typeof g=='object'){h=g;g=0}if(typeof h=='function')h={onAfter:h};if(f=='max')f=9e9;h=$.extend({},j.defaults,h);g=g||h.duration;h.queue=h.queue&&h.axis.length>1;if(h.queue)g/=2;h.offset=both(h.offset);h.over=both(h.over);return this._scrollable().each(function(){if(f==null)return;var d=this,$elem=$(d),targ=f,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\\d+(\\.\\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=win?$(targ):$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}var e=$.isFunction(h.offset)&&h.offset(d,targ)||h.offset;$.each(h.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=j.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(h.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=e[pos]||0;if(h.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*h.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(h.limit&&/^\\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&h.queue){if(old!=attr[key])animate(h.onAfterFirst);delete attr[key]}});animate(h.onAfter);function animate(a){$elem.animate(attr,g,h.easing,a&&function(){a.call(this,targ,h)})}}).end()};j.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}return j})}(typeof define==='function'&&define.amd?define:function(a,b){if(typeof module!=='undefined'&&module.exports){module.exports=b(require('jquery'))}else{b(jQuery)}}));" }, { "path": "src/libs/fabric.require1-4-12.js", "content": "/* build: `node build.js modules=ALL exclude=gestures,cufon,json minifier=uglifyjs` */\n/*! Fabric.js Copyright 2008-2014, Printio (Juriy Zaytsev, Maxim Chernyak) */\n\nvar fabric = fabric || { version: \"1.4.12\" };\nif (typeof exports !== 'undefined') {\n exports.fabric = fabric;\n}\n\nif (typeof document !== 'undefined' && typeof window !== 'undefined') {\n fabric.document = document;\n fabric.window = window;\n}\n\n/**\n * True when in environment that supports touch events\n * @type boolean\n */\nfabric.isTouchSupported = \"ontouchstart\" in fabric.document.documentElement;\n\n/**\n * True when in environment that's probably Node.js\n * @type boolean\n */\nfabric.isLikelyNode = typeof Buffer !== 'undefined' &&\n typeof window === 'undefined';\n\n\n/**\n * Attributes parsed from all SVG elements\n * @type array\n */\nfabric.SHARED_ATTRIBUTES = [\n \"display\",\n \"transform\",\n \"fill\", \"fill-opacity\", \"fill-rule\",\n \"opacity\",\n \"stroke\", \"stroke-dasharray\", \"stroke-linecap\",\n \"stroke-linejoin\", \"stroke-miterlimit\",\n \"stroke-opacity\", \"stroke-width\"\n];\n\n/**\n * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion.\n */\nfabric.DPI = 96;\n\n\n(function() {\n\n /**\n * @private\n * @param {String} eventName\n * @param {Function} handler\n */\n function _removeEventListener(eventName, handler) {\n if (!this.__eventListeners[eventName]) {\n return;\n }\n\n if (handler) {\n fabric.util.removeFromArray(this.__eventListeners[eventName], handler);\n }\n else {\n this.__eventListeners[eventName].length = 0;\n }\n }\n\n /**\n * Observes specified event\n * @deprecated `observe` deprecated since 0.8.34 (use `on` instead)\n * @memberOf fabric.Observable\n * @alias on\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function that receives a notification when an event of the specified type occurs\n * @return {Self} thisArg\n * @chainable\n */\n function observe(eventName, handler) {\n if (!this.__eventListeners) {\n this.__eventListeners = { };\n }\n // one object with key/value pairs was passed\n if (arguments.length === 1) {\n for (var prop in eventName) {\n this.on(prop, eventName[prop]);\n }\n }\n else {\n if (!this.__eventListeners[eventName]) {\n this.__eventListeners[eventName] = [ ];\n }\n this.__eventListeners[eventName].push(handler);\n }\n return this;\n }\n\n /**\n * Stops event observing for a particular event handler. Calling this method\n * without arguments removes all handlers for all events\n * @deprecated `stopObserving` deprecated since 0.8.34 (use `off` instead)\n * @memberOf fabric.Observable\n * @alias off\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function to be deleted from EventListeners\n * @return {Self} thisArg\n * @chainable\n */\n function stopObserving(eventName, handler) {\n if (!this.__eventListeners) {\n return;\n }\n\n // remove all key/value pairs (event name -> event handler)\n if (arguments.length === 0) {\n this.__eventListeners = { };\n }\n // one object with key/value pairs was passed\n else if (arguments.length === 1 && typeof arguments[0] === 'object') {\n for (var prop in eventName) {\n _removeEventListener.call(this, prop, eventName[prop]);\n }\n }\n else {\n _removeEventListener.call(this, eventName, handler);\n }\n return this;\n }\n\n /**\n * Fires event with an optional options object\n * @deprecated `fire` deprecated since 1.0.7 (use `trigger` instead)\n * @memberOf fabric.Observable\n * @alias trigger\n * @param {String} eventName Event name to fire\n * @param {Object} [options] Options object\n * @return {Self} thisArg\n * @chainable\n */\n function fire(eventName, options) {\n if (!this.__eventListeners) {\n return;\n }\n\n var listenersForEvent = this.__eventListeners[eventName];\n if (!listenersForEvent) {\n return;\n }\n\n for (var i = 0, len = listenersForEvent.length; i < len; i++) {\n // avoiding try/catch for perf. reasons\n listenersForEvent[i].call(this, options || { });\n }\n return this;\n }\n\n /**\n * @namespace fabric.Observable\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#events}\n * @see {@link http://fabricjs.com/events/|Events demo}\n */\n fabric.Observable = {\n observe: observe,\n stopObserving: stopObserving,\n fire: fire,\n\n on: observe,\n off: stopObserving,\n trigger: fire\n };\n})();\n\n\n/**\n * @namespace fabric.Collection\n */\nfabric.Collection = {\n\n /**\n * Adds objects to collection, then renders canvas (if `renderOnAddRemove` is not `false`)\n * Objects should be instances of (or inherit from) fabric.Object\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n */\n add: function () {\n this._objects.push.apply(this._objects, arguments);\n for (var i = 0, length = arguments.length; i < length; i++) {\n this._onObjectAdded(arguments[i]);\n }\n this.renderOnAddRemove && this.renderAll();\n return this;\n },\n\n /**\n * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)\n * An object should be an instance of (or inherit from) fabric.Object\n * @param {Object} object Object to insert\n * @param {Number} index Index to insert object at\n * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs\n * @return {Self} thisArg\n * @chainable\n */\n insertAt: function (object, index, nonSplicing) {\n var objects = this.getObjects();\n if (nonSplicing) {\n objects[index] = object;\n }\n else {\n objects.splice(index, 0, object);\n }\n this._onObjectAdded(object);\n this.renderOnAddRemove && this.renderAll();\n return this;\n },\n\n /**\n * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n * @chainable\n */\n remove: function() {\n var objects = this.getObjects(),\n index;\n\n for (var i = 0, length = arguments.length; i < length; i++) {\n index = objects.indexOf(arguments[i]);\n\n // only call onObjectRemoved if an object was actually removed\n if (index !== -1) {\n objects.splice(index, 1);\n this._onObjectRemoved(arguments[i]);\n }\n }\n\n this.renderOnAddRemove && this.renderAll();\n return this;\n },\n\n /**\n * Executes given function for each object in this group\n * @param {Function} callback\n * Callback invoked with current object as first argument,\n * index - as second and an array of all objects - as third.\n * Iteration happens in reverse order (for performance reasons).\n * Callback is invoked in a context of Global Object (e.g. `window`)\n * when no `context` argument is given\n *\n * @param {Object} context Context (aka thisObject)\n * @return {Self} thisArg\n */\n forEachObject: function(callback, context) {\n var objects = this.getObjects(),\n i = objects.length;\n while (i--) {\n callback.call(context, objects[i], i, objects);\n }\n return this;\n },\n\n /**\n * Returns an array of children objects of this instance\n * Type parameter introduced in 1.3.10\n * @param {String} [type] When specified, only objects of this type are returned\n * @return {Array}\n */\n getObjects: function(type) {\n if (typeof type === 'undefined') {\n return this._objects;\n }\n return this._objects.filter(function(o) {\n return o.type === type;\n });\n },\n\n /**\n * Returns object at specified index\n * @param {Number} index\n * @return {Self} thisArg\n */\n item: function (index) {\n return this.getObjects()[index];\n },\n\n /**\n * Returns true if collection contains no objects\n * @return {Boolean} true if collection is empty\n */\n isEmpty: function () {\n return this.getObjects().length === 0;\n },\n\n /**\n * Returns a size of a collection (i.e: length of an array containing its objects)\n * @return {Number} Collection size\n */\n size: function() {\n return this.getObjects().length;\n },\n\n /**\n * Returns true if collection contains an object\n * @param {Object} object Object to check against\n * @return {Boolean} `true` if collection contains an object\n */\n contains: function(object) {\n return this.getObjects().indexOf(object) > -1;\n },\n\n /**\n * Returns number representation of a collection complexity\n * @return {Number} complexity\n */\n complexity: function () {\n return this.getObjects().reduce(function (memo, current) {\n memo += current.complexity ? current.complexity() : 0;\n return memo;\n }, 0);\n }\n};\n\n\n(function(global) {\n\n var sqrt = Math.sqrt,\n atan2 = Math.atan2,\n PiBy180 = Math.PI / 180;\n\n /**\n * @namespace fabric.util\n */\n fabric.util = {\n\n /**\n * Removes value from an array.\n * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`\n * @static\n * @memberOf fabric.util\n * @param {Array} array\n * @param {Any} value\n * @return {Array} original array\n */\n removeFromArray: function(array, value) {\n var idx = array.indexOf(value);\n if (idx !== -1) {\n array.splice(idx, 1);\n }\n return array;\n },\n\n /**\n * Returns random number between 2 specified ones.\n * @static\n * @memberOf fabric.util\n * @param {Number} min lower limit\n * @param {Number} max upper limit\n * @return {Number} random value (between min and max)\n */\n getRandomInt: function(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n\n /**\n * Transforms degrees to radians.\n * @static\n * @memberOf fabric.util\n * @param {Number} degrees value in degrees\n * @return {Number} value in radians\n */\n degreesToRadians: function(degrees) {\n return degrees * PiBy180;\n },\n\n /**\n * Transforms radians to degrees.\n * @static\n * @memberOf fabric.util\n * @param {Number} radians value in radians\n * @return {Number} value in degrees\n */\n radiansToDegrees: function(radians) {\n return radians / PiBy180;\n },\n\n /**\n * Rotates `point` around `origin` with `radians`\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} point The point to rotate\n * @param {fabric.Point} origin The origin of the rotation\n * @param {Number} radians The radians of the angle for the rotation\n * @return {fabric.Point} The new rotated point\n */\n rotatePoint: function(point, origin, radians) {\n var sin = Math.sin(radians),\n cos = Math.cos(radians);\n\n point.subtractEquals(origin);\n\n var rx = point.x * cos - point.y * sin,\n ry = point.x * sin + point.y * cos;\n\n return new fabric.Point(rx, ry).addEquals(origin);\n },\n\n /**\n * Apply transform t to point p\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} p The point to transform\n * @param {Array} t The transform\n * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied\n * @return {fabric.Point} The transformed point\n */\n transformPoint: function(p, t, ignoreOffset) {\n if (ignoreOffset) {\n return new fabric.Point(\n t[0] * p.x + t[1] * p.y,\n t[2] * p.x + t[3] * p.y\n );\n }\n return new fabric.Point(\n t[0] * p.x + t[1] * p.y + t[4],\n t[2] * p.x + t[3] * p.y + t[5]\n );\n },\n\n /**\n * Invert transformation t\n * @static\n * @memberOf fabric.util\n * @param {Array} t The transform\n * @return {Array} The inverted transform\n */\n invertTransform: function(t) {\n var r = t.slice(),\n a = 1 / (t[0] * t[3] - t[1] * t[2]);\n r = [a * t[3], -a * t[1], -a * t[2], a * t[0], 0, 0];\n var o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r);\n r[4] = -o.x;\n r[5] = -o.y;\n return r;\n },\n\n /**\n * A wrapper around Number#toFixed, which contrary to native method returns number, not string.\n * @static\n * @memberOf fabric.util\n * @param {Number|String} number number to operate on\n * @param {Number} fractionDigits number of fraction digits to \"leave\"\n * @return {Number}\n */\n toFixed: function(number, fractionDigits) {\n return parseFloat(Number(number).toFixed(fractionDigits));\n },\n\n /**\n * Converts from attribute value to pixel value if applicable.\n * Returns converted pixels or original value not converted.\n * @param {Number|String} value number to operate on\n * @return {Number|String}\n */\n parseUnit: function(value) {\n var unit = /\\D{0,2}$/.exec(value),\n number = parseFloat(value);\n\n switch (unit[0]) {\n case 'mm':\n return number * fabric.DPI / 25.4;\n\n case 'cm':\n return number * fabric.DPI / 2.54;\n\n case 'in':\n return number * fabric.DPI;\n\n case 'pt':\n return number * fabric.DPI / 72; // or * 4 / 3\n\n case 'pc':\n return number * fabric.DPI / 72 * 12; // or * 16\n\n default:\n return number;\n }\n },\n\n /**\n * Function which always returns `false`.\n * @static\n * @memberOf fabric.util\n * @return {Boolean}\n */\n falseFunction: function() {\n return false;\n },\n\n /**\n * Returns klass \"Class\" object of given namespace\n * @memberOf fabric.util\n * @param {String} type Type of object (eg. 'circle')\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @return {Object} klass \"Class\"\n */\n getKlass: function(type, namespace) {\n // capitalize first letter only\n type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));\n return fabric.util.resolveNamespace(namespace)[type];\n },\n\n /**\n * Returns object of given namespace\n * @memberOf fabric.util\n * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'\n * @return {Object} Object for given namespace (default fabric)\n */\n resolveNamespace: function(namespace) {\n if (!namespace) {\n return fabric;\n }\n\n var parts = namespace.split('.'),\n len = parts.length,\n obj = global || fabric.window;\n\n for (var i = 0; i < len; ++i) {\n obj = obj[parts[i]];\n }\n\n return obj;\n },\n\n /**\n * Loads image element from given url and passes it to a callback\n * @memberOf fabric.util\n * @param {String} url URL representing an image\n * @param {Function} callback Callback; invoked with loaded image\n * @param {Any} [context] Context to invoke callback in\n * @param {Object} [crossOrigin] crossOrigin value to set image element to\n */\n loadImage: function(url, callback, context, crossOrigin) {\n if (!url) {\n callback && callback.call(context, url);\n return;\n }\n\n var img = fabric.util.createImage();\n\n /** @ignore */\n img.onload = function () {\n callback && callback.call(context, img);\n img = img.onload = img.onerror = null;\n };\n\n /** @ignore */\n img.onerror = function() {\n fabric.log('Error loading ' + img.src);\n callback && callback.call(context, null, true);\n img = img.onload = img.onerror = null;\n };\n\n // data-urls appear to be buggy with crossOrigin\n // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767\n // see https://code.google.com/p/chromium/issues/detail?id=315152\n // https://bugzilla.mozilla.org/show_bug.cgi?id=935069\n if (url.indexOf('data') !== 0 && typeof crossOrigin !== 'undefined') {\n img.crossOrigin = crossOrigin;\n }\n\n img.src = url;\n },\n\n /**\n * Creates corresponding fabric instances from their object representations\n * @static\n * @memberOf fabric.util\n * @param {Array} objects Objects to enliven\n * @param {Function} callback Callback to invoke when all objects are created\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @param {Function} reviver Method for further parsing of object elements,\n * called after each fabric object created.\n */\n enlivenObjects: function(objects, callback, namespace, reviver) {\n objects = objects || [ ];\n\n function onLoaded() {\n if (++numLoadedObjects === numTotalObjects) {\n callback && callback(enlivenedObjects);\n }\n }\n\n var enlivenedObjects = [ ],\n numLoadedObjects = 0,\n numTotalObjects = objects.length;\n\n if (!numTotalObjects) {\n callback && callback(enlivenedObjects);\n return;\n }\n\n objects.forEach(function (o, index) {\n // if sparse array\n if (!o || !o.type) {\n onLoaded();\n return;\n }\n var klass = fabric.util.getKlass(o.type, namespace);\n if (klass.async) {\n klass.fromObject(o, function (obj, error) {\n if (!error) {\n enlivenedObjects[index] = obj;\n reviver && reviver(o, enlivenedObjects[index]);\n }\n onLoaded();\n });\n }\n else {\n enlivenedObjects[index] = klass.fromObject(o);\n reviver && reviver(o, enlivenedObjects[index]);\n onLoaded();\n }\n });\n },\n\n /**\n * Groups SVG elements (usually those retrieved from SVG document)\n * @static\n * @memberOf fabric.util\n * @param {Array} elements SVG elements to group\n * @param {Object} [options] Options object\n * @return {fabric.Object|fabric.PathGroup}\n */\n groupSVGElements: function(elements, options, path) {\n var object;\n\n object = new fabric.PathGroup(elements, options);\n\n if (typeof path !== 'undefined') {\n object.setSourcePath(path);\n }\n return object;\n },\n\n /**\n * Populates an object with properties of another object\n * @static\n * @memberOf fabric.util\n * @param {Object} source Source object\n * @param {Object} destination Destination object\n * @return {Array} properties Propertie names to include\n */\n populateWithProperties: function(source, destination, properties) {\n if (properties && Object.prototype.toString.call(properties) === '[object Array]') {\n for (var i = 0, len = properties.length; i < len; i++) {\n if (properties[i] in source) {\n destination[properties[i]] = source[properties[i]];\n }\n }\n }\n },\n\n /**\n * Draws a dashed line between two points\n *\n * This method is used to draw dashed line around selection area.\n * See dotted stroke in canvas\n *\n * @param {CanvasRenderingContext2D} ctx context\n * @param {Number} x start x coordinate\n * @param {Number} y start y coordinate\n * @param {Number} x2 end x coordinate\n * @param {Number} y2 end y coordinate\n * @param {Array} da dash array pattern\n */\n drawDashedLine: function(ctx, x, y, x2, y2, da) {\n var dx = x2 - x,\n dy = y2 - y,\n len = sqrt(dx * dx + dy * dy),\n rot = atan2(dy, dx),\n dc = da.length,\n di = 0,\n draw = true;\n\n ctx.save();\n ctx.translate(x, y);\n ctx.moveTo(0, 0);\n ctx.rotate(rot);\n\n x = 0;\n while (len > x) {\n x += da[di++ % dc];\n if (x > len) {\n x = len;\n }\n ctx[draw ? 'lineTo' : 'moveTo'](x, 0);\n draw = !draw;\n }\n\n ctx.restore();\n },\n\n /**\n * Creates canvas element and initializes it via excanvas if necessary\n * @static\n * @memberOf fabric.util\n * @param {CanvasElement} [canvasEl] optional canvas element to initialize;\n * when not given, element is created implicitly\n * @return {CanvasElement} initialized canvas element\n */\n createCanvasElement: function(canvasEl) {\n canvasEl || (canvasEl = fabric.document.createElement('canvas'));\n //jscs:disable requireCamelCaseOrUpperCaseIdentifiers\n if (!canvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') {\n G_vmlCanvasManager.initElement(canvasEl);\n }\n //jscs:enable requireCamelCaseOrUpperCaseIdentifiers\n return canvasEl;\n },\n\n /**\n * Creates image element (works on client and node)\n * @static\n * @memberOf fabric.util\n * @return {HTMLImageElement} HTML image element\n */\n createImage: function() {\n return fabric.isLikelyNode\n ? new (require('canvas').Image)()\n : fabric.document.createElement('img');\n },\n\n /**\n * Creates accessors (getXXX, setXXX) for a \"class\", based on \"stateProperties\" array\n * @static\n * @memberOf fabric.util\n * @param {Object} klass \"Class\" to create accessors for\n */\n createAccessors: function(klass) {\n var proto = klass.prototype;\n\n for (var i = proto.stateProperties.length; i--; ) {\n\n var propName = proto.stateProperties[i],\n capitalizedPropName = propName.charAt(0).toUpperCase() + propName.slice(1),\n setterName = 'set' + capitalizedPropName,\n getterName = 'get' + capitalizedPropName;\n\n // using `new Function` for better introspection\n if (!proto[getterName]) {\n proto[getterName] = (function(property) {\n return new Function('return this.get(\"' + property + '\")');\n })(propName);\n }\n if (!proto[setterName]) {\n proto[setterName] = (function(property) {\n return new Function('value', 'return this.set(\"' + property + '\", value)');\n })(propName);\n }\n }\n },\n\n /**\n * @static\n * @memberOf fabric.util\n * @param {fabric.Object} receiver Object implementing `clipTo` method\n * @param {CanvasRenderingContext2D} ctx Context to clip\n */\n clipContext: function(receiver, ctx) {\n ctx.save();\n ctx.beginPath();\n receiver.clipTo(ctx);\n ctx.clip();\n },\n\n /**\n * Multiply matrix A by matrix B to nest transformations\n * @static\n * @memberOf fabric.util\n * @param {Array} matrixA First transformMatrix\n * @param {Array} matrixB Second transformMatrix\n * @return {Array} The product of the two transform matrices\n */\n multiplyTransformMatrices: function(matrixA, matrixB) {\n // Matrix multiply matrixA * matrixB\n var a = [\n [matrixA[0], matrixA[2], matrixA[4]],\n [matrixA[1], matrixA[3], matrixA[5]],\n [0, 0, 1 ]\n ],\n\n b = [\n [matrixB[0], matrixB[2], matrixB[4]],\n [matrixB[1], matrixB[3], matrixB[5]],\n [0, 0, 1 ]\n ],\n\n result = [];\n\n for (var r = 0; r < 3; r++) {\n result[r] = [];\n for (var c = 0; c < 3; c++) {\n var sum = 0;\n for (var k = 0; k < 3; k++) {\n sum += a[r][k] * b[k][c];\n }\n\n result[r][c] = sum;\n }\n }\n\n return [\n result[0][0],\n result[1][0],\n result[0][1],\n result[1][1],\n result[0][2],\n result[1][2]\n ];\n },\n\n /**\n * Returns string representation of function body\n * @param {Function} fn Function to get body of\n * @return {String} Function body\n */\n getFunctionBody: function(fn) {\n return (String(fn).match(/function[^{]*\\{([\\s\\S]*)\\}/) || {})[1];\n },\n\n /**\n * Returns true if context has transparent pixel\n * at specified location (taking tolerance into account)\n * @param {CanvasRenderingContext2D} ctx context\n * @param {Number} x x coordinate\n * @param {Number} y y coordinate\n * @param {Number} tolerance Tolerance\n */\n isTransparent: function(ctx, x, y, tolerance) {\n\n // If tolerance is > 0 adjust start coords to take into account.\n // If moves off Canvas fix to 0\n if (tolerance > 0) {\n if (x > tolerance) {\n x -= tolerance;\n }\n else {\n x = 0;\n }\n if (y > tolerance) {\n y -= tolerance;\n }\n else {\n y = 0;\n }\n }\n\n var _isTransparent = true,\n imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1);\n\n // Split image data - for tolerance > 1, pixelDataSize = 4;\n for (var i = 3, l = imageData.data.length; i < l; i += 4) {\n var temp = imageData.data[i];\n _isTransparent = temp <= 0;\n if (_isTransparent === false) {\n break; // Stop if colour found\n }\n }\n\n imageData = null;\n\n return _isTransparent;\n }\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n\n var arcToSegmentsCache = { },\n segmentToBezierCache = { },\n boundsOfCurveCache = { },\n _join = Array.prototype.join;\n\n /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp\n * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here\n * http://mozilla.org/MPL/2.0/\n */\n function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) {\n var argsString = _join.call(arguments);\n if (arcToSegmentsCache[argsString]) {\n return arcToSegmentsCache[argsString];\n }\n\n var PI = Math.PI, th = rotateX * PI / 180,\n sinTh = Math.sin(th),\n cosTh = Math.cos(th),\n fromX = 0, fromY = 0;\n\n rx = Math.abs(rx);\n ry = Math.abs(ry);\n\n var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5,\n py = -cosTh * toY * 0.5 + sinTh * toX * 0.5,\n rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px,\n pl = rx2 * ry2 - rx2 * py2 - ry2 * px2,\n root = 0;\n\n if (pl < 0) {\n var s = Math.sqrt(1 - pl/(rx2 * ry2));\n rx *= s;\n ry *= s;\n }\n else {\n root = (large === sweep ? -1.0 : 1.0) *\n Math.sqrt( pl /(rx2 * py2 + ry2 * px2));\n }\n\n var cx = root * rx * py / ry,\n cy = -root * ry * px / rx,\n cx1 = cosTh * cx - sinTh * cy + toX * 0.5,\n cy1 = sinTh * cx + cosTh * cy + toY * 0.5,\n mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry),\n dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry);\n\n if (sweep === 0 && dtheta > 0) {\n dtheta -= 2 * PI;\n }\n else if (sweep === 1 && dtheta < 0) {\n dtheta += 2 * PI;\n }\n\n // Convert into cubic bezier segments <= 90deg\n var segments = Math.ceil(Math.abs(dtheta / PI * 2)),\n result = [], mDelta = dtheta / segments,\n mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2),\n th3 = mTheta + mDelta;\n\n for (var i = 0; i < segments; i++) {\n result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY);\n fromX = result[i][4];\n fromY = result[i][5];\n mTheta = th3;\n th3 += mDelta;\n }\n arcToSegmentsCache[argsString] = result;\n return result;\n }\n\n function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) {\n var argsString2 = _join.call(arguments);\n if (segmentToBezierCache[argsString2]) {\n return segmentToBezierCache[argsString2];\n }\n\n var costh2 = Math.cos(th2),\n sinth2 = Math.sin(th2),\n costh3 = Math.cos(th3),\n sinth3 = Math.sin(th3),\n toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1,\n toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1,\n cp1X = fromX + mT * ( - cosTh * rx * sinth2 - sinTh * ry * costh2),\n cp1Y = fromY + mT * ( - sinTh * rx * sinth2 + cosTh * ry * costh2),\n cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3),\n cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3);\n\n segmentToBezierCache[argsString2] = [\n cp1X, cp1Y,\n cp2X, cp2Y,\n toX, toY\n ];\n return segmentToBezierCache[argsString2];\n }\n\n /*\n * Private\n */\n function calcVectorAngle(ux, uy, vx, vy) {\n var ta = Math.atan2(uy, ux),\n tb = Math.atan2(vy, vx);\n if (tb >= ta) {\n return tb - ta;\n }\n else {\n return 2 * Math.PI - (ta - tb);\n }\n }\n\n /**\n * Draws arc\n * @param {CanvasRenderingContext2D} ctx\n * @param {Number} fx\n * @param {Number} fy\n * @param {Array} coords\n */\n fabric.util.drawArc = function(ctx, fx, fy, coords) {\n var rx = coords[0],\n ry = coords[1],\n rot = coords[2],\n large = coords[3],\n sweep = coords[4],\n tx = coords[5],\n ty = coords[6],\n segs = [[ ], [ ], [ ], [ ]],\n segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);\n\n for (var i = 0, len = segsNorm.length; i < len; i++) {\n segs[i][0] = segsNorm[i][0] + fx;\n segs[i][1] = segsNorm[i][1] + fy;\n segs[i][2] = segsNorm[i][2] + fx;\n segs[i][3] = segsNorm[i][3] + fy;\n segs[i][4] = segsNorm[i][4] + fx;\n segs[i][5] = segsNorm[i][5] + fy;\n ctx.bezierCurveTo.apply(ctx, segs[i]);\n }\n };\n\n /**\n * Calculate bounding box of a elliptic-arc\n * @param {Number} fx start point of arc\n * @param {Number} fy\n * @param {Number} rx horizontal radius\n * @param {Number} ry vertical radius\n * @param {Number} rot angle of horizontal axe\n * @param {Number} large 1 or 0, whatever the arc is the big or the small on the 2 points\n * @param {Number} sweep 1 or 0, 1 clockwise or counterclockwise direction\n * @param {Number} tx end point of arc\n * @param {Number} ty\n */\n fabric.util.getBoundsOfArc = function(fx, fy, rx, ry, rot, large, sweep, tx, ty) {\n\n var fromX = 0, fromY = 0, bound = [ ], bounds = [ ],\n segs = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);\n\n for (var i = 0, len = segs.length; i < len; i++) {\n bound = getBoundsOfCurve(fromX, fromY, segs[i][0], segs[i][1], segs[i][2], segs[i][3], segs[i][4], segs[i][5]);\n bound[0].x += fx;\n bound[0].y += fy;\n bound[1].x += fx;\n bound[1].y += fy;\n bounds.push(bound[0]);\n bounds.push(bound[1]);\n fromX = segs[i][4];\n fromY = segs[i][5];\n }\n return bounds;\n };\n\n /**\n * Calculate bounding box of a beziercurve\n * @param {Number} x0 starting point\n * @param {Number} y0\n * @param {Number} x1 first control point\n * @param {Number} y1\n * @param {Number} x2 secondo control point\n * @param {Number} y2\n * @param {Number} x3 end of beizer\n * @param {Number} y3\n */\n // taken from http://jsbin.com/ivomiq/56/edit no credits available for that.\n function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) {\n var argsString = _join.call(arguments);\n if (boundsOfCurveCache[argsString]) {\n return boundsOfCurveCache[argsString];\n }\n\n var sqrt = Math.sqrt,\n min = Math.min, max = Math.max,\n abs = Math.abs, tvalues = [ ],\n bounds = [[ ], [ ]],\n a, b, c, t, t1, t2, b2ac, sqrtb2ac;\n\n b = 6 * x0 - 12 * x1 + 6 * x2;\n a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;\n c = 3 * x1 - 3 * x0;\n\n for (var i = 0; i < 2; ++i) {\n if (i > 0) {\n b = 6 * y0 - 12 * y1 + 6 * y2;\n a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;\n c = 3 * y1 - 3 * y0;\n }\n\n if (abs(a) < 1e-12) {\n if (abs(b) < 1e-12) {\n continue;\n }\n t = -c / b;\n if (0 < t && t < 1) {\n tvalues.push(t);\n }\n continue;\n }\n b2ac = b * b - 4 * c * a;\n if (b2ac < 0) {\n continue;\n }\n sqrtb2ac = sqrt(b2ac);\n t1 = (-b + sqrtb2ac) / (2 * a);\n if (0 < t1 && t1 < 1) {\n tvalues.push(t1);\n }\n t2 = (-b - sqrtb2ac) / (2 * a);\n if (0 < t2 && t2 < 1) {\n tvalues.push(t2);\n }\n }\n\n var x, y, j = tvalues.length, jlen = j, mt;\n while (j--) {\n t = tvalues[j];\n mt = 1 - t;\n x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);\n bounds[0][j] = x;\n\n y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);\n bounds[1][j] = y;\n }\n\n bounds[0][jlen] = x0;\n bounds[1][jlen] = y0;\n bounds[0][jlen + 1] = x3;\n bounds[1][jlen + 1] = y3;\n var result = [\n {\n x: min.apply(null, bounds[0]),\n y: min.apply(null, bounds[1])\n },\n {\n x: max.apply(null, bounds[0]),\n y: max.apply(null, bounds[1])\n }\n ];\n boundsOfCurveCache[argsString] = result;\n return result;\n }\n\n fabric.util.getBoundsOfCurve = getBoundsOfCurve;\n\n})();\n\n\n(function() {\n\n var slice = Array.prototype.slice;\n\n /* _ES5_COMPAT_START_ */\n\n if (!Array.prototype.indexOf) {\n /**\n * Finds index of an element in an array\n * @param {Any} searchElement\n * @param {Number} [fromIndex]\n * @return {Number}\n */\n Array.prototype.indexOf = function (searchElement /*, fromIndex */ ) {\n if (this === void 0 || this === null) {\n throw new TypeError();\n }\n var t = Object(this), len = t.length >>> 0;\n if (len === 0) {\n return -1;\n }\n var n = 0;\n if (arguments.length > 0) {\n n = Number(arguments[1]);\n if (n !== n) { // shortcut for verifying if it's NaN\n n = 0;\n }\n else if (n !== 0 && n !== Number.POSITIVE_INFINITY && n !== Number.NEGATIVE_INFINITY) {\n n = (n > 0 || -1) * Math.floor(Math.abs(n));\n }\n }\n if (n >= len) {\n return -1;\n }\n var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);\n for (; k < len; k++) {\n if (k in t && t[k] === searchElement) {\n return k;\n }\n }\n return -1;\n };\n }\n\n if (!Array.prototype.forEach) {\n /**\n * Iterates an array, invoking callback for each element\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [context] Context to invoke callback in\n * @return {Array}\n */\n Array.prototype.forEach = function(fn, context) {\n for (var i = 0, len = this.length >>> 0; i < len; i++) {\n if (i in this) {\n fn.call(context, this[i], i, this);\n }\n }\n };\n }\n\n if (!Array.prototype.map) {\n /**\n * Returns a result of iterating over an array, invoking callback for each element\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [context] Context to invoke callback in\n * @return {Array}\n */\n Array.prototype.map = function(fn, context) {\n var result = [ ];\n for (var i = 0, len = this.length >>> 0; i < len; i++) {\n if (i in this) {\n result[i] = fn.call(context, this[i], i, this);\n }\n }\n return result;\n };\n }\n\n if (!Array.prototype.every) {\n /**\n * Returns true if a callback returns truthy value for all elements in an array\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [context] Context to invoke callback in\n * @return {Boolean}\n */\n Array.prototype.every = function(fn, context) {\n for (var i = 0, len = this.length >>> 0; i < len; i++) {\n if (i in this && !fn.call(context, this[i], i, this)) {\n return false;\n }\n }\n return true;\n };\n }\n\n if (!Array.prototype.some) {\n /**\n * Returns true if a callback returns truthy value for at least one element in an array\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [context] Context to invoke callback in\n * @return {Boolean}\n */\n Array.prototype.some = function(fn, context) {\n for (var i = 0, len = this.length >>> 0; i < len; i++) {\n if (i in this && fn.call(context, this[i], i, this)) {\n return true;\n }\n }\n return false;\n };\n }\n\n if (!Array.prototype.filter) {\n /**\n * Returns the result of iterating over elements in an array\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [context] Context to invoke callback in\n * @return {Array}\n */\n Array.prototype.filter = function(fn, context) {\n var result = [ ], val;\n for (var i = 0, len = this.length >>> 0; i < len; i++) {\n if (i in this) {\n val = this[i]; // in case fn mutates this\n if (fn.call(context, val, i, this)) {\n result.push(val);\n }\n }\n }\n return result;\n };\n }\n\n if (!Array.prototype.reduce) {\n /**\n * Returns \"folded\" (reduced) result of iterating over elements in an array\n * @param {Function} fn Callback to invoke for each element\n * @param {Object} [initial] Object to use as the first argument to the first call of the callback\n * @return {Any}\n */\n Array.prototype.reduce = function(fn /*, initial*/) {\n var len = this.length >>> 0,\n i = 0,\n rv;\n\n if (arguments.length > 1) {\n rv = arguments[1];\n }\n else {\n do {\n if (i in this) {\n rv = this[i++];\n break;\n }\n // if array contains no values, no initial value to return\n if (++i >= len) {\n throw new TypeError();\n }\n }\n while (true);\n }\n for (; i < len; i++) {\n if (i in this) {\n rv = fn.call(null, rv, this[i], i, this);\n }\n }\n return rv;\n };\n }\n\n /* _ES5_COMPAT_END_ */\n\n /**\n * Invokes method on all items in a given array\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} method Name of a method to invoke\n * @return {Array}\n */\n function invoke(array, method) {\n var args = slice.call(arguments, 2), result = [ ];\n for (var i = 0, len = array.length; i < len; i++) {\n result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);\n }\n return result;\n }\n\n /**\n * Finds maximum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {Any}\n */\n function max(array, byProperty) {\n return find(array, byProperty, function(value1, value2) {\n return value1 >= value2;\n });\n }\n\n /**\n * Finds minimum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {Any}\n */\n function min(array, byProperty) {\n return find(array, byProperty, function(value1, value2) {\n return value1 < value2;\n });\n }\n\n /**\n * @private\n */\n function find(array, byProperty, condition) {\n if (!array || array.length === 0) {\n return;\n }\n\n var i = array.length - 1,\n result = byProperty ? array[i][byProperty] : array[i];\n if (byProperty) {\n while (i--) {\n if (condition(array[i][byProperty], result)) {\n result = array[i][byProperty];\n }\n }\n }\n else {\n while (i--) {\n if (condition(array[i], result)) {\n result = array[i];\n }\n }\n }\n return result;\n }\n\n /**\n * @namespace fabric.util.array\n */\n fabric.util.array = {\n invoke: invoke,\n min: min,\n max: max\n };\n\n})();\n\n\n(function() {\n\n /**\n * Copies all enumerable properties of one object to another\n * @memberOf fabric.util.object\n * @param {Object} destination Where to copy to\n * @param {Object} source Where to copy from\n * @return {Object}\n */\n function extend(destination, source) {\n // JScript DontEnum bug is not taken care of\n for (var property in source) {\n destination[property] = source[property];\n }\n return destination;\n }\n\n /**\n * Creates an empty object and copies all enumerable properties of another object to it\n * @memberOf fabric.util.object\n * @param {Object} object Object to clone\n * @return {Object}\n */\n function clone(object) {\n return extend({ }, object);\n }\n\n /** @namespace fabric.util.object */\n fabric.util.object = {\n extend: extend,\n clone: clone\n };\n\n})();\n\n\n(function() {\n\n /* _ES5_COMPAT_START_ */\n if (!String.prototype.trim) {\n /**\n * Trims a string (removing whitespace from the beginning and the end)\n * @function external:String#trim\n * @see String#trim on MDN\n */\n String.prototype.trim = function () {\n // this trim is not fully ES3 or ES5 compliant, but it should cover most cases for now\n return this.replace(/^[\\s\\xA0]+/, '').replace(/[\\s\\xA0]+$/, '');\n };\n }\n /* _ES5_COMPAT_END_ */\n\n /**\n * Camelizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to camelize\n * @return {String} Camelized version of a string\n */\n function camelize(string) {\n return string.replace(/-+(.)?/g, function(match, character) {\n return character ? character.toUpperCase() : '';\n });\n }\n\n /**\n * Capitalizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to capitalize\n * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized\n * and other letters stay untouched, if false first letter is capitalized\n * and other letters are converted to lowercase.\n * @return {String} Capitalized version of a string\n */\n function capitalize(string, firstLetterOnly) {\n return string.charAt(0).toUpperCase() +\n (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase());\n }\n\n /**\n * Escapes XML in a string\n * @memberOf fabric.util.string\n * @param {String} string String to escape\n * @return {String} Escaped version of a string\n */\n function escapeXml(string) {\n return string.replace(/&/g, '&')\n .replace(/\"/g, '"')\n .replace(/'/g, ''')\n .replace(//g, '>');\n }\n\n /**\n * String utilities\n * @namespace fabric.util.string\n */\n fabric.util.string = {\n camelize: camelize,\n capitalize: capitalize,\n escapeXml: escapeXml\n };\n}());\n\n\n/* _ES5_COMPAT_START_ */\n(function() {\n\n var slice = Array.prototype.slice,\n apply = Function.prototype.apply,\n Dummy = function() { };\n\n if (!Function.prototype.bind) {\n /**\n * Cross-browser approximation of ES5 Function.prototype.bind (not fully spec conforming)\n * @see Function#bind on MDN\n * @param {Object} thisArg Object to bind function to\n * @param {Any[]} [...] Values to pass to a bound function\n * @return {Function}\n */\n Function.prototype.bind = function(thisArg) {\n var _this = this, args = slice.call(arguments, 1), bound;\n if (args.length) {\n bound = function() {\n return apply.call(_this, this instanceof Dummy ? this : thisArg, args.concat(slice.call(arguments)));\n };\n }\n else {\n /** @ignore */\n bound = function() {\n return apply.call(_this, this instanceof Dummy ? this : thisArg, arguments);\n };\n }\n Dummy.prototype = this.prototype;\n bound.prototype = new Dummy();\n\n return bound;\n };\n }\n\n})();\n/* _ES5_COMPAT_END_ */\n\n\n(function() {\n\n var slice = Array.prototype.slice, emptyFunction = function() { },\n\n IS_DONTENUM_BUGGY = (function() {\n for (var p in { toString: 1 }) {\n if (p === 'toString') {\n return false;\n }\n }\n return true;\n })(),\n\n /** @ignore */\n addMethods = function(klass, source, parent) {\n for (var property in source) {\n\n if (property in klass.prototype &&\n typeof klass.prototype[property] === 'function' &&\n (source[property] + '').indexOf('callSuper') > -1) {\n\n klass.prototype[property] = (function(property) {\n return function() {\n\n var superclass = this.constructor.superclass;\n this.constructor.superclass = parent;\n var returnValue = source[property].apply(this, arguments);\n this.constructor.superclass = superclass;\n\n if (property !== 'initialize') {\n return returnValue;\n }\n };\n })(property);\n }\n else {\n klass.prototype[property] = source[property];\n }\n\n if (IS_DONTENUM_BUGGY) {\n if (source.toString !== Object.prototype.toString) {\n klass.prototype.toString = source.toString;\n }\n if (source.valueOf !== Object.prototype.valueOf) {\n klass.prototype.valueOf = source.valueOf;\n }\n }\n }\n };\n\n function Subclass() { }\n\n function callSuper(methodName) {\n var fn = this.constructor.superclass.prototype[methodName];\n return (arguments.length > 1)\n ? fn.apply(this, slice.call(arguments, 1))\n : fn.call(this);\n }\n\n /**\n * Helper for creation of \"classes\".\n * @memberOf fabric.util\n * @param {Function} [parent] optional \"Class\" to inherit from\n * @param {Object} [properties] Properties shared by all instances of this class\n * (be careful modifying objects defined here as this would affect all instances)\n */\n function createClass() {\n var parent = null,\n properties = slice.call(arguments, 0);\n\n if (typeof properties[0] === 'function') {\n parent = properties.shift();\n }\n function klass() {\n this.initialize.apply(this, arguments);\n }\n\n klass.superclass = parent;\n klass.subclasses = [ ];\n\n if (parent) {\n Subclass.prototype = parent.prototype;\n klass.prototype = new Subclass();\n parent.subclasses.push(klass);\n }\n for (var i = 0, length = properties.length; i < length; i++) {\n addMethods(klass, properties[i], parent);\n }\n if (!klass.prototype.initialize) {\n klass.prototype.initialize = emptyFunction;\n }\n klass.prototype.constructor = klass;\n klass.prototype.callSuper = callSuper;\n return klass;\n }\n\n fabric.util.createClass = createClass;\n})();\n\n\n(function () {\n\n var unknown = 'unknown';\n\n /* EVENT HANDLING */\n\n function areHostMethods(object) {\n var methodNames = Array.prototype.slice.call(arguments, 1),\n t, i, len = methodNames.length;\n for (i = 0; i < len; i++) {\n t = typeof object[methodNames[i]];\n if (!(/^(?:function|object|unknown)$/).test(t)) {\n return false;\n }\n }\n return true;\n }\n\n /** @ignore */\n var getElement,\n setElement,\n getUniqueId = (function () {\n var uid = 0;\n return function (element) {\n return element.__uniqueID || (element.__uniqueID = 'uniqueID__' + uid++);\n };\n })();\n\n (function () {\n var elements = { };\n /** @ignore */\n getElement = function (uid) {\n return elements[uid];\n };\n /** @ignore */\n setElement = function (uid, element) {\n elements[uid] = element;\n };\n })();\n\n function createListener(uid, handler) {\n return {\n handler: handler,\n wrappedHandler: createWrappedHandler(uid, handler)\n };\n }\n\n function createWrappedHandler(uid, handler) {\n return function (e) {\n handler.call(getElement(uid), e || fabric.window.event);\n };\n }\n\n function createDispatcher(uid, eventName) {\n return function (e) {\n if (handlers[uid] && handlers[uid][eventName]) {\n var handlersForEvent = handlers[uid][eventName];\n for (var i = 0, len = handlersForEvent.length; i < len; i++) {\n handlersForEvent[i].call(this, e || fabric.window.event);\n }\n }\n };\n }\n\n var shouldUseAddListenerRemoveListener = (\n areHostMethods(fabric.document.documentElement, 'addEventListener', 'removeEventListener') &&\n areHostMethods(fabric.window, 'addEventListener', 'removeEventListener')),\n\n shouldUseAttachEventDetachEvent = (\n areHostMethods(fabric.document.documentElement, 'attachEvent', 'detachEvent') &&\n areHostMethods(fabric.window, 'attachEvent', 'detachEvent')),\n\n // IE branch\n listeners = { },\n\n // DOM L0 branch\n handlers = { },\n\n addListener, removeListener;\n\n if (shouldUseAddListenerRemoveListener) {\n /** @ignore */\n addListener = function (element, eventName, handler) {\n element.addEventListener(eventName, handler, false);\n };\n /** @ignore */\n removeListener = function (element, eventName, handler) {\n element.removeEventListener(eventName, handler, false);\n };\n }\n\n else if (shouldUseAttachEventDetachEvent) {\n /** @ignore */\n addListener = function (element, eventName, handler) {\n var uid = getUniqueId(element);\n setElement(uid, element);\n if (!listeners[uid]) {\n listeners[uid] = { };\n }\n if (!listeners[uid][eventName]) {\n listeners[uid][eventName] = [ ];\n\n }\n var listener = createListener(uid, handler);\n listeners[uid][eventName].push(listener);\n element.attachEvent('on' + eventName, listener.wrappedHandler);\n };\n /** @ignore */\n removeListener = function (element, eventName, handler) {\n var uid = getUniqueId(element), listener;\n if (listeners[uid] && listeners[uid][eventName]) {\n for (var i = 0, len = listeners[uid][eventName].length; i < len; i++) {\n listener = listeners[uid][eventName][i];\n if (listener && listener.handler === handler) {\n element.detachEvent('on' + eventName, listener.wrappedHandler);\n listeners[uid][eventName][i] = null;\n }\n }\n }\n };\n }\n else {\n /** @ignore */\n addListener = function (element, eventName, handler) {\n var uid = getUniqueId(element);\n if (!handlers[uid]) {\n handlers[uid] = { };\n }\n if (!handlers[uid][eventName]) {\n handlers[uid][eventName] = [ ];\n var existingHandler = element['on' + eventName];\n if (existingHandler) {\n handlers[uid][eventName].push(existingHandler);\n }\n element['on' + eventName] = createDispatcher(uid, eventName);\n }\n handlers[uid][eventName].push(handler);\n };\n /** @ignore */\n removeListener = function (element, eventName, handler) {\n var uid = getUniqueId(element);\n if (handlers[uid] && handlers[uid][eventName]) {\n var handlersForEvent = handlers[uid][eventName];\n for (var i = 0, len = handlersForEvent.length; i < len; i++) {\n if (handlersForEvent[i] === handler) {\n handlersForEvent.splice(i, 1);\n }\n }\n }\n };\n }\n\n /**\n * Adds an event listener to an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n fabric.util.addListener = addListener;\n\n /**\n * Removes an event listener from an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n fabric.util.removeListener = removeListener;\n\n /**\n * Cross-browser wrapper for getting event's coordinates\n * @memberOf fabric.util\n * @param {Event} event Event object\n * @param {HTMLCanvasElement} upperCanvasEl <canvas> element on which object selection is drawn\n */\n function getPointer(event, upperCanvasEl) {\n event || (event = fabric.window.event);\n\n var element = event.target ||\n (typeof event.srcElement !== unknown ? event.srcElement : null),\n\n scroll = fabric.util.getScrollLeftTop(element, upperCanvasEl);\n\n return {\n x: pointerX(event) + scroll.left,\n y: pointerY(event) + scroll.top\n };\n }\n\n var pointerX = function(event) {\n // looks like in IE (<9) clientX at certain point (apparently when mouseup fires on VML element)\n // is represented as COM object, with all the consequences, like \"unknown\" type and error on [[Get]]\n // need to investigate later\n return (typeof event.clientX !== unknown ? event.clientX : 0);\n },\n\n pointerY = function(event) {\n return (typeof event.clientY !== unknown ? event.clientY : 0);\n };\n\n function _getPointer(event, pageProp, clientProp) {\n var touchProp = event.type === 'touchend' ? 'changedTouches' : 'touches';\n\n return (event[touchProp] && event[touchProp][0]\n ? (event[touchProp][0][pageProp] - (event[touchProp][0][pageProp] - event[touchProp][0][clientProp]))\n || event[clientProp]\n : event[clientProp]);\n }\n\n if (fabric.isTouchSupported) {\n pointerX = function(event) {\n return _getPointer(event, 'pageX', 'clientX');\n };\n pointerY = function(event) {\n return _getPointer(event, 'pageY', 'clientY');\n };\n }\n\n fabric.util.getPointer = getPointer;\n\n fabric.util.object.extend(fabric.util, fabric.Observable);\n\n})();\n\n\n(function () {\n\n /**\n * Cross-browser wrapper for setting element's style\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {Object} styles\n * @return {HTMLElement} Element that was passed as a first argument\n */\n function setStyle(element, styles) {\n var elementStyle = element.style;\n if (!elementStyle) {\n return element;\n }\n if (typeof styles === 'string') {\n element.style.cssText += ';' + styles;\n return styles.indexOf('opacity') > -1\n ? setOpacity(element, styles.match(/opacity:\\s*(\\d?\\.?\\d*)/)[1])\n : element;\n }\n for (var property in styles) {\n if (property === 'opacity') {\n setOpacity(element, styles[property]);\n }\n else {\n var normalizedProperty = (property === 'float' || property === 'cssFloat')\n ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat')\n : property;\n elementStyle[normalizedProperty] = styles[property];\n }\n }\n return element;\n }\n\n var parseEl = fabric.document.createElement('div'),\n supportsOpacity = typeof parseEl.style.opacity === 'string',\n supportsFilters = typeof parseEl.style.filter === 'string',\n reOpacity = /alpha\\s*\\(\\s*opacity\\s*=\\s*([^\\)]+)\\)/,\n\n /** @ignore */\n setOpacity = function (element) { return element; };\n\n if (supportsOpacity) {\n /** @ignore */\n setOpacity = function(element, value) {\n element.style.opacity = value;\n return element;\n };\n }\n else if (supportsFilters) {\n /** @ignore */\n setOpacity = function(element, value) {\n var es = element.style;\n if (element.currentStyle && !element.currentStyle.hasLayout) {\n es.zoom = 1;\n }\n if (reOpacity.test(es.filter)) {\n value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');\n es.filter = es.filter.replace(reOpacity, value);\n }\n else {\n es.filter += ' alpha(opacity=' + (value * 100) + ')';\n }\n return element;\n };\n }\n\n fabric.util.setStyle = setStyle;\n\n})();\n\n\n(function() {\n\n var _slice = Array.prototype.slice;\n\n /**\n * Takes id and returns an element with that id (if one exists in a document)\n * @memberOf fabric.util\n * @param {String|HTMLElement} id\n * @return {HTMLElement|null}\n */\n function getById(id) {\n return typeof id === 'string' ? fabric.document.getElementById(id) : id;\n }\n\n var sliceCanConvertNodelists,\n /**\n * Converts an array-like object (e.g. arguments or NodeList) to an array\n * @memberOf fabric.util\n * @param {Object} arrayLike\n * @return {Array}\n */\n toArray = function(arrayLike) {\n return _slice.call(arrayLike, 0);\n };\n\n try {\n sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;\n }\n catch (err) { }\n\n if (!sliceCanConvertNodelists) {\n toArray = function(arrayLike) {\n var arr = new Array(arrayLike.length), i = arrayLike.length;\n while (i--) {\n arr[i] = arrayLike[i];\n }\n return arr;\n };\n }\n\n /**\n * Creates specified element with specified attributes\n * @memberOf fabric.util\n * @param {String} tagName Type of an element to create\n * @param {Object} [attributes] Attributes to set on an element\n * @return {HTMLElement} Newly created element\n */\n function makeElement(tagName, attributes) {\n var el = fabric.document.createElement(tagName);\n for (var prop in attributes) {\n if (prop === 'class') {\n el.className = attributes[prop];\n }\n else if (prop === 'for') {\n el.htmlFor = attributes[prop];\n }\n else {\n el.setAttribute(prop, attributes[prop]);\n }\n }\n return el;\n }\n\n /**\n * Adds class to an element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to add class to\n * @param {String} className Class to add to an element\n */\n function addClass(element, className) {\n if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {\n element.className += (element.className ? ' ' : '') + className;\n }\n }\n\n /**\n * Wraps element with another element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to wrap\n * @param {HTMLElement|String} wrapper Element to wrap with\n * @param {Object} [attributes] Attributes to set on a wrapper\n * @return {HTMLElement} wrapper\n */\n function wrapElement(element, wrapper, attributes) {\n if (typeof wrapper === 'string') {\n wrapper = makeElement(wrapper, attributes);\n }\n if (element.parentNode) {\n element.parentNode.replaceChild(wrapper, element);\n }\n wrapper.appendChild(element);\n return wrapper;\n }\n\n /**\n * Returns element scroll offsets\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to operate on\n * @param {HTMLElement} upperCanvasEl Upper canvas element\n * @return {Object} Object with left/top values\n */\n function getScrollLeftTop(element, upperCanvasEl) {\n\n var firstFixedAncestor,\n origElement,\n left = 0,\n top = 0,\n docElement = fabric.document.documentElement,\n body = fabric.document.body || {\n scrollLeft: 0, scrollTop: 0\n };\n\n origElement = element;\n\n while (element && element.parentNode && !firstFixedAncestor) {\n\n element = element.parentNode;\n\n if (element.nodeType === 1 &&\n fabric.util.getElementStyle(element, 'position') === 'fixed') {\n firstFixedAncestor = element;\n }\n\n if (element.nodeType === 1 &&\n origElement !== upperCanvasEl &&\n fabric.util.getElementStyle(element, 'position') === 'absolute') {\n left = 0;\n top = 0;\n }\n else if (element === fabric.document) {\n left = body.scrollLeft || docElement.scrollLeft || 0;\n top = body.scrollTop || docElement.scrollTop || 0;\n }\n else {\n left += element.scrollLeft || 0;\n top += element.scrollTop || 0;\n }\n }\n\n return { left: left, top: top };\n }\n\n /**\n * Returns offset for a given element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get offset for\n * @return {Object} Object with \"left\" and \"top\" properties\n */\n function getElementOffset(element) {\n var docElem,\n doc = element && element.ownerDocument,\n box = { left: 0, top: 0 },\n offset = { left: 0, top: 0 },\n scrollLeftTop,\n offsetAttributes = {\n borderLeftWidth: 'left',\n borderTopWidth: 'top',\n paddingLeft: 'left',\n paddingTop: 'top'\n };\n\n if (!doc) {\n return { left: 0, top: 0 };\n }\n\n for (var attr in offsetAttributes) {\n offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;\n }\n\n docElem = doc.documentElement;\n if ( typeof element.getBoundingClientRect !== 'undefined' ) {\n box = element.getBoundingClientRect();\n }\n\n scrollLeftTop = fabric.util.getScrollLeftTop(element, null);\n\n return {\n left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,\n top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top\n };\n }\n\n /**\n * Returns style attribute value of a given element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get style attribute for\n * @param {String} attr Style attribute to get for element\n * @return {String} Style attribute value of the given element.\n */\n var getElementStyle;\n if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {\n getElementStyle = function(element, attr) {\n var style = fabric.document.defaultView.getComputedStyle(element, null);\n return style ? style[attr] : undefined;\n };\n }\n else {\n getElementStyle = function(element, attr) {\n var value = element.style[attr];\n if (!value && element.currentStyle) {\n value = element.currentStyle[attr];\n }\n return value;\n };\n }\n\n (function () {\n var style = fabric.document.documentElement.style,\n selectProp = 'userSelect' in style\n ? 'userSelect'\n : 'MozUserSelect' in style\n ? 'MozUserSelect'\n : 'WebkitUserSelect' in style\n ? 'WebkitUserSelect'\n : 'KhtmlUserSelect' in style\n ? 'KhtmlUserSelect'\n : '';\n\n /**\n * Makes element unselectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make unselectable\n * @return {HTMLElement} Element that was passed in\n */\n function makeElementUnselectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = fabric.util.falseFunction;\n }\n if (selectProp) {\n element.style[selectProp] = 'none';\n }\n else if (typeof element.unselectable === 'string') {\n element.unselectable = 'on';\n }\n return element;\n }\n\n /**\n * Makes element selectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make selectable\n * @return {HTMLElement} Element that was passed in\n */\n function makeElementSelectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = null;\n }\n if (selectProp) {\n element.style[selectProp] = '';\n }\n else if (typeof element.unselectable === 'string') {\n element.unselectable = '';\n }\n return element;\n }\n\n fabric.util.makeElementUnselectable = makeElementUnselectable;\n fabric.util.makeElementSelectable = makeElementSelectable;\n })();\n\n (function() {\n\n /**\n * Inserts a script element with a given url into a document; invokes callback, when that script is finished loading\n * @memberOf fabric.util\n * @param {String} url URL of a script to load\n * @param {Function} callback Callback to execute when script is finished loading\n */\n function getScript(url, callback) {\n var headEl = fabric.document.getElementsByTagName('head')[0],\n scriptEl = fabric.document.createElement('script'),\n loading = true;\n\n /** @ignore */\n scriptEl.onload = /** @ignore */ scriptEl.onreadystatechange = function(e) {\n if (loading) {\n if (typeof this.readyState === 'string' &&\n this.readyState !== 'loaded' &&\n this.readyState !== 'complete') {\n return;\n }\n loading = false;\n callback(e || fabric.window.event);\n scriptEl = scriptEl.onload = scriptEl.onreadystatechange = null;\n }\n };\n scriptEl.src = url;\n headEl.appendChild(scriptEl);\n // causes issue in Opera\n // headEl.removeChild(scriptEl);\n }\n\n fabric.util.getScript = getScript;\n })();\n\n fabric.util.getById = getById;\n fabric.util.toArray = toArray;\n fabric.util.makeElement = makeElement;\n fabric.util.addClass = addClass;\n fabric.util.wrapElement = wrapElement;\n fabric.util.getScrollLeftTop = getScrollLeftTop;\n fabric.util.getElementOffset = getElementOffset;\n fabric.util.getElementStyle = getElementStyle;\n\n})();\n\n\n(function() {\n\n function addParamToUrl(url, param) {\n return url + (/\\?/.test(url) ? '&' : '?') + param;\n }\n\n var makeXHR = (function() {\n var factories = [\n function() { return new ActiveXObject('Microsoft.XMLHTTP'); },\n function() { return new ActiveXObject('Msxml2.XMLHTTP'); },\n function() { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); },\n function() { return new XMLHttpRequest(); }\n ];\n for (var i = factories.length; i--; ) {\n try {\n var req = factories[i]();\n if (req) {\n return factories[i];\n }\n }\n catch (err) { }\n }\n })();\n\n function emptyFn() { }\n\n /**\n * Cross-browser abstraction for sending XMLHttpRequest\n * @memberOf fabric.util\n * @param {String} url URL to send XMLHttpRequest to\n * @param {Object} [options] Options object\n * @param {String} [options.method=\"GET\"]\n * @param {Function} options.onComplete Callback to invoke when request is completed\n * @return {XMLHttpRequest} request\n */\n function request(url, options) {\n\n options || (options = { });\n\n var method = options.method ? options.method.toUpperCase() : 'GET',\n onComplete = options.onComplete || function() { },\n xhr = makeXHR(),\n body;\n\n /** @ignore */\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4) {\n onComplete(xhr);\n xhr.onreadystatechange = emptyFn;\n }\n };\n\n if (method === 'GET') {\n body = null;\n if (typeof options.parameters === 'string') {\n url = addParamToUrl(url, options.parameters);\n }\n }\n\n xhr.open(method, url, true);\n\n if (method === 'POST' || method === 'PUT') {\n xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\n }\n\n xhr.send(body);\n return xhr;\n }\n\n fabric.util.request = request;\n})();\n\n\n/**\n * Wrapper around `console.log` (when available)\n * @param {Any} [values] Values to log\n */\nfabric.log = function() { };\n\n/**\n * Wrapper around `console.warn` (when available)\n * @param {Any} [values] Values to log as a warning\n */\nfabric.warn = function() { };\n\nif (typeof console !== 'undefined') {\n ['log', 'warn'].forEach(function(methodName) {\n if (typeof console[methodName] !== 'undefined' && console[methodName].apply) {\n fabric[methodName] = function() {\n return console[methodName].apply(console, arguments);\n };\n }\n });\n}\n\n\n(function() {\n\n /**\n * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.\n * @memberOf fabric.util\n * @param {Object} [options] Animation options\n * @param {Function} [options.onChange] Callback; invoked on every value change\n * @param {Function} [options.onComplete] Callback; invoked when value change is completed\n * @param {Number} [options.startValue=0] Starting value\n * @param {Number} [options.endValue=100] Ending value\n * @param {Number} [options.byValue=100] Value to modify the property by\n * @param {Function} [options.easing] Easing function\n * @param {Number} [options.duration=500] Duration of change (in ms)\n */\n function animate(options) {\n\n requestAnimFrame(function(timestamp) {\n options || (options = { });\n\n var start = timestamp || +new Date(),\n duration = options.duration || 500,\n finish = start + duration, time,\n onChange = options.onChange || function() { },\n abort = options.abort || function() { return false; },\n easing = options.easing || function(t, b, c, d) {return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;},\n startValue = 'startValue' in options ? options.startValue : 0,\n endValue = 'endValue' in options ? options.endValue : 100,\n byValue = options.byValue || endValue - startValue;\n\n options.onStart && options.onStart();\n\n (function tick(ticktime) {\n time = ticktime || +new Date();\n var currentTime = time > finish ? duration : (time - start);\n if (abort()) {\n options.onComplete && options.onComplete();\n return;\n }\n onChange(easing(currentTime, startValue, byValue, duration));\n if (time > finish) {\n options.onComplete && options.onComplete();\n return;\n }\n requestAnimFrame(tick);\n })(start);\n });\n\n }\n\n var _requestAnimFrame = fabric.window.requestAnimationFrame ||\n fabric.window.webkitRequestAnimationFrame ||\n fabric.window.mozRequestAnimationFrame ||\n fabric.window.oRequestAnimationFrame ||\n fabric.window.msRequestAnimationFrame ||\n function(callback) {\n fabric.window.setTimeout(callback, 1000 / 60);\n };\n /**\n * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method\n * @memberOf fabric.util\n * @param {Function} callback Callback to invoke\n * @param {DOMElement} element optional Element to associate with animation\n */\n function requestAnimFrame() {\n return _requestAnimFrame.apply(fabric.window, arguments);\n }\n\n fabric.util.animate = animate;\n fabric.util.requestAnimFrame = requestAnimFrame;\n\n})();\n\n\n(function() {\n\n function normalize(a, c, p, s) {\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n }\n else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n return { a: a, c: c, p: p, s: s };\n }\n\n function elastic(opts, t, d) {\n return opts.a *\n Math.pow(2, 10 * (t -= 1)) *\n Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p );\n }\n\n /**\n * Cubic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutCubic(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t + 1) + b;\n }\n\n /**\n * Cubic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutCubic(t, b, c, d) {\n t /= d/2;\n if (t < 1) {\n return c / 2 * t * t * t + b;\n }\n return c / 2 * ((t -= 2) * t * t + 2) + b;\n }\n\n /**\n * Quartic easing in\n * @memberOf fabric.util.ease\n */\n function easeInQuart(t, b, c, d) {\n return c * (t /= d) * t * t * t + b;\n }\n\n /**\n * Quartic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutQuart(t, b, c, d) {\n return -c * ((t = t / d - 1) * t * t * t - 1) + b;\n }\n\n /**\n * Quartic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutQuart(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t * t * t + b;\n }\n return -c / 2 * ((t -= 2) * t * t * t - 2) + b;\n }\n\n /**\n * Quintic easing in\n * @memberOf fabric.util.ease\n */\n function easeInQuint(t, b, c, d) {\n return c * (t /= d) * t * t * t * t + b;\n }\n\n /**\n * Quintic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutQuint(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t * t * t + 1) + b;\n }\n\n /**\n * Quintic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutQuint(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t * t * t * t + b;\n }\n return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;\n }\n\n /**\n * Sinusoidal easing in\n * @memberOf fabric.util.ease\n */\n function easeInSine(t, b, c, d) {\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n }\n\n /**\n * Sinusoidal easing out\n * @memberOf fabric.util.ease\n */\n function easeOutSine(t, b, c, d) {\n return c * Math.sin(t / d * (Math.PI / 2)) + b;\n }\n\n /**\n * Sinusoidal easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutSine(t, b, c, d) {\n return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;\n }\n\n /**\n * Exponential easing in\n * @memberOf fabric.util.ease\n */\n function easeInExpo(t, b, c, d) {\n return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;\n }\n\n /**\n * Exponential easing out\n * @memberOf fabric.util.ease\n */\n function easeOutExpo(t, b, c, d) {\n return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;\n }\n\n /**\n * Exponential easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutExpo(t, b, c, d) {\n if (t === 0) {\n return b;\n }\n if (t === d) {\n return b + c;\n }\n t /= d / 2;\n if (t < 1) {\n return c / 2 * Math.pow(2, 10 * (t - 1)) + b;\n }\n return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;\n }\n\n /**\n * Circular easing in\n * @memberOf fabric.util.ease\n */\n function easeInCirc(t, b, c, d) {\n return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;\n }\n\n /**\n * Circular easing out\n * @memberOf fabric.util.ease\n */\n function easeOutCirc(t, b, c, d) {\n return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;\n }\n\n /**\n * Circular easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutCirc(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;\n }\n return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;\n }\n\n /**\n * Elastic easing in\n * @memberOf fabric.util.ease\n */\n function easeInElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d;\n if (t === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n var opts = normalize(a, c, p, s);\n return -elastic(opts, t, d) + b;\n }\n\n /**\n * Elastic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d;\n if (t === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n var opts = normalize(a, c, p, s);\n return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b;\n }\n\n /**\n * Elastic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d / 2;\n if (t === 2) {\n return b + c;\n }\n if (!p) {\n p = d * (0.3 * 1.5);\n }\n var opts = normalize(a, c, p, s);\n if (t < 1) {\n return -0.5 * elastic(opts, t, d) + b;\n }\n return opts.a * Math.pow(2, -10 * (t -= 1)) *\n Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b;\n }\n\n /**\n * Backwards easing in\n * @memberOf fabric.util.ease\n */\n function easeInBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n return c * (t /= d) * t * ((s + 1) * t - s) + b;\n }\n\n /**\n * Backwards easing out\n * @memberOf fabric.util.ease\n */\n function easeOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;\n }\n\n /**\n * Backwards easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n t /= d / 2;\n if (t < 1) {\n return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;\n }\n return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;\n }\n\n /**\n * Bouncing easing in\n * @memberOf fabric.util.ease\n */\n function easeInBounce(t, b, c, d) {\n return c - easeOutBounce (d - t, 0, c, d) + b;\n }\n\n /**\n * Bouncing easing out\n * @memberOf fabric.util.ease\n */\n function easeOutBounce(t, b, c, d) {\n if ((t /= d) < (1 / 2.75)) {\n return c * (7.5625 * t * t) + b;\n }\n else if (t < (2/2.75)) {\n return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;\n }\n else if (t < (2.5/2.75)) {\n return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;\n }\n else {\n return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;\n }\n }\n\n /**\n * Bouncing easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutBounce(t, b, c, d) {\n if (t < d / 2) {\n return easeInBounce (t * 2, 0, c, d) * 0.5 + b;\n }\n return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;\n }\n\n /**\n * Easing functions\n * See Easing Equations by Robert Penner\n * @namespace fabric.util.ease\n */\n fabric.util.ease = {\n\n /**\n * Quadratic easing in\n * @memberOf fabric.util.ease\n */\n easeInQuad: function(t, b, c, d) {\n return c * (t /= d) * t + b;\n },\n\n /**\n * Quadratic easing out\n * @memberOf fabric.util.ease\n */\n easeOutQuad: function(t, b, c, d) {\n return -c * (t /= d) * (t - 2) + b;\n },\n\n /**\n * Quadratic easing in and out\n * @memberOf fabric.util.ease\n */\n easeInOutQuad: function(t, b, c, d) {\n t /= (d / 2);\n if (t < 1) {\n return c / 2 * t * t + b;\n }\n return -c / 2 * ((--t) * (t - 2) - 1) + b;\n },\n\n /**\n * Cubic easing in\n * @memberOf fabric.util.ease\n */\n easeInCubic: function(t, b, c, d) {\n return c * (t /= d) * t * t + b;\n },\n\n easeOutCubic: easeOutCubic,\n easeInOutCubic: easeInOutCubic,\n easeInQuart: easeInQuart,\n easeOutQuart: easeOutQuart,\n easeInOutQuart: easeInOutQuart,\n easeInQuint: easeInQuint,\n easeOutQuint: easeOutQuint,\n easeInOutQuint: easeInOutQuint,\n easeInSine: easeInSine,\n easeOutSine: easeOutSine,\n easeInOutSine: easeInOutSine,\n easeInExpo: easeInExpo,\n easeOutExpo: easeOutExpo,\n easeInOutExpo: easeInOutExpo,\n easeInCirc: easeInCirc,\n easeOutCirc: easeOutCirc,\n easeInOutCirc: easeInOutCirc,\n easeInElastic: easeInElastic,\n easeOutElastic: easeOutElastic,\n easeInOutElastic: easeInOutElastic,\n easeInBack: easeInBack,\n easeOutBack: easeOutBack,\n easeInOutBack: easeInOutBack,\n easeInBounce: easeInBounce,\n easeOutBounce: easeOutBounce,\n easeInOutBounce: easeInOutBounce\n };\n\n}());\n\n\n(function(global) {\n\n 'use strict';\n\n /**\n * @name fabric\n * @namespace\n */\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n capitalize = fabric.util.string.capitalize,\n clone = fabric.util.object.clone,\n toFixed = fabric.util.toFixed,\n parseUnit = fabric.util.parseUnit,\n multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,\n\n attributesMap = {\n cx: 'left',\n x: 'left',\n r: 'radius',\n cy: 'top',\n y: 'top',\n display: 'visible',\n visibility: 'visible',\n transform: 'transformMatrix',\n 'fill-opacity': 'fillOpacity',\n 'fill-rule': 'fillRule',\n 'font-family': 'fontFamily',\n 'font-size': 'fontSize',\n 'font-style': 'fontStyle',\n 'font-weight': 'fontWeight',\n 'stroke-dasharray': 'strokeDashArray',\n 'stroke-linecap': 'strokeLineCap',\n 'stroke-linejoin': 'strokeLineJoin',\n 'stroke-miterlimit': 'strokeMiterLimit',\n 'stroke-opacity': 'strokeOpacity',\n 'stroke-width': 'strokeWidth',\n 'text-decoration': 'textDecoration',\n 'text-anchor': 'originX'\n },\n\n colorAttributes = {\n stroke: 'strokeOpacity',\n fill: 'fillOpacity'\n };\n\n fabric.cssRules = { };\n fabric.gradientDefs = { };\n\n function normalizeAttr(attr) {\n // transform attribute names\n if (attr in attributesMap) {\n return attributesMap[attr];\n }\n return attr;\n }\n\n function normalizeValue(attr, value, parentAttributes) {\n var isArray = Object.prototype.toString.call(value) === '[object Array]',\n parsed;\n\n if ((attr === 'fill' || attr === 'stroke') && value === 'none') {\n value = '';\n }\n else if (attr === 'strokeDashArray') {\n value = value.replace(/,/g, ' ').split(/\\s+/).map(function(n) {\n return parseFloat(n);\n });\n }\n else if (attr === 'transformMatrix') {\n if (parentAttributes && parentAttributes.transformMatrix) {\n value = multiplyTransformMatrices(\n parentAttributes.transformMatrix, fabric.parseTransformAttribute(value));\n }\n else {\n value = fabric.parseTransformAttribute(value);\n }\n }\n else if (attr === 'visible') {\n value = (value === 'none' || value === 'hidden') ? false : true;\n // display=none on parent element always takes precedence over child element\n if (parentAttributes && parentAttributes.visible === false) {\n value = false;\n }\n }\n else if (attr === 'originX' /* text-anchor */) {\n value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';\n }\n else {\n parsed = isArray ? value.map(parseUnit) : parseUnit(value);\n }\n\n return (!isArray && isNaN(parsed) ? value : parsed);\n }\n\n /**\n * @private\n * @param {Object} attributes Array of attributes to parse\n */\n function _setStrokeFillOpacity(attributes) {\n for (var attr in colorAttributes) {\n\n if (!attributes[attr] || typeof attributes[colorAttributes[attr]] === 'undefined') {\n continue;\n }\n\n if (attributes[attr].indexOf('url(') === 0) {\n continue;\n }\n\n var color = new fabric.Color(attributes[attr]);\n attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba();\n }\n return attributes;\n }\n\n /**\n * Parses \"transform\" attribute, returning an array of values\n * @static\n * @function\n * @memberOf fabric\n * @param {String} attributeValue String containing attribute value\n * @return {Array} Array of 6 elements representing transformation matrix\n */\n fabric.parseTransformAttribute = (function() {\n function rotateMatrix(matrix, args) {\n var angle = args[0];\n\n matrix[0] = Math.cos(angle);\n matrix[1] = Math.sin(angle);\n matrix[2] = -Math.sin(angle);\n matrix[3] = Math.cos(angle);\n }\n\n function scaleMatrix(matrix, args) {\n var multiplierX = args[0],\n multiplierY = (args.length === 2) ? args[1] : args[0];\n\n matrix[0] = multiplierX;\n matrix[3] = multiplierY;\n }\n\n function skewXMatrix(matrix, args) {\n matrix[2] = Math.tan(fabric.util.degreesToRadians(args[0]));\n }\n\n function skewYMatrix(matrix, args) {\n matrix[1] = Math.tan(fabric.util.degreesToRadians(args[0]));\n }\n\n function translateMatrix(matrix, args) {\n matrix[4] = args[0];\n if (args.length === 2) {\n matrix[5] = args[1];\n }\n }\n\n // identity matrix\n var iMatrix = [\n 1, // a\n 0, // b\n 0, // c\n 1, // d\n 0, // e\n 0 // f\n ],\n\n // == begin transform regexp\n number = '(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)',\n\n commaWsp = '(?:\\\\s+,?\\\\s*|,\\\\s*)',\n\n skewX = '(?:(skewX)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n\n skewY = '(?:(skewY)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n\n rotate = '(?:(rotate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + ')' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n scale = '(?:(scale)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n translate = '(?:(translate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n matrix = '(?:(matrix)\\\\s*\\\\(\\\\s*' +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' +\n '\\\\s*\\\\))',\n\n transform = '(?:' +\n matrix + '|' +\n translate + '|' +\n scale + '|' +\n rotate + '|' +\n skewX + '|' +\n skewY +\n ')',\n\n transforms = '(?:' + transform + '(?:' + commaWsp + transform + ')*' + ')',\n\n transformList = '^\\\\s*(?:' + transforms + '?)\\\\s*$',\n\n // http://www.w3.org/TR/SVG/coords.html#TransformAttribute\n reTransformList = new RegExp(transformList),\n // == end transform regexp\n\n reTransform = new RegExp(transform, 'g');\n\n return function(attributeValue) {\n\n // start with identity matrix\n var matrix = iMatrix.concat(),\n matrices = [ ];\n\n // return if no argument was given or\n // an argument does not match transform attribute regexp\n if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {\n return matrix;\n }\n\n attributeValue.replace(reTransform, function(match) {\n\n var m = new RegExp(transform).exec(match).filter(function (match) {\n return (match !== '' && match != null);\n }),\n operation = m[1],\n args = m.slice(2).map(parseFloat);\n\n switch (operation) {\n case 'translate':\n translateMatrix(matrix, args);\n break;\n case 'rotate':\n args[0] = fabric.util.degreesToRadians(args[0]);\n rotateMatrix(matrix, args);\n break;\n case 'scale':\n scaleMatrix(matrix, args);\n break;\n case 'skewX':\n skewXMatrix(matrix, args);\n break;\n case 'skewY':\n skewYMatrix(matrix, args);\n break;\n case 'matrix':\n matrix = args;\n break;\n }\n\n // snapshot current matrix into matrices array\n matrices.push(matrix.concat());\n // reset\n matrix = iMatrix.concat();\n });\n\n var combinedMatrix = matrices[0];\n while (matrices.length > 1) {\n matrices.shift();\n combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]);\n }\n return combinedMatrix;\n };\n })();\n\n function parseFontDeclaration(value, oStyle) {\n\n // TODO: support non-px font size\n var match = value.match(/(normal|italic)?\\s*(normal|small-caps)?\\s*(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(\\d+)px(?:\\/(normal|[\\d\\.]+))?\\s+(.*)/);\n\n if (!match) {\n return;\n }\n\n var fontStyle = match[1],\n // font variant is not used\n // fontVariant = match[2],\n fontWeight = match[3],\n fontSize = match[4],\n lineHeight = match[5],\n fontFamily = match[6];\n\n if (fontStyle) {\n oStyle.fontStyle = fontStyle;\n }\n if (fontWeight) {\n oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight);\n }\n if (fontSize) {\n oStyle.fontSize = parseFloat(fontSize);\n }\n if (fontFamily) {\n oStyle.fontFamily = fontFamily;\n }\n if (lineHeight) {\n oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;\n }\n }\n\n /**\n * @private\n */\n function parseStyleString(style, oStyle) {\n var attr, value;\n style.replace(/;$/, '').split(';').forEach(function (chunk) {\n var pair = chunk.split(':');\n\n attr = normalizeAttr(pair[0].trim().toLowerCase());\n value = normalizeValue(attr, pair[1].trim());\n\n if (attr === 'font') {\n parseFontDeclaration(value, oStyle);\n }\n else {\n oStyle[attr] = value;\n }\n });\n }\n\n /**\n * @private\n */\n function parseStyleObject(style, oStyle) {\n var attr, value;\n for (var prop in style) {\n if (typeof style[prop] === 'undefined') {\n continue;\n }\n\n attr = normalizeAttr(prop.toLowerCase());\n value = normalizeValue(attr, style[prop]);\n\n if (attr === 'font') {\n parseFontDeclaration(value, oStyle);\n }\n else {\n oStyle[attr] = value;\n }\n }\n }\n\n /**\n * @private\n */\n function getGlobalStylesForElement(element, svgUid) {\n var styles = { };\n for (var rule in fabric.cssRules[svgUid]) {\n if (elementMatchesRule(element, rule.split(' '))) {\n for (var property in fabric.cssRules[svgUid][rule]) {\n styles[property] = fabric.cssRules[svgUid][rule][property];\n }\n }\n }\n return styles;\n }\n\n /**\n * @private\n */\n function elementMatchesRule(element, selectors) {\n var firstMatching, parentMatching = true;\n //start from rightmost selector.\n firstMatching = selectorMatches(element, selectors.pop());\n if (firstMatching && selectors.length) {\n parentMatching = doesSomeParentMatch(element, selectors);\n }\n return firstMatching && parentMatching && (selectors.length === 0);\n }\n\n function doesSomeParentMatch(element, selectors) {\n var selector, parentMatching = true;\n while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) {\n if (parentMatching) {\n selector = selectors.pop();\n }\n element = element.parentNode;\n parentMatching = selectorMatches(element, selector);\n }\n return selectors.length === 0;\n }\n /**\n * @private\n */\n function selectorMatches(element, selector) {\n var nodeName = element.nodeName,\n classNames = element.getAttribute('class'),\n id = element.getAttribute('id'), matcher;\n // i check if a selector matches slicing away part from it.\n // if i get empty string i should match\n matcher = new RegExp('^' + nodeName, 'i');\n selector = selector.replace(matcher, '');\n if (id && selector.length) {\n matcher = new RegExp('#' + id + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n if (classNames && selector.length) {\n classNames = classNames.split(' ');\n for (var i = classNames.length; i--;) {\n matcher = new RegExp('\\\\.' + classNames[i] + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n }\n return selector.length === 0;\n }\n\n /**\n * @private\n */\n function parseUseDirectives(doc) {\n var nodelist = doc.getElementsByTagName('use');\n while (nodelist.length) {\n var el = nodelist[0],\n xlink = el.getAttribute('xlink:href').substr(1),\n x = el.getAttribute('x') || 0,\n y = el.getAttribute('y') || 0,\n el2 = doc.getElementById(xlink).cloneNode(true),\n currentTrans = (el.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',\n parentNode;\n\n for (var j = 0, attrs = el.attributes, l = attrs.length; j < l; j++) {\n var attr = attrs.item(j);\n if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href') {\n continue;\n }\n\n if (attr.nodeName === 'transform') {\n currentTrans = currentTrans + ' ' + attr.nodeValue;\n }\n else {\n el2.setAttribute(attr.nodeName, attr.nodeValue);\n }\n }\n\n el2.setAttribute('transform', currentTrans);\n el2.removeAttribute('id');\n parentNode = el.parentNode;\n parentNode.replaceChild(el2, el);\n }\n }\n\n /**\n * Add a element that envelop all SCG elements and makes the viewbox transformMatrix descend on all elements\n */\n function addSvgTransform(doc, matrix) {\n matrix[3] = matrix[0] = (matrix[0] > matrix[3] ? matrix[3] : matrix[0]);\n if (!(matrix[0] !== 1 || matrix[3] !== 1 || matrix[4] !== 0 || matrix[5] !== 0)) {\n return;\n }\n // default is to preserve aspect ratio\n // preserveAspectRatio attribute to be implemented\n var el = doc.ownerDocument.createElement('g');\n while (doc.firstChild != null) {\n el.appendChild(doc.firstChild);\n }\n el.setAttribute('transform',\n 'matrix(' + matrix[0] + ' ' +\n matrix[1] + ' ' +\n matrix[2] + ' ' +\n matrix[3] + ' ' +\n matrix[4] + ' ' +\n matrix[5] + ')');\n\n doc.appendChild(el);\n }\n\n /**\n * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @param {Function} callback Callback to call when parsing is finished; It's being passed an array of elements (parsed from a document).\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n fabric.parseSVGDocument = (function() {\n\n var reAllowedSVGTagNames = /^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/,\n\n // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute\n // \\d doesn't quite cut it (as we need to match an actual float number)\n\n // matches, e.g.: +14.56e-12, etc.\n reNum = '(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)',\n\n reViewBoxAttrValue = new RegExp(\n '^' +\n '\\\\s*(' + reNum + '+)\\\\s*,?' +\n '\\\\s*(' + reNum + '+)\\\\s*,?' +\n '\\\\s*(' + reNum + '+)\\\\s*,?' +\n '\\\\s*(' + reNum + '+)\\\\s*' +\n '$'\n );\n\n function hasAncestorWithNodeName(element, nodeName) {\n while (element && (element = element.parentNode)) {\n if (nodeName.test(element.nodeName)) {\n return true;\n }\n }\n return false;\n }\n\n return function(doc, callback, reviver) {\n if (!doc) {\n return;\n }\n var startTime = new Date(),\n svgUid = fabric.Object.__uid++;\n\n parseUseDirectives(doc);\n /* http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute\n * as per spec, width and height attributes are to be considered\n * 100% if no value is specified.\n */\n var viewBoxAttr = doc.getAttribute('viewBox'),\n widthAttr = parseUnit(doc.getAttribute('width') || '100%'),\n heightAttr = parseUnit(doc.getAttribute('height') || '100%'),\n viewBoxWidth,\n viewBoxHeight;\n\n if (viewBoxAttr && (viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))) {\n var minX = parseFloat(viewBoxAttr[1]),\n minY = parseFloat(viewBoxAttr[2]),\n scaleX = 1, scaleY = 1;\n viewBoxWidth = parseFloat(viewBoxAttr[3]);\n viewBoxHeight = parseFloat(viewBoxAttr[4]);\n if (widthAttr && widthAttr !== viewBoxWidth ) {\n scaleX = widthAttr / viewBoxWidth;\n }\n if (heightAttr && heightAttr !== viewBoxHeight) {\n scaleY = heightAttr / viewBoxHeight;\n }\n addSvgTransform(doc, [scaleX, 0, 0, scaleY, scaleX * -minX, scaleY * -minY]);\n }\n\n var descendants = fabric.util.toArray(doc.getElementsByTagName('*'));\n\n if (descendants.length === 0 && fabric.isLikelyNode) {\n // we're likely in node, where \"o3-xml\" library fails to gEBTN(\"*\")\n // https://github.com/ajaxorg/node-o3-xml/issues/21\n descendants = doc.selectNodes('//*[name(.)!=\"svg\"]');\n var arr = [ ];\n for (var i = 0, len = descendants.length; i < len; i++) {\n arr[i] = descendants[i];\n }\n descendants = arr;\n }\n\n var elements = descendants.filter(function(el) {\n return reAllowedSVGTagNames.test(el.tagName) &&\n !hasAncestorWithNodeName(el, /^(?:pattern|defs)$/); // http://www.w3.org/TR/SVG/struct.html#DefsElement\n });\n\n if (!elements || (elements && !elements.length)) {\n callback && callback([], {});\n return;\n }\n\n var options = {\n width: widthAttr ? widthAttr : viewBoxWidth,\n height: heightAttr ? heightAttr : viewBoxHeight,\n widthAttr: widthAttr,\n heightAttr: heightAttr,\n svgUid: svgUid\n };\n\n fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);\n fabric.cssRules[svgUid] = fabric.getCSSRules(doc);\n // Precedence of rules: style > class > attribute\n\n fabric.parseElements(elements, function(instances) {\n fabric.documentParsingTime = new Date() - startTime;\n if (callback) {\n callback(instances, options);\n }\n }, clone(options), reviver);\n };\n })();\n\n /**\n * Used for caching SVG documents (loaded via `fabric.Canvas#loadSVGFromURL`)\n * @namespace\n */\n var svgCache = {\n\n /**\n * @param {String} name\n * @param {Function} callback\n */\n has: function (name, callback) {\n callback(false);\n },\n\n get: function () {\n /* NOOP */\n },\n\n set: function () {\n /* NOOP */\n }\n };\n\n /**\n * @private\n */\n function _enlivenCachedObject(cachedObject) {\n\n var objects = cachedObject.objects,\n options = cachedObject.options;\n\n objects = objects.map(function (o) {\n return fabric[capitalize(o.type)].fromObject(o);\n });\n\n return ({ objects: objects, options: options });\n }\n\n /**\n * @private\n */\n function _createSVGPattern(markup, canvas, property) {\n if (canvas[property] && canvas[property].toSVG) {\n markup.push(\n '',\n ''\n );\n }\n }\n\n extend(fabric, {\n\n /**\n * Parses an SVG document, returning all of the gradient declarations found in it\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element\n */\n getGradientDefs: function(doc) {\n var linearGradientEls = doc.getElementsByTagName('linearGradient'),\n radialGradientEls = doc.getElementsByTagName('radialGradient'),\n el, i, j = 0, id, xlink, elList = [ ],\n gradientDefs = { }, idsToXlinkMap = { };\n\n elList.length = linearGradientEls.length + radialGradientEls.length;\n i = linearGradientEls.length;\n while (i--) {\n elList[j++] = linearGradientEls[i];\n }\n i = radialGradientEls.length;\n while (i--) {\n elList[j++] = radialGradientEls[i];\n }\n\n while (j--) {\n el = elList[j];\n xlink = el.getAttribute('xlink:href');\n id = el.getAttribute('id');\n if (xlink) {\n idsToXlinkMap[id] = xlink.substr(1);\n }\n gradientDefs[id] = el;\n }\n\n for (id in idsToXlinkMap) {\n var el2 = gradientDefs[idsToXlinkMap[id]].cloneNode(true);\n el = gradientDefs[id];\n while (el2.firstChild) {\n el.appendChild(el2.firstChild);\n }\n }\n return gradientDefs;\n },\n\n /**\n * Returns an object of attributes' name/value, given element and an array of attribute names;\n * Parses parent \"g\" nodes recursively upwards.\n * @static\n * @memberOf fabric\n * @param {DOMElement} element Element to parse\n * @param {Array} attributes Array of attributes to parse\n * @return {Object} object containing parsed attributes' names/values\n */\n parseAttributes: function(element, attributes, svgUid) {\n\n if (!element) {\n return;\n }\n\n var value,\n parentAttributes = { };\n\n if (typeof svgUid === 'undefined') {\n svgUid = element.getAttribute('svgUid');\n }\n // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards\n if (element.parentNode && /^symbol|[g|a]$/i.test(element.parentNode.nodeName)) {\n parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);\n }\n\n var ownAttributes = attributes.reduce(function(memo, attr) {\n value = element.getAttribute(attr);\n if (value) {\n attr = normalizeAttr(attr);\n value = normalizeValue(attr, value, parentAttributes);\n\n memo[attr] = value;\n }\n return memo;\n }, { });\n\n // add values parsed from style, which take precedence over attributes\n // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)\n ownAttributes = extend(ownAttributes,\n extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element)));\n\n return _setStrokeFillOpacity(extend(parentAttributes, ownAttributes));\n },\n\n /**\n * Transforms an array of svg elements to corresponding fabric.* instances\n * @static\n * @memberOf fabric\n * @param {Array} elements Array of elements to parse\n * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)\n * @param {Object} [options] Options object\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n parseElements: function(elements, callback, options, reviver) {\n new fabric.ElementsParser(elements, callback, options, reviver).parse();\n },\n\n /**\n * Parses \"style\" attribute, retuning an object with values\n * @static\n * @memberOf fabric\n * @param {SVGElement} element Element to parse\n * @return {Object} Objects with values parsed from style attribute of an element\n */\n parseStyleAttribute: function(element) {\n var oStyle = { },\n style = element.getAttribute('style');\n\n if (!style) {\n return oStyle;\n }\n\n if (typeof style === 'string') {\n parseStyleString(style, oStyle);\n }\n else {\n parseStyleObject(style, oStyle);\n }\n\n return oStyle;\n },\n\n /**\n * Parses \"points\" attribute, returning an array of values\n * @static\n * @memberOf fabric\n * @param {String} points points attribute string\n * @return {Array} array of points\n */\n parsePointsAttribute: function(points) {\n\n // points attribute is required and must not be empty\n if (!points) {\n return null;\n }\n\n // replace commas with whitespace and remove bookending whitespace\n points = points.replace(/,/g, ' ').trim();\n\n points = points.split(/\\s+/);\n var parsedPoints = [ ], i, len;\n\n i = 0;\n len = points.length;\n for (; i < len; i+=2) {\n parsedPoints.push({\n x: parseFloat(points[i]),\n y: parseFloat(points[i + 1])\n });\n }\n\n // odd number of points is an error\n // if (parsedPoints.length % 2 !== 0) {\n // return null;\n // }\n\n return parsedPoints;\n },\n\n /**\n * Returns CSS rules for a given SVG document\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} CSS rules of this document\n */\n getCSSRules: function(doc) {\n var styles = doc.getElementsByTagName('style'),\n allRules = { }, rules;\n\n // very crude parsing of style contents\n for (var i = 0, len = styles.length; i < len; i++) {\n var styleContents = styles[i].textContent;\n\n // remove comments\n styleContents = styleContents.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '');\n if (styleContents.trim() === '') {\n continue;\n }\n rules = styleContents.match(/[^{]*\\{[\\s\\S]*?\\}/g);\n rules = rules.map(function(rule) { return rule.trim(); });\n\n rules.forEach(function(rule) {\n\n var match = rule.match(/([\\s\\S]*?)\\s*\\{([^}]*)\\}/),\n ruleObj = { }, declaration = match[2].trim(),\n propertyValuePairs = declaration.replace(/;$/, '').split(/\\s*;\\s*/);\n\n for (var i = 0, len = propertyValuePairs.length; i < len; i++) {\n var pair = propertyValuePairs[i].split(/\\s*:\\s*/),\n property = normalizeAttr(pair[0]),\n value = normalizeValue(property, pair[1], pair[0]);\n ruleObj[property] = value;\n }\n rule = match[1];\n rule.split(',').forEach(function(_rule) {\n allRules[_rule.trim()] = fabric.util.object.clone(ruleObj);\n });\n });\n }\n return allRules;\n },\n\n /**\n * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)\n * @memberof fabric\n * @param {String} url\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n loadSVGFromURL: function(url, callback, reviver) {\n\n url = url.replace(/^\\n\\s*/, '').trim();\n svgCache.has(url, function (hasUrl) {\n if (hasUrl) {\n svgCache.get(url, function (value) {\n var enlivedRecord = _enlivenCachedObject(value);\n callback(enlivedRecord.objects, enlivedRecord.options);\n });\n }\n else {\n new fabric.util.request(url, {\n method: 'get',\n onComplete: onComplete\n });\n }\n });\n\n function onComplete(r) {\n\n var xml = r.responseXML;\n if (xml && !xml.documentElement && fabric.window.ActiveXObject && r.responseText) {\n xml = new ActiveXObject('Microsoft.XMLDOM');\n xml.async = 'false';\n //IE chokes on DOCTYPE\n xml.loadXML(r.responseText.replace(//i, ''));\n }\n if (!xml || !xml.documentElement) {\n return;\n }\n\n fabric.parseSVGDocument(xml.documentElement, function (results, options) {\n svgCache.set(url, {\n objects: fabric.util.array.invoke(results, 'toObject'),\n options: options\n });\n callback(results, options);\n }, reviver);\n }\n },\n\n /**\n * Takes string corresponding to an SVG document, and parses it into a set of fabric objects\n * @memberof fabric\n * @param {String} string\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n loadSVGFromString: function(string, callback, reviver) {\n string = string.trim();\n var doc;\n if (typeof DOMParser !== 'undefined') {\n var parser = new DOMParser();\n if (parser && parser.parseFromString) {\n doc = parser.parseFromString(string, 'text/xml');\n }\n }\n else if (fabric.window.ActiveXObject) {\n doc = new ActiveXObject('Microsoft.XMLDOM');\n doc.async = 'false';\n // IE chokes on DOCTYPE\n doc.loadXML(string.replace(//i, ''));\n }\n\n fabric.parseSVGDocument(doc.documentElement, function (results, options) {\n callback(results, options);\n }, reviver);\n },\n\n /**\n * Creates markup containing SVG font faces\n * @param {Array} objects Array of fabric objects\n * @return {String}\n */\n createSVGFontFacesMarkup: function(objects) {\n var markup = '';\n\n for (var i = 0, len = objects.length; i < len; i++) {\n if (objects[i].type !== 'text' || !objects[i].path) {\n continue;\n }\n\n markup += [\n //jscs:disable validateIndentation\n '@font-face {',\n 'font-family: ', objects[i].fontFamily, '; ',\n 'src: url(\\'', objects[i].path, '\\')',\n '}'\n //jscs:enable validateIndentation\n ].join('');\n }\n\n if (markup) {\n markup = [\n //jscs:disable validateIndentation\n ''\n //jscs:enable validateIndentation\n ].join('');\n }\n\n return markup;\n },\n\n /**\n * Creates markup containing SVG referenced elements like patterns, gradients etc.\n * @param {fabric.Canvas} canvas instance of fabric.Canvas\n * @return {String}\n */\n createSVGRefElementsMarkup: function(canvas) {\n var markup = [ ];\n\n _createSVGPattern(markup, canvas, 'backgroundColor');\n _createSVGPattern(markup, canvas, 'overlayColor');\n\n return markup.join('');\n }\n });\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\nfabric.ElementsParser = function(elements, callback, options, reviver) {\n this.elements = elements;\n this.callback = callback;\n this.options = options;\n this.reviver = reviver;\n this.svgUid = (options && options.svgUid) || 0;\n};\n\nfabric.ElementsParser.prototype.parse = function() {\n this.instances = new Array(this.elements.length);\n this.numElements = this.elements.length;\n\n this.createObjects();\n};\n\nfabric.ElementsParser.prototype.createObjects = function() {\n for (var i = 0, len = this.elements.length; i < len; i++) {\n this.elements[i].setAttribute('svgUid', this.svgUid);\n (function(_this, i) {\n setTimeout(function() {\n _this.createObject(_this.elements[i], i);\n }, 0);\n })(this, i);\n }\n};\n\nfabric.ElementsParser.prototype.createObject = function(el, index) {\n var klass = fabric[fabric.util.string.capitalize(el.tagName)];\n if (klass && klass.fromElement) {\n try {\n this._createObject(klass, el, index);\n }\n catch (err) {\n fabric.log(err);\n }\n }\n else {\n this.checkIfDone();\n }\n};\n\nfabric.ElementsParser.prototype._createObject = function(klass, el, index) {\n if (klass.async) {\n klass.fromElement(el, this.createCallback(index, el), this.options);\n }\n else {\n var obj = klass.fromElement(el, this.options);\n this.resolveGradient(obj, 'fill');\n this.resolveGradient(obj, 'stroke');\n this.reviver && this.reviver(el, obj);\n this.instances[index] = obj;\n this.checkIfDone();\n }\n};\n\nfabric.ElementsParser.prototype.createCallback = function(index, el) {\n var _this = this;\n return function(obj) {\n _this.resolveGradient(obj, 'fill');\n _this.resolveGradient(obj, 'stroke');\n _this.reviver && _this.reviver(el, obj);\n _this.instances[index] = obj;\n _this.checkIfDone();\n };\n};\n\nfabric.ElementsParser.prototype.resolveGradient = function(obj, property) {\n\n var instanceFillValue = obj.get(property);\n if (!(/^url\\(/).test(instanceFillValue)) {\n return;\n }\n var gradientId = instanceFillValue.slice(5, instanceFillValue.length - 1);\n if (fabric.gradientDefs[this.svgUid][gradientId]) {\n obj.set(property,\n fabric.Gradient.fromElement(fabric.gradientDefs[this.svgUid][gradientId], obj));\n }\n};\n\nfabric.ElementsParser.prototype.checkIfDone = function() {\n if (--this.numElements === 0) {\n this.instances = this.instances.filter(function(el) {\n return el != null;\n });\n this.callback(this.instances);\n }\n};\n\n\n(function(global) {\n\n 'use strict';\n\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Point) {\n fabric.warn('fabric.Point is already defined');\n return;\n }\n\n fabric.Point = Point;\n\n /**\n * Point class\n * @class fabric.Point\n * @memberOf fabric\n * @constructor\n * @param {Number} x\n * @param {Number} y\n * @return {fabric.Point} thisArg\n */\n function Point(x, y) {\n this.x = x;\n this.y = y;\n }\n\n Point.prototype = /** @lends fabric.Point.prototype */ {\n\n constructor: Point,\n\n /**\n * Adds another point to this one and returns another one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point instance with added values\n */\n add: function (that) {\n return new Point(this.x + that.x, this.y + that.y);\n },\n\n /**\n * Adds another point to this one\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n */\n addEquals: function (that) {\n this.x += that.x;\n this.y += that.y;\n return this;\n },\n\n /**\n * Adds value to this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point} new Point with added value\n */\n scalarAdd: function (scalar) {\n return new Point(this.x + scalar, this.y + scalar);\n },\n\n /**\n * Adds value to this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n */\n scalarAddEquals: function (scalar) {\n this.x += scalar;\n this.y += scalar;\n return this;\n },\n\n /**\n * Subtracts another point from this point and returns a new one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point object with subtracted values\n */\n subtract: function (that) {\n return new Point(this.x - that.x, this.y - that.y);\n },\n\n /**\n * Subtracts another point from this point\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n */\n subtractEquals: function (that) {\n this.x -= that.x;\n this.y -= that.y;\n return this;\n },\n\n /**\n * Subtracts value from this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n scalarSubtract: function (scalar) {\n return new Point(this.x - scalar, this.y - scalar);\n },\n\n /**\n * Subtracts value from this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n */\n scalarSubtractEquals: function (scalar) {\n this.x -= scalar;\n this.y -= scalar;\n return this;\n },\n\n /**\n * Miltiplies this point by a value and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n multiply: function (scalar) {\n return new Point(this.x * scalar, this.y * scalar);\n },\n\n /**\n * Miltiplies this point by a value\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n */\n multiplyEquals: function (scalar) {\n this.x *= scalar;\n this.y *= scalar;\n return this;\n },\n\n /**\n * Divides this point by a value and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n divide: function (scalar) {\n return new Point(this.x / scalar, this.y / scalar);\n },\n\n /**\n * Divides this point by a value\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n */\n divideEquals: function (scalar) {\n this.x /= scalar;\n this.y /= scalar;\n return this;\n },\n\n /**\n * Returns true if this point is equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n eq: function (that) {\n return (this.x === that.x && this.y === that.y);\n },\n\n /**\n * Returns true if this point is less than another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lt: function (that) {\n return (this.x < that.x && this.y < that.y);\n },\n\n /**\n * Returns true if this point is less than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lte: function (that) {\n return (this.x <= that.x && this.y <= that.y);\n },\n\n /**\n\n * Returns true if this point is greater another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gt: function (that) {\n return (this.x > that.x && this.y > that.y);\n },\n\n /**\n * Returns true if this point is greater than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gte: function (that) {\n return (this.x >= that.x && this.y >= that.y);\n },\n\n /**\n * Returns new point which is the result of linear interpolation with this one and another one\n * @param {fabric.Point} that\n * @param {Number} t\n * @return {fabric.Point}\n */\n lerp: function (that, t) {\n return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t);\n },\n\n /**\n * Returns distance from this point and another one\n * @param {fabric.Point} that\n * @return {Number}\n */\n distanceFrom: function (that) {\n var dx = this.x - that.x,\n dy = this.y - that.y;\n return Math.sqrt(dx * dx + dy * dy);\n },\n\n /**\n * Returns the point between this point and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n midPointFrom: function (that) {\n return new Point(this.x + (that.x - this.x)/2, this.y + (that.y - this.y)/2);\n },\n\n /**\n * Returns a new point which is the min of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n min: function (that) {\n return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));\n },\n\n /**\n * Returns a new point which is the max of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n max: function (that) {\n return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));\n },\n\n /**\n * Returns string representation of this point\n * @return {String}\n */\n toString: function () {\n return this.x + ',' + this.y;\n },\n\n /**\n * Sets x/y of this point\n * @param {Number} x\n * @return {Number} y\n */\n setXY: function (x, y) {\n this.x = x;\n this.y = y;\n },\n\n /**\n * Sets x/y of this point from another point\n * @param {fabric.Point} that\n */\n setFromPoint: function (that) {\n this.x = that.x;\n this.y = that.y;\n },\n\n /**\n * Swaps x/y of this point and another point\n * @param {fabric.Point} that\n */\n swap: function (that) {\n var x = this.x,\n y = this.y;\n this.x = that.x;\n this.y = that.y;\n that.x = x;\n that.y = y;\n }\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Intersection) {\n fabric.warn('fabric.Intersection is already defined');\n return;\n }\n\n /**\n * Intersection class\n * @class fabric.Intersection\n * @memberOf fabric\n * @constructor\n */\n function Intersection(status) {\n this.status = status;\n this.points = [];\n }\n\n fabric.Intersection = Intersection;\n\n fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ {\n\n /**\n * Appends a point to intersection\n * @param {fabric.Point} point\n */\n appendPoint: function (point) {\n this.points.push(point);\n },\n\n /**\n * Appends points to intersection\n * @param {Array} points\n */\n appendPoints: function (points) {\n this.points = this.points.concat(points);\n }\n };\n\n /**\n * Checks if one line intersects another\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {fabric.Point} b1\n * @param {fabric.Point} b2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {\n var result,\n uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),\n ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),\n uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);\n if (uB !== 0) {\n var ua = uaT / uB,\n ub = ubT / uB;\n if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {\n result = new Intersection('Intersection');\n result.points.push(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));\n }\n else {\n result = new Intersection();\n }\n }\n else {\n if (uaT === 0 || ubT === 0) {\n result = new Intersection('Coincident');\n }\n else {\n result = new Intersection('Parallel');\n }\n }\n return result;\n };\n\n /**\n * Checks if line intersects polygon\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {Array} points\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectLinePolygon = function(a1, a2, points) {\n var result = new Intersection(),\n length = points.length;\n\n for (var i = 0; i < length; i++) {\n var b1 = points[i],\n b2 = points[(i + 1) % length],\n inter = Intersection.intersectLineLine(a1, a2, b1, b2);\n\n result.appendPoints(inter.points);\n }\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n /**\n * Checks if polygon intersects another polygon\n * @static\n * @param {Array} points1\n * @param {Array} points2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {\n var result = new Intersection(),\n length = points1.length;\n\n for (var i = 0; i < length; i++) {\n var a1 = points1[i],\n a2 = points1[(i + 1) % length],\n inter = Intersection.intersectLinePolygon(a1, a2, points2);\n\n result.appendPoints(inter.points);\n }\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n /**\n * Checks if polygon intersects rectangle\n * @static\n * @param {Array} points\n * @param {Number} r1\n * @param {Number} r2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {\n var min = r1.min(r2),\n max = r1.max(r2),\n topRight = new fabric.Point(max.x, min.y),\n bottomLeft = new fabric.Point(min.x, max.y),\n inter1 = Intersection.intersectLinePolygon(min, topRight, points),\n inter2 = Intersection.intersectLinePolygon(topRight, max, points),\n inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),\n inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points),\n result = new Intersection();\n\n result.appendPoints(inter1.points);\n result.appendPoints(inter2.points);\n result.appendPoints(inter3.points);\n result.appendPoints(inter4.points);\n\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Color) {\n fabric.warn('fabric.Color is already defined.');\n return;\n }\n\n /**\n * Color class\n * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations;\n * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects.\n *\n * @class fabric.Color\n * @param {String} color optional in hex or rgb(a) format\n * @return {fabric.Color} thisArg\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}\n */\n function Color(color) {\n if (!color) {\n this.setSource([0, 0, 0, 1]);\n }\n else {\n this._tryParsingColor(color);\n }\n }\n\n fabric.Color = Color;\n\n fabric.Color.prototype = /** @lends fabric.Color.prototype */ {\n\n /**\n * @private\n * @param {String|Array} color Color value to parse\n */\n _tryParsingColor: function(color) {\n var source;\n\n if (color in Color.colorNameMap) {\n color = Color.colorNameMap[color];\n }\n\n if (color === 'transparent') {\n this.setSource([255, 255, 255, 0]);\n return;\n }\n\n source = Color.sourceFromHex(color);\n\n if (!source) {\n source = Color.sourceFromRgb(color);\n }\n if (!source) {\n source = Color.sourceFromHsl(color);\n }\n if (source) {\n this.setSource(source);\n }\n },\n\n /**\n * Adapted from https://github.com/mjijackson\n * @private\n * @param {Number} r Red color value\n * @param {Number} g Green color value\n * @param {Number} b Blue color value\n * @return {Array} Hsl color\n */\n _rgbToHsl: function(r, g, b) {\n r /= 255, g /= 255, b /= 255;\n\n var h, s, l,\n max = fabric.util.array.max([r, g, b]),\n min = fabric.util.array.min([r, g, b]);\n\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n }\n else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n\n return [\n Math.round(h * 360),\n Math.round(s * 100),\n Math.round(l * 100)\n ];\n },\n\n /**\n * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @return {Array}\n */\n getSource: function() {\n return this._source;\n },\n\n /**\n * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @param {Array} source\n */\n setSource: function(source) {\n this._source = source;\n },\n\n /**\n * Returns color represenation in RGB format\n * @return {String} ex: rgb(0-255,0-255,0-255)\n */\n toRgb: function() {\n var source = this.getSource();\n return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';\n },\n\n /**\n * Returns color represenation in RGBA format\n * @return {String} ex: rgba(0-255,0-255,0-255,0-1)\n */\n toRgba: function() {\n var source = this.getSource();\n return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')';\n },\n\n /**\n * Returns color represenation in HSL format\n * @return {String} ex: hsl(0-360,0%-100%,0%-100%)\n */\n toHsl: function() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)';\n },\n\n /**\n * Returns color represenation in HSLA format\n * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)\n */\n toHsla: function() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')';\n },\n\n /**\n * Returns color represenation in HEX format\n * @return {String} ex: FF5555\n */\n toHex: function() {\n var source = this.getSource(), r, g, b;\n\n r = source[0].toString(16);\n r = (r.length === 1) ? ('0' + r) : r;\n\n g = source[1].toString(16);\n g = (g.length === 1) ? ('0' + g) : g;\n\n b = source[2].toString(16);\n b = (b.length === 1) ? ('0' + b) : b;\n\n return r.toUpperCase() + g.toUpperCase() + b.toUpperCase();\n },\n\n /**\n * Gets value of alpha channel for this color\n * @return {Number} 0-1\n */\n getAlpha: function() {\n return this.getSource()[3];\n },\n\n /**\n * Sets value of alpha channel for this color\n * @param {Number} alpha Alpha value 0-1\n * @return {fabric.Color} thisArg\n */\n setAlpha: function(alpha) {\n var source = this.getSource();\n source[3] = alpha;\n this.setSource(source);\n return this;\n },\n\n /**\n * Transforms color to its grayscale representation\n * @return {fabric.Color} thisArg\n */\n toGrayscale: function() {\n var source = this.getSource(),\n average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10),\n currentAlpha = source[3];\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Transforms color to its black and white representation\n * @param {Number} threshold\n * @return {fabric.Color} thisArg\n */\n toBlackWhite: function(threshold) {\n var source = this.getSource(),\n average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0),\n currentAlpha = source[3];\n\n threshold = threshold || 127;\n\n average = (Number(average) < Number(threshold)) ? 0 : 255;\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Overlays color with another color\n * @param {String|fabric.Color} otherColor\n * @return {fabric.Color} thisArg\n */\n overlayWith: function(otherColor) {\n if (!(otherColor instanceof Color)) {\n otherColor = new Color(otherColor);\n }\n\n var result = [],\n alpha = this.getAlpha(),\n otherAlpha = 0.5,\n source = this.getSource(),\n otherSource = otherColor.getSource();\n\n for (var i = 0; i < 3; i++) {\n result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha)));\n }\n\n result[3] = alpha;\n this.setSource(result);\n return this;\n }\n };\n\n /**\n * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n fabric.Color.reRGBa = /^rgba?\\(\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*(?:\\s*,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)$/;\n\n /**\n * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n fabric.Color.reHSLa = /^hsla?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}\\%)\\s*,\\s*(\\d{1,3}\\%)\\s*(?:\\s*,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)$/;\n\n /**\n * Regex matching color in HEX format (ex: #FF5555, 010155, aff)\n * @static\n * @field\n * @memberOf fabric.Color\n */\n fabric.Color.reHex = /^#?([0-9a-f]{6}|[0-9a-f]{3})$/i;\n\n /**\n * Map of the 17 basic color names with HEX code\n * @static\n * @field\n * @memberOf fabric.Color\n * @see: http://www.w3.org/TR/CSS2/syndata.html#color-units\n */\n fabric.Color.colorNameMap = {\n aqua: '#00FFFF',\n black: '#000000',\n blue: '#0000FF',\n fuchsia: '#FF00FF',\n gray: '#808080',\n green: '#008000',\n lime: '#00FF00',\n maroon: '#800000',\n navy: '#000080',\n olive: '#808000',\n orange: '#FFA500',\n purple: '#800080',\n red: '#FF0000',\n silver: '#C0C0C0',\n teal: '#008080',\n white: '#FFFFFF',\n yellow: '#FFFF00'\n };\n\n /**\n * @private\n * @param {Number} p\n * @param {Number} q\n * @param {Number} t\n * @return {Number}\n */\n function hue2rgb(p, q, t) {\n if (t < 0) {\n t += 1;\n }\n if (t > 1) {\n t -= 1;\n }\n if (t < 1/6) {\n return p + (q - p) * 6 * t;\n }\n if (t < 1/2) {\n return q;\n }\n if (t < 2/3) {\n return p + (q - p) * (2/3 - t) * 6;\n }\n return p;\n }\n\n /**\n * Returns new color object, when given a color in RGB format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255)\n * @return {fabric.Color}\n */\n fabric.Color.fromRgb = function(color) {\n return Color.fromSource(Color.sourceFromRgb(color));\n };\n\n /**\n * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)\n * @return {Array} source\n */\n fabric.Color.sourceFromRgb = function(color) {\n var match = color.match(Color.reRGBa);\n if (match) {\n var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1),\n g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1),\n b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1);\n\n return [\n parseInt(r, 10),\n parseInt(g, 10),\n parseInt(b, 10),\n match[4] ? parseFloat(match[4]) : 1\n ];\n }\n };\n\n /**\n * Returns new color object, when given a color in RGBA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n fabric.Color.fromRgba = Color.fromRgb;\n\n /**\n * Returns new color object, when given a color in HSL format\n * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)\n * @memberOf fabric.Color\n * @return {fabric.Color}\n */\n fabric.Color.fromHsl = function(color) {\n return Color.fromSource(Color.sourceFromHsl(color));\n };\n\n /**\n * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.\n * Adapted from https://github.com/mjijackson\n * @memberOf fabric.Color\n * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)\n * @return {Array} source\n * @see http://http://www.w3.org/TR/css3-color/#hsl-color\n */\n fabric.Color.sourceFromHsl = function(color) {\n var match = color.match(Color.reHSLa);\n if (!match) {\n return;\n }\n\n var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360,\n s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),\n l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1),\n r, g, b;\n\n if (s === 0) {\n r = g = b = l;\n }\n else {\n var q = l <= 0.5 ? l * (s + 1) : l + s - l * s,\n p = l * 2 - q;\n\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return [\n Math.round(r * 255),\n Math.round(g * 255),\n Math.round(b * 255),\n match[4] ? parseFloat(match[4]) : 1\n ];\n };\n\n /**\n * Returns new color object, when given a color in HSLA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n fabric.Color.fromHsla = Color.fromHsl;\n\n /**\n * Returns new color object, when given a color in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color Color value ex: FF5555\n * @return {fabric.Color}\n */\n fabric.Color.fromHex = function(color) {\n return Color.fromSource(Color.sourceFromHex(color));\n };\n\n /**\n * Returns array represenatation (ex: [100, 100, 200, 1]) of a color that's in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color ex: FF5555\n * @return {Array} source\n */\n fabric.Color.sourceFromHex = function(color) {\n if (color.match(Color.reHex)) {\n var value = color.slice(color.indexOf('#') + 1),\n isShortNotation = (value.length === 3),\n r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2),\n g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4),\n b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6);\n\n return [\n parseInt(r, 16),\n parseInt(g, 16),\n parseInt(b, 16),\n 1\n ];\n }\n };\n\n /**\n * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])\n * @static\n * @memberOf fabric.Color\n * @param {Array} source\n * @return {fabric.Color}\n */\n fabric.Color.fromSource = function(source) {\n var oColor = new Color();\n oColor.setSource(source);\n return oColor;\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n\n /* _FROM_SVG_START_ */\n function getColorStop(el) {\n var style = el.getAttribute('style'),\n offset = el.getAttribute('offset'),\n color, colorAlpha, opacity;\n\n // convert percents to absolute values\n offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);\n offset = offset < 0 ? 0 : offset > 1 ? 1 : offset;\n if (style) {\n var keyValuePairs = style.split(/\\s*;\\s*/);\n\n if (keyValuePairs[keyValuePairs.length - 1] === '') {\n keyValuePairs.pop();\n }\n\n for (var i = keyValuePairs.length; i--; ) {\n\n var split = keyValuePairs[i].split(/\\s*:\\s*/),\n key = split[0].trim(),\n value = split[1].trim();\n\n if (key === 'stop-color') {\n color = value;\n }\n else if (key === 'stop-opacity') {\n opacity = value;\n }\n }\n }\n\n if (!color) {\n color = el.getAttribute('stop-color') || 'rgb(0,0,0)';\n }\n if (!opacity) {\n opacity = el.getAttribute('stop-opacity');\n }\n\n color = new fabric.Color(color);\n colorAlpha = color.getAlpha();\n opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity);\n opacity *= colorAlpha;\n\n return {\n offset: offset,\n color: color.toRgb(),\n opacity: opacity\n };\n }\n\n function getLinearCoords(el) {\n return {\n x1: el.getAttribute('x1') || 0,\n y1: el.getAttribute('y1') || 0,\n x2: el.getAttribute('x2') || '100%',\n y2: el.getAttribute('y2') || 0\n };\n }\n\n function getRadialCoords(el) {\n return {\n x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%',\n y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%',\n r1: 0,\n x2: el.getAttribute('cx') || '50%',\n y2: el.getAttribute('cy') || '50%',\n r2: el.getAttribute('r') || '50%'\n };\n }\n /* _FROM_SVG_END_ */\n\n /**\n * Gradient class\n * @class fabric.Gradient\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#gradients}\n * @see {@link fabric.Gradient#initialize} for constructor definition\n */\n fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {\n\n /**\n * Horizontal offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetX: 0,\n\n /**\n * Vertical offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetY: 0,\n\n /**\n * Constructor\n * @param {Object} [options] Options object with type, coords, gradientUnits and colorStops\n * @return {fabric.Gradient} thisArg\n */\n initialize: function(options) {\n options || (options = { });\n\n var coords = { };\n\n this.id = fabric.Object.__uid++;\n this.type = options.type || 'linear';\n\n coords = {\n x1: options.coords.x1 || 0,\n y1: options.coords.y1 || 0,\n x2: options.coords.x2 || 0,\n y2: options.coords.y2 || 0\n };\n\n if (this.type === 'radial') {\n coords.r1 = options.coords.r1 || 0;\n coords.r2 = options.coords.r2 || 0;\n }\n this.coords = coords;\n this.colorStops = options.colorStops.slice();\n if (options.gradientTransform) {\n this.gradientTransform = options.gradientTransform;\n }\n this.offsetX = options.offsetX || this.offsetX;\n this.offsetY = options.offsetY || this.offsetY;\n },\n\n /**\n * Adds another colorStop\n * @param {Object} colorStop Object with offset and color\n * @return {fabric.Gradient} thisArg\n */\n addColorStop: function(colorStop) {\n for (var position in colorStop) {\n var color = new fabric.Color(colorStop[position]);\n this.colorStops.push({\n offset: position,\n color: color.toRgb(),\n opacity: color.getAlpha()\n });\n }\n return this;\n },\n\n /**\n * Returns object representation of a gradient\n * @return {Object}\n */\n toObject: function() {\n return {\n type: this.type,\n coords: this.coords,\n colorStops: this.colorStops,\n offsetX: this.offsetX,\n offsetY: this.offsetY\n };\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an gradient\n * @param {Object} object Object to create a gradient for\n * @param {Boolean} normalize Whether coords should be normalized\n * @return {String} SVG representation of an gradient (linear/radial)\n */\n toSVG: function(object) {\n var coords = fabric.util.object.clone(this.coords),\n markup, commonAttributes;\n\n // colorStops must be sorted ascending\n this.colorStops.sort(function(a, b) {\n return a.offset - b.offset;\n });\n\n if (!(object.group && object.group.type === 'path-group')) {\n for (var prop in coords) {\n if (prop === 'x1' || prop === 'x2' || prop === 'r2') {\n coords[prop] += this.offsetX - object.width / 2;\n }\n else if (prop === 'y1' || prop === 'y2') {\n coords[prop] += this.offsetY - object.height / 2;\n }\n }\n }\n\n commonAttributes = 'id=\"SVGID_' + this.id +\n '\" gradientUnits=\"userSpaceOnUse\"';\n if (this.gradientTransform) {\n commonAttributes += ' gradientTransform=\"matrix(' + this.gradientTransform.join(' ') + ')\" ';\n }\n if (this.type === 'linear') {\n markup = [\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n ];\n }\n else if (this.type === 'radial') {\n markup = [\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n ];\n }\n\n for (var i = 0; i < this.colorStops.length; i++) {\n markup.push(\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n );\n }\n\n markup.push((this.type === 'linear' ? '\\n' : '\\n'));\n\n return markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns an instance of CanvasGradient\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @return {CanvasGradient}\n */\n toLive: function(ctx, object) {\n var gradient, coords = fabric.util.object.clone(this.coords);\n\n if (!this.type) {\n return;\n }\n\n if (object.group && object.group.type === 'path-group') {\n for (var prop in coords) {\n if (prop === 'x1' || prop === 'x2') {\n coords[prop] += -this.offsetX + object.width / 2;\n }\n else if (prop === 'y1' || prop === 'y2') {\n coords[prop] += -this.offsetY + object.height / 2;\n }\n }\n }\n\n if (this.type === 'linear') {\n gradient = ctx.createLinearGradient(\n coords.x1, coords.y1, coords.x2, coords.y2);\n }\n else if (this.type === 'radial') {\n gradient = ctx.createRadialGradient(\n coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);\n }\n\n for (var i = 0, len = this.colorStops.length; i < len; i++) {\n var color = this.colorStops[i].color,\n opacity = this.colorStops[i].opacity,\n offset = this.colorStops[i].offset;\n\n if (typeof opacity !== 'undefined') {\n color = new fabric.Color(color).setAlpha(opacity).toRgba();\n }\n gradient.addColorStop(parseFloat(offset), color);\n }\n\n return gradient;\n }\n });\n\n fabric.util.object.extend(fabric.Gradient, {\n\n /* _FROM_SVG_START_ */\n /**\n * Returns {@link fabric.Gradient} instance from an SVG element\n * @static\n * @memberof fabric.Gradient\n * @param {SVGGradientElement} el SVG gradient element\n * @param {fabric.Object} instance\n * @return {fabric.Gradient} Gradient instance\n * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement\n * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement\n */\n fromElement: function(el, instance) {\n\n /**\n * @example:\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n */\n\n var colorStopEls = el.getElementsByTagName('stop'),\n type = (el.nodeName === 'linearGradient' ? 'linear' : 'radial'),\n gradientUnits = el.getAttribute('gradientUnits') || 'objectBoundingBox',\n gradientTransform = el.getAttribute('gradientTransform'),\n colorStops = [],\n coords = { }, ellipseMatrix;\n\n if (type === 'linear') {\n coords = getLinearCoords(el);\n }\n else if (type === 'radial') {\n coords = getRadialCoords(el);\n }\n\n for (var i = colorStopEls.length; i--; ) {\n colorStops.push(getColorStop(colorStopEls[i]));\n }\n\n ellipseMatrix = _convertPercentUnitsToValues(instance, coords, gradientUnits);\n\n var gradient = new fabric.Gradient({\n type: type,\n coords: coords,\n colorStops: colorStops,\n offsetX: -instance.left,\n offsetY: -instance.top\n });\n\n if (gradientTransform || ellipseMatrix !== '') {\n gradient.gradientTransform = fabric.parseTransformAttribute((gradientTransform || '') + ellipseMatrix);\n }\n return gradient;\n },\n /* _FROM_SVG_END_ */\n\n /**\n * Returns {@link fabric.Gradient} instance from its object representation\n * @static\n * @memberof fabric.Gradient\n * @param {Object} obj\n * @param {Object} [options] Options object\n */\n forObject: function(obj, options) {\n options || (options = { });\n _convertPercentUnitsToValues(obj, options.coords, 'userSpaceOnUse');\n return new fabric.Gradient(options);\n }\n });\n\n /**\n * @private\n */\n function _convertPercentUnitsToValues(object, options, gradientUnits) {\n var propValue, addFactor = 0, multFactor = 1, ellipseMatrix = '';\n for (var prop in options) {\n propValue = parseFloat(options[prop], 10);\n if (typeof options[prop] === 'string' && /^\\d+%$/.test(options[prop])) {\n multFactor = 0.01;\n }\n else {\n multFactor = 1;\n }\n if (prop === 'x1' || prop === 'x2' || prop === 'r2') {\n multFactor *= gradientUnits === 'objectBoundingBox' ? object.width : 1;\n addFactor = gradientUnits === 'objectBoundingBox' ? object.left || 0 : 0;\n }\n else if (prop === 'y1' || prop === 'y2') {\n multFactor *= gradientUnits === 'objectBoundingBox' ? object.height : 1;\n addFactor = gradientUnits === 'objectBoundingBox' ? object.top || 0 : 0;\n }\n options[prop] = propValue * multFactor + addFactor;\n }\n if (object.type === 'ellipse' &&\n options.r2 !== null &&\n gradientUnits === 'objectBoundingBox' &&\n object.rx !== object.ry) {\n\n var scaleFactor = object.ry/object.rx;\n ellipseMatrix = ' scale(1, ' + scaleFactor + ')';\n if (options.y1) {\n options.y1 /= scaleFactor;\n }\n if (options.y2) {\n options.y2 /= scaleFactor;\n }\n }\n return ellipseMatrix;\n }\n})();\n\n\n/**\n * Pattern class\n * @class fabric.Pattern\n * @see {@link http://fabricjs.com/patterns/|Pattern demo}\n * @see {@link http://fabricjs.com/dynamic-patterns/|DynamicPattern demo}\n * @see {@link fabric.Pattern#initialize} for constructor definition\n */\nfabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ {\n\n /**\n * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)\n * @type String\n * @default\n */\n repeat: 'repeat',\n\n /**\n * Pattern horizontal offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetX: 0,\n\n /**\n * Pattern vertical offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetY: 0,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @return {fabric.Pattern} thisArg\n */\n initialize: function(options) {\n options || (options = { });\n\n this.id = fabric.Object.__uid++;\n\n if (options.source) {\n if (typeof options.source === 'string') {\n // function string\n if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') {\n this.source = new Function(fabric.util.getFunctionBody(options.source));\n }\n else {\n // img src string\n var _this = this;\n this.source = fabric.util.createImage();\n fabric.util.loadImage(options.source, function(img) {\n _this.source = img;\n });\n }\n }\n else {\n // img element\n this.source = options.source;\n }\n }\n if (options.repeat) {\n this.repeat = options.repeat;\n }\n if (options.offsetX) {\n this.offsetX = options.offsetX;\n }\n if (options.offsetY) {\n this.offsetY = options.offsetY;\n }\n },\n\n /**\n * Returns object representation of a pattern\n * @return {Object} Object representation of a pattern instance\n */\n toObject: function() {\n\n var source;\n\n // callback\n if (typeof this.source === 'function') {\n source = String(this.source);\n }\n // element\n else if (typeof this.source.src === 'string') {\n source = this.source.src;\n }\n\n return {\n source: source,\n repeat: this.repeat,\n offsetX: this.offsetX,\n offsetY: this.offsetY\n };\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of a pattern\n * @param {fabric.Object} object\n * @return {String} SVG representation of a pattern\n */\n toSVG: function(object) {\n var patternSource = typeof this.source === 'function' ? this.source() : this.source,\n patternWidth = patternSource.width / object.getWidth(),\n patternHeight = patternSource.height / object.getHeight(),\n patternImgSrc = '';\n\n if (patternSource.src) {\n patternImgSrc = patternSource.src;\n }\n else if (patternSource.toDataURL) {\n patternImgSrc = patternSource.toDataURL();\n }\n\n return '' +\n '' +\n '';\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns an instance of CanvasPattern\n * @param {CanvasRenderingContext2D} ctx Context to create pattern\n * @return {CanvasPattern}\n */\n toLive: function(ctx) {\n var source = typeof this.source === 'function'\n ? this.source()\n : this.source;\n\n // if the image failed to load, return, and allow rest to continue loading\n if (!source) {\n return '';\n }\n\n // if an image\n if (typeof source.src !== 'undefined') {\n if (!source.complete) {\n return '';\n }\n if (source.naturalWidth === 0 || source.naturalHeight === 0) {\n return '';\n }\n }\n return ctx.createPattern(source, this.repeat);\n }\n});\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Shadow) {\n fabric.warn('fabric.Shadow is already defined.');\n return;\n }\n\n /**\n * Shadow class\n * @class fabric.Shadow\n * @see {@link http://fabricjs.com/shadows/|Shadow demo}\n * @see {@link fabric.Shadow#initialize} for constructor definition\n */\n fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {\n\n /**\n * Shadow color\n * @type String\n * @default\n */\n color: 'rgb(0,0,0)',\n\n /**\n * Shadow blur\n * @type Number\n */\n blur: 0,\n\n /**\n * Shadow horizontal offset\n * @type Number\n * @default\n */\n offsetX: 0,\n\n /**\n * Shadow vertical offset\n * @type Number\n * @default\n */\n offsetY: 0,\n\n /**\n * Whether the shadow should affect stroke operations\n * @type Boolean\n * @default\n */\n affectStroke: false,\n\n /**\n * Indicates whether toObject should include default values\n * @type Boolean\n * @default\n */\n includeDefaultValues: true,\n\n /**\n * Constructor\n * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetX properties or string (e.g. \"rgba(0,0,0,0.2) 2px 2px 10px, \"2px 2px 10px rgba(0,0,0,0.2)\")\n * @return {fabric.Shadow} thisArg\n */\n initialize: function(options) {\n\n if (typeof options === 'string') {\n options = this._parseShadow(options);\n }\n\n for (var prop in options) {\n this[prop] = options[prop];\n }\n\n this.id = fabric.Object.__uid++;\n },\n\n /**\n * @private\n * @param {String} shadow Shadow value to parse\n * @return {Object} Shadow object with color, offsetX, offsetY and blur\n */\n _parseShadow: function(shadow) {\n var shadowStr = shadow.trim(),\n offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [ ],\n color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)';\n\n return {\n color: color.trim(),\n offsetX: parseInt(offsetsAndBlur[1], 10) || 0,\n offsetY: parseInt(offsetsAndBlur[2], 10) || 0,\n blur: parseInt(offsetsAndBlur[3], 10) || 0\n };\n },\n\n /**\n * Returns a string representation of an instance\n * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow\n * @return {String} Returns CSS3 text-shadow declaration\n */\n toString: function() {\n return [this.offsetX, this.offsetY, this.blur, this.color].join('px ');\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of a shadow\n * @param {fabric.Object} object\n * @return {String} SVG representation of a shadow\n */\n toSVG: function(object) {\n var mode = 'SourceAlpha';\n\n if (object && (object.fill === this.color || object.stroke === this.color)) {\n mode = 'SourceGraphic';\n }\n\n return (\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '' +\n '');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns object representation of a shadow\n * @return {Object} Object representation of a shadow instance\n */\n toObject: function() {\n if (this.includeDefaultValues) {\n return {\n color: this.color,\n blur: this.blur,\n offsetX: this.offsetX,\n offsetY: this.offsetY\n };\n }\n var obj = { }, proto = fabric.Shadow.prototype;\n if (this.color !== proto.color) {\n obj.color = this.color;\n }\n if (this.blur !== proto.blur) {\n obj.blur = this.blur;\n }\n if (this.offsetX !== proto.offsetX) {\n obj.offsetX = this.offsetX;\n }\n if (this.offsetY !== proto.offsetY) {\n obj.offsetY = this.offsetY;\n }\n return obj;\n }\n });\n\n /**\n * Regex matching shadow offsetX, offsetY and blur (ex: \"2px 2px 10px rgba(0,0,0,0.2)\", \"rgb(0,255,0) 2px 2px\")\n * @static\n * @field\n * @memberOf fabric.Shadow\n */\n fabric.Shadow.reOffsetsAndBlur = /(?:\\s|^)(-?\\d+(?:px)?(?:\\s?|$))?(-?\\d+(?:px)?(?:\\s?|$))?(\\d+(?:px)?)?(?:\\s?|$)(?:$|\\s)/;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function () {\n\n 'use strict';\n\n if (fabric.StaticCanvas) {\n fabric.warn('fabric.StaticCanvas is already defined.');\n return;\n }\n\n // aliases for faster resolution\n var extend = fabric.util.object.extend,\n getElementOffset = fabric.util.getElementOffset,\n removeFromArray = fabric.util.removeFromArray,\n\n CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element');\n\n /**\n * Static canvas class\n * @class fabric.StaticCanvas\n * @mixes fabric.Collection\n * @mixes fabric.Observable\n * @see {@link http://fabricjs.com/static_canvas/|StaticCanvas demo}\n * @see {@link fabric.StaticCanvas#initialize} for constructor definition\n * @fires before:render\n * @fires after:render\n * @fires canvas:cleared\n * @fires object:added\n * @fires object:removed\n */\n fabric.StaticCanvas = fabric.util.createClass(/** @lends fabric.StaticCanvas.prototype */ {\n\n /**\n * Constructor\n * @param {HTMLElement | String} el <canvas> element to initialize instance on\n * @param {Object} [options] Options object\n * @return {Object} thisArg\n */\n initialize: function(el, options) {\n options || (options = { });\n\n this._initStatic(el, options);\n fabric.StaticCanvas.activeInstance = this;\n },\n\n /**\n * Background color of canvas instance.\n * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}.\n * @type {(String|fabric.Pattern)}\n * @default\n */\n backgroundColor: '',\n\n /**\n * Background image of canvas instance.\n * Should be set via {@link fabric.StaticCanvas#setBackgroundImage}.\n * Backwards incompatibility note: The \"backgroundImageOpacity\"\n * and \"backgroundImageStretch\" properties are deprecated since 1.3.9.\n * Use {@link fabric.Image#opacity}, {@link fabric.Image#width} and {@link fabric.Image#height}.\n * @type fabric.Image\n * @default\n */\n backgroundImage: null,\n\n /**\n * Overlay color of canvas instance.\n * Should be set via {@link fabric.StaticCanvas#setOverlayColor}\n * @since 1.3.9\n * @type {(String|fabric.Pattern)}\n * @default\n */\n overlayColor: '',\n\n /**\n * Overlay image of canvas instance.\n * Should be set via {@link fabric.StaticCanvas#setOverlayImage}.\n * Backwards incompatibility note: The \"overlayImageLeft\"\n * and \"overlayImageTop\" properties are deprecated since 1.3.9.\n * Use {@link fabric.Image#left} and {@link fabric.Image#top}.\n * @type fabric.Image\n * @default\n */\n overlayImage: null,\n\n /**\n * Indicates whether toObject/toDatalessObject should include default values\n * @type Boolean\n * @default\n */\n includeDefaultValues: true,\n\n /**\n * Indicates whether objects' state should be saved\n * @type Boolean\n * @default\n */\n stateful: true,\n\n /**\n * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove} should also re-render canvas.\n * Disabling this option could give a great performance boost when adding/removing a lot of objects to/from canvas at once\n * (followed by a manual rendering after addition/deletion)\n * @type Boolean\n * @default\n */\n renderOnAddRemove: true,\n\n /**\n * Function that determines clipping of entire canvas area\n * Being passed context as first argument. See clipping canvas area in {@link https://github.com/kangax/fabric.js/wiki/FAQ}\n * @type Function\n * @default\n */\n clipTo: null,\n\n /**\n * Indicates whether object controls (borders/controls) are rendered above overlay image\n * @type Boolean\n * @default\n */\n controlsAboveOverlay: false,\n\n /**\n * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas\n * @type Boolean\n * @default\n */\n allowTouchScrolling: false,\n\n /**\n * Indicates whether this canvas will use image smoothing, this is on by default in browsers\n * @type Boolean\n * @default\n */\n imageSmoothingEnabled: true,\n\n /**\n * Indicates whether objects should remain in current stack position when selected. When false objects are brought to top and rendered as part of the selection group\n * @type Boolean\n * @default\n */\n preserveObjectStacking: false,\n\n /**\n * The transformation (in the format of Canvas transform) which focuses the viewport\n * @type Array\n * @default\n */\n viewportTransform: [1, 0, 0, 1, 0, 0],\n\n /**\n * Callback; invoked right before object is about to be scaled/rotated\n */\n onBeforeScaleRotate: function () {\n /* NOOP */\n },\n\n /**\n * @private\n * @param {HTMLElement | String} el <canvas> element to initialize instance on\n * @param {Object} [options] Options object\n */\n _initStatic: function(el, options) {\n this._objects = [];\n\n this._createLowerCanvas(el);\n this._initOptions(options);\n this._setImageSmoothing();\n\n if (options.overlayImage) {\n this.setOverlayImage(options.overlayImage, this.renderAll.bind(this));\n }\n if (options.backgroundImage) {\n this.setBackgroundImage(options.backgroundImage, this.renderAll.bind(this));\n }\n if (options.backgroundColor) {\n this.setBackgroundColor(options.backgroundColor, this.renderAll.bind(this));\n }\n if (options.overlayColor) {\n this.setOverlayColor(options.overlayColor, this.renderAll.bind(this));\n }\n this.calcOffset();\n },\n\n /**\n * Calculates canvas element offset relative to the document\n * This method is also attached as \"resize\" event handler of window\n * @return {fabric.Canvas} instance\n * @chainable\n */\n calcOffset: function () {\n this._offset = getElementOffset(this.lowerCanvasEl);\n return this;\n },\n\n /**\n * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas\n * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to\n * @param {Function} callback callback to invoke when image is loaded and set as an overlay\n * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}.\n * @return {fabric.Canvas} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo}\n * @example Normal overlayImage with left/top = 0\n * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {\n * // Needed to position overlayImage at 0/0\n * originX: 'left',\n * originY: 'top'\n * });\n * @example overlayImage with different properties\n * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {\n * opacity: 0.5,\n * angle: 45,\n * left: 400,\n * top: 400,\n * originX: 'left',\n * originY: 'top'\n * });\n * @example Stretched overlayImage #1 - width/height correspond to canvas width/height\n * fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img) {\n * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});\n * canvas.setOverlayImage(img, canvas.renderAll.bind(canvas));\n * });\n * @example Stretched overlayImage #2 - width/height correspond to canvas width/height\n * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {\n * width: canvas.width,\n * height: canvas.height,\n * // Needed to position overlayImage at 0/0\n * originX: 'left',\n * originY: 'top'\n * });\n */\n setOverlayImage: function (image, callback, options) {\n return this.__setBgOverlayImage('overlayImage', image, callback, options);\n },\n\n /**\n * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas\n * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to\n * @param {Function} callback Callback to invoke when image is loaded and set as background\n * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}.\n * @return {fabric.Canvas} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/YH9yD/|jsFiddle demo}\n * @example Normal backgroundImage with left/top = 0\n * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {\n * // Needed to position backgroundImage at 0/0\n * originX: 'left',\n * originY: 'top'\n * });\n * @example backgroundImage with different properties\n * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {\n * opacity: 0.5,\n * angle: 45,\n * left: 400,\n * top: 400,\n * originX: 'left',\n * originY: 'top'\n * });\n * @example Stretched backgroundImage #1 - width/height correspond to canvas width/height\n * fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img) {\n * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});\n * canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));\n * });\n * @example Stretched backgroundImage #2 - width/height correspond to canvas width/height\n * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), {\n * width: canvas.width,\n * height: canvas.height,\n * // Needed to position backgroundImage at 0/0\n * originX: 'left',\n * originY: 'top'\n * });\n */\n setBackgroundImage: function (image, callback, options) {\n return this.__setBgOverlayImage('backgroundImage', image, callback, options);\n },\n\n /**\n * Sets {@link fabric.StaticCanvas#overlayColor|background color} for this canvas\n * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set background color to\n * @param {Function} callback Callback to invoke when background color is set\n * @return {fabric.Canvas} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo}\n * @example Normal overlayColor - color value\n * canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));\n * @example fabric.Pattern used as overlayColor\n * canvas.setOverlayColor({\n * source: 'http://fabricjs.com/assets/escheresque_ste.png'\n * }, canvas.renderAll.bind(canvas));\n * @example fabric.Pattern used as overlayColor with repeat and offset\n * canvas.setOverlayColor({\n * source: 'http://fabricjs.com/assets/escheresque_ste.png',\n * repeat: 'repeat',\n * offsetX: 200,\n * offsetY: 100\n * }, canvas.renderAll.bind(canvas));\n */\n setOverlayColor: function(overlayColor, callback) {\n return this.__setBgOverlayColor('overlayColor', overlayColor, callback);\n },\n\n /**\n * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas\n * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to\n * @param {Function} callback Callback to invoke when background color is set\n * @return {fabric.Canvas} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo}\n * @example Normal backgroundColor - color value\n * canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));\n * @example fabric.Pattern used as backgroundColor\n * canvas.setBackgroundColor({\n * source: 'http://fabricjs.com/assets/escheresque_ste.png'\n * }, canvas.renderAll.bind(canvas));\n * @example fabric.Pattern used as backgroundColor with repeat and offset\n * canvas.setBackgroundColor({\n * source: 'http://fabricjs.com/assets/escheresque_ste.png',\n * repeat: 'repeat',\n * offsetX: 200,\n * offsetY: 100\n * }, canvas.renderAll.bind(canvas));\n */\n setBackgroundColor: function(backgroundColor, callback) {\n return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback);\n },\n\n /**\n * @private\n * @see {@link http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-imagesmoothingenabled|WhatWG Canvas Standard}\n */\n _setImageSmoothing: function() {\n var ctx = this.getContext();\n\n ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;\n ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;\n ctx.mozImageSmoothingEnabled = this.imageSmoothingEnabled;\n ctx.msImageSmoothingEnabled = this.imageSmoothingEnabled;\n ctx.oImageSmoothingEnabled = this.imageSmoothingEnabled;\n },\n\n /**\n * @private\n * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage}\n * or {@link fabric.StaticCanvas#overlayImage|overlayImage})\n * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to\n * @param {Function} callback Callback to invoke when image is loaded and set as background or overlay\n * @param {Object} [options] Optional options to set for the {@link fabric.Image|image}.\n */\n __setBgOverlayImage: function(property, image, callback, options) {\n if (typeof image === 'string') {\n fabric.util.loadImage(image, function(img) {\n this[property] = new fabric.Image(img, options);\n callback && callback();\n }, this);\n }\n else {\n this[property] = image;\n callback && callback();\n }\n\n return this;\n },\n\n /**\n * @private\n * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor}\n * or {@link fabric.StaticCanvas#overlayColor|overlayColor})\n * @param {(Object|String|null)} color Object with pattern information, color value or null\n * @param {Function} [callback] Callback is invoked when color is set\n */\n __setBgOverlayColor: function(property, color, callback) {\n if (color && color.source) {\n var _this = this;\n fabric.util.loadImage(color.source, function(img) {\n _this[property] = new fabric.Pattern({\n source: img,\n repeat: color.repeat,\n offsetX: color.offsetX,\n offsetY: color.offsetY\n });\n callback && callback();\n });\n }\n else {\n this[property] = color;\n callback && callback();\n }\n\n return this;\n },\n\n /**\n * @private\n */\n _createCanvasElement: function() {\n var element = fabric.document.createElement('canvas');\n if (!element.style) {\n element.style = { };\n }\n if (!element) {\n throw CANVAS_INIT_ERROR;\n }\n this._initCanvasElement(element);\n return element;\n },\n\n /**\n * @private\n * @param {HTMLElement} element\n */\n _initCanvasElement: function(element) {\n fabric.util.createCanvasElement(element);\n\n if (typeof element.getContext === 'undefined') {\n throw CANVAS_INIT_ERROR;\n }\n },\n\n /**\n * @private\n * @param {Object} [options] Options object\n */\n _initOptions: function (options) {\n for (var prop in options) {\n this[prop] = options[prop];\n }\n\n this.width = this.width || parseInt(this.lowerCanvasEl.width, 10) || 0;\n this.height = this.height || parseInt(this.lowerCanvasEl.height, 10) || 0;\n\n if (!this.lowerCanvasEl.style) {\n return;\n }\n\n this.lowerCanvasEl.width = this.width;\n this.lowerCanvasEl.height = this.height;\n\n this.lowerCanvasEl.style.width = this.width + 'px';\n this.lowerCanvasEl.style.height = this.height + 'px';\n\n this.viewportTransform = this.viewportTransform.slice();\n },\n\n /**\n * Creates a bottom canvas\n * @private\n * @param {HTMLElement} [canvasEl]\n */\n _createLowerCanvas: function (canvasEl) {\n this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement();\n this._initCanvasElement(this.lowerCanvasEl);\n\n fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas');\n\n if (this.interactive) {\n this._applyCanvasStyle(this.lowerCanvasEl);\n }\n\n this.contextContainer = this.lowerCanvasEl.getContext('2d');\n },\n\n /**\n * Returns canvas width (in px)\n * @return {Number}\n */\n getWidth: function () {\n return this.width;\n },\n\n /**\n * Returns canvas height (in px)\n * @return {Number}\n */\n getHeight: function () {\n return this.height;\n },\n\n /**\n * Sets width of this canvas instance\n * @param {Number|String} value Value to set width to\n * @param {Object} [options] Options object\n * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions\n * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n setWidth: function (value, options) {\n return this.setDimensions({ width: value }, options);\n },\n\n /**\n * Sets height of this canvas instance\n * @param {Number|String} value Value to set height to\n * @param {Object} [options] Options object\n * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions\n * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n setHeight: function (value, options) {\n return this.setDimensions({ height: value }, options);\n },\n\n /**\n * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em)\n * @param {Object} dimensions Object with width/height properties\n * @param {Number|String} [dimensions.width] Width of canvas element\n * @param {Number|String} [dimensions.height] Height of canvas element\n * @param {Object} [options] Options object\n * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions\n * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n setDimensions: function (dimensions, options) {\n var cssValue;\n\n options = options || {};\n\n for (var prop in dimensions) {\n cssValue = dimensions[prop];\n\n if (!options.cssOnly) {\n this._setBackstoreDimension(prop, dimensions[prop]);\n cssValue += 'px';\n }\n\n if (!options.backstoreOnly) {\n this._setCssDimension(prop, cssValue);\n }\n }\n\n if (!options.cssOnly) {\n this.renderAll();\n }\n\n this.calcOffset();\n\n return this;\n },\n\n /**\n * Helper for setting width/height\n * @private\n * @param {String} prop property (width|height)\n * @param {Number} value value to set property to\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n _setBackstoreDimension: function (prop, value) {\n this.lowerCanvasEl[prop] = value;\n\n if (this.upperCanvasEl) {\n this.upperCanvasEl[prop] = value;\n }\n\n if (this.cacheCanvasEl) {\n this.cacheCanvasEl[prop] = value;\n }\n\n this[prop] = value;\n\n return this;\n },\n\n /**\n * Helper for setting css width/height\n * @private\n * @param {String} prop property (width|height)\n * @param {String} value value to set property to\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n _setCssDimension: function (prop, value) {\n this.lowerCanvasEl.style[prop] = value;\n\n if (this.upperCanvasEl) {\n this.upperCanvasEl.style[prop] = value;\n }\n\n if (this.wrapperEl) {\n this.wrapperEl.style[prop] = value;\n }\n\n return this;\n },\n\n /**\n * Returns canvas zoom level\n * @return {Number}\n */\n getZoom: function () {\n return Math.sqrt(this.viewportTransform[0] * this.viewportTransform[3]);\n },\n\n /**\n * Sets viewport transform of this canvas instance\n * @param {Array} vpt the transform in the form of context.transform\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n setViewportTransform: function (vpt) {\n this.viewportTransform = vpt;\n this.renderAll();\n for (var i = 0, len = this._objects.length; i < len; i++) {\n this._objects[i].setCoords();\n }\n return this;\n },\n\n /**\n * Sets zoom level of this canvas instance, zoom centered around point\n * @param {fabric.Point} point to zoom with respect to\n * @param {Number} value to set zoom to, less than 1 zooms out\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n zoomToPoint: function (point, value) {\n // TODO: just change the scale, preserve other transformations\n var before = point;\n point = fabric.util.transformPoint(point, fabric.util.invertTransform(this.viewportTransform));\n this.viewportTransform[0] = value;\n this.viewportTransform[3] = value;\n var after = fabric.util.transformPoint(point, this.viewportTransform);\n this.viewportTransform[4] += before.x - after.x;\n this.viewportTransform[5] += before.y - after.y;\n this.renderAll();\n for (var i = 0, len = this._objects.length; i < len; i++) {\n this._objects[i].setCoords();\n }\n return this;\n },\n\n /**\n * Sets zoom level of this canvas instance\n * @param {Number} value to set zoom to, less than 1 zooms out\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n setZoom: function (value) {\n this.zoomToPoint(new fabric.Point(0, 0), value);\n return this;\n },\n\n /**\n * Pan viewport so as to place point at top left corner of canvas\n * @param {fabric.Point} point to move to\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n absolutePan: function (point) {\n this.viewportTransform[4] = -point.x;\n this.viewportTransform[5] = -point.y;\n this.renderAll();\n for (var i = 0, len = this._objects.length; i < len; i++) {\n this._objects[i].setCoords();\n }\n return this;\n },\n\n /**\n * Pans viewpoint relatively\n * @param {fabric.Point} point (position vector) to move by\n * @return {fabric.Canvas} instance\n * @chainable true\n */\n relativePan: function (point) {\n return this.absolutePan(new fabric.Point(\n -point.x - this.viewportTransform[4],\n -point.y - this.viewportTransform[5]\n ));\n },\n\n /**\n * Returns <canvas> element corresponding to this instance\n * @return {HTMLCanvasElement}\n */\n getElement: function () {\n return this.lowerCanvasEl;\n },\n\n /**\n * Returns currently selected object, if any\n * @return {fabric.Object}\n */\n getActiveObject: function() {\n return null;\n },\n\n /**\n * Returns currently selected group of object, if any\n * @return {fabric.Group}\n */\n getActiveGroup: function() {\n return null;\n },\n\n /**\n * Given a context, renders an object on that context\n * @param {CanvasRenderingContext2D} ctx Context to render object on\n * @param {fabric.Object} object Object to render\n * @private\n */\n _draw: function (ctx, object) {\n if (!object) {\n return;\n }\n\n ctx.save();\n var v = this.viewportTransform;\n ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);\n if (this._shouldRenderObject(object)) {\n object.render(ctx);\n }\n ctx.restore();\n if (!this.controlsAboveOverlay) {\n object._renderControls(ctx);\n }\n },\n\n _shouldRenderObject: function(object) {\n if (!object) {\n return false;\n }\n return (object !== this.getActiveGroup() || !this.preserveObjectStacking);\n },\n\n /**\n * @private\n * @param {fabric.Object} obj Object that was added\n */\n _onObjectAdded: function(obj) {\n this.stateful && obj.setupState();\n obj.canvas = this;\n obj.setCoords();\n this.fire('object:added', { target: obj });\n obj.fire('added');\n },\n\n /**\n * @private\n * @param {fabric.Object} obj Object that was removed\n */\n _onObjectRemoved: function(obj) {\n // removing active object should fire \"selection:cleared\" events\n if (this.getActiveObject() === obj) {\n this.fire('before:selection:cleared', { target: obj });\n this._discardActiveObject();\n this.fire('selection:cleared');\n }\n\n this.fire('object:removed', { target: obj });\n obj.fire('removed');\n },\n\n /**\n * Clears specified context of canvas element\n * @param {CanvasRenderingContext2D} ctx Context to clear\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n clearContext: function(ctx) {\n ctx.clearRect(0, 0, this.width, this.height);\n return this;\n },\n\n /**\n * Returns context of canvas where objects are drawn\n * @return {CanvasRenderingContext2D}\n */\n getContext: function () {\n return this.contextContainer;\n },\n\n /**\n * Clears all contexts (background, main, top) of an instance\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n clear: function () {\n this._objects.length = 0;\n if (this.discardActiveGroup) {\n this.discardActiveGroup();\n }\n if (this.discardActiveObject) {\n this.discardActiveObject();\n }\n this.clearContext(this.contextContainer);\n if (this.contextTop) {\n this.clearContext(this.contextTop);\n }\n this.fire('canvas:cleared');\n this.renderAll();\n return this;\n },\n\n /**\n * Renders both the top canvas and the secondary container canvas.\n * @param {Boolean} [allOnTop] Whether we want to force all images to be rendered on the top canvas\n * @return {fabric.Canvas} instance\n * @chainable\n */\n renderAll: function (allOnTop) {\n var canvasToDrawOn = this[(allOnTop === true && this.interactive) ? 'contextTop' : 'contextContainer'],\n activeGroup = this.getActiveGroup();\n\n if (this.contextTop && this.selection && !this._groupSelector) {\n this.clearContext(this.contextTop);\n }\n\n if (!allOnTop) {\n this.clearContext(canvasToDrawOn);\n }\n\n this.fire('before:render');\n\n if (this.clipTo) {\n fabric.util.clipContext(this, canvasToDrawOn);\n }\n\n this._renderBackground(canvasToDrawOn);\n this._renderObjects(canvasToDrawOn, activeGroup);\n this._renderActiveGroup(canvasToDrawOn, activeGroup);\n\n if (this.clipTo) {\n canvasToDrawOn.restore();\n }\n\n this._renderOverlay(canvasToDrawOn);\n\n if (this.controlsAboveOverlay && this.interactive) {\n this.drawControls(canvasToDrawOn);\n }\n\n this.fire('after:render');\n\n return this;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {fabric.Group} activeGroup\n */\n _renderObjects: function(ctx, activeGroup) {\n var i, length;\n\n // fast path\n if (!activeGroup || this.preserveObjectStacking) {\n for (i = 0, length = this._objects.length; i < length; ++i) {\n this._draw(ctx, this._objects[i]);\n }\n }\n else {\n for (i = 0, length = this._objects.length; i < length; ++i) {\n if (this._objects[i] && !activeGroup.contains(this._objects[i])) {\n this._draw(ctx, this._objects[i]);\n }\n }\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {fabric.Group} activeGroup\n */\n _renderActiveGroup: function(ctx, activeGroup) {\n\n // delegate rendering to group selection (if one exists)\n if (activeGroup) {\n\n //Store objects in group preserving order, then replace\n var sortedObjects = [];\n this.forEachObject(function (object) {\n if (activeGroup.contains(object)) {\n sortedObjects.push(object);\n }\n });\n activeGroup._set('objects', sortedObjects);\n this._draw(ctx, activeGroup);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderBackground: function(ctx) {\n if (this.backgroundColor) {\n ctx.fillStyle = this.backgroundColor.toLive\n ? this.backgroundColor.toLive(ctx)\n : this.backgroundColor;\n\n ctx.fillRect(\n this.backgroundColor.offsetX || 0,\n this.backgroundColor.offsetY || 0,\n this.width,\n this.height);\n }\n if (this.backgroundImage) {\n this._draw(ctx, this.backgroundImage);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderOverlay: function(ctx) {\n if (this.overlayColor) {\n ctx.fillStyle = this.overlayColor.toLive\n ? this.overlayColor.toLive(ctx)\n : this.overlayColor;\n\n ctx.fillRect(\n this.overlayColor.offsetX || 0,\n this.overlayColor.offsetY || 0,\n this.width,\n this.height);\n }\n if (this.overlayImage) {\n this._draw(ctx, this.overlayImage);\n }\n },\n\n /**\n * Method to render only the top canvas.\n * Also used to render the group selection box.\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n renderTop: function () {\n var ctx = this.contextTop || this.contextContainer;\n this.clearContext(ctx);\n\n // we render the top context - last object\n if (this.selection && this._groupSelector) {\n this._drawSelection();\n }\n\n // delegate rendering to group selection if one exists\n // used for drawing selection borders/controls\n var activeGroup = this.getActiveGroup();\n if (activeGroup) {\n activeGroup.render(ctx);\n }\n\n this._renderOverlay(ctx);\n\n this.fire('after:render');\n\n return this;\n },\n\n /**\n * Returns coordinates of a center of canvas.\n * Returned value is an object with top and left properties\n * @return {Object} object with \"top\" and \"left\" number values\n */\n getCenter: function () {\n return {\n top: this.getHeight() / 2,\n left: this.getWidth() / 2\n };\n },\n\n /**\n * Centers object horizontally.\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @param {fabric.Object} object Object to center horizontally\n * @return {fabric.Canvas} thisArg\n */\n centerObjectH: function (object) {\n this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y));\n this.renderAll();\n return this;\n },\n\n /**\n * Centers object vertically.\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @param {fabric.Object} object Object to center vertically\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n centerObjectV: function (object) {\n this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top));\n this.renderAll();\n return this;\n },\n\n /**\n * Centers object vertically and horizontally.\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @param {fabric.Object} object Object to center vertically and horizontally\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n centerObject: function(object) {\n var center = this.getCenter();\n\n this._centerObject(object, new fabric.Point(center.left, center.top));\n this.renderAll();\n return this;\n },\n\n /**\n * @private\n * @param {fabric.Object} object Object to center\n * @param {fabric.Point} center Center point\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n _centerObject: function(object, center) {\n object.setPositionByOrigin(center, 'center', 'center');\n return this;\n },\n\n /**\n * Returs dataless JSON representation of canvas\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {String} json string\n */\n toDatalessJSON: function (propertiesToInclude) {\n return this.toDatalessObject(propertiesToInclude);\n },\n\n /**\n * Returns object representation of canvas\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function (propertiesToInclude) {\n return this._toObjectMethod('toObject', propertiesToInclude);\n },\n\n /**\n * Returns dataless object representation of canvas\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toDatalessObject: function (propertiesToInclude) {\n return this._toObjectMethod('toDatalessObject', propertiesToInclude);\n },\n\n /**\n * @private\n */\n _toObjectMethod: function (methodName, propertiesToInclude) {\n\n var activeGroup = this.getActiveGroup();\n if (activeGroup) {\n this.discardActiveGroup();\n }\n\n var data = {\n objects: this._toObjects(methodName, propertiesToInclude)\n };\n\n extend(data, this.__serializeBgOverlay());\n\n fabric.util.populateWithProperties(this, data, propertiesToInclude);\n\n if (activeGroup) {\n this.setActiveGroup(new fabric.Group(activeGroup.getObjects(), {\n originX: 'center',\n originY: 'center'\n }));\n activeGroup.forEachObject(function(o) {\n o.set('active', true);\n });\n\n if (this._currentTransform) {\n this._currentTransform.target = this.getActiveGroup();\n }\n }\n\n return data;\n },\n\n /**\n * @private\n */\n _toObjects: function(methodName, propertiesToInclude) {\n return this.getObjects().map(function(instance) {\n return this._toObject(instance, methodName, propertiesToInclude);\n }, this);\n },\n\n /**\n * @private\n */\n _toObject: function(instance, methodName, propertiesToInclude) {\n var originalValue;\n\n if (!this.includeDefaultValues) {\n originalValue = instance.includeDefaultValues;\n instance.includeDefaultValues = false;\n }\n var object = instance[methodName](propertiesToInclude);\n if (!this.includeDefaultValues) {\n instance.includeDefaultValues = originalValue;\n }\n return object;\n },\n\n /**\n * @private\n */\n __serializeBgOverlay: function() {\n var data = {\n background: (this.backgroundColor && this.backgroundColor.toObject)\n ? this.backgroundColor.toObject()\n : this.backgroundColor\n };\n\n if (this.overlayColor) {\n data.overlay = this.overlayColor.toObject\n ? this.overlayColor.toObject()\n : this.overlayColor;\n }\n if (this.backgroundImage) {\n data.backgroundImage = this.backgroundImage.toObject();\n }\n if (this.overlayImage) {\n data.overlayImage = this.overlayImage.toObject();\n }\n\n return data;\n },\n\n /* _TO_SVG_START_ */\n /**\n * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true,\n * a zoomed canvas will then produce zoomed SVG output.\n * @type Boolean\n * @default\n */\n svgViewportTransformation: true,\n\n /**\n * Returns SVG representation of canvas\n * @function\n * @param {Object} [options] Options object for SVG output\n * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included\n * @param {Object} [options.viewBox] SVG viewbox object\n * @param {Number} [options.viewBox.x] x-cooridnate of viewbox\n * @param {Number} [options.viewBox.y] y-coordinate of viewbox\n * @param {Number} [options.viewBox.width] Width of viewbox\n * @param {Number} [options.viewBox.height] Height of viewbox\n * @param {String} [options.encoding=UTF-8] Encoding of SVG output\n * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation.\n * @return {String} SVG string\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}\n * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo}\n * @example Normal SVG output\n * var svg = canvas.toSVG();\n * @example SVG output without preamble (without <?xml ../>)\n * var svg = canvas.toSVG({suppressPreamble: true});\n * @example SVG output with viewBox attribute\n * var svg = canvas.toSVG({\n * viewBox: {\n * x: 100,\n * y: 100,\n * width: 200,\n * height: 300\n * }\n * });\n * @example SVG output with different encoding (default: UTF-8)\n * var svg = canvas.toSVG({encoding: 'ISO-8859-1'});\n * @example Modify SVG output with reviver function\n * var svg = canvas.toSVG(null, function(svg) {\n * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', '');\n * });\n */\n toSVG: function(options, reviver) {\n options || (options = { });\n\n var markup = [];\n\n this._setSVGPreamble(markup, options);\n this._setSVGHeader(markup, options);\n\n this._setSVGBgOverlayColor(markup, 'backgroundColor');\n this._setSVGBgOverlayImage(markup, 'backgroundImage');\n\n this._setSVGObjects(markup, reviver);\n\n this._setSVGBgOverlayColor(markup, 'overlayColor');\n this._setSVGBgOverlayImage(markup, 'overlayImage');\n\n markup.push('');\n\n return markup.join('');\n },\n\n /**\n * @private\n */\n _setSVGPreamble: function(markup, options) {\n if (!options.suppressPreamble) {\n markup.push(\n '',\n '\\n'\n );\n }\n },\n\n /**\n * @private\n */\n _setSVGHeader: function(markup, options) {\n var width, height, vpt;\n\n if (options.viewBox) {\n width = options.viewBox.width;\n height = options.viewBox.height;\n }\n else {\n width = this.width;\n height = this.height;\n if (!this.svgViewportTransformation) {\n vpt = this.viewportTransform;\n width /= vpt[0];\n height /= vpt[3];\n }\n }\n\n markup.push(\n '',\n 'Created with Fabric.js ', fabric.version, '',\n '',\n fabric.createSVGFontFacesMarkup(this.getObjects()),\n fabric.createSVGRefElementsMarkup(this),\n ''\n );\n },\n\n /**\n * @private\n */\n _setSVGObjects: function(markup, reviver) {\n var activeGroup = this.getActiveGroup();\n if (activeGroup) {\n this.discardActiveGroup();\n }\n for (var i = 0, objects = this.getObjects(), len = objects.length; i < len; i++) {\n markup.push(objects[i].toSVG(reviver));\n }\n if (activeGroup) {\n this.setActiveGroup(new fabric.Group(activeGroup.getObjects()));\n activeGroup.forEachObject(function(o) {\n o.set('active', true);\n });\n }\n },\n\n /**\n * @private\n */\n _setSVGBgOverlayImage: function(markup, property) {\n if (this[property] && this[property].toSVG) {\n markup.push(this[property].toSVG());\n }\n },\n\n /**\n * @private\n */\n _setSVGBgOverlayColor: function(markup, property) {\n if (this[property] && this[property].source) {\n markup.push(\n ''\n );\n }\n else if (this[property] && property === 'overlayColor') {\n markup.push(\n ''\n );\n }\n },\n /* _TO_SVG_END_ */\n\n /**\n * Moves an object to the bottom of the stack of drawn objects\n * @param {fabric.Object} object Object to send to back\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n sendToBack: function (object) {\n removeFromArray(this._objects, object);\n this._objects.unshift(object);\n return this.renderAll && this.renderAll();\n },\n\n /**\n * Moves an object to the top of the stack of drawn objects\n * @param {fabric.Object} object Object to send\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n bringToFront: function (object) {\n removeFromArray(this._objects, object);\n this._objects.push(object);\n return this.renderAll && this.renderAll();\n },\n\n /**\n * Moves an object down in stack of drawn objects\n * @param {fabric.Object} object Object to send\n * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n sendBackwards: function (object, intersecting) {\n var idx = this._objects.indexOf(object);\n\n // if object is not on the bottom of stack\n if (idx !== 0) {\n var newIdx = this._findNewLowerIndex(object, idx, intersecting);\n\n removeFromArray(this._objects, object);\n this._objects.splice(newIdx, 0, object);\n this.renderAll && this.renderAll();\n }\n return this;\n },\n\n /**\n * @private\n */\n _findNewLowerIndex: function(object, idx, intersecting) {\n var newIdx;\n\n if (intersecting) {\n newIdx = idx;\n\n // traverse down the stack looking for the nearest intersecting object\n for (var i = idx - 1; i >= 0; --i) {\n\n var isIntersecting = object.intersectsWithObject(this._objects[i]) ||\n object.isContainedWithinObject(this._objects[i]) ||\n this._objects[i].isContainedWithinObject(object);\n\n if (isIntersecting) {\n newIdx = i;\n break;\n }\n }\n }\n else {\n newIdx = idx - 1;\n }\n\n return newIdx;\n },\n\n /**\n * Moves an object up in stack of drawn objects\n * @param {fabric.Object} object Object to send\n * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n bringForward: function (object, intersecting) {\n var idx = this._objects.indexOf(object);\n\n // if object is not on top of stack (last item in an array)\n if (idx !== this._objects.length - 1) {\n var newIdx = this._findNewUpperIndex(object, idx, intersecting);\n\n removeFromArray(this._objects, object);\n this._objects.splice(newIdx, 0, object);\n this.renderAll && this.renderAll();\n }\n return this;\n },\n\n /**\n * @private\n */\n _findNewUpperIndex: function(object, idx, intersecting) {\n var newIdx;\n\n if (intersecting) {\n newIdx = idx;\n\n // traverse up the stack looking for the nearest intersecting object\n for (var i = idx + 1; i < this._objects.length; ++i) {\n\n var isIntersecting = object.intersectsWithObject(this._objects[i]) ||\n object.isContainedWithinObject(this._objects[i]) ||\n this._objects[i].isContainedWithinObject(object);\n\n if (isIntersecting) {\n newIdx = i;\n break;\n }\n }\n }\n else {\n newIdx = idx + 1;\n }\n\n return newIdx;\n },\n\n /**\n * Moves an object to specified level in stack of drawn objects\n * @param {fabric.Object} object Object to send\n * @param {Number} index Position to move to\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n moveTo: function (object, index) {\n removeFromArray(this._objects, object);\n this._objects.splice(index, 0, object);\n return this.renderAll && this.renderAll();\n },\n\n /**\n * Clears a canvas element and removes all event listeners\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n dispose: function () {\n this.clear();\n this.interactive && this.removeListeners();\n return this;\n },\n\n /**\n * Returns a string representation of an instance\n * @return {String} string representation of an instance\n */\n toString: function () {\n return '#';\n }\n });\n\n extend(fabric.StaticCanvas.prototype, fabric.Observable);\n extend(fabric.StaticCanvas.prototype, fabric.Collection);\n extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter);\n\n extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ {\n\n /**\n * @static\n * @type String\n * @default\n */\n EMPTY_JSON: '{\"objects\": [], \"background\": \"white\"}',\n\n /**\n * Provides a way to check support of some of the canvas methods\n * (either those of HTMLCanvasElement itself, or rendering context)\n *\n * @param {String} methodName Method to check support for;\n * Could be one of \"getImageData\", \"toDataURL\", \"toDataURLWithQuality\" or \"setLineDash\"\n * @return {Boolean | null} `true` if method is supported (or at least exists),\n * `null` if canvas element or context can not be initialized\n */\n supports: function (methodName) {\n var el = fabric.util.createCanvasElement();\n\n if (!el || !el.getContext) {\n return null;\n }\n\n var ctx = el.getContext('2d');\n if (!ctx) {\n return null;\n }\n\n switch (methodName) {\n\n case 'getImageData':\n return typeof ctx.getImageData !== 'undefined';\n\n case 'setLineDash':\n return typeof ctx.setLineDash !== 'undefined';\n\n case 'toDataURL':\n return typeof el.toDataURL !== 'undefined';\n\n case 'toDataURLWithQuality':\n try {\n el.toDataURL('image/jpeg', 0);\n return true;\n }\n catch (e) { }\n return false;\n\n default:\n return null;\n }\n }\n });\n\n /**\n * Returns JSON representation of canvas\n * @function\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {String} JSON string\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}\n * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo}\n * @example JSON without additional properties\n * var json = canvas.toJSON();\n * @example JSON with additional properties included\n * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);\n * @example JSON without default values\n * canvas.includeDefaultValues = false;\n * var json = canvas.toJSON();\n */\n fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject;\n\n})();\n\n\n/**\n * BaseBrush class\n * @class fabric.BaseBrush\n * @see {@link http://fabricjs.com/freedrawing/|Freedrawing demo}\n */\nfabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {\n\n /**\n * Color of a brush\n * @type String\n * @default\n */\n color: 'rgb(0, 0, 0)',\n\n /**\n * Width of a brush\n * @type Number\n * @default\n */\n width: 1,\n\n /**\n * Shadow object representing shadow of this shape.\n * Backwards incompatibility note: This property replaces \"shadowColor\" (String), \"shadowOffsetX\" (Number),\n * \"shadowOffsetY\" (Number) and \"shadowBlur\" (Number) since v1.2.12\n * @type fabric.Shadow\n * @default\n */\n shadow: null,\n\n /**\n * Line endings style of a brush (one of \"butt\", \"round\", \"square\")\n * @type String\n * @default\n */\n strokeLineCap: 'round',\n\n /**\n * Corner style of a brush (one of \"bevil\", \"round\", \"miter\")\n * @type String\n * @default\n */\n strokeLineJoin: 'round',\n\n /**\n * Sets shadow of an object\n * @param {Object|String} [options] Options object or string (e.g. \"2px 2px 10px rgba(0,0,0,0.2)\")\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setShadow: function(options) {\n this.shadow = new fabric.Shadow(options);\n return this;\n },\n\n /**\n * Sets brush styles\n * @private\n */\n _setBrushStyles: function() {\n var ctx = this.canvas.contextTop;\n\n ctx.strokeStyle = this.color;\n ctx.lineWidth = this.width;\n ctx.lineCap = this.strokeLineCap;\n ctx.lineJoin = this.strokeLineJoin;\n },\n\n /**\n * Sets brush shadow styles\n * @private\n */\n _setShadow: function() {\n if (!this.shadow) {\n return;\n }\n\n var ctx = this.canvas.contextTop;\n\n ctx.shadowColor = this.shadow.color;\n ctx.shadowBlur = this.shadow.blur;\n ctx.shadowOffsetX = this.shadow.offsetX;\n ctx.shadowOffsetY = this.shadow.offsetY;\n },\n\n /**\n * Removes brush shadow styles\n * @private\n */\n _resetShadow: function() {\n var ctx = this.canvas.contextTop;\n\n ctx.shadowColor = '';\n ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;\n }\n});\n\n\n(function() {\n\n /**\n * PencilBrush class\n * @class fabric.PencilBrush\n * @extends fabric.BaseBrush\n */\n fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ {\n\n /**\n * Constructor\n * @param {fabric.Canvas} canvas\n * @return {fabric.PencilBrush} Instance of a pencil brush\n */\n initialize: function(canvas) {\n this.canvas = canvas;\n this._points = [ ];\n },\n\n /**\n * Inovoked on mouse down\n * @param {Object} pointer\n */\n onMouseDown: function(pointer) {\n this._prepareForDrawing(pointer);\n // capture coordinates immediately\n // this allows to draw dots (when movement never occurs)\n this._captureDrawingPath(pointer);\n this._render();\n },\n\n /**\n * Inovoked on mouse move\n * @param {Object} pointer\n */\n onMouseMove: function(pointer) {\n this._captureDrawingPath(pointer);\n // redraw curve\n // clear top canvas\n this.canvas.clearContext(this.canvas.contextTop);\n this._render();\n },\n\n /**\n * Invoked on mouse up\n */\n onMouseUp: function() {\n this._finalizeAndAddPath();\n },\n\n /**\n * @private\n * @param {Object} pointer Actual mouse position related to the canvas.\n */\n _prepareForDrawing: function(pointer) {\n\n var p = new fabric.Point(pointer.x, pointer.y);\n\n this._reset();\n this._addPoint(p);\n\n this.canvas.contextTop.moveTo(p.x, p.y);\n },\n\n /**\n * @private\n * @param {fabric.Point} point Point to be added to points array\n */\n _addPoint: function(point) {\n this._points.push(point);\n },\n\n /**\n * Clear points array and set contextTop canvas style.\n * @private\n */\n _reset: function() {\n this._points.length = 0;\n\n this._setBrushStyles();\n this._setShadow();\n },\n\n /**\n * @private\n * @param {Object} pointer Actual mouse position related to the canvas.\n */\n _captureDrawingPath: function(pointer) {\n var pointerPoint = new fabric.Point(pointer.x, pointer.y);\n this._addPoint(pointerPoint);\n },\n\n /**\n * Draw a smooth path on the topCanvas using quadraticCurveTo\n * @private\n */\n _render: function() {\n var ctx = this.canvas.contextTop,\n v = this.canvas.viewportTransform,\n p1 = this._points[0],\n p2 = this._points[1];\n\n ctx.save();\n ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);\n ctx.beginPath();\n\n //if we only have 2 points in the path and they are the same\n //it means that the user only clicked the canvas without moving the mouse\n //then we should be drawing a dot. A path isn't drawn between two identical dots\n //that's why we set them apart a bit\n if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) {\n p1.x -= 0.5;\n p2.x += 0.5;\n }\n ctx.moveTo(p1.x, p1.y);\n\n for (var i = 1, len = this._points.length; i < len; i++) {\n // we pick the point between pi + 1 & pi + 2 as the\n // end point and p1 as our control point.\n var midPoint = p1.midPointFrom(p2);\n ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\n\n p1 = this._points[i];\n p2 = this._points[i + 1];\n }\n // Draw last line as a straight line while\n // we wait for the next point to be able to calculate\n // the bezier control point\n ctx.lineTo(p1.x, p1.y);\n ctx.stroke();\n ctx.restore();\n },\n\n /**\n * Converts points to SVG path\n * @param {Array} points Array of points\n * @param {Number} minX\n * @param {Number} minY\n * @return {String} SVG path\n */\n convertPointsToSVGPath: function(points) {\n var path = [],\n p1 = new fabric.Point(points[0].x, points[0].y),\n p2 = new fabric.Point(points[1].x, points[1].y);\n\n path.push('M ', points[0].x, ' ', points[0].y, ' ');\n for (var i = 1, len = points.length; i < len; i++) {\n var midPoint = p1.midPointFrom(p2);\n // p1 is our bezier control point\n // midpoint is our endpoint\n // start point is p(i-1) value.\n path.push('Q ', p1.x, ' ', p1.y, ' ', midPoint.x, ' ', midPoint.y, ' ');\n p1 = new fabric.Point(points[i].x, points[i].y);\n if ((i + 1) < points.length) {\n p2 = new fabric.Point(points[i + 1].x, points[i + 1].y);\n }\n }\n path.push('L ', p1.x, ' ', p1.y, ' ');\n return path;\n },\n\n /**\n * Creates fabric.Path object to add on canvas\n * @param {String} pathData Path data\n * @return {fabric.Path} Path to add on canvas\n */\n createPath: function(pathData) {\n var path = new fabric.Path(pathData);\n path.fill = null;\n path.stroke = this.color;\n path.strokeWidth = this.width;\n path.strokeLineCap = this.strokeLineCap;\n path.strokeLineJoin = this.strokeLineJoin;\n\n if (this.shadow) {\n this.shadow.affectStroke = true;\n path.setShadow(this.shadow);\n }\n\n return path;\n },\n\n /**\n * On mouseup after drawing the path on contextTop canvas\n * we use the points captured to create an new fabric path object\n * and add it to the fabric canvas.\n */\n _finalizeAndAddPath: function() {\n var ctx = this.canvas.contextTop;\n ctx.closePath();\n\n var pathData = this.convertPointsToSVGPath(this._points).join('');\n if (pathData === 'M 0 0 Q 0 0 0 0 L 0 0') {\n // do not create 0 width/height paths, as they are\n // rendered inconsistently across browsers\n // Firefox 4, for example, renders a dot,\n // whereas Chrome 10 renders nothing\n this.canvas.renderAll();\n return;\n }\n\n var path = this.createPath(pathData);\n\n this.canvas.add(path);\n path.setCoords();\n\n this.canvas.clearContext(this.canvas.contextTop);\n this._resetShadow();\n this.canvas.renderAll();\n\n // fire event 'path' created\n this.canvas.fire('path:created', { path: path });\n }\n });\n})();\n\n\n/**\n * CircleBrush class\n * @class fabric.CircleBrush\n */\nfabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ {\n\n /**\n * Width of a brush\n * @type Number\n * @default\n */\n width: 10,\n\n /**\n * Constructor\n * @param {fabric.Canvas} canvas\n * @return {fabric.CircleBrush} Instance of a circle brush\n */\n initialize: function(canvas) {\n this.canvas = canvas;\n this.points = [ ];\n },\n /**\n * Invoked inside on mouse down and mouse move\n * @param {Object} pointer\n */\n drawDot: function(pointer) {\n var point = this.addPoint(pointer),\n ctx = this.canvas.contextTop,\n v = this.canvas.viewportTransform;\n ctx.save();\n ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);\n\n ctx.fillStyle = point.fill;\n ctx.beginPath();\n ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);\n ctx.closePath();\n ctx.fill();\n\n ctx.restore();\n },\n\n /**\n * Invoked on mouse down\n */\n onMouseDown: function(pointer) {\n this.points.length = 0;\n this.canvas.clearContext(this.canvas.contextTop);\n this._setShadow();\n this.drawDot(pointer);\n },\n\n /**\n * Invoked on mouse move\n * @param {Object} pointer\n */\n onMouseMove: function(pointer) {\n this.drawDot(pointer);\n },\n\n /**\n * Invoked on mouse up\n */\n onMouseUp: function() {\n var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;\n this.canvas.renderOnAddRemove = false;\n\n var circles = [ ];\n\n for (var i = 0, len = this.points.length; i < len; i++) {\n var point = this.points[i],\n circle = new fabric.Circle({\n radius: point.radius,\n left: point.x,\n top: point.y,\n originX: 'center',\n originY: 'center',\n fill: point.fill\n });\n\n this.shadow && circle.setShadow(this.shadow);\n\n circles.push(circle);\n }\n var group = new fabric.Group(circles, { originX: 'center', originY: 'center' });\n group.canvas = this.canvas;\n\n this.canvas.add(group);\n this.canvas.fire('path:created', { path: group });\n\n this.canvas.clearContext(this.canvas.contextTop);\n this._resetShadow();\n this.canvas.renderOnAddRemove = originalRenderOnAddRemove;\n this.canvas.renderAll();\n },\n\n /**\n * @param {Object} pointer\n * @return {fabric.Point} Just added pointer point\n */\n addPoint: function(pointer) {\n var pointerPoint = new fabric.Point(pointer.x, pointer.y),\n\n circleRadius = fabric.util.getRandomInt(\n Math.max(0, this.width - 20), this.width + 20) / 2,\n\n circleColor = new fabric.Color(this.color)\n .setAlpha(fabric.util.getRandomInt(0, 100) / 100)\n .toRgba();\n\n pointerPoint.radius = circleRadius;\n pointerPoint.fill = circleColor;\n\n this.points.push(pointerPoint);\n\n return pointerPoint;\n }\n});\n\n\n/**\n * SprayBrush class\n * @class fabric.SprayBrush\n */\nfabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ {\n\n /**\n * Width of a spray\n * @type Number\n * @default\n */\n width: 10,\n\n /**\n * Density of a spray (number of dots per chunk)\n * @type Number\n * @default\n */\n density: 20,\n\n /**\n * Width of spray dots\n * @type Number\n * @default\n */\n dotWidth: 1,\n\n /**\n * Width variance of spray dots\n * @type Number\n * @default\n */\n dotWidthVariance: 1,\n\n /**\n * Whether opacity of a dot should be random\n * @type Boolean\n * @default\n */\n randomOpacity: false,\n\n /**\n * Whether overlapping dots (rectangles) should be removed (for performance reasons)\n * @type Boolean\n * @default\n */\n optimizeOverlapping: true,\n\n /**\n * Constructor\n * @param {fabric.Canvas} canvas\n * @return {fabric.SprayBrush} Instance of a spray brush\n */\n initialize: function(canvas) {\n this.canvas = canvas;\n this.sprayChunks = [ ];\n },\n\n /**\n * Invoked on mouse down\n * @param {Object} pointer\n */\n onMouseDown: function(pointer) {\n this.sprayChunks.length = 0;\n this.canvas.clearContext(this.canvas.contextTop);\n this._setShadow();\n\n this.addSprayChunk(pointer);\n this.render();\n },\n\n /**\n * Invoked on mouse move\n * @param {Object} pointer\n */\n onMouseMove: function(pointer) {\n this.addSprayChunk(pointer);\n this.render();\n },\n\n /**\n * Invoked on mouse up\n */\n onMouseUp: function() {\n var originalRenderOnAddRemove = this.canvas.renderOnAddRemove;\n this.canvas.renderOnAddRemove = false;\n\n var rects = [ ];\n\n for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) {\n var sprayChunk = this.sprayChunks[i];\n\n for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) {\n\n var rect = new fabric.Rect({\n width: sprayChunk[j].width,\n height: sprayChunk[j].width,\n left: sprayChunk[j].x + 1,\n top: sprayChunk[j].y + 1,\n originX: 'center',\n originY: 'center',\n fill: this.color\n });\n\n this.shadow && rect.setShadow(this.shadow);\n rects.push(rect);\n }\n }\n\n if (this.optimizeOverlapping) {\n rects = this._getOptimizedRects(rects);\n }\n\n var group = new fabric.Group(rects, { originX: 'center', originY: 'center' });\n group.canvas = this.canvas;\n\n this.canvas.add(group);\n this.canvas.fire('path:created', { path: group });\n\n this.canvas.clearContext(this.canvas.contextTop);\n this._resetShadow();\n this.canvas.renderOnAddRemove = originalRenderOnAddRemove;\n this.canvas.renderAll();\n },\n\n /**\n * @private\n * @param {Array} rects\n */\n _getOptimizedRects: function(rects) {\n\n // avoid creating duplicate rects at the same coordinates\n var uniqueRects = { }, key;\n\n for (var i = 0, len = rects.length; i < len; i++) {\n key = rects[i].left + '' + rects[i].top;\n if (!uniqueRects[key]) {\n uniqueRects[key] = rects[i];\n }\n }\n var uniqueRectsArray = [ ];\n for (key in uniqueRects) {\n uniqueRectsArray.push(uniqueRects[key]);\n }\n\n return uniqueRectsArray;\n },\n\n /**\n * Renders brush\n */\n render: function() {\n var ctx = this.canvas.contextTop;\n ctx.fillStyle = this.color;\n\n var v = this.canvas.viewportTransform;\n ctx.save();\n ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);\n\n for (var i = 0, len = this.sprayChunkPoints.length; i < len; i++) {\n var point = this.sprayChunkPoints[i];\n if (typeof point.opacity !== 'undefined') {\n ctx.globalAlpha = point.opacity;\n }\n ctx.fillRect(point.x, point.y, point.width, point.width);\n }\n ctx.restore();\n },\n\n /**\n * @param {Object} pointer\n */\n addSprayChunk: function(pointer) {\n this.sprayChunkPoints = [ ];\n\n var x, y, width, radius = this.width / 2;\n\n for (var i = 0; i < this.density; i++) {\n\n x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius);\n y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius);\n\n if (this.dotWidthVariance) {\n width = fabric.util.getRandomInt(\n // bottom clamp width to 1\n Math.max(1, this.dotWidth - this.dotWidthVariance),\n this.dotWidth + this.dotWidthVariance);\n }\n else {\n width = this.dotWidth;\n }\n\n var point = new fabric.Point(x, y);\n point.width = width;\n\n if (this.randomOpacity) {\n point.opacity = fabric.util.getRandomInt(0, 100) / 100;\n }\n\n this.sprayChunkPoints.push(point);\n }\n\n this.sprayChunks.push(this.sprayChunkPoints);\n }\n});\n\n\n/**\n * PatternBrush class\n * @class fabric.PatternBrush\n * @extends fabric.BaseBrush\n */\nfabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ {\n\n getPatternSrc: function() {\n\n var dotWidth = 20,\n dotDistance = 5,\n patternCanvas = fabric.document.createElement('canvas'),\n patternCtx = patternCanvas.getContext('2d');\n\n patternCanvas.width = patternCanvas.height = dotWidth + dotDistance;\n\n patternCtx.fillStyle = this.color;\n patternCtx.beginPath();\n patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false);\n patternCtx.closePath();\n patternCtx.fill();\n\n return patternCanvas;\n },\n\n getPatternSrcFunction: function() {\n return String(this.getPatternSrc).replace('this.color', '\"' + this.color + '\"');\n },\n\n /**\n * Creates \"pattern\" instance property\n */\n getPattern: function() {\n return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat');\n },\n\n /**\n * Sets brush styles\n */\n _setBrushStyles: function() {\n this.callSuper('_setBrushStyles');\n this.canvas.contextTop.strokeStyle = this.getPattern();\n },\n\n /**\n * Creates path\n */\n createPath: function(pathData) {\n var path = this.callSuper('createPath', pathData);\n path.stroke = new fabric.Pattern({\n source: this.source || this.getPatternSrcFunction()\n });\n return path;\n }\n});\n\n\n(function() {\n\n var getPointer = fabric.util.getPointer,\n degreesToRadians = fabric.util.degreesToRadians,\n radiansToDegrees = fabric.util.radiansToDegrees,\n atan2 = Math.atan2,\n abs = Math.abs,\n\n STROKE_OFFSET = 0.5;\n\n /**\n * Canvas class\n * @class fabric.Canvas\n * @extends fabric.StaticCanvas\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#canvas}\n * @see {@link fabric.Canvas#initialize} for constructor definition\n *\n * @fires object:modified\n * @fires object:rotating\n * @fires object:scaling\n * @fires object:moving\n * @fires object:selected\n *\n * @fires before:selection:cleared\n * @fires selection:cleared\n * @fires selection:created\n *\n * @fires path:created\n * @fires mouse:down\n * @fires mouse:move\n * @fires mouse:up\n * @fires mouse:over\n * @fires mouse:out\n *\n */\n fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ {\n\n /**\n * Constructor\n * @param {HTMLElement | String} el <canvas> element to initialize instance on\n * @param {Object} [options] Options object\n * @return {Object} thisArg\n */\n initialize: function(el, options) {\n options || (options = { });\n\n this._initStatic(el, options);\n this._initInteractive();\n this._createCacheCanvas();\n\n fabric.Canvas.activeInstance = this;\n },\n\n /**\n * When true, objects can be transformed by one side (unproportionally)\n * @type Boolean\n * @default\n */\n uniScaleTransform: false,\n\n /**\n * When true, objects use center point as the origin of scale transformation.\n * Backwards incompatibility note: This property replaces \"centerTransform\" (Boolean).\n * @since 1.3.4\n * @type Boolean\n * @default\n */\n centeredScaling: false,\n\n /**\n * When true, objects use center point as the origin of rotate transformation.\n * Backwards incompatibility note: This property replaces \"centerTransform\" (Boolean).\n * @since 1.3.4\n * @type Boolean\n * @default\n */\n centeredRotation: false,\n\n /**\n * Indicates that canvas is interactive. This property should not be changed.\n * @type Boolean\n * @default\n */\n interactive: true,\n\n /**\n * Indicates whether group selection should be enabled\n * @type Boolean\n * @default\n */\n selection: true,\n\n /**\n * Color of selection\n * @type String\n * @default\n */\n selectionColor: 'rgba(100, 100, 255, 0.3)', // blue\n\n /**\n * Default dash array pattern\n * If not empty the selection border is dashed\n * @type Array\n */\n selectionDashArray: [ ],\n\n /**\n * Color of the border of selection (usually slightly darker than color of selection itself)\n * @type String\n * @default\n */\n selectionBorderColor: 'rgba(255, 255, 255, 0.3)',\n\n /**\n * Width of a line used in object/group selection\n * @type Number\n * @default\n */\n selectionLineWidth: 1,\n\n /**\n * Default cursor value used when hovering over an object on canvas\n * @type String\n * @default\n */\n hoverCursor: 'move',\n\n /**\n * Default cursor value used when moving an object on canvas\n * @type String\n * @default\n */\n moveCursor: 'move',\n\n /**\n * Default cursor value used for the entire canvas\n * @type String\n * @default\n */\n defaultCursor: 'default',\n\n /**\n * Cursor value used during free drawing\n * @type String\n * @default\n */\n freeDrawingCursor: 'crosshair',\n\n /**\n * Cursor value used for rotation point\n * @type String\n * @default\n */\n rotationCursor: 'crosshair',\n\n /**\n * Default element class that's given to wrapper (div) element of canvas\n * @type String\n * @default\n */\n containerClass: 'canvas-container',\n\n /**\n * When true, object detection happens on per-pixel basis rather than on per-bounding-box\n * @type Boolean\n * @default\n */\n perPixelTargetFind: false,\n\n /**\n * Number of pixels around target pixel to tolerate (consider active) during object detection\n * @type Number\n * @default\n */\n targetFindTolerance: 0,\n\n /**\n * When true, target detection is skipped when hovering over canvas. This can be used to improve performance.\n * @type Boolean\n * @default\n */\n skipTargetFind: false,\n\n /**\n * @private\n */\n _initInteractive: function() {\n this._currentTransform = null;\n this._groupSelector = null;\n this._initWrapperElement();\n this._createUpperCanvas();\n this._initEventListeners();\n\n this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this);\n\n this.calcOffset();\n },\n\n /**\n * Resets the current transform to its original values and chooses the type of resizing based on the event\n * @private\n * @param {Event} e Event object fired on mousemove\n */\n _resetCurrentTransform: function(e) {\n var t = this._currentTransform;\n\n t.target.set({\n scaleX: t.original.scaleX,\n scaleY: t.original.scaleY,\n left: t.original.left,\n top: t.original.top\n });\n\n if (this._shouldCenterTransform(e, t.target)) {\n if (t.action === 'rotate') {\n this._setOriginToCenter(t.target);\n }\n else {\n if (t.originX !== 'center') {\n if (t.originX === 'right') {\n t.mouseXSign = -1;\n }\n else {\n t.mouseXSign = 1;\n }\n }\n if (t.originY !== 'center') {\n if (t.originY === 'bottom') {\n t.mouseYSign = -1;\n }\n else {\n t.mouseYSign = 1;\n }\n }\n\n t.originX = 'center';\n t.originY = 'center';\n }\n }\n else {\n t.originX = t.original.originX;\n t.originY = t.original.originY;\n }\n },\n\n /**\n * Checks if point is contained within an area of given object\n * @param {Event} e Event object\n * @param {fabric.Object} target Object to test against\n * @return {Boolean} true if point is contained within an area of given object\n */\n containsPoint: function (e, target) {\n var pointer = this.getPointer(e, true),\n xy = this._normalizePointer(target, pointer);\n\n // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html\n // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html\n return (target.containsPoint(xy) || target._findTargetCorner(pointer));\n },\n\n /**\n * @private\n */\n _normalizePointer: function (object, pointer) {\n var activeGroup = this.getActiveGroup(),\n x = pointer.x,\n y = pointer.y,\n isObjectInGroup = (\n activeGroup &&\n object.type !== 'group' &&\n activeGroup.contains(object)),\n lt;\n\n if (isObjectInGroup) {\n lt = new fabric.Point(activeGroup.left, activeGroup.top);\n lt = fabric.util.transformPoint(lt, this.viewportTransform, true);\n x -= lt.x;\n y -= lt.y;\n }\n return { x: x, y: y };\n },\n\n /**\n * Returns true if object is transparent at a certain location\n * @param {fabric.Object} target Object to check\n * @param {Number} x Left coordinate\n * @param {Number} y Top coordinate\n * @return {Boolean}\n */\n isTargetTransparent: function (target, x, y) {\n var hasBorders = target.hasBorders,\n transparentCorners = target.transparentCorners;\n\n target.hasBorders = target.transparentCorners = false;\n\n this._draw(this.contextCache, target);\n\n target.hasBorders = hasBorders;\n target.transparentCorners = transparentCorners;\n\n var isTransparent = fabric.util.isTransparent(\n this.contextCache, x, y, this.targetFindTolerance);\n\n this.clearContext(this.contextCache);\n\n return isTransparent;\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @param {fabric.Object} target\n */\n _shouldClearSelection: function (e, target) {\n var activeGroup = this.getActiveGroup(),\n activeObject = this.getActiveObject();\n\n return (\n !target\n ||\n (target &&\n activeGroup &&\n !activeGroup.contains(target) &&\n activeGroup !== target &&\n !e.shiftKey)\n ||\n (target && !target.evented)\n ||\n (target &&\n !target.selectable &&\n activeObject &&\n activeObject !== target)\n );\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @param {fabric.Object} target\n */\n _shouldCenterTransform: function (e, target) {\n if (!target) {\n return;\n }\n\n var t = this._currentTransform,\n centerTransform;\n\n if (t.action === 'scale' || t.action === 'scaleX' || t.action === 'scaleY') {\n centerTransform = this.centeredScaling || target.centeredScaling;\n }\n else if (t.action === 'rotate') {\n centerTransform = this.centeredRotation || target.centeredRotation;\n }\n\n return centerTransform ? !e.altKey : e.altKey;\n },\n\n /**\n * @private\n */\n _getOriginFromCorner: function(target, corner) {\n var origin = {\n x: target.originX,\n y: target.originY\n };\n\n if (corner === 'ml' || corner === 'tl' || corner === 'bl') {\n origin.x = 'right';\n }\n else if (corner === 'mr' || corner === 'tr' || corner === 'br') {\n origin.x = 'left';\n }\n\n if (corner === 'tl' || corner === 'mt' || corner === 'tr') {\n origin.y = 'bottom';\n }\n else if (corner === 'bl' || corner === 'mb' || corner === 'br') {\n origin.y = 'top';\n }\n\n return origin;\n },\n\n /**\n * @private\n */\n _getActionFromCorner: function(target, corner) {\n var action = 'drag';\n if (corner) {\n action = (corner === 'ml' || corner === 'mr')\n ? 'scaleX'\n : (corner === 'mt' || corner === 'mb')\n ? 'scaleY'\n : corner === 'mtr'\n ? 'rotate'\n : 'scale';\n }\n return action;\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @param {fabric.Object} target\n */\n _setupCurrentTransform: function (e, target) {\n if (!target) {\n return;\n }\n\n var pointer = this.getPointer(e),\n corner = target._findTargetCorner(this.getPointer(e, true)),\n action = this._getActionFromCorner(target, corner),\n origin = this._getOriginFromCorner(target, corner);\n\n this._currentTransform = {\n target: target,\n action: action,\n scaleX: target.scaleX,\n scaleY: target.scaleY,\n offsetX: pointer.x - target.left,\n offsetY: pointer.y - target.top,\n originX: origin.x,\n originY: origin.y,\n ex: pointer.x,\n ey: pointer.y,\n left: target.left,\n top: target.top,\n theta: degreesToRadians(target.angle),\n width: target.width * target.scaleX,\n mouseXSign: 1,\n mouseYSign: 1\n };\n\n this._currentTransform.original = {\n left: target.left,\n top: target.top,\n scaleX: target.scaleX,\n scaleY: target.scaleY,\n originX: origin.x,\n originY: origin.y\n };\n\n this._resetCurrentTransform(e);\n },\n\n /**\n * Translates object by \"setting\" its left/top\n * @private\n * @param {Number} x pointer's x coordinate\n * @param {Number} y pointer's y coordinate\n */\n _translateObject: function (x, y) {\n var target = this._currentTransform.target;\n\n if (!target.get('lockMovementX')) {\n target.set('left', x - this._currentTransform.offsetX);\n }\n if (!target.get('lockMovementY')) {\n target.set('top', y - this._currentTransform.offsetY);\n }\n },\n\n /**\n * Scales object by invoking its scaleX/scaleY methods\n * @private\n * @param {Number} x pointer's x coordinate\n * @param {Number} y pointer's y coordinate\n * @param {String} by Either 'x' or 'y' - specifies dimension constraint by which to scale an object.\n * When not provided, an object is scaled by both dimensions equally\n */\n _scaleObject: function (x, y, by) {\n var t = this._currentTransform,\n target = t.target,\n lockScalingX = target.get('lockScalingX'),\n lockScalingY = target.get('lockScalingY'),\n lockScalingFlip = target.get('lockScalingFlip');\n\n if (lockScalingX && lockScalingY) {\n return;\n }\n\n // Get the constraint point\n var constraintPosition = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY),\n localMouse = target.toLocalPoint(new fabric.Point(x, y), t.originX, t.originY);\n\n this._setLocalMouse(localMouse, t);\n\n // Actually scale the object\n this._setObjectScale(localMouse, t, lockScalingX, lockScalingY, by, lockScalingFlip);\n\n // Make sure the constraints apply\n target.setPositionByOrigin(constraintPosition, t.originX, t.originY);\n },\n\n /**\n * @private\n */\n _setObjectScale: function(localMouse, transform, lockScalingX, lockScalingY, by, lockScalingFlip) {\n var target = transform.target, forbidScalingX = false, forbidScalingY = false;\n\n transform.newScaleX = localMouse.x / (target.width + target.strokeWidth);\n transform.newScaleY = localMouse.y / (target.height + target.strokeWidth);\n\n if (lockScalingFlip && transform.newScaleX <= 0 && transform.newScaleX < target.scaleX) {\n forbidScalingX = true;\n }\n\n if (lockScalingFlip && transform.newScaleY <= 0 && transform.newScaleY < target.scaleY) {\n forbidScalingY = true;\n }\n\n if (by === 'equally' && !lockScalingX && !lockScalingY) {\n forbidScalingX || forbidScalingY || this._scaleObjectEqually(localMouse, target, transform);\n }\n else if (!by) {\n forbidScalingX || lockScalingX || target.set('scaleX', transform.newScaleX);\n forbidScalingY || lockScalingY || target.set('scaleY', transform.newScaleY);\n }\n else if (by === 'x' && !target.get('lockUniScaling')) {\n forbidScalingX || lockScalingX || target.set('scaleX', transform.newScaleX);\n }\n else if (by === 'y' && !target.get('lockUniScaling')) {\n forbidScalingY || lockScalingY || target.set('scaleY', transform.newScaleY);\n }\n\n forbidScalingX || forbidScalingY || this._flipObject(transform, by);\n\n },\n\n /**\n * @private\n */\n _scaleObjectEqually: function(localMouse, target, transform) {\n\n var dist = localMouse.y + localMouse.x,\n lastDist = (target.height + (target.strokeWidth)) * transform.original.scaleY +\n (target.width + (target.strokeWidth)) * transform.original.scaleX;\n\n // We use transform.scaleX/Y instead of target.scaleX/Y\n // because the object may have a min scale and we'll loose the proportions\n transform.newScaleX = transform.original.scaleX * dist / lastDist;\n transform.newScaleY = transform.original.scaleY * dist / lastDist;\n\n target.set('scaleX', transform.newScaleX);\n target.set('scaleY', transform.newScaleY);\n },\n\n /**\n * @private\n */\n _flipObject: function(transform, by) {\n if (transform.newScaleX < 0 && by !== 'y') {\n if (transform.originX === 'left') {\n transform.originX = 'right';\n }\n else if (transform.originX === 'right') {\n transform.originX = 'left';\n }\n }\n\n if (transform.newScaleY < 0 && by !== 'x') {\n if (transform.originY === 'top') {\n transform.originY = 'bottom';\n }\n else if (transform.originY === 'bottom') {\n transform.originY = 'top';\n }\n }\n },\n\n /**\n * @private\n */\n _setLocalMouse: function(localMouse, t) {\n var target = t.target;\n\n if (t.originX === 'right') {\n localMouse.x *= -1;\n }\n else if (t.originX === 'center') {\n localMouse.x *= t.mouseXSign * 2;\n\n if (localMouse.x < 0) {\n t.mouseXSign = -t.mouseXSign;\n }\n }\n\n if (t.originY === 'bottom') {\n localMouse.y *= -1;\n }\n else if (t.originY === 'center') {\n localMouse.y *= t.mouseYSign * 2;\n\n if (localMouse.y < 0) {\n t.mouseYSign = -t.mouseYSign;\n }\n }\n\n // adjust the mouse coordinates when dealing with padding\n if (abs(localMouse.x) > target.padding) {\n if (localMouse.x < 0) {\n localMouse.x += target.padding;\n }\n else {\n localMouse.x -= target.padding;\n }\n }\n else { // mouse is within the padding, set to 0\n localMouse.x = 0;\n }\n\n if (abs(localMouse.y) > target.padding) {\n if (localMouse.y < 0) {\n localMouse.y += target.padding;\n }\n else {\n localMouse.y -= target.padding;\n }\n }\n else {\n localMouse.y = 0;\n }\n },\n\n /**\n * Rotates object by invoking its rotate method\n * @private\n * @param {Number} x pointer's x coordinate\n * @param {Number} y pointer's y coordinate\n */\n _rotateObject: function (x, y) {\n\n var t = this._currentTransform;\n\n if (t.target.get('lockRotation')) {\n return;\n }\n\n var lastAngle = atan2(t.ey - t.top, t.ex - t.left),\n curAngle = atan2(y - t.top, x - t.left),\n angle = radiansToDegrees(curAngle - lastAngle + t.theta);\n\n // normalize angle to positive value\n if (angle < 0) {\n angle = 360 + angle;\n }\n\n t.target.angle = angle;\n },\n\n /**\n * Set the cursor type of the canvas element\n * @param {String} value Cursor type of the canvas element.\n * @see http://www.w3.org/TR/css3-ui/#cursor\n */\n setCursor: function (value) {\n this.upperCanvasEl.style.cursor = value;\n },\n\n /**\n * @private\n */\n _resetObjectTransform: function (target) {\n target.scaleX = 1;\n target.scaleY = 1;\n target.setAngle(0);\n },\n\n /**\n * @private\n */\n _drawSelection: function () {\n var ctx = this.contextTop,\n groupSelector = this._groupSelector,\n left = groupSelector.left,\n top = groupSelector.top,\n aleft = abs(left),\n atop = abs(top);\n\n ctx.fillStyle = this.selectionColor;\n\n ctx.fillRect(\n groupSelector.ex - ((left > 0) ? 0 : -left),\n groupSelector.ey - ((top > 0) ? 0 : -top),\n aleft,\n atop\n );\n\n ctx.lineWidth = this.selectionLineWidth;\n ctx.strokeStyle = this.selectionBorderColor;\n\n // selection border\n if (this.selectionDashArray.length > 1) {\n\n var px = groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0: aleft),\n py = groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0: atop);\n\n ctx.beginPath();\n\n fabric.util.drawDashedLine(ctx, px, py, px + aleft, py, this.selectionDashArray);\n fabric.util.drawDashedLine(ctx, px, py + atop - 1, px + aleft, py + atop - 1, this.selectionDashArray);\n fabric.util.drawDashedLine(ctx, px, py, px, py + atop, this.selectionDashArray);\n fabric.util.drawDashedLine(ctx, px + aleft - 1, py, px + aleft - 1, py + atop, this.selectionDashArray);\n\n ctx.closePath();\n ctx.stroke();\n }\n else {\n ctx.strokeRect(\n groupSelector.ex + STROKE_OFFSET - ((left > 0) ? 0 : aleft),\n groupSelector.ey + STROKE_OFFSET - ((top > 0) ? 0 : atop),\n aleft,\n atop\n );\n }\n },\n\n /**\n * @private\n */\n _isLastRenderedObject: function(e) {\n return (\n this.controlsAboveOverlay &&\n this.lastRenderedObjectWithControlsAboveOverlay &&\n this.lastRenderedObjectWithControlsAboveOverlay.visible &&\n this.containsPoint(e, this.lastRenderedObjectWithControlsAboveOverlay) &&\n this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(this.getPointer(e, true)));\n },\n\n /**\n * Method that determines what object we are clicking on\n * @param {Event} e mouse event\n * @param {Boolean} skipGroup when true, group is skipped and only objects are traversed through\n */\n findTarget: function (e, skipGroup) {\n if (this.skipTargetFind) {\n return;\n }\n\n if (this._isLastRenderedObject(e)) {\n return this.lastRenderedObjectWithControlsAboveOverlay;\n }\n\n // first check current group (if one exists)\n var activeGroup = this.getActiveGroup();\n if (activeGroup && !skipGroup && this.containsPoint(e, activeGroup)) {\n return activeGroup;\n }\n\n var target = this._searchPossibleTargets(e);\n this._fireOverOutEvents(target);\n\n return target;\n },\n\n /**\n * @private\n */\n _fireOverOutEvents: function(target) {\n if (target) {\n if (this._hoveredTarget !== target) {\n this.fire('mouse:over', { target: target });\n target.fire('mouseover');\n if (this._hoveredTarget) {\n this.fire('mouse:out', { target: this._hoveredTarget });\n //TODO: Sean fixed bug 5-19-2014\n if (!this._hoveredTarget.fire)\n return;\n this._hoveredTarget.fire('mouseout');\n }\n this._hoveredTarget = target;\n }\n }\n else if (this._hoveredTarget) {\n this.fire('mouse:out', { target: this._hoveredTarget });\n //TODO: Sean fixed bug 6-4-2014\n if (!this._hoveredTarget.fire)\n return;\n this._hoveredTarget.fire('mouseout');\n this._hoveredTarget = null;\n }\n },\n\n /**\n * @private\n */\n _checkTarget: function(e, obj, pointer) {\n if (obj &&\n obj.visible &&\n obj.evented &&\n this.containsPoint(e, obj)){\n if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) {\n var isTransparent = this.isTargetTransparent(obj, pointer.x, pointer.y);\n if (!isTransparent) {\n return true;\n }\n }\n else {\n return true;\n }\n }\n },\n\n /**\n * @private\n */\n _searchPossibleTargets: function(e) {\n\n // Cache all targets where their bounding box contains point.\n var target,\n pointer = this.getPointer(e, true),\n i = this._objects.length;\n\n while (i--) {\n if (this._checkTarget(e, this._objects[i], pointer)){\n this.relatedTarget = this._objects[i];\n target = this._objects[i];\n break;\n }\n }\n\n return target;\n },\n\n /**\n * Returns pointer coordinates relative to canvas.\n * @param {Event} e\n * @return {Object} object with \"x\" and \"y\" number values\n */\n getPointer: function (e, ignoreZoom, upperCanvasEl) {\n if (!upperCanvasEl) {\n upperCanvasEl = this.upperCanvasEl;\n }\n var pointer = getPointer(e, upperCanvasEl),\n bounds = upperCanvasEl.getBoundingClientRect(),\n boundsWidth = bounds.width || 0,\n boundsHeight = bounds.height || 0,\n cssScale;\n\n if (!boundsWidth || !boundsHeight ) {\n if ('top' in bounds && 'bottom' in bounds) {\n boundsHeight = Math.abs( bounds.top - bounds.bottom );\n }\n if ('right' in bounds && 'left' in bounds) {\n boundsWidth = Math.abs( bounds.right - bounds.left );\n }\n }\n\n this.calcOffset();\n\n pointer.x = pointer.x - this._offset.left;\n pointer.y = pointer.y - this._offset.top;\n if (!ignoreZoom) {\n pointer = fabric.util.transformPoint(\n pointer,\n fabric.util.invertTransform(this.viewportTransform)\n );\n }\n\n if (boundsWidth === 0 || boundsHeight === 0) {\n // If bounds are not available (i.e. not visible), do not apply scale.\n cssScale = { width: 1, height: 1 };\n }\n else {\n cssScale = {\n width: upperCanvasEl.width / boundsWidth,\n height: upperCanvasEl.height / boundsHeight\n };\n }\n\n return {\n x: pointer.x * cssScale.width,\n y: pointer.y * cssScale.height\n };\n },\n\n /**\n * @private\n * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized\n */\n _createUpperCanvas: function () {\n var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\\s*lower-canvas\\s*/, '');\n\n this.upperCanvasEl = this._createCanvasElement();\n fabric.util.addClass(this.upperCanvasEl, 'upper-canvas ' + lowerCanvasClass);\n\n this.wrapperEl.appendChild(this.upperCanvasEl);\n\n this._copyCanvasStyle(this.lowerCanvasEl, this.upperCanvasEl);\n this._applyCanvasStyle(this.upperCanvasEl);\n this.contextTop = this.upperCanvasEl.getContext('2d');\n },\n\n /**\n * @private\n */\n _createCacheCanvas: function () {\n this.cacheCanvasEl = this._createCanvasElement();\n this.cacheCanvasEl.setAttribute('width', this.width);\n this.cacheCanvasEl.setAttribute('height', this.height);\n this.contextCache = this.cacheCanvasEl.getContext('2d');\n },\n\n /**\n * @private\n */\n _initWrapperElement: function () {\n this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', {\n 'class': this.containerClass\n });\n fabric.util.setStyle(this.wrapperEl, {\n width: this.getWidth() + 'px',\n height: this.getHeight() + 'px',\n position: 'relative'\n });\n fabric.util.makeElementUnselectable(this.wrapperEl);\n },\n\n /**\n * @private\n * @param {HTMLElement} element canvas element to apply styles on\n */\n _applyCanvasStyle: function (element) {\n var width = this.getWidth() || element.width,\n height = this.getHeight() || element.height;\n\n fabric.util.setStyle(element, {\n position: 'absolute',\n width: width + 'px',\n height: height + 'px',\n left: 0,\n top: 0\n });\n element.width = width;\n element.height = height;\n fabric.util.makeElementUnselectable(element);\n },\n\n /**\n * Copys the the entire inline style from one element (fromEl) to another (toEl)\n * @private\n * @param {Element} fromEl Element style is copied from\n * @param {Element} toEl Element copied style is applied to\n */\n _copyCanvasStyle: function (fromEl, toEl) {\n toEl.style.cssText = fromEl.style.cssText;\n },\n\n /**\n * Returns context of canvas where object selection is drawn\n * @return {CanvasRenderingContext2D}\n */\n getSelectionContext: function() {\n return this.contextTop;\n },\n\n /**\n * Returns <canvas> element on which object selection is drawn\n * @return {HTMLCanvasElement}\n */\n getSelectionElement: function () {\n return this.upperCanvasEl;\n },\n\n /**\n * @private\n * @param {Object} object\n */\n _setActiveObject: function(object) {\n if (this._activeObject) {\n this._activeObject.set('active', false);\n }\n this._activeObject = object;\n object.set('active', true);\n },\n\n /**\n * Sets given object as the only active object on canvas\n * @param {fabric.Object} object Object to set as an active one\n * @param {Event} [e] Event (passed along when firing \"object:selected\")\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n setActiveObject: function (object, e) {\n this._setActiveObject(object);\n this.renderAll();\n this.fire('object:selected', { target: object, e: e });\n object.fire('selected', { e: e });\n return this;\n },\n\n /**\n * Returns currently active object\n * @return {fabric.Object} active object\n */\n getActiveObject: function () {\n return this._activeObject;\n },\n\n /**\n * @private\n */\n _discardActiveObject: function() {\n if (this._activeObject) {\n this._activeObject.set('active', false);\n }\n this._activeObject = null;\n },\n\n /**\n * Discards currently active object\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n discardActiveObject: function (e) {\n this._discardActiveObject();\n this.renderAll();\n this.fire('selection:cleared', { e: e });\n return this;\n },\n\n /**\n * @private\n * @param {fabric.Group} group\n */\n _setActiveGroup: function(group) {\n this._activeGroup = group;\n if (group) {\n group.set('active', true);\n }\n },\n\n /**\n * Sets active group to a speicified one\n * @param {fabric.Group} group Group to set as a current one\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n setActiveGroup: function (group, e) {\n this._setActiveGroup(group);\n if (group) {\n this.fire('object:selected', { target: group, e: e });\n group.fire('selected', { e: e });\n }\n return this;\n },\n\n /**\n * Returns currently active group\n * @return {fabric.Group} Current group\n */\n getActiveGroup: function () {\n return this._activeGroup;\n },\n\n /**\n * @private\n */\n _discardActiveGroup: function() {\n var g = this.getActiveGroup();\n if (g) {\n g.destroy();\n }\n this.setActiveGroup(null);\n },\n\n /**\n * Discards currently active group\n * @return {fabric.Canvas} thisArg\n */\n discardActiveGroup: function (e) {\n this._discardActiveGroup();\n this.fire('selection:cleared', { e: e });\n return this;\n },\n\n /**\n * Deactivates all objects on canvas, removing any active group or object\n * @return {fabric.Canvas} thisArg\n */\n deactivateAll: function () {\n var allObjects = this.getObjects(),\n i = 0,\n len = allObjects.length;\n for ( ; i < len; i++) {\n allObjects[i].set('active', false);\n }\n this._discardActiveGroup();\n this._discardActiveObject();\n return this;\n },\n\n /**\n * Deactivates all objects and dispatches appropriate events\n * @return {fabric.Canvas} thisArg\n */\n deactivateAllWithDispatch: function (e) {\n var activeObject = this.getActiveGroup() || this.getActiveObject();\n if (activeObject) {\n this.fire('before:selection:cleared', { target: activeObject, e: e });\n }\n this.deactivateAll();\n if (activeObject) {\n this.fire('selection:cleared', { e: e });\n }\n return this;\n },\n\n /**\n * Draws objects' controls (borders/controls)\n * @param {CanvasRenderingContext2D} ctx Context to render controls on\n */\n drawControls: function(ctx) {\n var activeGroup = this.getActiveGroup();\n if (activeGroup) {\n this._drawGroupControls(ctx, activeGroup);\n }\n else {\n this._drawObjectsControls(ctx);\n }\n },\n\n /**\n * @private\n */\n _drawGroupControls: function(ctx, activeGroup) {\n activeGroup._renderControls(ctx);\n },\n\n /**\n * @private\n */\n _drawObjectsControls: function(ctx) {\n for (var i = 0, len = this._objects.length; i < len; ++i) {\n if (!this._objects[i] || !this._objects[i].active) {\n continue;\n }\n this._objects[i]._renderControls(ctx);\n this.lastRenderedObjectWithControlsAboveOverlay = this._objects[i];\n }\n }\n });\n\n // copying static properties manually to work around Opera's bug,\n // where \"prototype\" property is enumerable and overrides existing prototype\n for (var prop in fabric.StaticCanvas) {\n if (prop !== 'prototype') {\n fabric.Canvas[prop] = fabric.StaticCanvas[prop];\n }\n }\n\n if (fabric.isTouchSupported) {\n /** @ignore */\n fabric.Canvas.prototype._setCursorFromEvent = function() { };\n }\n\n /**\n * @class fabric.Element\n * @alias fabric.Canvas\n * @deprecated Use {@link fabric.Canvas} instead.\n * @constructor\n */\n fabric.Element = fabric.Canvas;\n})()\n;\n\n\n(function() {\n\n var cursorOffset = {\n mt: 0, // n\n tr: 1, // ne\n mr: 2, // e\n br: 3, // se\n mb: 4, // s\n bl: 5, // sw\n ml: 6, // w\n tl: 7 // nw\n },\n addListener = fabric.util.addListener,\n removeListener = fabric.util.removeListener;\n\n fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {\n\n /**\n * Map of cursor style values for each of the object controls\n * @private\n */\n cursorMap: [\n 'n-resize',\n 'ne-resize',\n 'e-resize',\n 'se-resize',\n 's-resize',\n 'sw-resize',\n 'w-resize',\n 'nw-resize'\n ],\n\n /**\n * Adds mouse listeners to canvas\n * @private\n */\n _initEventListeners: function () {\n\n this._bindEvents();\n\n addListener(fabric.window, 'resize', this._onResize);\n\n // mouse events\n addListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);\n addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);\n addListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);\n\n // touch events\n addListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);\n addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);\n\n if (typeof Event !== 'undefined' && 'add' in Event) {\n Event.add(this.upperCanvasEl, 'gesture', this._onGesture);\n Event.add(this.upperCanvasEl, 'drag', this._onDrag);\n Event.add(this.upperCanvasEl, 'orientation', this._onOrientationChange);\n Event.add(this.upperCanvasEl, 'shake', this._onShake);\n }\n },\n\n /**\n * @private\n */\n _bindEvents: function() {\n this._onMouseDown = this._onMouseDown.bind(this);\n this._onMouseMove = this._onMouseMove.bind(this);\n this._onMouseUp = this._onMouseUp.bind(this);\n this._onResize = this._onResize.bind(this);\n this._onGesture = this._onGesture.bind(this);\n this._onDrag = this._onDrag.bind(this);\n this._onShake = this._onShake.bind(this);\n this._onOrientationChange = this._onOrientationChange.bind(this);\n this._onMouseWheel = this._onMouseWheel.bind(this);\n },\n\n /**\n * Removes all event listeners\n */\n removeListeners: function() {\n removeListener(fabric.window, 'resize', this._onResize);\n\n removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);\n removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);\n removeListener(this.upperCanvasEl, 'mousewheel', this._onMouseWheel);\n\n removeListener(this.upperCanvasEl, 'touchstart', this._onMouseDown);\n removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);\n\n if (typeof Event !== 'undefined' && 'remove' in Event) {\n Event.remove(this.upperCanvasEl, 'gesture', this._onGesture);\n Event.remove(this.upperCanvasEl, 'drag', this._onDrag);\n Event.remove(this.upperCanvasEl, 'orientation', this._onOrientationChange);\n Event.remove(this.upperCanvasEl, 'shake', this._onShake);\n }\n },\n\n /**\n * @private\n * @param {Event} [e] Event object fired on Event.js gesture\n * @param {Event} [self] Inner Event object\n */\n _onGesture: function(e, self) {\n this.__onTransformGesture && this.__onTransformGesture(e, self);\n },\n\n /**\n * @private\n * @param {Event} [e] Event object fired on Event.js drag\n * @param {Event} [self] Inner Event object\n */\n _onDrag: function(e, self) {\n this.__onDrag && this.__onDrag(e, self);\n },\n\n /**\n * @private\n * @param {Event} [e] Event object fired on Event.js wheel event\n * @param {Event} [self] Inner Event object\n */\n _onMouseWheel: function(e, self) {\n this.__onMouseWheel && this.__onMouseWheel(e, self);\n },\n\n /**\n * @private\n * @param {Event} [e] Event object fired on Event.js orientation change\n * @param {Event} [self] Inner Event object\n */\n _onOrientationChange: function(e, self) {\n this.__onOrientationChange && this.__onOrientationChange(e, self);\n },\n\n /**\n * @private\n * @param {Event} [e] Event object fired on Event.js shake\n * @param {Event} [self] Inner Event object\n */\n _onShake: function(e, self) {\n this.__onShake && this.__onShake(e, self);\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mousedown\n */\n _onMouseDown: function (e) {\n this.__onMouseDown(e);\n\n addListener(fabric.document, 'touchend', this._onMouseUp);\n addListener(fabric.document, 'touchmove', this._onMouseMove);\n\n removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);\n removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);\n\n if (e.type === 'touchstart') {\n // Unbind mousedown to prevent double triggers from touch devices\n removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);\n }\n else {\n addListener(fabric.document, 'mouseup', this._onMouseUp);\n addListener(fabric.document, 'mousemove', this._onMouseMove);\n }\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mouseup\n */\n _onMouseUp: function (e) {\n this.__onMouseUp(e);\n\n removeListener(fabric.document, 'mouseup', this._onMouseUp);\n removeListener(fabric.document, 'touchend', this._onMouseUp);\n\n removeListener(fabric.document, 'mousemove', this._onMouseMove);\n removeListener(fabric.document, 'touchmove', this._onMouseMove);\n\n addListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);\n addListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);\n\n if (e.type === 'touchend') {\n // Wait 400ms before rebinding mousedown to prevent double triggers\n // from touch devices\n var _this = this;\n setTimeout(function() {\n addListener(_this.upperCanvasEl, 'mousedown', _this._onMouseDown);\n }, 400);\n }\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mousemove\n */\n _onMouseMove: function (e) {\n !this.allowTouchScrolling && e.preventDefault && e.preventDefault();\n this.__onMouseMove(e);\n },\n\n /**\n * @private\n */\n _onResize: function () {\n this.calcOffset();\n },\n\n /**\n * Decides whether the canvas should be redrawn in mouseup and mousedown events.\n * @private\n * @param {Object} target\n * @param {Object} pointer\n */\n _shouldRender: function(target, pointer) {\n var activeObject = this.getActiveGroup() || this.getActiveObject();\n\n return !!(\n (target && (\n target.isMoving ||\n target !== activeObject))\n ||\n (!target && !!activeObject)\n ||\n (!target && !activeObject && !this._groupSelector)\n ||\n (pointer &&\n this._previousPointer &&\n this.selection && (\n pointer.x !== this._previousPointer.x ||\n pointer.y !== this._previousPointer.y))\n );\n },\n\n /**\n * Method that defines the actions when mouse is released on canvas.\n * The method resets the currentTransform parameters, store the image corner\n * position in the image object and render the canvas on top.\n * @private\n * @param {Event} e Event object fired on mouseup\n */\n __onMouseUp: function (e) {\n var target;\n\n if (this.isDrawingMode && this._isCurrentlyDrawing) {\n this._onMouseUpInDrawingMode(e);\n return;\n }\n\n if (this._currentTransform) {\n this._finalizeCurrentTransform();\n target = this._currentTransform.target;\n }\n else {\n target = this.findTarget(e, true);\n }\n\n var shouldRender = this._shouldRender(target, this.getPointer(e));\n\n this._maybeGroupObjects(e);\n\n if (target) {\n target.isMoving = false;\n }\n\n shouldRender && this.renderAll();\n\n this._handleCursorAndEvent(e, target);\n },\n\n _handleCursorAndEvent: function(e, target) {\n this._setCursorFromEvent(e, target);\n\n // TODO: why are we doing this?\n var _this = this;\n setTimeout(function () {\n _this._setCursorFromEvent(e, target);\n }, 50);\n\n this.fire('mouse:up', { target: target, e: e });\n target && target.fire('mouseup', { e: e });\n },\n\n /**\n * @private\n */\n _finalizeCurrentTransform: function() {\n\n var transform = this._currentTransform,\n target = transform.target;\n\n if (target._scaling) {\n target._scaling = false;\n }\n\n target.setCoords();\n\n // only fire :modified event if target coordinates were changed during mousedown-mouseup\n if (this.stateful && target.hasStateChanged()) {\n this.fire('object:modified', { target: target });\n target.fire('modified');\n }\n\n this._restoreOriginXY(target);\n },\n\n /**\n * @private\n * @param {Object} target Object to restore\n */\n _restoreOriginXY: function(target) {\n if (this._previousOriginX && this._previousOriginY) {\n\n var originPoint = target.translateToOriginPoint(\n target.getCenterPoint(),\n this._previousOriginX,\n this._previousOriginY);\n\n target.originX = this._previousOriginX;\n target.originY = this._previousOriginY;\n\n target.left = originPoint.x;\n target.top = originPoint.y;\n\n this._previousOriginX = null;\n this._previousOriginY = null;\n }\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mousedown\n */\n _onMouseDownInDrawingMode: function(e) {\n this._isCurrentlyDrawing = true;\n this.discardActiveObject(e).renderAll();\n if (this.clipTo) {\n fabric.util.clipContext(this, this.contextTop);\n }\n var ivt = fabric.util.invertTransform(this.viewportTransform),\n pointer = fabric.util.transformPoint(this.getPointer(e, true), ivt);\n this.freeDrawingBrush.onMouseDown(pointer);\n this.fire('mouse:down', { e: e });\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mousemove\n */\n _onMouseMoveInDrawingMode: function(e) {\n if (this._isCurrentlyDrawing) {\n var ivt = fabric.util.invertTransform(this.viewportTransform),\n pointer = fabric.util.transformPoint(this.getPointer(e, true), ivt);\n this.freeDrawingBrush.onMouseMove(pointer);\n }\n this.setCursor(this.freeDrawingCursor);\n this.fire('mouse:move', { e: e });\n },\n\n /**\n * @private\n * @param {Event} e Event object fired on mouseup\n */\n _onMouseUpInDrawingMode: function(e) {\n this._isCurrentlyDrawing = false;\n if (this.clipTo) {\n this.contextTop.restore();\n }\n this.freeDrawingBrush.onMouseUp();\n this.fire('mouse:up', { e: e });\n },\n\n /**\n * Method that defines the actions when mouse is clic ked on canvas.\n * The method inits the currentTransform parameters and renders all the\n * canvas so the current image can be placed on the top canvas and the rest\n * in on the container one.\n * @private\n * @param {Event} e Event object fired on mousedown\n */\n __onMouseDown: function (e) {\n\n // accept only left clicks\n var isLeftClick = 'which' in e ? e.which === 1 : e.button === 1;\n if (!isLeftClick && !fabric.isTouchSupported) {\n return;\n }\n\n if (this.isDrawingMode) {\n this._onMouseDownInDrawingMode(e);\n return;\n }\n\n // ignore if some object is being transformed at this moment\n if (this._currentTransform) {\n return;\n }\n\n var target = this.findTarget(e),\n pointer = this.getPointer(e, true);\n\n // save pointer for check in __onMouseUp event\n this._previousPointer = pointer;\n\n var shouldRender = this._shouldRender(target, pointer),\n shouldGroup = this._shouldGroup(e, target);\n\n if (this._shouldClearSelection(e, target)) {\n this._clearSelection(e, target, pointer);\n }\n else if (shouldGroup) {\n this._handleGrouping(e, target);\n target = this.getActiveGroup();\n }\n\n if (target && target.selectable && !shouldGroup) {\n this._beforeTransform(e, target);\n this._setupCurrentTransform(e, target);\n }\n // we must renderAll so that active image is placed on the top canvas\n shouldRender && this.renderAll();\n\n this.fire('mouse:down', { target: target, e: e });\n target && target.fire('mousedown', { e: e });\n },\n\n /**\n * @private\n */\n _beforeTransform: function(e, target) {\n var corner;\n\n this.stateful && target.saveState();\n\n // determine if it's a drag or rotate case\n if ((corner = target._findTargetCorner(this.getPointer(e)))) {\n this.onBeforeScaleRotate(target);\n }\n\n if (target !== this.getActiveGroup() && target !== this.getActiveObject()) {\n this.deactivateAll();\n this.setActiveObject(target, e);\n }\n },\n\n /**\n * @private\n */\n _clearSelection: function(e, target, pointer) {\n this.deactivateAllWithDispatch(e);\n\n if (target && target.selectable) {\n this.setActiveObject(target, e);\n }\n else if (this.selection) {\n this._groupSelector = {\n ex: pointer.x,\n ey: pointer.y,\n top: 0,\n left: 0\n };\n }\n },\n\n /**\n * @private\n * @param {Object} target Object for that origin is set to center\n */\n _setOriginToCenter: function(target) {\n this._previousOriginX = this._currentTransform.target.originX;\n this._previousOriginY = this._currentTransform.target.originY;\n\n var center = target.getCenterPoint();\n\n target.originX = 'center';\n target.originY = 'center';\n\n target.left = center.x;\n target.top = center.y;\n\n this._currentTransform.left = target.left;\n this._currentTransform.top = target.top;\n },\n\n /**\n * @private\n * @param {Object} target Object for that center is set to origin\n */\n _setCenterToOrigin: function(target) {\n var originPoint = target.translateToOriginPoint(\n target.getCenterPoint(),\n this._previousOriginX,\n this._previousOriginY);\n\n target.originX = this._previousOriginX;\n target.originY = this._previousOriginY;\n\n target.left = originPoint.x;\n target.top = originPoint.y;\n\n this._previousOriginX = null;\n this._previousOriginY = null;\n },\n\n /**\n * Method that defines the actions when mouse is hovering the canvas.\n * The currentTransform parameter will definde whether the user is rotating/scaling/translating\n * an image or neither of them (only hovering). A group selection is also possible and would cancel\n * all any other type of action.\n * In case of an image transformation only the top canvas will be rendered.\n * @private\n * @param {Event} e Event object fired on mousemove\n */\n __onMouseMove: function (e) {\n\n var target, pointer;\n\n if (this.isDrawingMode) {\n this._onMouseMoveInDrawingMode(e);\n return;\n }\n\n var groupSelector = this._groupSelector;\n\n // We initially clicked in an empty area, so we draw a box for multiple selection\n if (groupSelector) {\n pointer = this.getPointer(e, true);\n\n groupSelector.left = pointer.x - groupSelector.ex;\n groupSelector.top = pointer.y - groupSelector.ey;\n\n this.renderTop();\n }\n else if (!this._currentTransform) {\n\n target = this.findTarget(e);\n\n if (!target || target && !target.selectable) {\n this.setCursor(this.defaultCursor);\n }\n else {\n this._setCursorFromEvent(e, target);\n }\n }\n else {\n this._transformObject(e);\n }\n\n this.fire('mouse:move', { target: target, e: e });\n target && target.fire('mousemove', { e: e });\n },\n\n /**\n * @private\n * @param {Event} e Event fired on mousemove\n */\n _transformObject: function(e) {\n var pointer = this.getPointer(e),\n transform = this._currentTransform;\n\n transform.reset = false,\n transform.target.isMoving = true;\n\n this._beforeScaleTransform(e, transform);\n this._performTransformAction(e, transform, pointer);\n\n this.renderAll();\n },\n\n /**\n * @private\n */\n _performTransformAction: function(e, transform, pointer) {\n var x = pointer.x,\n y = pointer.y,\n target = transform.target,\n action = transform.action;\n\n if (action === 'rotate') {\n this._rotateObject(x, y);\n this._fire('rotating', target, e);\n }\n else if (action === 'scale') {\n this._onScale(e, transform, x, y);\n this._fire('scaling', target, e);\n }\n else if (action === 'scaleX') {\n this._scaleObject(x, y, 'x');\n this._fire('scaling', target, e);\n }\n else if (action === 'scaleY') {\n this._scaleObject(x, y, 'y');\n this._fire('scaling', target, e);\n }\n else {\n this._translateObject(x, y);\n this._fire('moving', target, e);\n this.setCursor(this.moveCursor);\n }\n },\n\n /**\n * @private\n */\n _fire: function(eventName, target, e) {\n this.fire('object:' + eventName, { target: target, e: e });\n target.fire(eventName, { e: e });\n },\n\n /**\n * @private\n */\n _beforeScaleTransform: function(e, transform) {\n if (transform.action === 'scale' || transform.action === 'scaleX' || transform.action === 'scaleY') {\n var centerTransform = this._shouldCenterTransform(e, transform.target);\n\n // Switch from a normal resize to center-based\n if ((centerTransform && (transform.originX !== 'center' || transform.originY !== 'center')) ||\n // Switch from center-based resize to normal one\n (!centerTransform && transform.originX === 'center' && transform.originY === 'center')\n ) {\n this._resetCurrentTransform(e);\n transform.reset = true;\n }\n }\n },\n\n /**\n * @private\n */\n _onScale: function(e, transform, x, y) {\n // rotate object only if shift key is not pressed\n // and if it is not a group we are transforming\n if ((e.shiftKey || this.uniScaleTransform) && !transform.target.get('lockUniScaling')) {\n transform.currentAction = 'scale';\n this._scaleObject(x, y);\n }\n else {\n // Switch from a normal resize to proportional\n if (!transform.reset && transform.currentAction === 'scale') {\n this._resetCurrentTransform(e, transform.target);\n }\n\n transform.currentAction = 'scaleEqually';\n this._scaleObject(x, y, 'equally');\n }\n },\n\n /**\n * Sets the cursor depending on where the canvas is being hovered.\n * Note: very buggy in Opera\n * @param {Event} e Event object\n * @param {Object} target Object that the mouse is hovering, if so.\n */\n _setCursorFromEvent: function (e, target) {\n if (!target || !target.selectable) {\n this.setCursor(this.defaultCursor);\n return false;\n }\n else {\n var activeGroup = this.getActiveGroup(),\n // only show proper corner when group selection is not active\n corner = target._findTargetCorner\n && (!activeGroup || !activeGroup.contains(target))\n && target._findTargetCorner(this.getPointer(e, true));\n\n if (!corner) {\n this.setCursor(target.hoverCursor || this.hoverCursor);\n }\n else {\n this._setCornerCursor(corner, target);\n }\n }\n return true;\n },\n\n /**\n * @private\n */\n _setCornerCursor: function(corner, target) {\n if (corner in cursorOffset) {\n this.setCursor(this._getRotatedCornerCursor(corner, target));\n }\n else if (corner === 'mtr' && target.hasRotatingPoint) {\n this.setCursor(this.rotationCursor);\n }\n else {\n this.setCursor(this.defaultCursor);\n return false;\n }\n },\n\n /**\n * @private\n */\n _getRotatedCornerCursor: function(corner, target) {\n var n = Math.round((target.getAngle() % 360) / 45);\n\n if (n < 0) {\n n += 8; // full circle ahead\n }\n n += cursorOffset[corner];\n // normalize n to be from 0 to 7\n n %= 8;\n\n return this.cursorMap[n];\n }\n });\n})();\n\n\n(function() {\n\n var min = Math.min,\n max = Math.max;\n\n fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ {\n\n /**\n * @private\n * @param {Event} e Event object\n * @param {fabric.Object} target\n * @return {Boolean}\n */\n _shouldGroup: function(e, target) {\n var activeObject = this.getActiveObject();\n return e.shiftKey &&\n (this.getActiveGroup() || (activeObject && activeObject !== target))\n && this.selection;\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @param {fabric.Object} target\n */\n _handleGrouping: function (e, target) {\n\n if (target === this.getActiveGroup()) {\n\n // if it's a group, find target again, this time skipping group\n target = this.findTarget(e, true);\n\n // if even object is not found, bail out\n if (!target || target.isType('group')) {\n return;\n }\n }\n if (this.getActiveGroup()) {\n this._updateActiveGroup(target, e);\n }\n else {\n this._createActiveGroup(target, e);\n }\n\n if (this._activeGroup) {\n this._activeGroup.saveCoords();\n }\n },\n\n /**\n * @private\n */\n _updateActiveGroup: function(target, e) {\n var activeGroup = this.getActiveGroup();\n\n if (activeGroup.contains(target)) {\n\n activeGroup.removeWithUpdate(target);\n this._resetObjectTransform(activeGroup);\n target.set('active', false);\n\n if (activeGroup.size() === 1) {\n // remove group alltogether if after removal it only contains 1 object\n this.discardActiveGroup(e);\n // activate last remaining object\n this.setActiveObject(activeGroup.item(0));\n return;\n }\n }\n else {\n activeGroup.addWithUpdate(target);\n this._resetObjectTransform(activeGroup);\n }\n this.fire('selection:created', { target: activeGroup, e: e });\n activeGroup.set('active', true);\n },\n\n /**\n * @private\n */\n _createActiveGroup: function(target, e) {\n\n if (this._activeObject && target !== this._activeObject) {\n\n var group = this._createGroup(target);\n group.addWithUpdate();\n\n this.setActiveGroup(group);\n this._activeObject = null;\n\n this.fire('selection:created', { target: group, e: e });\n }\n\n target.set('active', true);\n },\n\n /**\n * @private\n * @param {Object} target\n */\n _createGroup: function(target) {\n\n var objects = this.getObjects(),\n isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target),\n groupObjects = isActiveLower\n ? [ this._activeObject, target ]\n : [ target, this._activeObject ];\n\n return new fabric.Group(groupObjects, {\n originX: 'center',\n originY: 'center',\n canvas: this\n });\n },\n\n /**\n * @private\n * @param {Event} e mouse event\n */\n _groupSelectedObjects: function (e) {\n\n var group = this._collectObjects();\n\n // do not create group for 1 element only\n if (group.length === 1) {\n this.setActiveObject(group[0], e);\n }\n else if (group.length > 1) {\n group = new fabric.Group(group.reverse(), {\n originX: 'center',\n originY: 'center',\n canvas: this\n });\n group.addWithUpdate();\n this.setActiveGroup(group, e);\n group.saveCoords();\n this.fire('selection:created', { target: group });\n this.renderAll();\n }\n },\n\n /**\n * @private\n */\n _collectObjects: function() {\n var group = [ ],\n currentObject,\n x1 = this._groupSelector.ex,\n y1 = this._groupSelector.ey,\n x2 = x1 + this._groupSelector.left,\n y2 = y1 + this._groupSelector.top,\n selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),\n selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),\n isClick = x1 === x2 && y1 === y2;\n\n for (var i = this._objects.length; i--; ) {\n currentObject = this._objects[i];\n\n if (!currentObject || !currentObject.selectable || !currentObject.visible) {\n continue;\n }\n\n if (currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2) ||\n currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2) ||\n currentObject.containsPoint(selectionX1Y1) ||\n currentObject.containsPoint(selectionX2Y2)\n ) {\n currentObject.set('active', true);\n group.push(currentObject);\n\n // only add one object if it's a click\n if (isClick) {\n break;\n }\n }\n }\n\n return group;\n },\n\n /**\n * @private\n */\n _maybeGroupObjects: function(e) {\n if (this.selection && this._groupSelector) {\n this._groupSelectedObjects(e);\n }\n\n var activeGroup = this.getActiveGroup();\n if (activeGroup) {\n activeGroup.setObjectsCoords().setCoords();\n activeGroup.isMoving = false;\n this.setCursor(this.defaultCursor);\n }\n\n // clear selection and current transformation\n this._groupSelector = null;\n this._currentTransform = null;\n }\n });\n\n})();\n\n\nfabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {\n\n /**\n * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately\n * @param {Object} [options] Options object\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in v1.2.14\n * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format\n * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo}\n * @example Generate jpeg dataURL with lower quality\n * var dataURL = canvas.toDataURL({\n * format: 'jpeg',\n * quality: 0.8\n * });\n * @example Generate cropped png dataURL (clipping of canvas)\n * var dataURL = canvas.toDataURL({\n * format: 'png',\n * left: 100,\n * top: 100,\n * width: 200,\n * height: 200\n * });\n * @example Generate double scaled png dataURL\n * var dataURL = canvas.toDataURL({\n * format: 'png',\n * multiplier: 2\n * });\n */\n toDataURL: function (options) {\n options || (options = { });\n\n var format = options.format || 'png',\n quality = options.quality || 1,\n multiplier = options.multiplier || 1,\n cropping = {\n left: options.left,\n top: options.top,\n width: options.width,\n height: options.height\n };\n\n if (multiplier !== 1) {\n return this.__toDataURLWithMultiplier(format, quality, cropping, multiplier);\n }\n else {\n return this.__toDataURL(format, quality, cropping);\n }\n },\n\n /**\n * @private\n */\n __toDataURL: function(format, quality, cropping) {\n\n this.renderAll(true);\n\n var canvasEl = this.upperCanvasEl || this.lowerCanvasEl,\n croppedCanvasEl = this.__getCroppedCanvas(canvasEl, cropping);\n\n // to avoid common confusion https://github.com/kangax/fabric.js/issues/806\n if (format === 'jpg') {\n format = 'jpeg';\n }\n\n var data = (fabric.StaticCanvas.supports('toDataURLWithQuality'))\n ? (croppedCanvasEl || canvasEl).toDataURL('image/' + format, quality)\n : (croppedCanvasEl || canvasEl).toDataURL('image/' + format);\n\n this.contextTop && this.clearContext(this.contextTop);\n this.renderAll();\n\n if (croppedCanvasEl) {\n croppedCanvasEl = null;\n }\n\n return data;\n },\n\n /**\n * @private\n */\n __getCroppedCanvas: function(canvasEl, cropping) {\n\n var croppedCanvasEl,\n croppedCtx,\n shouldCrop = 'left' in cropping ||\n 'top' in cropping ||\n 'width' in cropping ||\n 'height' in cropping;\n\n if (shouldCrop) {\n\n croppedCanvasEl = fabric.util.createCanvasElement();\n croppedCtx = croppedCanvasEl.getContext('2d');\n\n croppedCanvasEl.width = cropping.width || this.width;\n croppedCanvasEl.height = cropping.height || this.height;\n\n croppedCtx.drawImage(canvasEl, -cropping.left || 0, -cropping.top || 0);\n }\n\n return croppedCanvasEl;\n },\n\n /**\n * @private\n */\n __toDataURLWithMultiplier: function(format, quality, cropping, multiplier) {\n\n var origWidth = this.getWidth(),\n origHeight = this.getHeight(),\n scaledWidth = origWidth * multiplier,\n scaledHeight = origHeight * multiplier,\n activeObject = this.getActiveObject(),\n activeGroup = this.getActiveGroup(),\n\n ctx = this.contextTop || this.contextContainer;\n\n if (multiplier > 1) {\n this.setWidth(scaledWidth).setHeight(scaledHeight);\n }\n ctx.scale(multiplier, multiplier);\n\n if (cropping.left) {\n cropping.left *= multiplier;\n }\n if (cropping.top) {\n cropping.top *= multiplier;\n }\n if (cropping.width) {\n cropping.width *= multiplier;\n }\n else if (multiplier < 1) {\n cropping.width = scaledWidth;\n }\n if (cropping.height) {\n cropping.height *= multiplier;\n }\n else if (multiplier < 1) {\n cropping.height = scaledHeight;\n }\n\n if (activeGroup) {\n // not removing group due to complications with restoring it with correct state afterwords\n this._tempRemoveBordersControlsFromGroup(activeGroup);\n }\n else if (activeObject && this.deactivateAll) {\n this.deactivateAll();\n }\n\n this.renderAll(true);\n\n var data = this.__toDataURL(format, quality, cropping);\n\n // restoring width, height for `renderAll` to draw\n // background properly (while context is scaled)\n this.width = origWidth;\n this.height = origHeight;\n\n ctx.scale(1 / multiplier, 1 / multiplier);\n this.setWidth(origWidth).setHeight(origHeight);\n\n if (activeGroup) {\n this._restoreBordersControlsOnGroup(activeGroup);\n }\n else if (activeObject && this.setActiveObject) {\n this.setActiveObject(activeObject);\n }\n\n this.contextTop && this.clearContext(this.contextTop);\n this.renderAll();\n\n return data;\n },\n\n /**\n * Exports canvas element to a dataurl image (allowing to change image size via multiplier).\n * @deprecated since 1.0.13\n * @param {String} format (png|jpeg)\n * @param {Number} multiplier\n * @param {Number} quality (0..1)\n * @return {String}\n */\n toDataURLWithMultiplier: function (format, multiplier, quality) {\n return this.toDataURL({\n format: format,\n multiplier: multiplier,\n quality: quality\n });\n },\n\n /**\n * @private\n */\n _tempRemoveBordersControlsFromGroup: function(group) {\n group.origHasControls = group.hasControls;\n group.origBorderColor = group.borderColor;\n\n group.hasControls = true;\n group.borderColor = 'rgba(0,0,0,0)';\n\n group.forEachObject(function(o) {\n o.origBorderColor = o.borderColor;\n o.borderColor = 'rgba(0,0,0,0)';\n });\n },\n\n /**\n * @private\n */\n _restoreBordersControlsOnGroup: function(group) {\n group.hideControls = group.origHideControls;\n group.borderColor = group.origBorderColor;\n\n group.forEachObject(function(o) {\n o.borderColor = o.origBorderColor;\n delete o.origBorderColor;\n });\n }\n});\n\n\nfabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {\n\n /**\n * Populates canvas with data from the specified dataless JSON.\n * JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON}\n * @deprecated since 1.2.2\n * @param {String|Object} json JSON string or object\n * @param {Function} callback Callback, invoked when json is parsed\n * and corresponding objects (e.g: {@link fabric.Image})\n * are initialized\n * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.\n * @return {fabric.Canvas} instance\n * @chainable\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}\n */\n loadFromDatalessJSON: function (json, callback, reviver) {\n return this.loadFromJSON(json, callback, reviver);\n },\n\n /**\n * Populates canvas with data from the specified JSON.\n * JSON format must conform to the one of {@link fabric.Canvas#toJSON}\n * @param {String|Object} json JSON string or object\n * @param {Function} callback Callback, invoked when json is parsed\n * and corresponding objects (e.g: {@link fabric.Image})\n * are initialized\n * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.\n * @return {fabric.Canvas} instance\n * @chainable\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}\n * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}\n * @example loadFromJSON\n * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));\n * @example loadFromJSON with reviver\n * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {\n * // `o` = json object\n * // `object` = fabric.Object instance\n * // ... do some stuff ...\n * });\n */\n loadFromJSON: function (json, callback, reviver) {\n if (!json) {\n return;\n }\n\n // serialize if it wasn't already\n var serialized = (typeof json === 'string')\n ? JSON.parse(json)\n : json;\n\n this.clear();\n\n var _this = this;\n this._enlivenObjects(serialized.objects, function () {\n _this._setBgOverlay(serialized, callback);\n }, reviver);\n\n return this;\n },\n\n /**\n * @private\n * @param {Object} serialized Object with background and overlay information\n * @param {Function} callback Invoked after all background and overlay images/patterns loaded\n */\n _setBgOverlay: function(serialized, callback) {\n var _this = this,\n loaded = {\n backgroundColor: false,\n overlayColor: false,\n backgroundImage: false,\n overlayImage: false\n };\n\n if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) {\n callback && callback();\n return;\n }\n\n var cbIfLoaded = function () {\n if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) {\n _this.renderAll();\n callback && callback();\n }\n };\n\n this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded);\n this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded);\n this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded);\n this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded);\n\n cbIfLoaded();\n },\n\n /**\n * @private\n * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor)\n * @param {(Object|String)} value Value to set\n * @param {Object} loaded Set loaded property to true if property is set\n * @param {Object} callback Callback function to invoke after property is set\n */\n __setBgOverlay: function(property, value, loaded, callback) {\n var _this = this;\n\n if (!value) {\n loaded[property] = true;\n return;\n }\n\n if (property === 'backgroundImage' || property === 'overlayImage') {\n fabric.Image.fromObject(value, function(img) {\n _this[property] = img;\n loaded[property] = true;\n callback && callback();\n });\n }\n else {\n this['set' + fabric.util.string.capitalize(property, true)](value, function() {\n loaded[property] = true;\n callback && callback();\n });\n }\n },\n\n /**\n * @private\n * @param {Array} objects\n * @param {Function} callback\n * @param {Function} [reviver]\n */\n _enlivenObjects: function (objects, callback, reviver) {\n var _this = this;\n\n if (!objects || objects.length === 0) {\n callback && callback();\n return;\n }\n\n var renderOnAddRemove = this.renderOnAddRemove;\n this.renderOnAddRemove = false;\n\n fabric.util.enlivenObjects(objects, function(enlivenedObjects) {\n enlivenedObjects.forEach(function(obj, index) {\n _this.insertAt(obj, index, true);\n });\n\n _this.renderOnAddRemove = renderOnAddRemove;\n callback && callback();\n }, null, reviver);\n },\n\n /**\n * @private\n * @param {String} format\n * @param {Function} callback\n */\n _toDataURL: function (format, callback) {\n this.clone(function (clone) {\n callback(clone.toDataURL(format));\n });\n },\n\n /**\n * @private\n * @param {String} format\n * @param {Number} multiplier\n * @param {Function} callback\n */\n _toDataURLWithMultiplier: function (format, multiplier, callback) {\n this.clone(function (clone) {\n callback(clone.toDataURLWithMultiplier(format, multiplier));\n });\n },\n\n /**\n * Clones canvas instance\n * @param {Object} [callback] Receives cloned instance as a first argument\n * @param {Array} [properties] Array of properties to include in the cloned canvas and children\n */\n clone: function (callback, properties) {\n var data = JSON.stringify(this.toJSON(properties));\n this.cloneWithoutData(function(clone) {\n clone.loadFromJSON(data, function() {\n callback && callback(clone);\n });\n });\n },\n\n /**\n * Clones canvas instance without cloning existing data.\n * This essentially copies canvas dimensions, clipping properties, etc.\n * but leaves data empty (so that you can populate it with your own)\n * @param {Object} [callback] Receives cloned instance as a first argument\n */\n cloneWithoutData: function(callback) {\n var el = fabric.document.createElement('canvas');\n\n el.width = this.getWidth();\n el.height = this.getHeight();\n\n var clone = new fabric.Canvas(el);\n clone.clipTo = this.clipTo;\n if (this.backgroundImage) {\n clone.setBackgroundImage(this.backgroundImage.src, function() {\n clone.renderAll();\n callback && callback(clone);\n });\n clone.backgroundImageOpacity = this.backgroundImageOpacity;\n clone.backgroundImageStretch = this.backgroundImageStretch;\n }\n else {\n callback && callback(clone);\n }\n }\n});\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n toFixed = fabric.util.toFixed,\n capitalize = fabric.util.string.capitalize,\n degreesToRadians = fabric.util.degreesToRadians,\n supportsLineDash = fabric.StaticCanvas.supports('setLineDash');\n\n if (fabric.Object) {\n return;\n }\n\n /**\n * Root object class from which all 2d shape classes inherit from\n * @class fabric.Object\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#objects}\n * @see {@link fabric.Object#initialize} for constructor definition\n *\n * @fires added\n * @fires removed\n *\n * @fires selected\n * @fires modified\n * @fires rotating\n * @fires scaling\n * @fires moving\n *\n * @fires mousedown\n * @fires mouseup\n */\n fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {\n\n /**\n * Retrieves object's {@link fabric.Object#clipTo|clipping function}\n * @method getClipTo\n * @memberOf fabric.Object.prototype\n * @return {Function}\n */\n\n /**\n * Sets object's {@link fabric.Object#clipTo|clipping function}\n * @method setClipTo\n * @memberOf fabric.Object.prototype\n * @param {Function} clipTo Clipping function\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix}\n * @method getTransformMatrix\n * @memberOf fabric.Object.prototype\n * @return {Array} transformMatrix\n */\n\n /**\n * Sets object's {@link fabric.Object#transformMatrix|transformMatrix}\n * @method setTransformMatrix\n * @memberOf fabric.Object.prototype\n * @param {Array} transformMatrix\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#visible|visible} state\n * @method getVisible\n * @memberOf fabric.Object.prototype\n * @return {Boolean} True if visible\n */\n\n /**\n * Sets object's {@link fabric.Object#visible|visible} state\n * @method setVisible\n * @memberOf fabric.Object.prototype\n * @param {Boolean} value visible value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#shadow|shadow}\n * @method getShadow\n * @memberOf fabric.Object.prototype\n * @return {Object} Shadow instance\n */\n\n /**\n * Retrieves object's {@link fabric.Object#stroke|stroke}\n * @method getStroke\n * @memberOf fabric.Object.prototype\n * @return {String} stroke value\n */\n\n /**\n * Sets object's {@link fabric.Object#stroke|stroke}\n * @method setStroke\n * @memberOf fabric.Object.prototype\n * @param {String} value stroke value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth}\n * @method getStrokeWidth\n * @memberOf fabric.Object.prototype\n * @return {Number} strokeWidth value\n */\n\n /**\n * Sets object's {@link fabric.Object#strokeWidth|strokeWidth}\n * @method setStrokeWidth\n * @memberOf fabric.Object.prototype\n * @param {Number} value strokeWidth value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#originX|originX}\n * @method getOriginX\n * @memberOf fabric.Object.prototype\n * @return {String} originX value\n */\n\n /**\n * Sets object's {@link fabric.Object#originX|originX}\n * @method setOriginX\n * @memberOf fabric.Object.prototype\n * @param {String} value originX value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#originY|originY}\n * @method getOriginY\n * @memberOf fabric.Object.prototype\n * @return {String} originY value\n */\n\n /**\n * Sets object's {@link fabric.Object#originY|originY}\n * @method setOriginY\n * @memberOf fabric.Object.prototype\n * @param {String} value originY value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#fill|fill}\n * @method getFill\n * @memberOf fabric.Object.prototype\n * @return {String} Fill value\n */\n\n /**\n * Sets object's {@link fabric.Object#fill|fill}\n * @method setFill\n * @memberOf fabric.Object.prototype\n * @param {String} value Fill value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#opacity|opacity}\n * @method getOpacity\n * @memberOf fabric.Object.prototype\n * @return {Number} Opacity value (0-1)\n */\n\n /**\n * Sets object's {@link fabric.Object#opacity|opacity}\n * @method setOpacity\n * @memberOf fabric.Object.prototype\n * @param {Number} value Opacity value (0-1)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#angle|angle} (in degrees)\n * @method getAngle\n * @memberOf fabric.Object.prototype\n * @return {Number}\n */\n\n /**\n * Sets object's {@link fabric.Object#angle|angle}\n * @method setAngle\n * @memberOf fabric.Object.prototype\n * @param {Number} value Angle value (in degrees)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#top|top position}\n * @method getTop\n * @memberOf fabric.Object.prototype\n * @return {Number} Top value (in pixels)\n */\n\n /**\n * Sets object's {@link fabric.Object#top|top position}\n * @method setTop\n * @memberOf fabric.Object.prototype\n * @param {Number} value Top value (in pixels)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#left|left position}\n * @method getLeft\n * @memberOf fabric.Object.prototype\n * @return {Number} Left value (in pixels)\n */\n\n /**\n * Sets object's {@link fabric.Object#left|left position}\n * @method setLeft\n * @memberOf fabric.Object.prototype\n * @param {Number} value Left value (in pixels)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#scaleX|scaleX} value\n * @method getScaleX\n * @memberOf fabric.Object.prototype\n * @return {Number} scaleX value\n */\n\n /**\n * Sets object's {@link fabric.Object#scaleX|scaleX} value\n * @method setScaleX\n * @memberOf fabric.Object.prototype\n * @param {Number} value scaleX value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#scaleY|scaleY} value\n * @method getScaleY\n * @memberOf fabric.Object.prototype\n * @return {Number} scaleY value\n */\n\n /**\n * Sets object's {@link fabric.Object#scaleY|scaleY} value\n * @method setScaleY\n * @memberOf fabric.Object.prototype\n * @param {Number} value scaleY value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#flipX|flipX} value\n * @method getFlipX\n * @memberOf fabric.Object.prototype\n * @return {Boolean} flipX value\n */\n\n /**\n * Sets object's {@link fabric.Object#flipX|flipX} value\n * @method setFlipX\n * @memberOf fabric.Object.prototype\n * @param {Boolean} value flipX value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Retrieves object's {@link fabric.Object#flipY|flipY} value\n * @method getFlipY\n * @memberOf fabric.Object.prototype\n * @return {Boolean} flipY value\n */\n\n /**\n * Sets object's {@link fabric.Object#flipY|flipY} value\n * @method setFlipY\n * @memberOf fabric.Object.prototype\n * @param {Boolean} value flipY value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n\n /**\n * Type of an object (rect, circle, path, etc.)\n * @type String\n * @default\n */\n type: 'object',\n\n /**\n * Horizontal origin of transformation of an object (one of \"left\", \"right\", \"center\")\n * @type String\n * @default\n */\n originX: 'left',\n\n /**\n * Vertical origin of transformation of an object (one of \"top\", \"bottom\", \"center\")\n * @type String\n * @default\n */\n originY: 'top',\n\n /**\n * Top position of an object. Note that by default it's relative to object center. You can change this by setting originY={top/center/bottom}\n * @type Number\n * @default\n */\n top: 0,\n\n /**\n * Left position of an object. Note that by default it's relative to object center. You can change this by setting originX={left/center/right}\n * @type Number\n * @default\n */\n left: 0,\n\n /**\n * Object width\n * @type Number\n * @default\n */\n width: 0,\n\n /**\n * Object height\n * @type Number\n * @default\n */\n height: 0,\n\n /**\n * Object scale factor (horizontal)\n * @type Number\n * @default\n */\n scaleX: 1,\n\n /**\n * Object scale factor (vertical)\n * @type Number\n * @default\n */\n scaleY: 1,\n\n /**\n * When true, an object is rendered as flipped horizontally\n * @type Boolean\n * @default\n */\n flipX: false,\n\n /**\n * When true, an object is rendered as flipped vertically\n * @type Boolean\n * @default\n */\n flipY: false,\n\n /**\n * Opacity of an object\n * @type Number\n * @default\n */\n opacity: 1,\n\n /**\n * Angle of rotation of an object (in degrees)\n * @type Number\n * @default\n */\n angle: 0,\n\n /**\n * Size of object's controlling corners (in pixels)\n * @type Number\n * @default\n */\n cornerSize: 12,\n\n /**\n * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)\n * @type Boolean\n * @default\n */\n transparentCorners: true,\n\n /**\n * Default cursor value used when hovering over this object on canvas\n * @type String\n * @default\n */\n hoverCursor: null,\n\n /**\n * Padding between object and its controlling borders (in pixels)\n * @type Number\n * @default\n */\n padding: 0,\n\n /**\n * Color of controlling borders of an object (when it's active)\n * @type String\n * @default\n */\n borderColor: 'rgba(102,153,255,0.75)',\n\n /**\n * Color of controlling corners of an object (when it's active)\n * @type String\n * @default\n */\n cornerColor: 'rgba(102,153,255,0.5)',\n\n /**\n * When true, this object will use center point as the origin of transformation\n * when being scaled via the controls.\n * Backwards incompatibility note: This property replaces \"centerTransform\" (Boolean).\n * @since 1.3.4\n * @type Boolean\n * @default\n */\n centeredScaling: false,\n\n /**\n * When true, this object will use center point as the origin of transformation\n * when being rotated via the controls.\n * Backwards incompatibility note: This property replaces \"centerTransform\" (Boolean).\n * @since 1.3.4\n * @type Boolean\n * @default\n */\n centeredRotation: true,\n\n /**\n * Color of object's fill\n * @type String\n * @default\n */\n fill: 'rgb(0,0,0)',\n\n /**\n * Fill rule used to fill an object\n * accepted values are nonzero, evenodd\n * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead)\n * @type String\n * @default\n */\n fillRule: 'nonzero',\n\n /**\n * Composite rule used for canvas globalCompositeOperation\n * @type String\n * @default\n */\n globalCompositeOperation: 'source-over',\n\n /**\n * Background color of an object. Only works with text objects at the moment.\n * @type String\n * @default\n */\n backgroundColor: '',\n\n /**\n * When defined, an object is rendered via stroke and this property specifies its color\n * @type String\n * @default\n */\n stroke: null,\n\n /**\n * Width of a stroke used to render this object\n * @type Number\n * @default\n */\n strokeWidth: 1,\n\n /**\n * Array specifying dash pattern of an object's stroke (stroke must be defined)\n * @type Array\n */\n strokeDashArray: null,\n\n /**\n * Line endings style of an object's stroke (one of \"butt\", \"round\", \"square\")\n * @type String\n * @default\n */\n strokeLineCap: 'butt',\n\n /**\n * Corner style of an object's stroke (one of \"bevil\", \"round\", \"miter\")\n * @type String\n * @default\n */\n strokeLineJoin: 'miter',\n\n /**\n * Maximum miter length (used for strokeLineJoin = \"miter\") of an object's stroke\n * @type Number\n * @default\n */\n strokeMiterLimit: 10,\n\n /**\n * Shadow object representing shadow of this shape\n * @type fabric.Shadow\n * @default\n */\n shadow: null,\n\n /**\n * Opacity of object's controlling borders when object is active and moving\n * @type Number\n * @default\n */\n borderOpacityWhenMoving: 0.4,\n\n /**\n * Scale factor of object's controlling borders\n * @type Number\n * @default\n */\n borderScaleFactor: 1,\n\n /**\n * Transform matrix (similar to SVG's transform matrix)\n * @type Array\n */\n transformMatrix: null,\n\n /**\n * Minimum allowed scale value of an object\n * @type Number\n * @default\n */\n minScaleLimit: 0.01,\n\n /**\n * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).\n * But events still fire on it.\n * @type Boolean\n * @default\n */\n selectable: true,\n\n /**\n * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4\n * @type Boolean\n * @default\n */\n evented: true,\n\n /**\n * When set to `false`, an object is not rendered on canvas\n * @type Boolean\n * @default\n */\n visible: true,\n\n /**\n * When set to `false`, object's controls are not displayed and can not be used to manipulate object\n * @type Boolean\n * @default\n */\n hasControls: true,\n\n /**\n * When set to `false`, object's controlling borders are not rendered\n * @type Boolean\n * @default\n */\n hasBorders: true,\n\n /**\n * When set to `false`, object's controlling rotating point will not be visible or selectable\n * @type Boolean\n * @default\n */\n hasRotatingPoint: true,\n\n /**\n * Offset for object's controlling rotating point (when enabled via `hasRotatingPoint`)\n * @type Number\n * @default\n */\n rotatingPointOffset: 40,\n\n /**\n * When set to `true`, objects are \"found\" on canvas on per-pixel basis rather than according to bounding box\n * @type Boolean\n * @default\n */\n perPixelTargetFind: false,\n\n /**\n * When `false`, default object's values are not included in its serialization\n * @type Boolean\n * @default\n */\n includeDefaultValues: true,\n\n /**\n * Function that determines clipping of an object (context is passed as a first argument)\n * Note that context origin is at the object's center point (not left/top corner)\n * @type Function\n */\n clipTo: null,\n\n /**\n * When `true`, object horizontal movement is locked\n * @type Boolean\n * @default\n */\n lockMovementX: false,\n\n /**\n * When `true`, object vertical movement is locked\n * @type Boolean\n * @default\n */\n lockMovementY: false,\n\n /**\n * When `true`, object rotation is locked\n * @type Boolean\n * @default\n */\n lockRotation: false,\n\n /**\n * When `true`, object horizontal scaling is locked\n * @type Boolean\n * @default\n */\n lockScalingX: false,\n\n /**\n * When `true`, object vertical scaling is locked\n * @type Boolean\n * @default\n */\n lockScalingY: false,\n\n /**\n * When `true`, object non-uniform scaling is locked\n * @type Boolean\n * @default\n */\n lockUniScaling: false,\n\n /**\n * When `true`, object cannot be flipped by scaling into negative values\n * @type Boolean\n * @default\n */\n\n lockScalingFlip: false,\n /**\n * List of properties to consider when checking if state\n * of an object is changed (fabric.Object#hasStateChanged)\n * as well as for history (undo/redo) purposes\n * @type Array\n */\n stateProperties: (\n 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' +\n 'stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit ' +\n 'angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor'\n ).split(' '),\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n */\n initialize: function(options) {\n if (options) {\n this.setOptions(options);\n }\n },\n\n /**\n * @private\n * @param {Object} [options] Options object\n */\n _initGradient: function(options) {\n if (options.fill && options.fill.colorStops && !(options.fill instanceof fabric.Gradient)) {\n this.set('fill', new fabric.Gradient(options.fill));\n }\n },\n\n /**\n * @private\n * @param {Object} [options] Options object\n */\n _initPattern: function(options) {\n if (options.fill && options.fill.source && !(options.fill instanceof fabric.Pattern)) {\n this.set('fill', new fabric.Pattern(options.fill));\n }\n if (options.stroke && options.stroke.source && !(options.stroke instanceof fabric.Pattern)) {\n this.set('stroke', new fabric.Pattern(options.stroke));\n }\n },\n\n /**\n * @private\n * @param {Object} [options] Options object\n */\n _initClipping: function(options) {\n if (!options.clipTo || typeof options.clipTo !== 'string') {\n return;\n }\n\n var functionBody = fabric.util.getFunctionBody(options.clipTo);\n if (typeof functionBody !== 'undefined') {\n this.clipTo = new Function('ctx', functionBody);\n }\n },\n\n /**\n * Sets object's properties from options\n * @param {Object} [options] Options object\n */\n setOptions: function(options) {\n for (var prop in options) {\n this.set(prop, options[prop]);\n }\n this._initGradient(options);\n this._initPattern(options);\n this._initClipping(options);\n },\n\n /**\n * Transforms context when rendering an object\n * @param {CanvasRenderingContext2D} ctx Context\n * @param {Boolean} fromLeft When true, context is transformed to object's top/left corner. This is used when rendering text on Node\n */\n transform: function(ctx, fromLeft) {\n if (this.group) {\n this.group.transform(ctx, fromLeft);\n }\n var center = fromLeft ? this._getLeftTopCoords() : this.getCenterPoint();\n ctx.translate(center.x, center.y);\n ctx.rotate(degreesToRadians(this.angle));\n ctx.scale(\n this.scaleX * (this.flipX ? -1 : 1),\n this.scaleY * (this.flipY ? -1 : 1)\n );\n },\n\n /**\n * Returns an object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,\n\n object = {\n type: this.type,\n originX: this.originX,\n originY: this.originY,\n left: toFixed(this.left, NUM_FRACTION_DIGITS),\n top: toFixed(this.top, NUM_FRACTION_DIGITS),\n width: toFixed(this.width, NUM_FRACTION_DIGITS),\n height: toFixed(this.height, NUM_FRACTION_DIGITS),\n fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill,\n stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke,\n strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS),\n strokeDashArray: this.strokeDashArray,\n strokeLineCap: this.strokeLineCap,\n strokeLineJoin: this.strokeLineJoin,\n strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS),\n scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS),\n scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS),\n angle: toFixed(this.getAngle(), NUM_FRACTION_DIGITS),\n flipX: this.flipX,\n flipY: this.flipY,\n opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS),\n shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow,\n visible: this.visible,\n clipTo: this.clipTo && String(this.clipTo),\n backgroundColor: this.backgroundColor,\n fillRule: this.fillRule,\n globalCompositeOperation: this.globalCompositeOperation\n };\n\n if (!this.includeDefaultValues) {\n object = this._removeDefaultValues(object);\n }\n\n fabric.util.populateWithProperties(this, object, propertiesToInclude);\n\n return object;\n },\n\n /**\n * Returns (dataless) object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toDatalessObject: function(propertiesToInclude) {\n // will be overwritten by subclasses\n return this.toObject(propertiesToInclude);\n },\n\n /**\n * @private\n * @param {Object} object\n */\n _removeDefaultValues: function(object) {\n var prototype = fabric.util.getKlass(object.type).prototype,\n stateProperties = prototype.stateProperties;\n\n stateProperties.forEach(function(prop) {\n if (object[prop] === prototype[prop]) {\n delete object[prop];\n }\n });\n\n return object;\n },\n\n /**\n * Returns a string representation of an instance\n * @return {String}\n */\n toString: function() {\n return '#';\n },\n\n /**\n * Basic getter\n * @param {String} property Property name\n * @return {Any} value of a property\n */\n get: function(property) {\n return this[property];\n },\n\n /**\n * @private\n */\n _setObject: function(obj) {\n for (var prop in obj) {\n this._set(prop, obj[prop]);\n }\n },\n\n /**\n * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.\n * @param {String|Object} key Property name or object (if object, iterate over the object properties)\n * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n set: function(key, value) {\n if (typeof key === 'object') {\n this._setObject(key);\n }\n else {\n if (typeof value === 'function' && key !== 'clipTo') {\n this._set(key, value(this.get(key)));\n }\n else {\n this._set(key, value);\n }\n }\n return this;\n },\n\n /**\n * @private\n * @param {String} key\n * @param {Any} value\n * @return {fabric.Object} thisArg\n */\n _set: function(key, value) {\n var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY');\n\n if (shouldConstrainValue) {\n value = this._constrainScale(value);\n }\n if (key === 'scaleX' && value < 0) {\n this.flipX = !this.flipX;\n value *= -1;\n }\n else if (key === 'scaleY' && value < 0) {\n this.flipY = !this.flipY;\n value *= -1;\n }\n else if (key === 'width' || key === 'height') {\n this.minScaleLimit = toFixed(Math.min(0.1, 1/Math.max(this.width, this.height)), 2);\n }\n else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) {\n value = new fabric.Shadow(value);\n }\n\n this[key] = value;\n\n return this;\n },\n\n /**\n * Toggles specified property from `true` to `false` or from `false` to `true`\n * @param {String} property Property to toggle\n * @return {fabric.Object} thisArg\n * @chainable\n */\n toggle: function(property) {\n var value = this.get(property);\n if (typeof value === 'boolean') {\n this.set(property, !value);\n }\n return this;\n },\n\n /**\n * Sets sourcePath of an object\n * @param {String} value Value to set sourcePath to\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setSourcePath: function(value) {\n this.sourcePath = value;\n return this;\n },\n\n /**\n * Retrieves viewportTransform from Object's canvas if possible\n * @method getViewportTransform\n * @memberOf fabric.Object.prototype\n * @return {Boolean} flipY value // TODO\n */\n getViewportTransform: function() {\n if (this.canvas && this.canvas.viewportTransform) {\n return this.canvas.viewportTransform;\n }\n return [1, 0, 0, 1, 0, 0];\n },\n\n /**\n * Renders an object on a specified context\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n render: function(ctx, noTransform) {\n // do not render if width/height are zeros or object is not visible\n if (this.width === 0 || this.height === 0 || !this.visible) {\n return;\n }\n\n ctx.save();\n\n //setup fill rule for current object\n this._setupCompositeOperation(ctx);\n if (!noTransform) {\n this.transform(ctx);\n }\n this._setStrokeStyles(ctx);\n this._setFillStyles(ctx);\n if (this.group && this.group.type === 'path-group') {\n ctx.translate(-this.group.width/2, -this.group.height/2);\n }\n if (this.transformMatrix) {\n ctx.transform.apply(ctx, this.transformMatrix);\n }\n this._setOpacity(ctx);\n this._setShadow(ctx);\n this.clipTo && fabric.util.clipContext(this, ctx);\n this._render(ctx, noTransform);\n this.clipTo && ctx.restore();\n this._removeShadow(ctx);\n this._restoreCompositeOperation(ctx);\n\n ctx.restore();\n },\n\n /* @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _setOpacity: function(ctx) {\n if (this.group) {\n this.group._setOpacity(ctx);\n }\n ctx.globalAlpha *= this.opacity;\n },\n\n _setStrokeStyles: function(ctx) {\n if (this.stroke) {\n ctx.lineWidth = this.strokeWidth;\n ctx.lineCap = this.strokeLineCap;\n ctx.lineJoin = this.strokeLineJoin;\n ctx.miterLimit = this.strokeMiterLimit;\n ctx.strokeStyle = this.stroke.toLive\n ? this.stroke.toLive(ctx, this)\n : this.stroke;\n }\n },\n\n _setFillStyles: function(ctx) {\n if (this.fill) {\n ctx.fillStyle = this.fill.toLive\n ? this.fill.toLive(ctx, this)\n : this.fill;\n }\n },\n\n /**\n * Renders controls and borders for the object\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n _renderControls: function(ctx, noTransform) {\n var vpt = this.getViewportTransform();\n\n ctx.save();\n if (this.active && !noTransform) {\n var center;\n if (this.group) {\n center = fabric.util.transformPoint(this.group.getCenterPoint(), vpt);\n ctx.translate(center.x, center.y);\n ctx.rotate(degreesToRadians(this.group.angle));\n }\n center = fabric.util.transformPoint(this.getCenterPoint(), vpt, null != this.group);\n if (this.group) {\n center.x *= this.group.scaleX;\n center.y *= this.group.scaleY;\n }\n ctx.translate(center.x, center.y);\n ctx.rotate(degreesToRadians(this.angle));\n this.drawBorders(ctx);\n this.drawControls(ctx);\n }\n ctx.restore();\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _setShadow: function(ctx) {\n if (!this.shadow) {\n return;\n }\n\n ctx.shadowColor = this.shadow.color;\n ctx.shadowBlur = this.shadow.blur;\n ctx.shadowOffsetX = this.shadow.offsetX;\n ctx.shadowOffsetY = this.shadow.offsetY;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _removeShadow: function(ctx) {\n if (!this.shadow) {\n return;\n }\n\n ctx.shadowColor = '';\n ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderFill: function(ctx) {\n if (!this.fill) {\n return;\n }\n\n ctx.save();\n if (this.fill.gradientTransform) {\n var g = this.fill.gradientTransform;\n ctx.transform.apply(ctx, g);\n }\n if (this.fill.toLive) {\n ctx.translate(\n -this.width / 2 + this.fill.offsetX || 0,\n -this.height / 2 + this.fill.offsetY || 0);\n }\n if (this.fillRule === 'evenodd') {\n ctx.fill('evenodd');\n }\n else {\n ctx.fill();\n }\n ctx.restore();\n if (this.shadow && !this.shadow.affectStroke) {\n this._removeShadow(ctx);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderStroke: function(ctx) {\n if (!this.stroke || this.strokeWidth === 0) {\n return;\n }\n\n ctx.save();\n if (this.strokeDashArray) {\n // Spec requires the concatenation of two copies the dash list when the number of elements is odd\n if (1 & this.strokeDashArray.length) {\n this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);\n }\n if (supportsLineDash) {\n ctx.setLineDash(this.strokeDashArray);\n this._stroke && this._stroke(ctx);\n }\n else {\n this._renderDashedStroke && this._renderDashedStroke(ctx);\n }\n ctx.stroke();\n }\n else {\n if (this.stroke.gradientTransform) {\n var g = this.stroke.gradientTransform;\n ctx.transform.apply(ctx, g);\n }\n this._stroke ? this._stroke(ctx) : ctx.stroke();\n }\n this._removeShadow(ctx);\n ctx.restore();\n },\n\n /**\n * Clones an instance\n * @param {Function} callback Callback is invoked with a clone as a first argument\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {fabric.Object} clone of an instance\n */\n clone: function(callback, propertiesToInclude) {\n if (this.constructor.fromObject) {\n return this.constructor.fromObject(this.toObject(propertiesToInclude), callback);\n }\n return new fabric.Object(this.toObject(propertiesToInclude));\n },\n\n /**\n * Creates an instance of fabric.Image out of an object\n * @param {Function} callback callback, invoked with an instance as a first argument\n * @return {fabric.Object} thisArg\n */\n cloneAsImage: function(callback) {\n var dataUrl = this.toDataURL();\n fabric.util.loadImage(dataUrl, function(img) {\n if (callback) {\n callback(new fabric.Image(img));\n }\n });\n return this;\n },\n\n /**\n * Converts an object into a data-url-like string\n * @param {Object} options Options object\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in v1.2.14\n * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format\n */\n toDataURL: function(options) {\n options || (options = { });\n\n var el = fabric.util.createCanvasElement(),\n boundingRect = this.getBoundingRect();\n\n el.width = boundingRect.width;\n el.height = boundingRect.height;\n\n fabric.util.wrapElement(el, 'div');\n var canvas = new fabric.Canvas(el);\n\n // to avoid common confusion https://github.com/kangax/fabric.js/issues/806\n if (options.format === 'jpg') {\n options.format = 'jpeg';\n }\n\n if (options.format === 'jpeg') {\n canvas.backgroundColor = '#fff';\n }\n\n var origParams = {\n active: this.get('active'),\n left: this.getLeft(),\n top: this.getTop()\n };\n\n this.set('active', false);\n this.setPositionByOrigin(new fabric.Point(el.width / 2, el.height / 2), 'center', 'center');\n\n var originalCanvas = this.canvas;\n canvas.add(this);\n var data = canvas.toDataURL(options);\n\n this.set(origParams).setCoords();\n this.canvas = originalCanvas;\n\n canvas.dispose();\n canvas = null;\n\n return data;\n },\n\n /**\n * Returns true if specified type is identical to the type of an instance\n * @param {String} type Type to check against\n * @return {Boolean}\n */\n isType: function(type) {\n return this.type === type;\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return 0;\n },\n\n /**\n * Returns a JSON representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} JSON\n */\n toJSON: function(propertiesToInclude) {\n // delegate, not alias\n return this.toObject(propertiesToInclude);\n },\n\n /**\n * Sets gradient (fill or stroke) of an object\n * Backwards incompatibility note: This method was named \"setGradientFill\" until v1.1.0\n * @param {String} property Property name 'stroke' or 'fill'\n * @param {Object} [options] Options object\n * @param {String} [options.type] Type of gradient 'radial' or 'linear'\n * @param {Number} [options.x1=0] x-coordinate of start point\n * @param {Number} [options.y1=0] y-coordinate of start point\n * @param {Number} [options.x2=0] x-coordinate of end point\n * @param {Number} [options.y2=0] y-coordinate of end point\n * @param {Number} [options.r1=0] Radius of start point (only for radial gradients)\n * @param {Number} [options.r2=0] Radius of end point (only for radial gradients)\n * @param {Object} [options.colorStops] Color stops object eg. {0: 'ff0000', 1: '000000'}\n * @return {fabric.Object} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/58y8b/|jsFiddle demo}\n * @example Set linear gradient\n * object.setGradient('fill', {\n * type: 'linear',\n * x1: -object.width / 2,\n * y1: 0,\n * x2: object.width / 2,\n * y2: 0,\n * colorStops: {\n * 0: 'red',\n * 0.5: '#005555',\n * 1: 'rgba(0,0,255,0.5)'\n * }\n * });\n * canvas.renderAll();\n * @example Set radial gradient\n * object.setGradient('fill', {\n * type: 'radial',\n * x1: 0,\n * y1: 0,\n * x2: 0,\n * y2: 0,\n * r1: object.width / 2,\n * r2: 10,\n * colorStops: {\n * 0: 'red',\n * 0.5: '#005555',\n * 1: 'rgba(0,0,255,0.5)'\n * }\n * });\n * canvas.renderAll();\n */\n setGradient: function(property, options) {\n options || (options = { });\n\n var gradient = { colorStops: [] };\n\n gradient.type = options.type || (options.r1 || options.r2 ? 'radial' : 'linear');\n gradient.coords = {\n x1: options.x1,\n y1: options.y1,\n x2: options.x2,\n y2: options.y2\n };\n\n if (options.r1 || options.r2) {\n gradient.coords.r1 = options.r1;\n gradient.coords.r2 = options.r2;\n }\n\n for (var position in options.colorStops) {\n var color = new fabric.Color(options.colorStops[position]);\n gradient.colorStops.push({\n offset: position,\n color: color.toRgb(),\n opacity: color.getAlpha()\n });\n }\n\n return this.set(property, fabric.Gradient.forObject(this, gradient));\n },\n\n /**\n * Sets pattern fill of an object\n * @param {Object} options Options object\n * @param {(String|HTMLImageElement)} options.source Pattern source\n * @param {String} [options.repeat=repeat] Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)\n * @param {Number} [options.offsetX=0] Pattern horizontal offset from object's left/top corner\n * @param {Number} [options.offsetY=0] Pattern vertical offset from object's left/top corner\n * @return {fabric.Object} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/QT3pa/|jsFiddle demo}\n * @example Set pattern\n * fabric.util.loadImage('http://fabricjs.com/assets/escheresque_ste.png', function(img) {\n * object.setPatternFill({\n * source: img,\n * repeat: 'repeat'\n * });\n * canvas.renderAll();\n * });\n */\n setPatternFill: function(options) {\n return this.set('fill', new fabric.Pattern(options));\n },\n\n /**\n * Sets {@link fabric.Object#shadow|shadow} of an object\n * @param {Object|String} [options] Options object or string (e.g. \"2px 2px 10px rgba(0,0,0,0.2)\")\n * @param {String} [options.color=rgb(0,0,0)] Shadow color\n * @param {Number} [options.blur=0] Shadow blur\n * @param {Number} [options.offsetX=0] Shadow horizontal offset\n * @param {Number} [options.offsetY=0] Shadow vertical offset\n * @return {fabric.Object} thisArg\n * @chainable\n * @see {@link http://jsfiddle.net/fabricjs/7gvJG/|jsFiddle demo}\n * @example Set shadow with string notation\n * object.setShadow('2px 2px 10px rgba(0,0,0,0.2)');\n * canvas.renderAll();\n * @example Set shadow with object notation\n * object.setShadow({\n * color: 'red',\n * blur: 10,\n * offsetX: 20,\n * offsetY: 20\n * });\n * canvas.renderAll();\n */\n setShadow: function(options) {\n return this.set('shadow', options ? new fabric.Shadow(options) : null);\n },\n\n /**\n * Sets \"color\" of an instance (alias of `set('fill', …)`)\n * @param {String} color Color value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setColor: function(color) {\n this.set('fill', color);\n return this;\n },\n\n /**\n * Sets \"angle\" of an instance\n * @param {Number} angle Angle value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setAngle: function(angle) {\n var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation;\n\n if (shouldCenterOrigin) {\n this._setOriginToCenter();\n }\n\n this.set('angle', angle);\n\n if (shouldCenterOrigin) {\n this._resetOrigin();\n }\n\n return this;\n },\n\n /**\n * Centers object horizontally on canvas to which it was added last.\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @return {fabric.Object} thisArg\n * @chainable\n */\n centerH: function () {\n this.canvas.centerObjectH(this);\n return this;\n },\n\n /**\n * Centers object vertically on canvas to which it was added last.\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @return {fabric.Object} thisArg\n * @chainable\n */\n centerV: function () {\n this.canvas.centerObjectV(this);\n return this;\n },\n\n /**\n * Centers object vertically and horizontally on canvas to which is was added last\n * You might need to call `setCoords` on an object after centering, to update controls area.\n * @return {fabric.Object} thisArg\n * @chainable\n */\n center: function () {\n this.canvas.centerObject(this);\n return this;\n },\n\n /**\n * Removes object from canvas to which it was added last\n * @return {fabric.Object} thisArg\n * @chainable\n */\n remove: function() {\n this.canvas.remove(this);\n return this;\n },\n\n /**\n * Returns coordinates of a pointer relative to an object\n * @param {Event} e Event to operate upon\n * @param {Object} [pointer] Pointer to operate upon (instead of event)\n * @return {Object} Coordinates of a pointer (x, y)\n */\n getLocalPointer: function(e, pointer) {\n pointer = pointer || this.canvas.getPointer(e);\n var objectLeftTop = this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top');\n return {\n x: pointer.x - objectLeftTop.x,\n y: pointer.y - objectLeftTop.y\n };\n },\n\n /**\n * Sets canvas globalCompositeOperation for specific object\n * custom composition operation for the particular object can be specifed using globalCompositeOperation property\n * @param {CanvasRenderingContext2D} ctx Rendering canvas context\n */\n _setupCompositeOperation: function (ctx) {\n if (this.globalCompositeOperation) {\n this._prevGlobalCompositeOperation = ctx.globalCompositeOperation;\n ctx.globalCompositeOperation = this.globalCompositeOperation;\n }\n },\n\n /**\n * Restores previously saved canvas globalCompositeOperation after obeject rendering\n * @param {CanvasRenderingContext2D} ctx Rendering canvas context\n */\n _restoreCompositeOperation: function (ctx) {\n if (this.globalCompositeOperation && this._prevGlobalCompositeOperation) {\n ctx.globalCompositeOperation = this._prevGlobalCompositeOperation;\n }\n }\n });\n\n fabric.util.createAccessors(fabric.Object);\n\n /**\n * Alias for {@link fabric.Object.prototype.setAngle}\n * @alias rotate -> setAngle\n * @memberof fabric.Object\n */\n fabric.Object.prototype.rotate = fabric.Object.prototype.setAngle;\n\n extend(fabric.Object.prototype, fabric.Observable);\n\n /**\n * Defines the number of fraction digits to use when serializing object values.\n * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc.\n * @static\n * @memberof fabric.Object\n * @constant\n * @type Number\n */\n fabric.Object.NUM_FRACTION_DIGITS = 2;\n\n /**\n * Unique id used internally when creating SVG elements\n * @static\n * @memberof fabric.Object\n * @type Number\n */\n fabric.Object.__uid = 0;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n\n var degreesToRadians = fabric.util.degreesToRadians;\n\n fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * Translates the coordinates from origin to center coordinates (based on the object's dimensions)\n * @param {fabric.Point} point The point which corresponds to the originX and originY params\n * @param {String} originX Horizontal origin: 'left', 'center' or 'right'\n * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'\n * @return {fabric.Point}\n */\n translateToCenterPoint: function(point, originX, originY) {\n var cx = point.x,\n cy = point.y,\n strokeWidth = this.stroke ? this.strokeWidth : 0;\n\n if (originX === 'left') {\n cx = point.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n else if (originX === 'right') {\n cx = point.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n\n if (originY === 'top') {\n cy = point.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n else if (originY === 'bottom') {\n cy = point.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n\n // Apply the reverse rotation to the point (it's already scaled properly)\n return fabric.util.rotatePoint(new fabric.Point(cx, cy), point, degreesToRadians(this.angle));\n },\n\n /**\n * Translates the coordinates from center to origin coordinates (based on the object's dimensions)\n * @param {fabric.Point} center The point which corresponds to center of the object\n * @param {String} originX Horizontal origin: 'left', 'center' or 'right'\n * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'\n * @return {fabric.Point}\n */\n translateToOriginPoint: function(center, originX, originY) {\n var x = center.x,\n y = center.y,\n strokeWidth = this.stroke ? this.strokeWidth : 0;\n\n // Get the point coordinates\n if (originX === 'left') {\n x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n else if (originX === 'right') {\n x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n if (originY === 'top') {\n y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n else if (originY === 'bottom') {\n y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n\n // Apply the rotation to the point (it's already scaled properly)\n return fabric.util.rotatePoint(new fabric.Point(x, y), center, degreesToRadians(this.angle));\n },\n\n /**\n * Returns the real center coordinates of the object\n * @return {fabric.Point}\n */\n getCenterPoint: function() {\n var leftTop = new fabric.Point(this.left, this.top);\n return this.translateToCenterPoint(leftTop, this.originX, this.originY);\n },\n\n /**\n * Returns the coordinates of the object based on center coordinates\n * @param {fabric.Point} point The point which corresponds to the originX and originY params\n * @return {fabric.Point}\n */\n // getOriginPoint: function(center) {\n // return this.translateToOriginPoint(center, this.originX, this.originY);\n // },\n\n /**\n * Returns the coordinates of the object as if it has a different origin\n * @param {String} originX Horizontal origin: 'left', 'center' or 'right'\n * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'\n * @return {fabric.Point}\n */\n getPointByOrigin: function(originX, originY) {\n var center = this.getCenterPoint();\n return this.translateToOriginPoint(center, originX, originY);\n },\n\n /**\n * Returns the point in local coordinates\n * @param {fabric.Point} point The point relative to the global coordinate system\n * @param {String} originX Horizontal origin: 'left', 'center' or 'right'\n * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'\n * @return {fabric.Point}\n */\n toLocalPoint: function(point, originX, originY) {\n var center = this.getCenterPoint(),\n strokeWidth = this.stroke ? this.strokeWidth : 0,\n x, y;\n\n if (originX && originY) {\n if (originX === 'left') {\n x = center.x - (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n else if (originX === 'right') {\n x = center.x + (this.getWidth() + strokeWidth * this.scaleX) / 2;\n }\n else {\n x = center.x;\n }\n\n if (originY === 'top') {\n y = center.y - (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n else if (originY === 'bottom') {\n y = center.y + (this.getHeight() + strokeWidth * this.scaleY) / 2;\n }\n else {\n y = center.y;\n }\n }\n else {\n x = this.left;\n y = this.top;\n }\n\n return fabric.util.rotatePoint(new fabric.Point(point.x, point.y), center, -degreesToRadians(this.angle))\n .subtractEquals(new fabric.Point(x, y));\n },\n\n /**\n * Returns the point in global coordinates\n * @param {fabric.Point} The point relative to the local coordinate system\n * @return {fabric.Point}\n */\n // toGlobalPoint: function(point) {\n // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top));\n // },\n\n /**\n * Sets the position of the object taking into consideration the object's origin\n * @param {fabric.Point} pos The new position of the object\n * @param {String} originX Horizontal origin: 'left', 'center' or 'right'\n * @param {String} originY Vertical origin: 'top', 'center' or 'bottom'\n * @return {void}\n */\n setPositionByOrigin: function(pos, originX, originY) {\n var center = this.translateToCenterPoint(pos, originX, originY),\n position = this.translateToOriginPoint(center, this.originX, this.originY);\n\n this.set('left', position.x);\n this.set('top', position.y);\n },\n\n /**\n * @param {String} to One of 'left', 'center', 'right'\n */\n adjustPosition: function(to) {\n var angle = degreesToRadians(this.angle),\n hypotHalf = this.getWidth() / 2,\n xHalf = Math.cos(angle) * hypotHalf,\n yHalf = Math.sin(angle) * hypotHalf,\n hypotFull = this.getWidth(),\n xFull = Math.cos(angle) * hypotFull,\n yFull = Math.sin(angle) * hypotFull;\n\n if (this.originX === 'center' && to === 'left' ||\n this.originX === 'right' && to === 'center') {\n // move half left\n this.left -= xHalf;\n this.top -= yHalf;\n }\n else if (this.originX === 'left' && to === 'center' ||\n this.originX === 'center' && to === 'right') {\n // move half right\n this.left += xHalf;\n this.top += yHalf;\n }\n else if (this.originX === 'left' && to === 'right') {\n // move full right\n this.left += xFull;\n this.top += yFull;\n }\n else if (this.originX === 'right' && to === 'left') {\n // move full left\n this.left -= xFull;\n this.top -= yFull;\n }\n\n this.setCoords();\n this.originX = to;\n },\n\n /**\n * Sets the origin/position of the object to it's center point\n * @private\n * @return {void}\n */\n _setOriginToCenter: function() {\n this._originalOriginX = this.originX;\n this._originalOriginY = this.originY;\n\n var center = this.getCenterPoint();\n\n this.originX = 'center';\n this.originY = 'center';\n\n this.left = center.x;\n this.top = center.y;\n },\n\n /**\n * Resets the origin/position of the object to it's original origin\n * @private\n * @return {void}\n */\n _resetOrigin: function() {\n var originPoint = this.translateToOriginPoint(\n this.getCenterPoint(),\n this._originalOriginX,\n this._originalOriginY);\n\n this.originX = this._originalOriginX;\n this.originY = this._originalOriginY;\n\n this.left = originPoint.x;\n this.top = originPoint.y;\n\n this._originalOriginX = null;\n this._originalOriginY = null;\n },\n\n /**\n * @private\n */\n _getLeftTopCoords: function() {\n return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'center');\n }\n });\n\n})();\n\n\n(function() {\n\n var degreesToRadians = fabric.util.degreesToRadians;\n\n fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * Object containing coordinates of object's controls\n * @type Object\n * @default\n */\n oCoords: null,\n\n /**\n * Checks if object intersects with an area formed by 2 points\n * @param {Object} pointTL top-left point of area\n * @param {Object} pointBR bottom-right point of area\n * @return {Boolean} true if object intersects with an area formed by 2 points\n */\n intersectsWithRect: function(pointTL, pointBR) {\n var oCoords = this.oCoords,\n tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y),\n tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y),\n bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y),\n br = new fabric.Point(oCoords.br.x, oCoords.br.y),\n intersection = fabric.Intersection.intersectPolygonRectangle(\n [tl, tr, br, bl],\n pointTL,\n pointBR\n );\n return intersection.status === 'Intersection';\n },\n\n /**\n * Checks if object intersects with another object\n * @param {Object} other Object to test\n * @return {Boolean} true if object intersects with another object\n */\n intersectsWithObject: function(other) {\n // extracts coords\n function getCoords(oCoords) {\n return {\n tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y),\n tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y),\n bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y),\n br: new fabric.Point(oCoords.br.x, oCoords.br.y)\n };\n }\n var thisCoords = getCoords(this.oCoords),\n otherCoords = getCoords(other.oCoords),\n intersection = fabric.Intersection.intersectPolygonPolygon(\n [thisCoords.tl, thisCoords.tr, thisCoords.br, thisCoords.bl],\n [otherCoords.tl, otherCoords.tr, otherCoords.br, otherCoords.bl]\n );\n\n return intersection.status === 'Intersection';\n },\n\n /**\n * Checks if object is fully contained within area of another object\n * @param {Object} other Object to test\n * @return {Boolean} true if object is fully contained within area of another object\n */\n isContainedWithinObject: function(other) {\n var boundingRect = other.getBoundingRect(),\n point1 = new fabric.Point(boundingRect.left, boundingRect.top),\n point2 = new fabric.Point(boundingRect.left + boundingRect.width, boundingRect.top + boundingRect.height);\n\n return this.isContainedWithinRect(point1, point2);\n },\n\n /**\n * Checks if object is fully contained within area formed by 2 points\n * @param {Object} pointTL top-left point of area\n * @param {Object} pointBR bottom-right point of area\n * @return {Boolean} true if object is fully contained within area formed by 2 points\n */\n isContainedWithinRect: function(pointTL, pointBR) {\n var boundingRect = this.getBoundingRect();\n\n return (\n boundingRect.left >= pointTL.x &&\n boundingRect.left + boundingRect.width <= pointBR.x &&\n boundingRect.top >= pointTL.y &&\n boundingRect.top + boundingRect.height <= pointBR.y\n );\n },\n\n /**\n * Checks if point is inside the object\n * @param {fabric.Point} point Point to check against\n * @return {Boolean} true if point is inside the object\n */\n containsPoint: function(point) {\n var lines = this._getImageLines(this.oCoords),\n xPoints = this._findCrossPoints(point, lines);\n\n // if xPoints is odd then point is inside the object\n return (xPoints !== 0 && xPoints % 2 === 1);\n },\n\n /**\n * Method that returns an object with the object edges in it, given the coordinates of the corners\n * @private\n * @param {Object} oCoords Coordinates of the object corners\n */\n _getImageLines: function(oCoords) {\n return {\n topline: {\n o: oCoords.tl,\n d: oCoords.tr\n },\n rightline: {\n o: oCoords.tr,\n d: oCoords.br\n },\n bottomline: {\n o: oCoords.br,\n d: oCoords.bl\n },\n leftline: {\n o: oCoords.bl,\n d: oCoords.tl\n }\n };\n },\n\n /**\n * Helper method to determine how many cross points are between the 4 object edges\n * and the horizontal line determined by a point on canvas\n * @private\n * @param {fabric.Point} point Point to check\n * @param {Object} oCoords Coordinates of the object being evaluated\n */\n _findCrossPoints: function(point, oCoords) {\n var b1, b2, a1, a2, xi, yi,\n xcount = 0,\n iLine;\n\n for (var lineKey in oCoords) {\n iLine = oCoords[lineKey];\n // optimisation 1: line below point. no cross\n if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) {\n continue;\n }\n // optimisation 2: line above point. no cross\n if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) {\n continue;\n }\n // optimisation 3: vertical line case\n if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) {\n xi = iLine.o.x;\n yi = point.y;\n }\n // calculate the intersection point\n else {\n b1 = 0;\n b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x);\n a1 = point.y - b1 * point.x;\n a2 = iLine.o.y - b2 * iLine.o.x;\n\n xi = - (a1 - a2) / (b1 - b2);\n yi = a1 + b1 * xi;\n }\n // dont count xi < point.x cases\n if (xi >= point.x) {\n xcount += 1;\n }\n // optimisation 4: specific for square images\n if (xcount === 2) {\n break;\n }\n }\n return xcount;\n },\n\n /**\n * Returns width of an object's bounding rectangle\n * @deprecated since 1.0.4\n * @return {Number} width value\n */\n getBoundingRectWidth: function() {\n return this.getBoundingRect().width;\n },\n\n /**\n * Returns height of an object's bounding rectangle\n * @deprecated since 1.0.4\n * @return {Number} height value\n */\n getBoundingRectHeight: function() {\n return this.getBoundingRect().height;\n },\n\n /**\n * Returns coordinates of object's bounding rectangle (left, top, width, height)\n * @return {Object} Object with left, top, width, height properties\n */\n getBoundingRect: function() {\n this.oCoords || this.setCoords();\n\n var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x],\n minX = fabric.util.array.min(xCoords),\n maxX = fabric.util.array.max(xCoords),\n width = Math.abs(minX - maxX),\n\n yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y],\n minY = fabric.util.array.min(yCoords),\n maxY = fabric.util.array.max(yCoords),\n height = Math.abs(minY - maxY);\n\n return {\n left: minX,\n top: minY,\n width: width,\n height: height\n };\n },\n\n /**\n * Returns width of an object\n * @return {Number} width value\n */\n getWidth: function() {\n return this.width * this.scaleX;\n },\n\n /**\n * Returns height of an object\n * @return {Number} height value\n */\n getHeight: function() {\n return this.height * this.scaleY;\n },\n\n /**\n * Makes sure the scale is valid and modifies it if necessary\n * @private\n * @param {Number} value\n * @return {Number}\n */\n _constrainScale: function(value) {\n if (Math.abs(value) < this.minScaleLimit) {\n if (value < 0) {\n return -this.minScaleLimit;\n }\n else {\n return this.minScaleLimit;\n }\n }\n return value;\n },\n\n /**\n * Scales an object (equally by x and y)\n * @param {Number} value Scale factor\n * @return {fabric.Object} thisArg\n * @chainable\n */\n scale: function(value) {\n value = this._constrainScale(value);\n\n if (value < 0) {\n this.flipX = !this.flipX;\n this.flipY = !this.flipY;\n value *= -1;\n }\n\n this.scaleX = value;\n this.scaleY = value;\n this.setCoords();\n return this;\n },\n\n /**\n * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)\n * @param {Number} value New width value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n scaleToWidth: function(value) {\n // adjust to bounding rect factor so that rotated shapes would fit as well\n var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();\n return this.scale(value / this.width / boundingRectFactor);\n },\n\n /**\n * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)\n * @param {Number} value New height value\n * @return {fabric.Object} thisArg\n * @chainable\n */\n scaleToHeight: function(value) {\n // adjust to bounding rect factor so that rotated shapes would fit as well\n var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();\n return this.scale(value / this.height / boundingRectFactor);\n },\n\n /**\n * Sets corner position coordinates based on current angle, width and height\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setCoords: function() {\n var strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0,\n theta = degreesToRadians(this.angle),\n vpt = this.getViewportTransform(),\n f = function (p) {\n return fabric.util.transformPoint(p, vpt);\n },\n w = this.width,\n h = this.height,\n capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',\n vLine = this.type === 'line' && this.width === 1,\n hLine = this.type === 'line' && this.height === 1,\n strokeW = (capped && hLine) || this.type !== 'line',\n strokeH = (capped && vLine) || this.type !== 'line';\n\n if (vLine) {\n w = strokeWidth;\n }\n else if (hLine) {\n h = strokeWidth;\n }\n if (strokeW) {\n w += strokeWidth;\n }\n if (strokeH) {\n h += strokeWidth;\n }\n this.currentWidth = w * this.scaleX;\n this.currentHeight = h * this.scaleY;\n\n // If width is negative, make postive. Fixes path selection issue\n if (this.currentWidth < 0) {\n this.currentWidth = Math.abs(this.currentWidth);\n }\n\n var _hypotenuse = Math.sqrt(\n Math.pow(this.currentWidth / 2, 2) +\n Math.pow(this.currentHeight / 2, 2)),\n\n _angle = Math.atan(\n isFinite(this.currentHeight / this.currentWidth)\n ? this.currentHeight / this.currentWidth\n : 0),\n\n // offset added for rotate and scale actions\n offsetX = Math.cos(_angle + theta) * _hypotenuse,\n offsetY = Math.sin(_angle + theta) * _hypotenuse,\n sinTh = Math.sin(theta),\n cosTh = Math.cos(theta),\n coords = this.getCenterPoint(),\n wh = new fabric.Point(this.currentWidth, this.currentHeight),\n _tl = new fabric.Point(coords.x - offsetX, coords.y - offsetY),\n _tr = new fabric.Point(_tl.x + (wh.x * cosTh), _tl.y + (wh.x * sinTh)),\n _bl = new fabric.Point(_tl.x - (wh.y * sinTh), _tl.y + (wh.y * cosTh)),\n _mt = new fabric.Point(_tl.x + (wh.x/2 * cosTh), _tl.y + (wh.x/2 * sinTh)),\n tl = f(_tl),\n tr = f(_tr),\n br = f(new fabric.Point(_tr.x - (wh.y * sinTh), _tr.y + (wh.y * cosTh))),\n bl = f(_bl),\n ml = f(new fabric.Point(_tl.x - (wh.y/2 * sinTh), _tl.y + (wh.y/2 * cosTh))),\n mt = f(_mt),\n mr = f(new fabric.Point(_tr.x - (wh.y/2 * sinTh), _tr.y + (wh.y/2 * cosTh))),\n mb = f(new fabric.Point(_bl.x + (wh.x/2 * cosTh), _bl.y + (wh.x/2 * sinTh))),\n mtr = f(new fabric.Point(_mt.x, _mt.y)),\n\n // padding\n padX = Math.cos(_angle + theta) * this.padding * Math.sqrt(2),\n padY = Math.sin(_angle + theta) * this.padding * Math.sqrt(2);\n\n tl = tl.add(new fabric.Point(-padX, -padY));\n tr = tr.add(new fabric.Point(padY, -padX));\n br = br.add(new fabric.Point(padX, padY));\n bl = bl.add(new fabric.Point(-padY, padX));\n ml = ml.add(new fabric.Point((-padX - padY) / 2, (-padY + padX) / 2));\n mt = mt.add(new fabric.Point((padY - padX) / 2, -(padY + padX) / 2));\n mr = mr.add(new fabric.Point((padY + padX) / 2, (padY - padX) / 2));\n mb = mb.add(new fabric.Point((padX - padY) / 2, (padX + padY) / 2));\n mtr = mtr.add(new fabric.Point((padY - padX) / 2, -(padY + padX) / 2));\n\n // debugging\n\n // setTimeout(function() {\n // canvas.contextTop.fillStyle = 'green';\n // canvas.contextTop.fillRect(mb.x, mb.y, 3, 3);\n // canvas.contextTop.fillRect(bl.x, bl.y, 3, 3);\n // canvas.contextTop.fillRect(br.x, br.y, 3, 3);\n // canvas.contextTop.fillRect(tl.x, tl.y, 3, 3);\n // canvas.contextTop.fillRect(tr.x, tr.y, 3, 3);\n // canvas.contextTop.fillRect(ml.x, ml.y, 3, 3);\n // canvas.contextTop.fillRect(mr.x, mr.y, 3, 3);\n // canvas.contextTop.fillRect(mt.x, mt.y, 3, 3);\n // }, 50);\n\n this.oCoords = {\n // corners\n tl: tl, tr: tr, br: br, bl: bl,\n // middle\n ml: ml, mt: mt, mr: mr, mb: mb,\n // rotating point\n mtr: mtr\n };\n\n // set coordinates of the draggable boxes in the corners used to scale/rotate the image\n this._setCornerCoords && this._setCornerCoords();\n\n return this;\n }\n });\n})();\n\n\nfabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * Moves an object to the bottom of the stack of drawn objects\n * @return {fabric.Object} thisArg\n * @chainable\n */\n sendToBack: function() {\n if (this.group) {\n fabric.StaticCanvas.prototype.sendToBack.call(this.group, this);\n }\n else {\n this.canvas.sendToBack(this);\n }\n return this;\n },\n\n /**\n * Moves an object to the top of the stack of drawn objects\n * @return {fabric.Object} thisArg\n * @chainable\n */\n bringToFront: function() {\n if (this.group) {\n fabric.StaticCanvas.prototype.bringToFront.call(this.group, this);\n }\n else {\n this.canvas.bringToFront(this);\n }\n return this;\n },\n\n /**\n * Moves an object down in stack of drawn objects\n * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object\n * @return {fabric.Object} thisArg\n * @chainable\n */\n sendBackwards: function(intersecting) {\n if (this.group) {\n fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting);\n }\n else {\n this.canvas.sendBackwards(this, intersecting);\n }\n return this;\n },\n\n /**\n * Moves an object up in stack of drawn objects\n * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object\n * @return {fabric.Object} thisArg\n * @chainable\n */\n bringForward: function(intersecting) {\n if (this.group) {\n fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting);\n }\n else {\n this.canvas.bringForward(this, intersecting);\n }\n return this;\n },\n\n /**\n * Moves an object to specified level in stack of drawn objects\n * @param {Number} index New position of object\n * @return {fabric.Object} thisArg\n * @chainable\n */\n moveTo: function(index) {\n if (this.group) {\n fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index);\n }\n else {\n this.canvas.moveTo(this, index);\n }\n return this;\n }\n});\n\n\n/* _TO_SVG_START_ */\nfabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * Returns styles-string for svg-export\n * @return {String}\n */\n getSvgStyles: function() {\n\n var fill = this.fill\n ? (this.fill.toLive ? 'url(#SVGID_' + this.fill.id + ')' : this.fill)\n : 'none',\n fillRule = this.fillRule,\n stroke = this.stroke\n ? (this.stroke.toLive ? 'url(#SVGID_' + this.stroke.id + ')' : this.stroke)\n : 'none',\n\n strokeWidth = this.strokeWidth ? this.strokeWidth : '0',\n strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : '',\n strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt',\n strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter',\n strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4',\n opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1',\n\n visibility = this.visible ? '' : ' visibility: hidden;',\n filter = this.shadow && this.type !== 'text' ? 'filter: url(#SVGID_' + this.shadow.id + ');' : '';\n\n return [\n 'stroke: ', stroke, '; ',\n 'stroke-width: ', strokeWidth, '; ',\n 'stroke-dasharray: ', strokeDashArray, '; ',\n 'stroke-linecap: ', strokeLineCap, '; ',\n 'stroke-linejoin: ', strokeLineJoin, '; ',\n 'stroke-miterlimit: ', strokeMiterLimit, '; ',\n 'fill: ', fill, '; ',\n 'fill-rule: ', fillRule, '; ',\n 'opacity: ', opacity, ';',\n filter,\n visibility\n ].join('');\n },\n\n /**\n * Returns transform-string for svg-export\n * @return {String}\n */\n getSvgTransform: function() {\n if (this.group && this.group.type === 'path-group') {\n return '';\n }\n var toFixed = fabric.util.toFixed,\n angle = this.getAngle(),\n vpt = !this.canvas || this.canvas.svgViewportTransformation ? this.getViewportTransform() : [1, 0, 0, 1, 0, 0],\n center = fabric.util.transformPoint(this.getCenterPoint(), vpt),\n\n NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,\n\n translatePart = this.type === 'path-group' ? '' : 'translate(' +\n toFixed(center.x, NUM_FRACTION_DIGITS) +\n ' ' +\n toFixed(center.y, NUM_FRACTION_DIGITS) +\n ')',\n\n anglePart = angle !== 0\n ? (' rotate(' + toFixed(angle, NUM_FRACTION_DIGITS) + ')')\n : '',\n\n scalePart = (this.scaleX === 1 && this.scaleY === 1 && vpt[0] === 1 && vpt[3] === 1)\n ? '' :\n (' scale(' +\n toFixed(this.scaleX * vpt[0], NUM_FRACTION_DIGITS) +\n ' ' +\n toFixed(this.scaleY * vpt[3], NUM_FRACTION_DIGITS) +\n ')'),\n\n addTranslateX = this.type === 'path-group' ? this.width * vpt[0] : 0,\n\n flipXPart = this.flipX ? ' matrix(-1 0 0 1 ' + addTranslateX + ' 0) ' : '',\n\n addTranslateY = this.type === 'path-group' ? this.height * vpt[3] : 0,\n\n flipYPart = this.flipY ? ' matrix(1 0 0 -1 0 ' + addTranslateY + ')' : '';\n\n return [\n translatePart, anglePart, scalePart, flipXPart, flipYPart\n ].join('');\n },\n\n /**\n * Returns transform-string for svg-export from the transform matrix of single elements\n * @return {String}\n */\n getSvgTransformMatrix: function() {\n return this.transformMatrix ? ' matrix(' + this.transformMatrix.join(' ') + ')' : '';\n },\n\n /**\n * @private\n */\n _createBaseSVGMarkup: function() {\n var markup = [ ];\n\n if (this.fill && this.fill.toLive) {\n markup.push(this.fill.toSVG(this, false));\n }\n if (this.stroke && this.stroke.toLive) {\n markup.push(this.stroke.toSVG(this, false));\n }\n if (this.shadow) {\n markup.push(this.shadow.toSVG(this));\n }\n return markup;\n }\n});\n/* _TO_SVG_END_ */\n\n\n/*\n Depends on `stateProperties`\n */\nfabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * Returns true if object state (one of its state properties) was changed\n * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called\n */\n hasStateChanged: function() {\n return this.stateProperties.some(function(prop) {\n return this.get(prop) !== this.originalState[prop];\n }, this);\n },\n\n /**\n * Saves state of an object\n * @param {Object} [options] Object with additional `stateProperties` array to include when saving state\n * @return {fabric.Object} thisArg\n */\n saveState: function(options) {\n this.stateProperties.forEach(function(prop) {\n this.originalState[prop] = this.get(prop);\n }, this);\n\n if (options && options.stateProperties) {\n options.stateProperties.forEach(function(prop) {\n this.originalState[prop] = this.get(prop);\n }, this);\n }\n\n return this;\n },\n\n /**\n * Setups state of an object\n * @return {fabric.Object} thisArg\n */\n setupState: function() {\n this.originalState = { };\n this.saveState();\n\n return this;\n }\n});\n\n\n(function() {\n\n var degreesToRadians = fabric.util.degreesToRadians,\n //jscs:disable requireCamelCaseOrUpperCaseIdentifiers\n isVML = function() { return typeof G_vmlCanvasManager !== 'undefined'; };\n //jscs:enable requireCamelCaseOrUpperCaseIdentifiers\n\n fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * The object interactivity controls.\n * @private\n */\n _controlsVisibility: null,\n\n /**\n * Determines which corner has been clicked\n * @private\n * @param {Object} pointer The pointer indicating the mouse position\n * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found\n */\n _findTargetCorner: function(pointer) {\n if (!this.hasControls || !this.active) {\n return false;\n }\n\n var ex = pointer.x,\n ey = pointer.y,\n xPoints,\n lines;\n\n for (var i in this.oCoords) {\n\n if (!this.isControlVisible(i)) {\n continue;\n }\n\n if (i === 'mtr' && !this.hasRotatingPoint) {\n continue;\n }\n\n if (this.get('lockUniScaling') &&\n (i === 'mt' || i === 'mr' || i === 'mb' || i === 'ml')) {\n continue;\n }\n\n lines = this._getImageLines(this.oCoords[i].corner);\n\n // debugging\n\n // canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);\n // canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);\n\n // canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);\n // canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);\n\n // canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);\n // canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);\n\n // canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);\n // canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);\n\n xPoints = this._findCrossPoints({ x: ex, y: ey }, lines);\n if (xPoints !== 0 && xPoints % 2 === 1) {\n this.__corner = i;\n return i;\n }\n }\n return false;\n },\n\n /**\n * Sets the coordinates of the draggable boxes in the corners of\n * the image used to scale/rotate it.\n * @private\n */\n _setCornerCoords: function() {\n var coords = this.oCoords,\n theta = degreesToRadians(this.angle),\n newTheta = degreesToRadians(45 - this.angle),\n cornerHypotenuse = Math.sqrt(2 * Math.pow(this.cornerSize, 2)) / 2,\n cosHalfOffset = cornerHypotenuse * Math.cos(newTheta),\n sinHalfOffset = cornerHypotenuse * Math.sin(newTheta),\n sinTh = Math.sin(theta),\n cosTh = Math.cos(theta);\n\n coords.tl.corner = {\n tl: {\n x: coords.tl.x - sinHalfOffset,\n y: coords.tl.y - cosHalfOffset\n },\n tr: {\n x: coords.tl.x + cosHalfOffset,\n y: coords.tl.y - sinHalfOffset\n },\n bl: {\n x: coords.tl.x - cosHalfOffset,\n y: coords.tl.y + sinHalfOffset\n },\n br: {\n x: coords.tl.x + sinHalfOffset,\n y: coords.tl.y + cosHalfOffset\n }\n };\n\n coords.tr.corner = {\n tl: {\n x: coords.tr.x - sinHalfOffset,\n y: coords.tr.y - cosHalfOffset\n },\n tr: {\n x: coords.tr.x + cosHalfOffset,\n y: coords.tr.y - sinHalfOffset\n },\n br: {\n x: coords.tr.x + sinHalfOffset,\n y: coords.tr.y + cosHalfOffset\n },\n bl: {\n x: coords.tr.x - cosHalfOffset,\n y: coords.tr.y + sinHalfOffset\n }\n };\n\n coords.bl.corner = {\n tl: {\n x: coords.bl.x - sinHalfOffset,\n y: coords.bl.y - cosHalfOffset\n },\n bl: {\n x: coords.bl.x - cosHalfOffset,\n y: coords.bl.y + sinHalfOffset\n },\n br: {\n x: coords.bl.x + sinHalfOffset,\n y: coords.bl.y + cosHalfOffset\n },\n tr: {\n x: coords.bl.x + cosHalfOffset,\n y: coords.bl.y - sinHalfOffset\n }\n };\n\n coords.br.corner = {\n tr: {\n x: coords.br.x + cosHalfOffset,\n y: coords.br.y - sinHalfOffset\n },\n bl: {\n x: coords.br.x - cosHalfOffset,\n y: coords.br.y + sinHalfOffset\n },\n br: {\n x: coords.br.x + sinHalfOffset,\n y: coords.br.y + cosHalfOffset\n },\n tl: {\n x: coords.br.x - sinHalfOffset,\n y: coords.br.y - cosHalfOffset\n }\n };\n\n coords.ml.corner = {\n tl: {\n x: coords.ml.x - sinHalfOffset,\n y: coords.ml.y - cosHalfOffset\n },\n tr: {\n x: coords.ml.x + cosHalfOffset,\n y: coords.ml.y - sinHalfOffset\n },\n bl: {\n x: coords.ml.x - cosHalfOffset,\n y: coords.ml.y + sinHalfOffset\n },\n br: {\n x: coords.ml.x + sinHalfOffset,\n y: coords.ml.y + cosHalfOffset\n }\n };\n\n coords.mt.corner = {\n tl: {\n x: coords.mt.x - sinHalfOffset,\n y: coords.mt.y - cosHalfOffset\n },\n tr: {\n x: coords.mt.x + cosHalfOffset,\n y: coords.mt.y - sinHalfOffset\n },\n bl: {\n x: coords.mt.x - cosHalfOffset,\n y: coords.mt.y + sinHalfOffset\n },\n br: {\n x: coords.mt.x + sinHalfOffset,\n y: coords.mt.y + cosHalfOffset\n }\n };\n\n coords.mr.corner = {\n tl: {\n x: coords.mr.x - sinHalfOffset,\n y: coords.mr.y - cosHalfOffset\n },\n tr: {\n x: coords.mr.x + cosHalfOffset,\n y: coords.mr.y - sinHalfOffset\n },\n bl: {\n x: coords.mr.x - cosHalfOffset,\n y: coords.mr.y + sinHalfOffset\n },\n br: {\n x: coords.mr.x + sinHalfOffset,\n y: coords.mr.y + cosHalfOffset\n }\n };\n\n coords.mb.corner = {\n tl: {\n x: coords.mb.x - sinHalfOffset,\n y: coords.mb.y - cosHalfOffset\n },\n tr: {\n x: coords.mb.x + cosHalfOffset,\n y: coords.mb.y - sinHalfOffset\n },\n bl: {\n x: coords.mb.x - cosHalfOffset,\n y: coords.mb.y + sinHalfOffset\n },\n br: {\n x: coords.mb.x + sinHalfOffset,\n y: coords.mb.y + cosHalfOffset\n }\n };\n\n coords.mtr.corner = {\n tl: {\n x: coords.mtr.x - sinHalfOffset + (sinTh * this.rotatingPointOffset),\n y: coords.mtr.y - cosHalfOffset - (cosTh * this.rotatingPointOffset)\n },\n tr: {\n x: coords.mtr.x + cosHalfOffset + (sinTh * this.rotatingPointOffset),\n y: coords.mtr.y - sinHalfOffset - (cosTh * this.rotatingPointOffset)\n },\n bl: {\n x: coords.mtr.x - cosHalfOffset + (sinTh * this.rotatingPointOffset),\n y: coords.mtr.y + sinHalfOffset - (cosTh * this.rotatingPointOffset)\n },\n br: {\n x: coords.mtr.x + sinHalfOffset + (sinTh * this.rotatingPointOffset),\n y: coords.mtr.y + cosHalfOffset - (cosTh * this.rotatingPointOffset)\n }\n };\n },\n /**\n * Draws borders of an object's bounding box.\n * Requires public properties: width, height\n * Requires public options: padding, borderColor\n * @param {CanvasRenderingContext2D} ctx Context to draw on\n * @return {fabric.Object} thisArg\n * @chainable\n */\n drawBorders: function(ctx) {\n if (!this.hasBorders) {\n return this;\n }\n\n var padding = this.padding,\n padding2 = padding * 2,\n vpt = this.getViewportTransform();\n\n ctx.save();\n\n ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;\n ctx.strokeStyle = this.borderColor;\n\n var scaleX = 1 / this._constrainScale(this.scaleX),\n scaleY = 1 / this._constrainScale(this.scaleY);\n\n ctx.lineWidth = 1 / this.borderScaleFactor;\n\n var w = this.getWidth(),\n h = this.getHeight(),\n strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0,\n capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',\n vLine = this.type === 'line' && this.width === 1,\n hLine = this.type === 'line' && this.height === 1,\n strokeW = (capped && hLine) || this.type !== 'line',\n strokeH = (capped && vLine) || this.type !== 'line';\n if (vLine) {\n w = strokeWidth / scaleX;\n }\n else if (hLine) {\n h = strokeWidth / scaleY;\n }\n if (strokeW) {\n w += strokeWidth / scaleX;\n }\n if (strokeH) {\n h += strokeWidth / scaleY;\n }\n var wh = fabric.util.transformPoint(new fabric.Point(w, h), vpt, true),\n width = wh.x,\n height = wh.y;\n if (this.group) {\n width = width * this.group.scaleX;\n height = height * this.group.scaleY;\n }\n\n ctx.strokeRect(\n ~~(-(width / 2) - padding) - 0.5, // offset needed to make lines look sharper\n ~~(-(height / 2) - padding) - 0.5,\n ~~(width + padding2) + 1, // double offset needed to make lines look sharper\n ~~(height + padding2) + 1\n );\n\n if (this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) {\n\n var rotateHeight = ( -height - (padding * 2)) / 2;\n\n ctx.beginPath();\n ctx.moveTo(0, rotateHeight);\n ctx.lineTo(0, rotateHeight - this.rotatingPointOffset);\n ctx.closePath();\n ctx.stroke();\n }\n\n ctx.restore();\n return this;\n },\n\n /**\n * Draws corners of an object's bounding box.\n * Requires public properties: width, height\n * Requires public options: cornerSize, padding\n * @param {CanvasRenderingContext2D} ctx Context to draw on\n * @return {fabric.Object} thisArg\n * @chainable\n */\n drawControls: function(ctx) {\n if (!this.hasControls) {\n return this;\n }\n\n var size = this.cornerSize,\n size2 = size / 2,\n vpt = this.getViewportTransform(),\n strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0,\n w = this.width,\n h = this.height,\n capped = this.strokeLineCap === 'round' || this.strokeLineCap === 'square',\n vLine = this.type === 'line' && this.width === 1,\n hLine = this.type === 'line' && this.height === 1,\n strokeW = (capped && hLine) || this.type !== 'line',\n strokeH = (capped && vLine) || this.type !== 'line';\n\n if (vLine) {\n w = strokeWidth;\n }\n else if (hLine) {\n h = strokeWidth;\n }\n if (strokeW) {\n w += strokeWidth;\n }\n if (strokeH) {\n h += strokeWidth;\n }\n w *= this.scaleX;\n h *= this.scaleY;\n\n var wh = fabric.util.transformPoint(new fabric.Point(w, h), vpt, true),\n width = wh.x,\n height = wh.y,\n left = -(width / 2),\n top = -(height / 2),\n padding = this.padding,\n scaleOffset = size2,\n scaleOffsetSize = size2 - size,\n methodName = this.transparentCorners ? 'strokeRect' : 'fillRect';\n\n ctx.save();\n\n ctx.lineWidth = 1;\n\n ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;\n ctx.strokeStyle = ctx.fillStyle = this.cornerColor;\n\n // top-left\n this._drawControl('tl', ctx, methodName,\n left - scaleOffset - padding,\n top - scaleOffset - padding);\n\n // top-right\n this._drawControl('tr', ctx, methodName,\n left + width - scaleOffset + padding,\n top - scaleOffset - padding);\n\n // bottom-left\n this._drawControl('bl', ctx, methodName,\n left - scaleOffset - padding,\n top + height + scaleOffsetSize + padding);\n\n // bottom-right\n this._drawControl('br', ctx, methodName,\n left + width + scaleOffsetSize + padding,\n top + height + scaleOffsetSize + padding);\n\n if (!this.get('lockUniScaling')) {\n\n // middle-top\n this._drawControl('mt', ctx, methodName,\n left + width/2 - scaleOffset,\n top - scaleOffset - padding);\n\n // middle-bottom\n this._drawControl('mb', ctx, methodName,\n left + width/2 - scaleOffset,\n top + height + scaleOffsetSize + padding);\n\n // middle-right\n this._drawControl('mr', ctx, methodName,\n left + width + scaleOffsetSize + padding,\n top + height/2 - scaleOffset);\n\n // middle-left\n this._drawControl('ml', ctx, methodName,\n left - scaleOffset - padding,\n top + height/2 - scaleOffset);\n }\n\n // middle-top-rotate\n if (this.hasRotatingPoint) {\n this._drawControl('mtr', ctx, methodName,\n left + width/2 - scaleOffset,\n top - this.rotatingPointOffset - this.cornerSize/2 - padding);\n }\n\n ctx.restore();\n\n return this;\n },\n\n /**\n * @private\n */\n _drawControl: function(control, ctx, methodName, left, top) {\n var size = this.cornerSize;\n\n if (this.isControlVisible(control)) {\n isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);\n ctx[methodName](left, top, size, size);\n }\n },\n\n /**\n * Returns true if the specified control is visible, false otherwise.\n * @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.\n * @returns {Boolean} true if the specified control is visible, false otherwise\n */\n isControlVisible: function(controlName) {\n return this._getControlsVisibility()[controlName];\n },\n\n /**\n * Sets the visibility of the specified control.\n * @param {String} controlName The name of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'.\n * @param {Boolean} visible true to set the specified control visible, false otherwise\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setControlVisible: function(controlName, visible) {\n this._getControlsVisibility()[controlName] = visible;\n return this;\n },\n\n /**\n * Sets the visibility state of object controls.\n * @param {Object} [options] Options object\n * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it\n * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it\n * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it\n * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it\n * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it\n * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it\n * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it\n * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it\n * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it\n * @return {fabric.Object} thisArg\n * @chainable\n */\n setControlsVisibility: function(options) {\n options || (options = { });\n\n for (var p in options) {\n this.setControlVisible(p, options[p]);\n }\n return this;\n },\n\n /**\n * Returns the instance of the control visibility set for this object.\n * @private\n * @returns {Object}\n */\n _getControlsVisibility: function() {\n if (!this._controlsVisibility) {\n this._controlsVisibility = {\n tl: true,\n tr: true,\n br: true,\n bl: true,\n ml: true,\n mt: true,\n mr: true,\n mb: true,\n mtr: true\n };\n }\n return this._controlsVisibility;\n }\n });\n})();\n\n\nfabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {\n\n /**\n * Animation duration (in ms) for fx* methods\n * @type Number\n * @default\n */\n FX_DURATION: 500,\n\n /**\n * Centers object horizontally with animation.\n * @param {fabric.Object} object Object to center\n * @param {Object} [callbacks] Callbacks object with optional \"onComplete\" and/or \"onChange\" properties\n * @param {Function} [callbacks.onComplete] Invoked on completion\n * @param {Function} [callbacks.onChange] Invoked on every step of animation\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n fxCenterObjectH: function (object, callbacks) {\n callbacks = callbacks || { };\n\n var empty = function() { },\n onComplete = callbacks.onComplete || empty,\n onChange = callbacks.onChange || empty,\n _this = this;\n\n fabric.util.animate({\n startValue: object.get('left'),\n endValue: this.getCenter().left,\n duration: this.FX_DURATION,\n onChange: function(value) {\n object.set('left', value);\n _this.renderAll();\n onChange();\n },\n onComplete: function() {\n object.setCoords();\n onComplete();\n }\n });\n\n return this;\n },\n\n /**\n * Centers object vertically with animation.\n * @param {fabric.Object} object Object to center\n * @param {Object} [callbacks] Callbacks object with optional \"onComplete\" and/or \"onChange\" properties\n * @param {Function} [callbacks.onComplete] Invoked on completion\n * @param {Function} [callbacks.onChange] Invoked on every step of animation\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n fxCenterObjectV: function (object, callbacks) {\n callbacks = callbacks || { };\n\n var empty = function() { },\n onComplete = callbacks.onComplete || empty,\n onChange = callbacks.onChange || empty,\n _this = this;\n\n fabric.util.animate({\n startValue: object.get('top'),\n endValue: this.getCenter().top,\n duration: this.FX_DURATION,\n onChange: function(value) {\n object.set('top', value);\n _this.renderAll();\n onChange();\n },\n onComplete: function() {\n object.setCoords();\n onComplete();\n }\n });\n\n return this;\n },\n\n /**\n * Same as `fabric.Canvas#remove` but animated\n * @param {fabric.Object} object Object to remove\n * @param {Object} [callbacks] Callbacks object with optional \"onComplete\" and/or \"onChange\" properties\n * @param {Function} [callbacks.onComplete] Invoked on completion\n * @param {Function} [callbacks.onChange] Invoked on every step of animation\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n fxRemove: function (object, callbacks) {\n callbacks = callbacks || { };\n\n var empty = function() { },\n onComplete = callbacks.onComplete || empty,\n onChange = callbacks.onChange || empty,\n _this = this;\n\n fabric.util.animate({\n startValue: object.get('opacity'),\n endValue: 0,\n duration: this.FX_DURATION,\n onStart: function() {\n object.set('active', false);\n },\n onChange: function(value) {\n object.set('opacity', value);\n _this.renderAll();\n onChange();\n },\n onComplete: function () {\n _this.remove(object);\n onComplete();\n }\n });\n\n return this;\n }\n});\n\nfabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n /**\n * Animates object's properties\n * @param {String|Object} property Property to animate (if string) or properties to animate (if object)\n * @param {Number|Object} value Value to animate property to (if string was given first) or options object\n * @return {fabric.Object} thisArg\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#animation}\n * @chainable\n *\n * As object — multiple properties\n *\n * object.animate({ left: ..., top: ... });\n * object.animate({ left: ..., top: ... }, { duration: ... });\n *\n * As string — one property\n *\n * object.animate('left', ...);\n * object.animate('left', { duration: ... });\n *\n */\n animate: function() {\n if (arguments[0] && typeof arguments[0] === 'object') {\n var propsToAnimate = [ ], prop, skipCallbacks;\n for (prop in arguments[0]) {\n propsToAnimate.push(prop);\n }\n for (var i = 0, len = propsToAnimate.length; i < len; i++) {\n prop = propsToAnimate[i];\n skipCallbacks = i !== len - 1;\n this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks);\n }\n }\n else {\n this._animate.apply(this, arguments);\n }\n return this;\n },\n\n /**\n * @private\n * @param {String} property Property to animate\n * @param {String} to Value to animate to\n * @param {Object} [options] Options object\n * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked\n */\n _animate: function(property, to, options, skipCallbacks) {\n var _this = this, propPair;\n\n to = to.toString();\n\n if (!options) {\n options = { };\n }\n else {\n options = fabric.util.object.clone(options);\n }\n\n if (~property.indexOf('.')) {\n propPair = property.split('.');\n }\n\n var currentValue = propPair\n ? this.get(propPair[0])[propPair[1]]\n : this.get(property);\n\n if (!('from' in options)) {\n options.from = currentValue;\n }\n\n if (~to.indexOf('=')) {\n to = currentValue + parseFloat(to.replace('=', ''));\n }\n else {\n to = parseFloat(to);\n }\n\n fabric.util.animate({\n startValue: options.from,\n endValue: to,\n byValue: options.by,\n easing: options.easing,\n duration: options.duration,\n abort: options.abort && function() {\n return options.abort.call(_this);\n },\n onChange: function(value) {\n if (propPair) {\n _this[propPair[0]][propPair[1]] = value;\n }\n else {\n _this.set(property, value);\n }\n if (skipCallbacks) {\n return;\n }\n options.onChange && options.onChange();\n },\n onComplete: function() {\n if (skipCallbacks) {\n return;\n }\n\n _this.setCoords();\n options.onComplete && options.onComplete();\n }\n });\n }\n});\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 },\n supportsLineDash = fabric.StaticCanvas.supports('setLineDash');\n\n if (fabric.Line) {\n fabric.warn('fabric.Line is already defined');\n return;\n }\n\n /**\n * Line class\n * @class fabric.Line\n * @extends fabric.Object\n * @see {@link fabric.Line#initialize} for constructor definition\n */\n fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'line',\n\n /**\n * x value or first line edge\n * @type Number\n * @default\n */\n x1: 0,\n\n /**\n * y value or first line edge\n * @type Number\n * @default\n */\n y1: 0,\n\n /**\n * x value or second line edge\n * @type Number\n * @default\n */\n x2: 0,\n\n /**\n * y value or second line edge\n * @type Number\n * @default\n */\n y2: 0,\n\n /**\n * Constructor\n * @param {Array} [points] Array of points\n * @param {Object} [options] Options object\n * @return {fabric.Line} thisArg\n */\n initialize: function(points, options) {\n options = options || { };\n\n if (!points) {\n points = [0, 0, 0, 0];\n }\n\n this.callSuper('initialize', options);\n\n this.set('x1', points[0]);\n this.set('y1', points[1]);\n this.set('x2', points[2]);\n this.set('y2', points[3]);\n\n this._setWidthHeight(options);\n },\n\n /**\n * @private\n * @param {Object} [options] Options\n */\n _setWidthHeight: function(options) {\n options || (options = { });\n\n this.width = Math.abs(this.x2 - this.x1) || 1;\n this.height = Math.abs(this.y2 - this.y1) || 1;\n\n this.left = 'left' in options\n ? options.left\n : this._getLeftToOriginX();\n\n this.top = 'top' in options\n ? options.top\n : this._getTopToOriginY();\n },\n\n /**\n * @private\n * @param {String} key\n * @param {Any} value\n */\n _set: function(key, value) {\n this.callSuper('_set', key, value);\n if (typeof coordProps[key] !== 'undefined') {\n this._setWidthHeight();\n }\n return this;\n },\n\n /**\n * @private\n * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line.\n */\n _getLeftToOriginX: makeEdgeToOriginGetter(\n { // property names\n origin: 'originX',\n axis1: 'x1',\n axis2: 'x2',\n dimension: 'width'\n },\n { // possible values of origin\n nearest: 'left',\n center: 'center',\n farthest: 'right'\n }\n ),\n\n /**\n * @private\n * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line.\n */\n _getTopToOriginY: makeEdgeToOriginGetter(\n { // property names\n origin: 'originY',\n axis1: 'y1',\n axis2: 'y2',\n dimension: 'height'\n },\n { // possible values of origin\n nearest: 'top',\n center: 'center',\n farthest: 'bottom'\n }\n ),\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx, noTransform) {\n ctx.beginPath();\n\n if (noTransform) {\n // Line coords are distances from left-top of canvas to origin of line.\n //\n // To render line in a path-group, we need to translate them to\n // distances from center of path-group to center of line.\n var cp = this.getCenterPoint();\n ctx.translate(\n cp.x,\n cp.y\n );\n }\n\n if (!this.strokeDashArray || this.strokeDashArray && supportsLineDash) {\n\n // move from center (of virtual box) to its left/top corner\n // we can't assume x1, y1 is top left and x2, y2 is bottom right\n var xMult = this.x1 <= this.x2 ? -1 : 1,\n yMult = this.y1 <= this.y2 ? -1 : 1;\n\n ctx.moveTo(\n this.width === 1 ? 0 : (xMult * this.width / 2),\n this.height === 1 ? 0 : (yMult * this.height / 2));\n\n ctx.lineTo(\n this.width === 1 ? 0 : (xMult * -1 * this.width / 2),\n this.height === 1 ? 0 : (yMult * -1 * this.height / 2));\n }\n\n ctx.lineWidth = this.strokeWidth;\n\n // TODO: test this\n // make sure setting \"fill\" changes color of a line\n // (by copying fillStyle to strokeStyle, since line is stroked, not filled)\n var origStrokeStyle = ctx.strokeStyle;\n ctx.strokeStyle = this.stroke || ctx.fillStyle;\n this.stroke && this._renderStroke(ctx);\n ctx.strokeStyle = origStrokeStyle;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n var\n xMult = this.x1 <= this.x2 ? -1 : 1,\n yMult = this.y1 <= this.y2 ? -1 : 1,\n x = this.width === 1 ? 0 : xMult * this.width / 2,\n y = this.height === 1 ? 0 : yMult * this.height / 2;\n\n ctx.beginPath();\n fabric.util.drawDashedLine(ctx, x, y, -x, -y, this.strokeDashArray);\n ctx.closePath();\n },\n\n /**\n * Returns object representation of an instance\n * @methd toObject\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints());\n },\n\n /**\n * @private\n * Recalculate line points from width and height.\n */\n calcLinePoints: function() {\n var xMult = this.x1 <= this.x2 ? -1 : 1,\n yMult = this.y1 <= this.y2 ? -1 : 1,\n x1 = (xMult * this.width / 2),\n y1 = (yMult * this.height / 2),\n x2 = (xMult * -1 * this.width / 2),\n y2 = (yMult * -1 * this.height / 2);\n\n return {\n x1: x1,\n x2: x2,\n y1: y1,\n y2: y2\n };\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = this._createBaseSVGMarkup(),\n p = { x1: this.x1, x2: this.x2, y1: this.y1, y2: this.y2 };\n\n if (!(this.group && this.group.type === 'path-group')) {\n p = this.calcLinePoints();\n }\n markup.push(\n '\\n'\n );\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity\n */\n complexity: function() {\n return 1;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement})\n * @static\n * @memberOf fabric.Line\n * @see http://www.w3.org/TR/SVG/shapes.html#LineElement\n */\n fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' '));\n\n /**\n * Returns fabric.Line instance from an SVG element\n * @static\n * @memberOf fabric.Line\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Line} instance of fabric.Line\n */\n fabric.Line.fromElement = function(element, options) {\n var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES),\n points = [\n parsedAttributes.x1 || 0,\n parsedAttributes.y1 || 0,\n parsedAttributes.x2 || 0,\n parsedAttributes.y2 || 0\n ];\n return new fabric.Line(points, extend(parsedAttributes, options));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns fabric.Line instance from an object representation\n * @static\n * @memberOf fabric.Line\n * @param {Object} object Object to create an instance from\n * @return {fabric.Line} instance of fabric.Line\n */\n fabric.Line.fromObject = function(object) {\n var points = [object.x1, object.y1, object.x2, object.y2];\n return new fabric.Line(points, object);\n };\n\n /**\n * Produces a function that calculates distance from canvas edge to Line origin.\n */\n function makeEdgeToOriginGetter(propertyNames, originValues) {\n var origin = propertyNames.origin,\n axis1 = propertyNames.axis1,\n axis2 = propertyNames.axis2,\n dimension = propertyNames.dimension,\n nearest = originValues.nearest,\n center = originValues.center,\n farthest = originValues.farthest;\n\n return function() {\n switch (this.get(origin)) {\n case nearest:\n return Math.min(this.get(axis1), this.get(axis2));\n case center:\n return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension));\n case farthest:\n return Math.max(this.get(axis1), this.get(axis2));\n }\n };\n\n }\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n pi = Math.PI,\n extend = fabric.util.object.extend;\n\n if (fabric.Circle) {\n fabric.warn('fabric.Circle is already defined.');\n return;\n }\n\n /**\n * Circle class\n * @class fabric.Circle\n * @extends fabric.Object\n * @see {@link fabric.Circle#initialize} for constructor definition\n */\n fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'circle',\n\n /**\n * Radius of this circle\n * @type Number\n * @default\n */\n radius: 0,\n\n /**\n * Start angle of the circle, moving clockwise\n * @type Number\n * @default 0\n */\n startAngle: 0,\n\n /**\n * End angle of the circle\n * @type Number\n * @default 2Pi\n */\n endAngle: pi * 2,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @return {fabric.Circle} thisArg\n */\n initialize: function(options) {\n options = options || { };\n\n this.callSuper('initialize', options);\n this.set('radius', options.radius || 0);\n this.startAngle = options.startAngle || this.startAngle;\n this.endAngle = options.endAngle || this.endAngle;\n },\n\n /**\n * @private\n * @param {String} key\n * @param {Any} value\n * @return {fabric.Circle} thisArg\n */\n _set: function(key, value) {\n this.callSuper('_set', key, value);\n\n if (key === 'radius') {\n this.setRadius(value);\n }\n\n return this;\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), {\n radius: this.get('radius'),\n startAngle: this.startAngle,\n endAngle: this.endAngle\n });\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = this._createBaseSVGMarkup(), x = 0, y = 0,\n angle = (this.endAngle - this.startAngle) % ( 2 * pi);\n\n if (angle === 0) {\n if (this.group && this.group.type === 'path-group') {\n x = this.left + this.radius;\n y = this.top + this.radius;\n }\n markup.push(\n '\\n'\n );\n }\n else {\n var startX = Math.cos(this.startAngle) * this.radius,\n startY = Math.sin(this.startAngle) * this.radius,\n endX = Math.cos(this.endAngle) * this.radius,\n endY = Math.sin(this.endAngle) * this.radius,\n largeFlag = angle > pi ? '1' : '0';\n\n markup.push(\n '\\n'\n );\n }\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n _render: function(ctx, noTransform) {\n ctx.beginPath();\n ctx.arc(noTransform ? this.left + this.radius : 0,\n noTransform ? this.top + this.radius : 0,\n this.radius,\n this.startAngle,\n this.endAngle, false);\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * Returns horizontal radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRadiusX: function() {\n return this.get('radius') * this.get('scaleX');\n },\n\n /**\n * Returns vertical radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRadiusY: function() {\n return this.get('radius') * this.get('scaleY');\n },\n\n /**\n * Sets radius of an object (and updates width accordingly)\n * @return {Number}\n */\n setRadius: function(value) {\n this.radius = value;\n this.set('width', value * 2).set('height', value * 2);\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return 1;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement})\n * @static\n * @memberOf fabric.Circle\n * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement\n */\n fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' '));\n\n /**\n * Returns {@link fabric.Circle} instance from an SVG element\n * @static\n * @memberOf fabric.Circle\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @throws {Error} If value of `r` attribute is missing or invalid\n * @return {fabric.Circle} Instance of fabric.Circle\n */\n fabric.Circle.fromElement = function(element, options) {\n options || (options = { });\n\n var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES);\n\n if (!isValidRadius(parsedAttributes)) {\n throw new Error('value of `r` attribute is required and can not be negative');\n }\n\n parsedAttributes.left = parsedAttributes.left || 0;\n parsedAttributes.top = parsedAttributes.top || 0;\n\n var obj = new fabric.Circle(extend(parsedAttributes, options));\n\n obj.left -= obj.radius;\n obj.top -= obj.radius;\n return obj;\n };\n\n /**\n * @private\n */\n function isValidRadius(attributes) {\n return (('radius' in attributes) && (attributes.radius > 0));\n }\n /* _FROM_SVG_END_ */\n\n /**\n * Returns {@link fabric.Circle} instance from an object representation\n * @static\n * @memberOf fabric.Circle\n * @param {Object} object Object to create an instance from\n * @return {Object} Instance of fabric.Circle\n */\n fabric.Circle.fromObject = function(object) {\n return new fabric.Circle(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Triangle) {\n fabric.warn('fabric.Triangle is already defined');\n return;\n }\n\n /**\n * Triangle class\n * @class fabric.Triangle\n * @extends fabric.Object\n * @return {fabric.Triangle} thisArg\n * @see {@link fabric.Triangle#initialize} for constructor definition\n */\n fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'triangle',\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @return {Object} thisArg\n */\n initialize: function(options) {\n options = options || { };\n\n this.callSuper('initialize', options);\n\n this.set('width', options.width || 100)\n .set('height', options.height || 100);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx) {\n var widthBy2 = this.width / 2,\n heightBy2 = this.height / 2;\n\n ctx.beginPath();\n ctx.moveTo(-widthBy2, heightBy2);\n ctx.lineTo(0, -heightBy2);\n ctx.lineTo(widthBy2, heightBy2);\n ctx.closePath();\n\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n var widthBy2 = this.width / 2,\n heightBy2 = this.height / 2;\n\n ctx.beginPath();\n fabric.util.drawDashedLine(ctx, -widthBy2, heightBy2, 0, -heightBy2, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, 0, -heightBy2, widthBy2, heightBy2, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, widthBy2, heightBy2, -widthBy2, heightBy2, this.strokeDashArray);\n ctx.closePath();\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = this._createBaseSVGMarkup(),\n widthBy2 = this.width / 2,\n heightBy2 = this.height / 2,\n points = [\n -widthBy2 + ' ' + heightBy2,\n '0 ' + -heightBy2,\n widthBy2 + ' ' + heightBy2\n ]\n .join(',');\n\n markup.push(\n ''\n );\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return 1;\n }\n });\n\n /**\n * Returns fabric.Triangle instance from an object representation\n * @static\n * @memberOf fabric.Triangle\n * @param {Object} object Object to create an instance from\n * @return {Object} instance of Canvas.Triangle\n */\n fabric.Triangle.fromObject = function(object) {\n return new fabric.Triangle(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n piBy2 = Math.PI * 2,\n extend = fabric.util.object.extend;\n\n if (fabric.Ellipse) {\n fabric.warn('fabric.Ellipse is already defined.');\n return;\n }\n\n /**\n * Ellipse class\n * @class fabric.Ellipse\n * @extends fabric.Object\n * @return {fabric.Ellipse} thisArg\n * @see {@link fabric.Ellipse#initialize} for constructor definition\n */\n fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'ellipse',\n\n /**\n * Horizontal radius\n * @type Number\n * @default\n */\n rx: 0,\n\n /**\n * Vertical radius\n * @type Number\n * @default\n */\n ry: 0,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @return {fabric.Ellipse} thisArg\n */\n initialize: function(options) {\n options = options || { };\n\n this.callSuper('initialize', options);\n\n this.set('rx', options.rx || 0);\n this.set('ry', options.ry || 0);\n },\n\n /**\n * @private\n * @param {String} key\n * @param {Any} value\n * @return {fabric.Ellipse} thisArg\n */\n _set: function(key, value) {\n this.callSuper('_set', key, value);\n switch (key) {\n\n case 'rx':\n this.rx = value;\n this.set('width', value * 2);\n break;\n\n case 'ry':\n this.ry = value;\n this.set('height', value * 2);\n break;\n\n }\n return this;\n },\n\n /**\n * Returns horizontal radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRx: function() {\n return this.get('rx') * this.get('scaleX');\n },\n\n /**\n * Returns Vertical radius of an object (according to how an object is scaled)\n * @return {Number}\n */\n getRy: function() {\n return this.get('ry') * this.get('scaleY');\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), {\n rx: this.get('rx'),\n ry: this.get('ry')\n });\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = this._createBaseSVGMarkup(), x = 0, y = 0;\n if (this.group && this.group.type === 'path-group') {\n x = this.left + this.rx;\n y = this.top + this.ry;\n }\n markup.push(\n '\\n'\n );\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n _render: function(ctx, noTransform) {\n ctx.beginPath();\n ctx.save();\n ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0);\n ctx.arc(\n noTransform ? this.left + this.rx : 0,\n noTransform ? (this.top + this.ry) * this.rx/this.ry : 0,\n this.rx,\n 0,\n piBy2,\n false);\n ctx.restore();\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity\n */\n complexity: function() {\n return 1;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement})\n * @static\n * @memberOf fabric.Ellipse\n * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement\n */\n fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' '));\n\n /**\n * Returns {@link fabric.Ellipse} instance from an SVG element\n * @static\n * @memberOf fabric.Ellipse\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Ellipse}\n */\n fabric.Ellipse.fromElement = function(element, options) {\n options || (options = { });\n\n var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES);\n\n parsedAttributes.left = parsedAttributes.left || 0;\n parsedAttributes.top = parsedAttributes.top || 0;\n\n var ellipse = new fabric.Ellipse(extend(parsedAttributes, options));\n\n ellipse.top -= ellipse.ry;\n ellipse.left -= ellipse.rx;\n return ellipse;\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns {@link fabric.Ellipse} instance from an object representation\n * @static\n * @memberOf fabric.Ellipse\n * @param {Object} object Object to create an instance from\n * @return {fabric.Ellipse}\n */\n fabric.Ellipse.fromObject = function(object) {\n return new fabric.Ellipse(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n if (fabric.Rect) {\n console.warn('fabric.Rect is already defined');\n return;\n }\n\n var stateProperties = fabric.Object.prototype.stateProperties.concat();\n stateProperties.push('rx', 'ry', 'x', 'y');\n\n /**\n * Rectangle class\n * @class fabric.Rect\n * @extends fabric.Object\n * @return {fabric.Rect} thisArg\n * @see {@link fabric.Rect#initialize} for constructor definition\n */\n fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ {\n\n /**\n * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged})\n * as well as for history (undo/redo) purposes\n * @type Array\n */\n stateProperties: stateProperties,\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'rect',\n\n /**\n * Horizontal border radius\n * @type Number\n * @default\n */\n rx: 0,\n\n /**\n * Vertical border radius\n * @type Number\n * @default\n */\n ry: 0,\n\n /**\n * Used to specify dash pattern for stroke on this object\n * @type Array\n */\n strokeDashArray: null,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @return {Object} thisArg\n */\n initialize: function(options) {\n options = options || { };\n\n this.callSuper('initialize', options);\n this._initRxRy();\n\n },\n\n /**\n * Initializes rx/ry attributes\n * @private\n */\n _initRxRy: function() {\n if (this.rx && !this.ry) {\n this.ry = this.rx;\n }\n else if (this.ry && !this.rx) {\n this.rx = this.ry;\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx, noTransform) {\n\n // optimize 1x1 case (used in spray brush)\n if (this.width === 1 && this.height === 1) {\n ctx.fillRect(0, 0, 1, 1);\n return;\n }\n\n var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0,\n ry = this.ry ? Math.min(this.ry, this.height / 2) : 0,\n w = this.width,\n h = this.height,\n x = noTransform ? this.left : -this.width / 2,\n y = noTransform ? this.top : -this.height / 2,\n isRounded = rx !== 0 || ry !== 0,\n k = 1 - 0.5522847498 /* \"magic number\" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */;\n\n ctx.beginPath();\n\n ctx.moveTo(x + rx, y);\n\n ctx.lineTo(x + w - rx, y);\n isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry);\n\n ctx.lineTo(x + w, y + h - ry);\n isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h);\n\n ctx.lineTo(x + rx, y + h);\n isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry);\n\n ctx.lineTo(x, y + ry);\n isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y);\n\n ctx.closePath();\n\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n var x = -this.width / 2,\n y = -this.height / 2,\n w = this.width,\n h = this.height;\n\n ctx.beginPath();\n fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);\n ctx.closePath();\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n var object = extend(this.callSuper('toObject', propertiesToInclude), {\n rx: this.get('rx') || 0,\n ry: this.get('ry') || 0\n });\n if (!this.includeDefaultValues) {\n this._removeDefaultValues(object);\n }\n return object;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = this._createBaseSVGMarkup(), x = this.left, y = this.top;\n if (!(this.group && this.group.type === 'path-group')) {\n x = -this.width / 2;\n y = -this.height / 2;\n }\n markup.push(\n '\\n');\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity\n */\n complexity: function() {\n return 1;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`)\n * @static\n * @memberOf fabric.Rect\n * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement\n */\n fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' '));\n\n /**\n * Returns {@link fabric.Rect} instance from an SVG element\n * @static\n * @memberOf fabric.Rect\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Rect} Instance of fabric.Rect\n */\n fabric.Rect.fromElement = function(element, options) {\n if (!element) {\n return null;\n }\n options = options || { };\n\n var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES);\n\n parsedAttributes.left = parsedAttributes.left || 0;\n parsedAttributes.top = parsedAttributes.top || 0;\n\n return new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns {@link fabric.Rect} instance from an object representation\n * @static\n * @memberOf fabric.Rect\n * @param {Object} object Object to create an instance from\n * @return {Object} instance of fabric.Rect\n */\n fabric.Rect.fromObject = function(object) {\n return new fabric.Rect(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Polyline) {\n fabric.warn('fabric.Polyline is already defined');\n return;\n }\n\n /**\n * Polyline class\n * @class fabric.Polyline\n * @extends fabric.Object\n * @see {@link fabric.Polyline#initialize} for constructor definition\n */\n fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'polyline',\n\n /**\n * Points array\n * @type Array\n * @default\n */\n points: null,\n\n /**\n * Minimum X from points values, necessary to offset points\n * @type Number\n * @default\n */\n minX: 0,\n\n /**\n * Minimum Y from points values, necessary to offset points\n * @type Number\n * @default\n */\n minY: 0,\n\n /**\n * Constructor\n * @param {Array} points Array of points (where each point is an object with x and y)\n * @param {Object} [options] Options object\n * @param {Boolean} [skipOffset] Whether points offsetting should be skipped\n * @return {fabric.Polyline} thisArg\n * @example\n * var poly = new fabric.Polyline([\n * { x: 10, y: 10 },\n * { x: 50, y: 30 },\n * { x: 40, y: 70 },\n * { x: 60, y: 50 },\n * { x: 100, y: 150 },\n * { x: 40, y: 100 }\n * ], {\n * stroke: 'red',\n * left: 100,\n * top: 100\n * });\n */\n initialize: function(points, options) {\n return fabric.Polygon.prototype.initialize.call(this, points, options);\n },\n\n /**\n * @private\n */\n _calcDimensions: function() {\n return fabric.Polygon.prototype._calcDimensions.call(this);\n },\n\n /**\n * @private\n */\n _applyPointOffset: function() {\n return fabric.Polygon.prototype._applyPointOffset.call(this);\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return fabric.Polygon.prototype.toObject.call(this, propertiesToInclude);\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n return fabric.Polygon.prototype.toSVG.call(this, reviver);\n },\n /* _TO_SVG_END_ */\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx) {\n fabric.Polygon.prototype.commonRender.call(this, ctx);\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n var p1, p2;\n\n ctx.beginPath();\n for (var i = 0, len = this.points.length; i < len; i++) {\n p1 = this.points[i];\n p2 = this.points[i + 1] || p1;\n fabric.util.drawDashedLine(ctx, p1.x, p1.y, p2.x, p2.y, this.strokeDashArray);\n }\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return this.get('points').length;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement})\n * @static\n * @memberOf fabric.Polyline\n * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement\n */\n fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();\n\n /**\n * Returns fabric.Polyline instance from an SVG element\n * @static\n * @memberOf fabric.Polyline\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Polyline} Instance of fabric.Polyline\n */\n fabric.Polyline.fromElement = function(element, options) {\n if (!element) {\n return null;\n }\n options || (options = { });\n\n var points = fabric.parsePointsAttribute(element.getAttribute('points')),\n parsedAttributes = fabric.parseAttributes(element, fabric.Polyline.ATTRIBUTE_NAMES);\n\n if (points === null) {\n return null;\n }\n\n return new fabric.Polyline(points, fabric.util.object.extend(parsedAttributes, options));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns fabric.Polyline instance from an object representation\n * @static\n * @memberOf fabric.Polyline\n * @param {Object} object Object to create an instance from\n * @return {fabric.Polyline} Instance of fabric.Polyline\n */\n fabric.Polyline.fromObject = function(object) {\n var points = object.points;\n return new fabric.Polyline(points, object, true);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n min = fabric.util.array.min,\n max = fabric.util.array.max,\n toFixed = fabric.util.toFixed;\n\n if (fabric.Polygon) {\n fabric.warn('fabric.Polygon is already defined');\n return;\n }\n\n /**\n * Polygon class\n * @class fabric.Polygon\n * @extends fabric.Object\n * @see {@link fabric.Polygon#initialize} for constructor definition\n */\n fabric.Polygon = fabric.util.createClass(fabric.Object, /** @lends fabric.Polygon.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'polygon',\n\n /**\n * Points array\n * @type Array\n * @default\n */\n points: null,\n\n /**\n * Minimum X from points values, necessary to offset points\n * @type Number\n * @default\n */\n minX: 0,\n\n /**\n * Minimum Y from points values, necessary to offset points\n * @type Number\n * @default\n */\n minY: 0,\n\n /**\n * Constructor\n * @param {Array} points Array of points\n * @param {Object} [options] Options object\n * @return {fabric.Polygon} thisArg\n */\n initialize: function(points, options) {\n options = options || { };\n this.points = points;\n this.callSuper('initialize', options);\n this._calcDimensions();\n if (!('top' in options)) {\n this.top = this.minY;\n }\n if (!('left' in options)) {\n this.left = this.minX;\n }\n },\n\n /**\n * @private\n */\n _calcDimensions: function() {\n\n var points = this.points,\n minX = min(points, 'x'),\n minY = min(points, 'y'),\n maxX = max(points, 'x'),\n maxY = max(points, 'y');\n\n this.width = (maxX - minX) || 1;\n this.height = (maxY - minY) || 1;\n\n this.minX = minX,\n this.minY = minY;\n },\n\n /**\n * @private\n */\n _applyPointOffset: function() {\n // change points to offset polygon into a bounding box\n // executed one time\n this.points.forEach(function(p) {\n p.x -= (this.minX + this.width / 2);\n p.y -= (this.minY + this.height / 2);\n }, this);\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), {\n points: this.points.concat()\n });\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var points = [],\n markup = this._createBaseSVGMarkup();\n\n for (var i = 0, len = this.points.length; i < len; i++) {\n points.push(toFixed(this.points[i].x, 2), ',', toFixed(this.points[i].y, 2), ' ');\n }\n\n markup.push(\n '<', this.type, ' ',\n 'points=\"', points.join(''),\n '\" style=\"', this.getSvgStyles(),\n '\" transform=\"', this.getSvgTransform(),\n ' ', this.getSvgTransformMatrix(),\n '\"/>\\n'\n );\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx) {\n this.commonRender(ctx);\n this._renderFill(ctx);\n if (this.stroke || this.strokeDashArray) {\n ctx.closePath();\n this._renderStroke(ctx);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n commonRender: function(ctx) {\n var point;\n ctx.beginPath();\n\n if (this._applyPointOffset) {\n if (!(this.group && this.group.type === 'path-group')) {\n this._applyPointOffset();\n }\n this._applyPointOffset = null;\n }\n\n ctx.moveTo(this.points[0].x, this.points[0].y);\n for (var i = 0, len = this.points.length; i < len; i++) {\n point = this.points[i];\n ctx.lineTo(point.x, point.y);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n fabric.Polyline.prototype._renderDashedStroke.call(this, ctx);\n ctx.closePath();\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return this.points.length;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`)\n * @static\n * @memberOf fabric.Polygon\n * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement\n */\n fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat();\n\n /**\n * Returns {@link fabric.Polygon} instance from an SVG element\n * @static\n * @memberOf fabric.Polygon\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Polygon} Instance of fabric.Polygon\n */\n fabric.Polygon.fromElement = function(element, options) {\n if (!element) {\n return null;\n }\n\n options || (options = { });\n\n var points = fabric.parsePointsAttribute(element.getAttribute('points')),\n parsedAttributes = fabric.parseAttributes(element, fabric.Polygon.ATTRIBUTE_NAMES);\n\n if (points === null) {\n return null;\n }\n\n return new fabric.Polygon(points, extend(parsedAttributes, options));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns fabric.Polygon instance from an object representation\n * @static\n * @memberOf fabric.Polygon\n * @param {Object} object Object to create an instance from\n * @return {fabric.Polygon} Instance of fabric.Polygon\n */\n fabric.Polygon.fromObject = function(object) {\n return new fabric.Polygon(object.points, object, true);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n min = fabric.util.array.min,\n max = fabric.util.array.max,\n extend = fabric.util.object.extend,\n _toString = Object.prototype.toString,\n drawArc = fabric.util.drawArc,\n commandLengths = {\n m: 2,\n l: 2,\n h: 1,\n v: 1,\n c: 6,\n s: 4,\n q: 4,\n t: 2,\n a: 7\n },\n repeatedCommands = {\n m: 'l',\n M: 'L'\n };\n\n if (fabric.Path) {\n fabric.warn('fabric.Path is already defined');\n return;\n }\n\n /**\n * Path class\n * @class fabric.Path\n * @extends fabric.Object\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}\n * @see {@link fabric.Path#initialize} for constructor definition\n */\n fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'path',\n\n /**\n * Array of path points\n * @type Array\n * @default\n */\n path: null,\n\n /**\n * Minimum X from points values, necessary to offset points\n * @type Number\n * @default\n */\n minX: 0,\n\n /**\n * Minimum Y from points values, necessary to offset points\n * @type Number\n * @default\n */\n minY: 0,\n\n /**\n * Constructor\n * @param {Array|String} path Path data (sequence of coordinates and corresponding \"command\" tokens)\n * @param {Object} [options] Options object\n * @return {fabric.Path} thisArg\n */\n initialize: function(path, options) {\n options = options || { };\n\n this.setOptions(options);\n\n if (!path) {\n throw new Error('`path` argument is required');\n }\n\n var fromArray = _toString.call(path) === '[object Array]';\n\n this.path = fromArray\n ? path\n // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)\n : path.match && path.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);\n\n if (!this.path) {\n return;\n }\n\n if (!fromArray) {\n this.path = this._parsePath();\n }\n\n var calcDim = this._parseDimensions();\n this.minX = calcDim.left;\n this.minY = calcDim.top;\n this.width = calcDim.width;\n this.height = calcDim.height;\n this.top = this.top || this.minY;\n this.left = this.left || this.minX;\n this.pathOffset = this.pathOffset || {\n x: this.minX + this.width / 2,\n y: this.minY + this.height / 2\n };\n\n if (options.sourcePath) {\n this.setSourcePath(options.sourcePath);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx context to render path on\n */\n _render: function(ctx) {\n var current, // current instruction\n previous = null,\n subpathStartX = 0,\n subpathStartY = 0,\n x = 0, // current x\n y = 0, // current y\n controlX = 0, // current control point x\n controlY = 0, // current control point y\n tempX,\n tempY,\n tempControlX,\n tempControlY,\n l = -this.pathOffset.x,\n t = -this.pathOffset.y;\n\n if (this.group && this.group.type === 'path-group') {\n l = 0;\n t = 0;\n }\n\n ctx.beginPath();\n\n for (var i = 0, len = this.path.length; i < len; ++i) {\n\n current = this.path[i];\n\n switch (current[0]) { // first letter\n\n case 'l': // lineto, relative\n x += current[1];\n y += current[2];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'L': // lineto, absolute\n x = current[1];\n y = current[2];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'h': // horizontal lineto, relative\n x += current[1];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'H': // horizontal lineto, absolute\n x = current[1];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'v': // vertical lineto, relative\n y += current[1];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'V': // verical lineto, absolute\n y = current[1];\n ctx.lineTo(x + l, y + t);\n break;\n\n case 'm': // moveTo, relative\n x += current[1];\n y += current[2];\n subpathStartX = x;\n subpathStartY = y;\n ctx.moveTo(x + l, y + t);\n break;\n\n case 'M': // moveTo, absolute\n x = current[1];\n y = current[2];\n subpathStartX = x;\n subpathStartY = y;\n ctx.moveTo(x + l, y + t);\n break;\n\n case 'c': // bezierCurveTo, relative\n tempX = x + current[5];\n tempY = y + current[6];\n controlX = x + current[3];\n controlY = y + current[4];\n ctx.bezierCurveTo(\n x + current[1] + l, // x1\n y + current[2] + t, // y1\n controlX + l, // x2\n controlY + t, // y2\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'C': // bezierCurveTo, absolute\n x = current[5];\n y = current[6];\n controlX = current[3];\n controlY = current[4];\n ctx.bezierCurveTo(\n current[1] + l,\n current[2] + t,\n controlX + l,\n controlY + t,\n x + l,\n y + t\n );\n break;\n\n case 's': // shorthand cubic bezierCurveTo, relative\n\n // transform to absolute x,y\n tempX = x + current[3];\n tempY = y + current[4];\n\n // calculate reflection of previous control points\n controlX = controlX ? (2 * x - controlX) : x;\n controlY = controlY ? (2 * y - controlY) : y;\n\n ctx.bezierCurveTo(\n controlX + l,\n controlY + t,\n x + current[1] + l,\n y + current[2] + t,\n tempX + l,\n tempY + t\n );\n // set control point to 2nd one of this command\n // \"... the first control point is assumed to be\n // the reflection of the second control point on\n // the previous command relative to the current point.\"\n controlX = x + current[1];\n controlY = y + current[2];\n\n x = tempX;\n y = tempY;\n break;\n\n case 'S': // shorthand cubic bezierCurveTo, absolute\n tempX = current[3];\n tempY = current[4];\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n ctx.bezierCurveTo(\n controlX + l,\n controlY + t,\n current[1] + l,\n current[2] + t,\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n\n // set control point to 2nd one of this command\n // \"... the first control point is assumed to be\n // the reflection of the second control point on\n // the previous command relative to the current point.\"\n controlX = current[1];\n controlY = current[2];\n\n break;\n\n case 'q': // quadraticCurveTo, relative\n // transform to absolute x,y\n tempX = x + current[3];\n tempY = y + current[4];\n\n controlX = x + current[1];\n controlY = y + current[2];\n\n ctx.quadraticCurveTo(\n controlX + l,\n controlY + t,\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'Q': // quadraticCurveTo, absolute\n tempX = current[3];\n tempY = current[4];\n\n ctx.quadraticCurveTo(\n current[1] + l,\n current[2] + t,\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n controlX = current[1];\n controlY = current[2];\n break;\n\n case 't': // shorthand quadraticCurveTo, relative\n\n // transform to absolute x,y\n tempX = x + current[1];\n tempY = y + current[2];\n\n if (previous[0].match(/[QqTt]/) === null) {\n // If there is no previous command or if the previous command was not a Q, q, T or t,\n // assume the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n else if (previous[0] === 't') {\n // calculate reflection of previous control points for t\n controlX = 2 * x - tempControlX;\n controlY = 2 * y - tempControlY;\n }\n else if (previous[0] === 'q') {\n // calculate reflection of previous control points for q\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n }\n\n tempControlX = controlX;\n tempControlY = controlY;\n\n ctx.quadraticCurveTo(\n controlX + l,\n controlY + t,\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n controlX = x + current[1];\n controlY = y + current[2];\n break;\n\n case 'T':\n tempX = current[1];\n tempY = current[2];\n\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n ctx.quadraticCurveTo(\n controlX + l,\n controlY + t,\n tempX + l,\n tempY + t\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'a':\n // TODO: optimize this\n drawArc(ctx, x + l, y + t, [\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6] + x + l,\n current[7] + y + t\n ]);\n x += current[6];\n y += current[7];\n break;\n\n case 'A':\n // TODO: optimize this\n drawArc(ctx, x + l, y + t, [\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6] + l,\n current[7] + t\n ]);\n x = current[6];\n y = current[7];\n break;\n\n case 'z':\n case 'Z':\n x = subpathStartX;\n y = subpathStartY;\n ctx.closePath();\n break;\n }\n previous = current;\n }\n this._renderFill(ctx);\n this._renderStroke(ctx);\n },\n\n /**\n * Renders path on a specified context\n * @param {CanvasRenderingContext2D} ctx context to render path on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n render: function(ctx, noTransform) {\n // do not render if width/height are zeros or object is not visible\n if (!this.visible) {\n return;\n }\n\n ctx.save();\n\n this._setupCompositeOperation(ctx);\n if (!noTransform) {\n this.transform(ctx);\n }\n this._setStrokeStyles(ctx);\n this._setFillStyles(ctx);\n if (this.group && this.group.type === 'path-group') {\n ctx.translate(-this.group.width / 2, -this.group.height / 2);\n }\n if (this.transformMatrix) {\n ctx.transform.apply(ctx, this.transformMatrix);\n }\n this._setOpacity(ctx);\n this._setShadow(ctx);\n this.clipTo && fabric.util.clipContext(this, ctx);\n this._render(ctx, noTransform);\n this.clipTo && ctx.restore();\n this._removeShadow(ctx);\n this._restoreCompositeOperation(ctx);\n\n ctx.restore();\n },\n\n /**\n * Returns string representation of an instance\n * @return {String} string representation of an instance\n */\n toString: function() {\n return '#';\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n var o = extend(this.callSuper('toObject', propertiesToInclude), {\n path: this.path.map(function(item) { return item.slice() }),\n pathOffset: this.pathOffset\n });\n if (this.sourcePath) {\n o.sourcePath = this.sourcePath;\n }\n if (this.transformMatrix) {\n o.transformMatrix = this.transformMatrix;\n }\n return o;\n },\n\n /**\n * Returns dataless object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toDatalessObject: function(propertiesToInclude) {\n var o = this.toObject(propertiesToInclude);\n if (this.sourcePath) {\n o.path = this.sourcePath;\n }\n delete o.sourcePath;\n return o;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var chunks = [],\n markup = this._createBaseSVGMarkup(), addTransform = '';\n\n for (var i = 0, len = this.path.length; i < len; i++) {\n chunks.push(this.path[i].join(' '));\n }\n var path = chunks.join(' ');\n if (!(this.group && this.group.type === 'path-group')) {\n addTransform = 'translate(' + (-this.pathOffset.x) + ', ' + (-this.pathOffset.y) + ')';\n }\n markup.push(\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n );\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns number representation of an instance complexity\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return this.path.length;\n },\n\n /**\n * @private\n */\n _parsePath: function() {\n var result = [ ],\n coords = [ ],\n currentPath,\n parsed,\n re = /([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:e[-+]?\\d+)?)/ig,\n match,\n coordsStr;\n\n for (var i = 0, coordsParsed, len = this.path.length; i < len; i++) {\n currentPath = this.path[i];\n\n coordsStr = currentPath.slice(1).trim();\n coords.length = 0;\n\n while ((match = re.exec(coordsStr))) {\n coords.push(match[0]);\n }\n\n coordsParsed = [ currentPath.charAt(0) ];\n\n for (var j = 0, jlen = coords.length; j < jlen; j++) {\n parsed = parseFloat(coords[j]);\n if (!isNaN(parsed)) {\n coordsParsed.push(parsed);\n }\n }\n\n var command = coordsParsed[0],\n commandLength = commandLengths[command.toLowerCase()],\n repeatedCommand = repeatedCommands[command] || command;\n\n if (coordsParsed.length - 1 > commandLength) {\n for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {\n result.push([ command ].concat(coordsParsed.slice(k, k + commandLength)));\n command = repeatedCommand;\n }\n }\n else {\n result.push(coordsParsed);\n }\n }\n\n return result;\n },\n\n /**\n * @private\n */\n _parseDimensions: function() {\n\n var aX = [],\n aY = [],\n current, // current instruction\n previous = null,\n subpathStartX = 0,\n subpathStartY = 0,\n x = 0, // current x\n y = 0, // current y\n controlX = 0, // current control point x\n controlY = 0, // current control point y\n tempX,\n tempY,\n tempControlX,\n tempControlY,\n bounds;\n\n for (var i = 0, len = this.path.length; i < len; ++i) {\n\n current = this.path[i];\n\n switch (current[0]) { // first letter\n\n case 'l': // lineto, relative\n x += current[1];\n y += current[2];\n bounds = [ ];\n break;\n\n case 'L': // lineto, absolute\n x = current[1];\n y = current[2];\n bounds = [ ];\n break;\n\n case 'h': // horizontal lineto, relative\n x += current[1];\n bounds = [ ];\n break;\n\n case 'H': // horizontal lineto, absolute\n x = current[1];\n bounds = [ ];\n break;\n\n case 'v': // vertical lineto, relative\n y += current[1];\n bounds = [ ];\n break;\n\n case 'V': // verical lineto, absolute\n y = current[1];\n bounds = [ ];\n break;\n\n case 'm': // moveTo, relative\n x += current[1];\n y += current[2];\n subpathStartX = x;\n subpathStartY = y;\n bounds = [ ];\n break;\n\n case 'M': // moveTo, absolute\n x = current[1];\n y = current[2];\n subpathStartX = x;\n subpathStartY = y;\n bounds = [ ];\n break;\n\n case 'c': // bezierCurveTo, relative\n tempX = x + current[5];\n tempY = y + current[6];\n controlX = x + current[3];\n controlY = y + current[4];\n bounds = fabric.util.getBoundsOfCurve(x, y,\n x + current[1], // x1\n y + current[2], // y1\n controlX, // x2\n controlY, // y2\n tempX,\n tempY\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'C': // bezierCurveTo, absolute\n x = current[5];\n y = current[6];\n controlX = current[3];\n controlY = current[4];\n bounds = fabric.util.getBoundsOfCurve(x, y,\n current[1],\n current[2],\n controlX,\n controlY,\n x,\n y\n );\n break;\n\n case 's': // shorthand cubic bezierCurveTo, relative\n\n // transform to absolute x,y\n tempX = x + current[3];\n tempY = y + current[4];\n\n // calculate reflection of previous control points\n controlX = controlX ? (2 * x - controlX) : x;\n controlY = controlY ? (2 * y - controlY) : y;\n\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n x + current[1],\n y + current[2],\n tempX,\n tempY\n );\n // set control point to 2nd one of this command\n // \"... the first control point is assumed to be\n // the reflection of the second control point on\n // the previous command relative to the current point.\"\n controlX = x + current[1];\n controlY = y + current[2];\n x = tempX;\n y = tempY;\n break;\n\n case 'S': // shorthand cubic bezierCurveTo, absolute\n tempX = current[3];\n tempY = current[4];\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n current[1],\n current[2],\n tempX,\n tempY\n );\n x = tempX;\n y = tempY;\n // set control point to 2nd one of this command\n // \"... the first control point is assumed to be\n // the reflection of the second control point on\n // the previous command relative to the current point.\"\n controlX = current[1];\n controlY = current[2];\n break;\n\n case 'q': // quadraticCurveTo, relative\n // transform to absolute x,y\n tempX = x + current[3];\n tempY = y + current[4];\n controlX = x + current[1];\n controlY = y + current[2];\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n controlX,\n controlY,\n tempX,\n tempY\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'Q': // quadraticCurveTo, absolute\n controlX = current[1];\n controlY = current[2];\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n controlX,\n controlY,\n current[3],\n current[4]\n );\n x = current[3];\n y = current[4];\n break;\n\n case 't': // shorthand quadraticCurveTo, relative\n // transform to absolute x,y\n tempX = x + current[1];\n tempY = y + current[2];\n if (previous[0].match(/[QqTt]/) === null) {\n // If there is no previous command or if the previous command was not a Q, q, T or t,\n // assume the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n else if (previous[0] === 't') {\n // calculate reflection of previous control points for t\n controlX = 2 * x - tempControlX;\n controlY = 2 * y - tempControlY;\n }\n else if (previous[0] === 'q') {\n // calculate reflection of previous control points for q\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n }\n\n tempControlX = controlX;\n tempControlY = controlY;\n\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n controlX,\n controlY,\n tempX,\n tempY\n );\n x = tempX;\n y = tempY;\n controlX = x + current[1];\n controlY = y + current[2];\n break;\n\n case 'T':\n tempX = current[1];\n tempY = current[2];\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n bounds = fabric.util.getBoundsOfCurve(x, y,\n controlX,\n controlY,\n controlX,\n controlY,\n tempX,\n tempY\n );\n x = tempX;\n y = tempY;\n break;\n\n case 'a':\n // TODO: optimize this\n bounds = fabric.util.getBoundsOfArc(x, y,\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6] + x,\n current[7] + y\n );\n x += current[6];\n y += current[7];\n break;\n\n case 'A':\n // TODO: optimize this\n bounds = fabric.util.getBoundsOfArc(x, y,\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6],\n current[7]\n );\n x = current[6];\n y = current[7];\n break;\n\n case 'z':\n case 'Z':\n x = subpathStartX;\n y = subpathStartY;\n break;\n }\n previous = current;\n bounds.forEach(function (point) {\n aX.push(point.x);\n aY.push(point.y);\n });\n aX.push(x);\n aY.push(y);\n }\n\n var minX = min(aX),\n minY = min(aY),\n maxX = max(aX),\n maxY = max(aY),\n deltaX = maxX - minX,\n deltaY = maxY - minY,\n\n o = {\n left: minX,\n top: minY,\n width: deltaX,\n height: deltaY\n };\n\n return o;\n }\n });\n\n /**\n * Creates an instance of fabric.Path from an object\n * @static\n * @memberOf fabric.Path\n * @param {Object} object\n * @param {Function} callback Callback to invoke when an fabric.Path instance is created\n */\n fabric.Path.fromObject = function(object, callback) {\n if (typeof object.path === 'string') {\n fabric.loadSVGFromURL(object.path, function (elements) {\n var path = elements[0],\n pathUrl = object.path;\n\n delete object.path;\n\n fabric.util.object.extend(path, object);\n path.setSourcePath(pathUrl);\n\n callback(path);\n });\n }\n else {\n callback(new fabric.Path(object.path, object));\n }\n };\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`)\n * @static\n * @memberOf fabric.Path\n * @see http://www.w3.org/TR/SVG/paths.html#PathElement\n */\n fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']);\n\n /**\n * Creates an instance of fabric.Path from an SVG element\n * @static\n * @memberOf fabric.Path\n * @param {SVGElement} element to parse\n * @param {Function} callback Callback to invoke when an fabric.Path instance is created\n * @param {Object} [options] Options object\n */\n fabric.Path.fromElement = function(element, callback, options) {\n var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES);\n callback && callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options)));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Indicates that instances of this type are async\n * @static\n * @memberOf fabric.Path\n * @type Boolean\n * @default\n */\n fabric.Path.async = true;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n invoke = fabric.util.array.invoke,\n parentToObject = fabric.Object.prototype.toObject;\n\n if (fabric.PathGroup) {\n fabric.warn('fabric.PathGroup is already defined');\n return;\n }\n\n /**\n * Path group class\n * @class fabric.PathGroup\n * @extends fabric.Path\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}\n * @see {@link fabric.PathGroup#initialize} for constructor definition\n */\n fabric.PathGroup = fabric.util.createClass(fabric.Path, /** @lends fabric.PathGroup.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'path-group',\n\n /**\n * Fill value\n * @type String\n * @default\n */\n fill: '',\n\n /**\n * Constructor\n * @param {Array} paths\n * @param {Object} [options] Options object\n * @return {fabric.PathGroup} thisArg\n */\n initialize: function(paths, options) {\n\n options = options || { };\n this.paths = paths || [ ];\n\n for (var i = this.paths.length; i--; ) {\n this.paths[i].group = this;\n }\n\n this.setOptions(options);\n\n if (options.widthAttr) {\n this.scaleX = options.widthAttr / options.width;\n }\n if (options.heightAttr) {\n this.scaleY = options.heightAttr / options.height;\n }\n\n this.setCoords();\n\n if (options.sourcePath) {\n this.setSourcePath(options.sourcePath);\n }\n },\n\n /**\n * Renders this group on a specified context\n * @param {CanvasRenderingContext2D} ctx Context to render this instance on\n */\n render: function(ctx) {\n // do not render if object is not visible\n if (!this.visible) {\n return;\n }\n\n ctx.save();\n\n var m = this.transformMatrix;\n\n if (m) {\n ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\n }\n this.transform(ctx);\n\n this._setShadow(ctx);\n this.clipTo && fabric.util.clipContext(this, ctx);\n for (var i = 0, l = this.paths.length; i < l; ++i) {\n this.paths[i].render(ctx, true);\n }\n this.clipTo && ctx.restore();\n this._removeShadow(ctx);\n ctx.restore();\n },\n\n /**\n * Sets certain property to a certain value\n * @param {String} prop\n * @param {Any} value\n * @return {fabric.PathGroup} thisArg\n */\n _set: function(prop, value) {\n\n if (prop === 'fill' && value && this.isSameColor()) {\n var i = this.paths.length;\n while (i--) {\n this.paths[i]._set(prop, value);\n }\n }\n\n return this.callSuper('_set', prop, value);\n },\n\n /**\n * Returns object representation of this path group\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n var o = extend(parentToObject.call(this, propertiesToInclude), {\n paths: invoke(this.getObjects(), 'toObject', propertiesToInclude)\n });\n if (this.sourcePath) {\n o.sourcePath = this.sourcePath;\n }\n return o;\n },\n\n /**\n * Returns dataless object representation of this path group\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} dataless object representation of an instance\n */\n toDatalessObject: function(propertiesToInclude) {\n var o = this.toObject(propertiesToInclude);\n if (this.sourcePath) {\n o.paths = this.sourcePath;\n }\n return o;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var objects = this.getObjects(),\n translatePart = 'translate(' + this.left + ' ' + this.top + ')',\n markup = [\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n ];\n\n for (var i = 0, len = objects.length; i < len; i++) {\n markup.push(objects[i].toSVG(reviver));\n }\n markup.push('\\n');\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns a string representation of this path group\n * @return {String} string representation of an object\n */\n toString: function() {\n return '#';\n },\n\n /**\n * Returns true if all paths in this group are of same color\n * @return {Boolean} true if all paths are of the same color (`fill`)\n */\n isSameColor: function() {\n var firstPathFill = (this.getObjects()[0].get('fill') || '').toLowerCase();\n return this.getObjects().every(function(path) {\n return (path.get('fill') || '').toLowerCase() === firstPathFill;\n });\n },\n\n /**\n * Returns number representation of object's complexity\n * @return {Number} complexity\n */\n complexity: function() {\n return this.paths.reduce(function(total, path) {\n return total + ((path && path.complexity) ? path.complexity() : 0);\n }, 0);\n },\n\n /**\n * Returns all paths in this path group\n * @return {Array} array of path objects included in this path group\n */\n getObjects: function() {\n return this.paths;\n }\n });\n\n /**\n * Creates fabric.PathGroup instance from an object representation\n * @static\n * @memberOf fabric.PathGroup\n * @param {Object} object Object to create an instance from\n * @param {Function} callback Callback to invoke when an fabric.PathGroup instance is created\n */\n fabric.PathGroup.fromObject = function(object, callback) {\n if (typeof object.paths === 'string') {\n fabric.loadSVGFromURL(object.paths, function (elements) {\n\n var pathUrl = object.paths;\n delete object.paths;\n\n var pathGroup = fabric.util.groupSVGElements(elements, object, pathUrl);\n\n callback(pathGroup);\n });\n }\n else {\n fabric.util.enlivenObjects(object.paths, function(enlivenedObjects) {\n delete object.paths;\n callback(new fabric.PathGroup(enlivenedObjects, object));\n });\n }\n };\n\n /**\n * Indicates that instances of this type are async\n * @static\n * @memberOf fabric.PathGroup\n * @type Boolean\n * @default\n */\n fabric.PathGroup.async = true;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n min = fabric.util.array.min,\n max = fabric.util.array.max,\n invoke = fabric.util.array.invoke;\n\n if (fabric.Group) {\n return;\n }\n\n // lock-related properties, for use in fabric.Group#get\n // to enable locking behavior on group\n // when one of its objects has lock-related properties set\n var _lockProperties = {\n lockMovementX: true,\n lockMovementY: true,\n lockRotation: true,\n lockScalingX: true,\n lockScalingY: true,\n lockUniScaling: true\n };\n\n /**\n * Group class\n * @class fabric.Group\n * @extends fabric.Object\n * @mixes fabric.Collection\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#groups}\n * @see {@link fabric.Group#initialize} for constructor definition\n */\n fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'group',\n\n /**\n * Constructor\n * @param {Object} objects Group objects\n * @param {Object} [options] Options object\n * @return {Object} thisArg\n */\n initialize: function(objects, options) {\n options = options || { };\n\n this._objects = objects || [];\n for (var i = this._objects.length; i--; ) {\n this._objects[i].group = this;\n }\n\n this.originalState = { };\n this.callSuper('initialize');\n\n this._calcBounds();\n this._updateObjectsCoords();\n\n if (options) {\n extend(this, options);\n }\n\n this.setCoords();\n this.saveCoords();\n },\n\n /**\n * @private\n */\n _updateObjectsCoords: function() {\n this.forEachObject(this._updateObjectCoords, this);\n },\n\n /**\n * @private\n */\n _updateObjectCoords: function(object) {\n var objectLeft = object.getLeft(),\n objectTop = object.getTop();\n\n object.set({\n originalLeft: objectLeft,\n originalTop: objectTop,\n left: objectLeft - this.left,\n top: objectTop - this.top\n });\n\n object.setCoords();\n\n // do not display corners of objects enclosed in a group\n object.__origHasControls = object.hasControls;\n object.hasControls = false;\n },\n\n /**\n * Returns string represenation of a group\n * @return {String}\n */\n toString: function() {\n return '#';\n },\n\n /**\n * Adds an object to a group; Then recalculates group's dimension, position.\n * @param {Object} object\n * @return {fabric.Group} thisArg\n * @chainable\n */\n addWithUpdate: function(object) {\n this._restoreObjectsState();\n if (object) {\n this._objects.push(object);\n object.group = this;\n }\n // since _restoreObjectsState set objects inactive\n this.forEachObject(this._setObjectActive, this);\n this._calcBounds();\n this._updateObjectsCoords();\n return this;\n },\n\n /**\n * @private\n */\n _setObjectActive: function(object) {\n object.set('active', true);\n object.group = this;\n },\n\n /**\n * Removes an object from a group; Then recalculates group's dimension, position.\n * @param {Object} object\n * @return {fabric.Group} thisArg\n * @chainable\n */\n removeWithUpdate: function(object) {\n this._moveFlippedObject(object);\n this._restoreObjectsState();\n\n // since _restoreObjectsState set objects inactive\n this.forEachObject(this._setObjectActive, this);\n\n this.remove(object);\n this._calcBounds();\n this._updateObjectsCoords();\n\n return this;\n },\n\n /**\n * @private\n */\n _onObjectAdded: function(object) {\n object.group = this;\n },\n\n /**\n * @private\n */\n _onObjectRemoved: function(object) {\n delete object.group;\n object.set('active', false);\n },\n\n /**\n * Properties that are delegated to group objects when reading/writing\n * @param {Object} delegatedProperties\n */\n delegatedProperties: {\n fill: true,\n opacity: true,\n fontFamily: true,\n fontWeight: true,\n fontSize: true,\n fontStyle: true,\n lineHeight: true,\n textDecoration: true,\n textAlign: true,\n backgroundColor: true\n },\n\n /**\n * @private\n */\n _set: function(key, value) {\n if (key in this.delegatedProperties) {\n var i = this._objects.length;\n this[key] = value;\n while (i--) {\n this._objects[i].set(key, value);\n }\n }\n else {\n this[key] = value;\n }\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), {\n objects: invoke(this._objects, 'toObject', propertiesToInclude)\n });\n },\n\n /**\n * Renders instance on a given context\n * @param {CanvasRenderingContext2D} ctx context to render instance on\n */\n render: function(ctx) {\n // do not render if object is not visible\n if (!this.visible) {\n return;\n }\n\n ctx.save();\n this.clipTo && fabric.util.clipContext(this, ctx);\n\n // the array is now sorted in order of highest first, so start from end\n for (var i = 0, len = this._objects.length; i < len; i++) {\n this._renderObject(this._objects[i], ctx);\n }\n\n this.clipTo && ctx.restore();\n\n ctx.restore();\n },\n\n /**\n * Renders controls and borders for the object\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Boolean} [noTransform] When true, context is not transformed\n */\n _renderControls: function(ctx, noTransform) {\n this.callSuper('_renderControls', ctx, noTransform);\n for (var i = 0, len = this._objects.length; i < len; i++) {\n this._objects[i]._renderControls(ctx);\n }\n },\n\n /**\n * @private\n */\n _renderObject: function(object, ctx) {\n var originalHasRotatingPoint = object.hasRotatingPoint;\n\n // do not render if object is not visible\n if (!object.visible) {\n return;\n }\n\n object.hasRotatingPoint = false;\n\n object.render(ctx);\n\n object.hasRotatingPoint = originalHasRotatingPoint;\n },\n\n /**\n * Retores original state of each of group objects (original state is that which was before group was created).\n * @private\n * @return {fabric.Group} thisArg\n * @chainable\n */\n _restoreObjectsState: function() {\n this._objects.forEach(this._restoreObjectState, this);\n return this;\n },\n\n /**\n * Moves a flipped object to the position where it's displayed\n * @private\n * @param {fabric.Object} object\n * @return {fabric.Group} thisArg\n */\n _moveFlippedObject: function(object) {\n var oldOriginX = object.get('originX'),\n oldOriginY = object.get('originY'),\n center = object.getCenterPoint();\n\n object.set({\n originX: 'center',\n originY: 'center',\n left: center.x,\n top: center.y\n });\n\n this._toggleFlipping(object);\n\n var newOrigin = object.getPointByOrigin(oldOriginX, oldOriginY);\n\n object.set({\n originX: oldOriginX,\n originY: oldOriginY,\n left: newOrigin.x,\n top: newOrigin.y\n });\n\n return this;\n },\n\n /**\n * @private\n */\n _toggleFlipping: function(object) {\n if (this.flipX) {\n object.toggle('flipX');\n object.set('left', -object.get('left'));\n object.setAngle(-object.getAngle());\n }\n if (this.flipY) {\n object.toggle('flipY');\n object.set('top', -object.get('top'));\n object.setAngle(-object.getAngle());\n }\n },\n\n /**\n * Restores original state of a specified object in group\n * @private\n * @param {fabric.Object} object\n * @return {fabric.Group} thisArg\n */\n _restoreObjectState: function(object) {\n this._setObjectPosition(object);\n\n object.setCoords();\n object.hasControls = object.__origHasControls;\n delete object.__origHasControls;\n object.set('active', false);\n object.setCoords();\n delete object.group;\n\n return this;\n },\n\n /**\n * @private\n */\n _setObjectPosition: function(object) {\n var groupLeft = this.getLeft(),\n groupTop = this.getTop(),\n rotated = this._getRotatedLeftTop(object);\n\n object.set({\n angle: object.getAngle() + this.getAngle(),\n left: groupLeft + rotated.left,\n top: groupTop + rotated.top,\n scaleX: object.get('scaleX') * this.get('scaleX'),\n scaleY: object.get('scaleY') * this.get('scaleY')\n });\n },\n\n /**\n * @private\n */\n _getRotatedLeftTop: function(object) {\n var groupAngle = this.getAngle() * (Math.PI / 180);\n return {\n left: (-Math.sin(groupAngle) * object.getTop() * this.get('scaleY') +\n Math.cos(groupAngle) * object.getLeft() * this.get('scaleX')),\n\n top: (Math.cos(groupAngle) * object.getTop() * this.get('scaleY') +\n Math.sin(groupAngle) * object.getLeft() * this.get('scaleX'))\n };\n },\n\n /**\n * Destroys a group (restoring state of its objects)\n * @return {fabric.Group} thisArg\n * @chainable\n */\n destroy: function() {\n this._objects.forEach(this._moveFlippedObject, this);\n return this._restoreObjectsState();\n },\n\n /**\n * Saves coordinates of this instance (to be used together with `hasMoved`)\n * @saveCoords\n * @return {fabric.Group} thisArg\n * @chainable\n */\n saveCoords: function() {\n this._originalLeft = this.get('left');\n this._originalTop = this.get('top');\n return this;\n },\n\n /**\n * Checks whether this group was moved (since `saveCoords` was called last)\n * @return {Boolean} true if an object was moved (since fabric.Group#saveCoords was called)\n */\n hasMoved: function() {\n return this._originalLeft !== this.get('left') ||\n this._originalTop !== this.get('top');\n },\n\n /**\n * Sets coordinates of all group objects\n * @return {fabric.Group} thisArg\n * @chainable\n */\n setObjectsCoords: function() {\n this.forEachObject(function(object) {\n object.setCoords();\n });\n return this;\n },\n\n /**\n * @private\n */\n _calcBounds: function(onlyWidthHeight) {\n var aX = [],\n aY = [],\n o;\n\n for (var i = 0, len = this._objects.length; i < len; ++i) {\n o = this._objects[i];\n o.setCoords();\n for (var prop in o.oCoords) {\n aX.push(o.oCoords[prop].x);\n aY.push(o.oCoords[prop].y);\n }\n }\n\n this.set(this._getBounds(aX, aY, onlyWidthHeight));\n },\n\n /**\n * @private\n */\n _getBounds: function(aX, aY, onlyWidthHeight) {\n var ivt = fabric.util.invertTransform(this.getViewportTransform()),\n minXY = fabric.util.transformPoint(new fabric.Point(min(aX), min(aY)), ivt),\n maxXY = fabric.util.transformPoint(new fabric.Point(max(aX), max(aY)), ivt),\n obj = {\n width: (maxXY.x - minXY.x) || 0,\n height: (maxXY.y - minXY.y) || 0\n };\n\n if (!onlyWidthHeight) {\n obj.left = (minXY.x + maxXY.x) / 2 || 0;\n obj.top = (minXY.y + maxXY.y) / 2 || 0;\n }\n return obj;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns svg representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = [\n //jscs:disable validateIndentation\n '\\n'\n //jscs:enable validateIndentation\n ];\n\n for (var i = 0, len = this._objects.length; i < len; i++) {\n markup.push(this._objects[i].toSVG(reviver));\n }\n\n markup.push('\\n');\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns requested property\n * @param {String} prop Property to get\n * @return {Any}\n */\n get: function(prop) {\n if (prop in _lockProperties) {\n if (this[prop]) {\n return this[prop];\n }\n else {\n for (var i = 0, len = this._objects.length; i < len; i++) {\n if (this._objects[i][prop]) {\n return true;\n }\n }\n return false;\n }\n }\n else {\n if (prop in this.delegatedProperties) {\n return this._objects[0] && this._objects[0].get(prop);\n }\n return this[prop];\n }\n }\n });\n\n /**\n * Returns {@link fabric.Group} instance from an object representation\n * @static\n * @memberOf fabric.Group\n * @param {Object} object Object to create a group from\n * @param {Function} [callback] Callback to invoke when an group instance is created\n * @return {fabric.Group} An instance of fabric.Group\n */\n fabric.Group.fromObject = function(object, callback) {\n fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {\n delete object.objects;\n callback && callback(new fabric.Group(enlivenedObjects, object));\n });\n };\n\n /**\n * Indicates that instances of this type are async\n * @static\n * @memberOf fabric.Group\n * @type Boolean\n * @default\n */\n fabric.Group.async = true;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var extend = fabric.util.object.extend;\n\n if (!global.fabric) {\n global.fabric = { };\n }\n\n if (global.fabric.Image) {\n fabric.warn('fabric.Image is already defined.');\n return;\n }\n\n /**\n * Image class\n * @class fabric.Image\n * @extends fabric.Object\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#images}\n * @see {@link fabric.Image#initialize} for constructor definition\n */\n fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'image',\n\n /**\n * crossOrigin value (one of \"\", \"anonymous\", \"allow-credentials\")\n * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes\n * @type String\n * @default\n */\n crossOrigin: '',\n\n /**\n * Constructor\n * @param {HTMLImageElement | String} element Image element\n * @param {Object} [options] Options object\n * @return {fabric.Image} thisArg\n */\n initialize: function(element, options) {\n options || (options = { });\n\n this.filters = [ ];\n\n this.callSuper('initialize', options);\n\n this._initElement(element, options);\n this._initConfig(options);\n\n if (options.filters) {\n this.filters = options.filters;\n this.applyFilters();\n }\n },\n\n /**\n * Returns image element which this instance if based on\n * @return {HTMLImageElement} Image element\n */\n getElement: function() {\n return this._element;\n },\n\n /**\n * Sets image element for this instance to a specified one.\n * If filters defined they are applied to new image.\n * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.\n * @param {HTMLImageElement} element\n * @param {Function} [callback] Callback is invoked when all filters have been applied and new image is generated\n * @return {fabric.Image} thisArg\n * @chainable\n */\n setElement: function(element, callback) {\n this._element = element;\n this._originalElement = element;\n this._initConfig();\n\n if (this.filters.length !== 0) {\n this.applyFilters(callback);\n }\n\n return this;\n },\n\n /**\n * Sets crossOrigin value (on an instance and corresponding image element)\n * @return {fabric.Image} thisArg\n * @chainable\n */\n setCrossOrigin: function(value) {\n this.crossOrigin = value;\n this._element.crossOrigin = value;\n\n return this;\n },\n\n /**\n * Returns original size of an image\n * @return {Object} Object with \"width\" and \"height\" properties\n */\n getOriginalSize: function() {\n var element = this.getElement();\n return {\n width: element.width,\n height: element.height\n };\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _stroke: function(ctx) {\n ctx.save();\n this._setStrokeStyles(ctx);\n ctx.beginPath();\n ctx.strokeRect(-this.width / 2, -this.height / 2, this.width, this.height);\n ctx.closePath();\n ctx.restore();\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderDashedStroke: function(ctx) {\n var x = -this.width / 2,\n y = -this.height / 2,\n w = this.width,\n h = this.height;\n\n ctx.save();\n this._setStrokeStyles(ctx);\n\n ctx.beginPath();\n fabric.util.drawDashedLine(ctx, x, y, x + w, y, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x + w, y, x + w, y + h, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x + w, y + h, x, y + h, this.strokeDashArray);\n fabric.util.drawDashedLine(ctx, x, y + h, x, y, this.strokeDashArray);\n ctx.closePath();\n ctx.restore();\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return extend(this.callSuper('toObject', propertiesToInclude), {\n src: this._originalElement.src || this._originalElement._src,\n filters: this.filters.map(function(filterObj) {\n return filterObj && filterObj.toObject();\n }),\n crossOrigin: this.crossOrigin\n });\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = [], x = -this.width / 2, y = -this.height / 2;\n if (this.group && this.group.type === 'path-group') {\n x = this.left;\n y = this.top;\n }\n markup.push(\n '\\n',\n ' element with actual transformation, then offsetting object to the top/left\n // so that object's center aligns with container's left/top\n '\" width=\"', this.width,\n '\" height=\"', this.height,\n '\" preserveAspectRatio=\"none\"',\n '>\\n'\n );\n\n if (this.stroke || this.strokeDashArray) {\n var origFill = this.fill;\n this.fill = null;\n markup.push(\n '\\n'\n );\n this.fill = origFill;\n }\n\n markup.push('\\n');\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns source of an image\n * @return {String} Source of an image\n */\n getSrc: function() {\n if (this.getElement()) {\n return this.getElement().src || this.getElement()._src;\n }\n },\n\n /**\n * Returns string representation of an instance\n * @return {String} String representation of an instance\n */\n toString: function() {\n return '#';\n },\n\n /**\n * Returns a clone of an instance\n * @param {Function} callback Callback is invoked with a clone as a first argument\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n */\n clone: function(callback, propertiesToInclude) {\n this.constructor.fromObject(this.toObject(propertiesToInclude), callback);\n },\n\n /**\n * Applies filters assigned to this image (from \"filters\" array)\n * @mthod applyFilters\n * @param {Function} callback Callback is invoked when all filters have been applied and new image is generated\n * @return {fabric.Image} thisArg\n * @chainable\n */\n applyFilters: function(callback) {\n\n if (!this._originalElement) {\n return;\n }\n\n if (this.filters.length === 0) {\n this._element = this._originalElement;\n callback && callback();\n return;\n }\n\n var imgEl = this._originalElement,\n canvasEl = fabric.util.createCanvasElement(),\n replacement = fabric.util.createImage(),\n _this = this;\n\n canvasEl.width = imgEl.width;\n canvasEl.height = imgEl.height;\n\n canvasEl.getContext('2d').drawImage(imgEl, 0, 0, imgEl.width, imgEl.height);\n\n this.filters.forEach(function(filter) {\n filter && filter.applyTo(canvasEl);\n });\n\n /** @ignore */\n\n replacement.width = imgEl.width;\n replacement.height = imgEl.height;\n\n if (fabric.isLikelyNode) {\n replacement.src = canvasEl.toBuffer(undefined, fabric.Image.pngCompression);\n\n // onload doesn't fire in some node versions, so we invoke callback manually\n _this._element = replacement;\n callback && callback();\n }\n else {\n replacement.onload = function() {\n _this._element = replacement;\n callback && callback();\n replacement.onload = canvasEl = imgEl = null;\n };\n replacement.src = canvasEl.toDataURL('image/png');\n }\n\n return this;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx, noTransform) {\n this._element &&\n ctx.drawImage(\n this._element,\n noTransform ? this.left : -this.width/2,\n noTransform ? this.top : -this.height/2,\n this.width,\n this.height\n );\n this._renderStroke(ctx);\n },\n\n /**\n * @private\n */\n _resetWidthHeight: function() {\n var element = this.getElement();\n\n this.set('width', element.width);\n this.set('height', element.height);\n },\n\n /**\n * The Image class's initialization method. This method is automatically\n * called by the constructor.\n * @private\n * @param {HTMLImageElement|String} element The element representing the image\n */\n _initElement: function(element) {\n this.setElement(fabric.util.getById(element));\n fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS);\n },\n\n /**\n * @private\n * @param {Object} [options] Options object\n */\n _initConfig: function(options) {\n options || (options = { });\n this.setOptions(options);\n this._setWidthHeight(options);\n if (this._element && this.crossOrigin) {\n this._element.crossOrigin = this.crossOrigin;\n }\n },\n\n /**\n * @private\n * @param {Object} object Object with filters property\n * @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created\n */\n _initFilters: function(object, callback) {\n if (object.filters && object.filters.length) {\n fabric.util.enlivenObjects(object.filters, function(enlivenedObjects) {\n callback && callback(enlivenedObjects);\n }, 'fabric.Image.filters');\n }\n else {\n callback && callback();\n }\n },\n\n /**\n * @private\n * @param {Object} [options] Object with width/height properties\n */\n _setWidthHeight: function(options) {\n this.width = 'width' in options\n ? options.width\n : (this.getElement()\n ? this.getElement().width || 0\n : 0);\n\n this.height = 'height' in options\n ? options.height\n : (this.getElement()\n ? this.getElement().height || 0\n : 0);\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity of this instance\n */\n complexity: function() {\n return 1;\n }\n });\n\n /**\n * Default CSS class name for canvas\n * @static\n * @type String\n * @default\n */\n fabric.Image.CSS_CANVAS = 'canvas-img';\n\n /**\n * Alias for getSrc\n * @static\n */\n fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc;\n\n /**\n * Creates an instance of fabric.Image from its object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @param {Function} [callback] Callback to invoke when an image instance is created\n */\n fabric.Image.fromObject = function(object, callback) {\n fabric.util.loadImage(object.src, function(img) {\n fabric.Image.prototype._initFilters.call(object, object, function(filters) {\n object.filters = filters || [ ];\n var instance = new fabric.Image(img, object);\n callback && callback(instance);\n });\n }, null, object.crossOrigin);\n };\n\n /**\n * Creates an instance of fabric.Image from an URL string\n * @static\n * @param {String} url URL to create an image from\n * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument)\n * @param {Object} [imgOptions] Options object\n */\n fabric.Image.fromURL = function(url, callback, imgOptions) {\n fabric.util.loadImage(url, function(img) {\n callback(new fabric.Image(img, imgOptions));\n }, null, imgOptions && imgOptions.crossOrigin);\n };\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})\n * @static\n * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}\n */\n fabric.Image.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y width height xlink:href'.split(' '));\n\n /**\n * Returns {@link fabric.Image} instance from an SVG element\n * @static\n * @param {SVGElement} element Element to parse\n * @param {Function} callback Callback to execute when fabric.Image object is created\n * @param {Object} [options] Options object\n * @return {fabric.Image} Instance of fabric.Image\n */\n fabric.Image.fromElement = function(element, callback, options) {\n var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES);\n\n fabric.Image.fromURL(parsedAttributes['xlink:href'], callback,\n extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Indicates that instances of this type are async\n * @static\n * @type Boolean\n * @default\n */\n fabric.Image.async = true;\n\n /**\n * Indicates compression level used when generating PNG under Node (in applyFilters). Any of 0-9\n * @static\n * @type Number\n * @default\n */\n fabric.Image.pngCompression = 1;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\nfabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ {\n\n /**\n * @private\n * @return {Number} angle value\n */\n _getAngleValueForStraighten: function() {\n var angle = this.getAngle() % 360;\n if (angle > 0) {\n return Math.round((angle - 1) / 90) * 90;\n }\n return Math.round(angle / 90) * 90;\n },\n\n /**\n * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n straighten: function() {\n this.setAngle(this._getAngleValueForStraighten());\n return this;\n },\n\n /**\n * Same as {@link fabric.Object.prototype.straighten} but with animation\n * @param {Object} callbacks Object with callback functions\n * @param {Function} [callbacks.onComplete] Invoked on completion\n * @param {Function} [callbacks.onChange] Invoked on every step of animation\n * @return {fabric.Object} thisArg\n * @chainable\n */\n fxStraighten: function(callbacks) {\n callbacks = callbacks || { };\n\n var empty = function() { },\n onComplete = callbacks.onComplete || empty,\n onChange = callbacks.onChange || empty,\n _this = this;\n\n fabric.util.animate({\n startValue: this.get('angle'),\n endValue: this._getAngleValueForStraighten(),\n duration: this.FX_DURATION,\n onChange: function(value) {\n _this.setAngle(value);\n onChange();\n },\n onComplete: function() {\n _this.setCoords();\n onComplete();\n },\n onStart: function() {\n _this.set('active', false);\n }\n });\n\n return this;\n }\n});\n\nfabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {\n\n /**\n * Straightens object, then rerenders canvas\n * @param {fabric.Object} object Object to straighten\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n straightenObject: function (object) {\n object.straighten();\n this.renderAll();\n return this;\n },\n\n /**\n * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated\n * @param {fabric.Object} object Object to straighten\n * @return {fabric.Canvas} thisArg\n * @chainable\n */\n fxStraightenObject: function (object) {\n object.fxStraighten({\n onChange: this.renderAll.bind(this)\n });\n return this;\n }\n});\n\n\n/**\n * @namespace fabric.Image.filters\n * @memberOf fabric.Image\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#image_filters}\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n */\nfabric.Image.filters = fabric.Image.filters || { };\n\n/**\n * Root filter class from which all filter classes inherit from\n * @class fabric.Image.filters.BaseFilter\n * @memberOf fabric.Image.filters\n */\nfabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'BaseFilter',\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return { type: this.type };\n },\n\n /**\n * Returns a JSON representation of an instance\n * @return {Object} JSON\n */\n toJSON: function() {\n // delegate, not alias\n return this.toObject();\n }\n});\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Brightness filter class\n * @class fabric.Image.filters.Brightness\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Brightness({\n * brightness: 200\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Brightness = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Brightness',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Brightness.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.brightness=0] Value to brighten the image up (0..255)\n */\n initialize: function(options) {\n options = options || { };\n this.brightness = options.brightness || 0;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n brightness = this.brightness;\n\n for (var i = 0, len = data.length; i < len; i += 4) {\n data[i] += brightness;\n data[i + 1] += brightness;\n data[i + 2] += brightness;\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n brightness: this.brightness\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness\n */\n fabric.Image.filters.Brightness.fromObject = function(object) {\n return new fabric.Image.filters.Brightness(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Adapted from html5rocks article\n * @class fabric.Image.filters.Convolute\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example Sharpen filter\n * var filter = new fabric.Image.filters.Convolute({\n * matrix: [ 0, -1, 0,\n * -1, 5, -1,\n * 0, -1, 0 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n * @example Blur filter\n * var filter = new fabric.Image.filters.Convolute({\n * matrix: [ 1/9, 1/9, 1/9,\n * 1/9, 1/9, 1/9,\n * 1/9, 1/9, 1/9 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n * @example Emboss filter\n * var filter = new fabric.Image.filters.Convolute({\n * matrix: [ 1, 1, 1,\n * 1, 0.7, -1,\n * -1, -1, -1 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n * @example Emboss filter with opaqueness\n * var filter = new fabric.Image.filters.Convolute({\n * opaque: true,\n * matrix: [ 1, 1, 1,\n * 1, 0.7, -1,\n * -1, -1, -1 ]\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Convolute = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Convolute',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Convolute.prototype\n * @param {Object} [options] Options object\n * @param {Boolean} [options.opaque=false] Opaque value (true/false)\n * @param {Array} [options.matrix] Filter matrix\n */\n initialize: function(options) {\n options = options || { };\n\n this.opaque = options.opaque;\n this.matrix = options.matrix || [\n 0, 0, 0,\n 0, 1, 0,\n 0, 0, 0\n ];\n\n var canvasEl = fabric.util.createCanvasElement();\n this.tmpCtx = canvasEl.getContext('2d');\n },\n\n /**\n * @private\n */\n _createImageData: function(w, h) {\n return this.tmpCtx.createImageData(w, h);\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n\n var weights = this.matrix,\n context = canvasEl.getContext('2d'),\n pixels = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n\n side = Math.round(Math.sqrt(weights.length)),\n halfSide = Math.floor(side/2),\n src = pixels.data,\n sw = pixels.width,\n sh = pixels.height,\n\n // pad output by the convolution matrix\n w = sw,\n h = sh,\n output = this._createImageData(w, h),\n\n dst = output.data,\n\n // go through the destination image pixels\n alphaFac = this.opaque ? 1 : 0;\n\n for (var y = 0; y < h; y++) {\n for (var x = 0; x < w; x++) {\n var sy = y,\n sx = x,\n dstOff = (y * w + x) * 4,\n // calculate the weighed sum of the source image pixels that\n // fall under the convolution matrix\n r = 0, g = 0, b = 0, a = 0;\n\n for (var cy = 0; cy < side; cy++) {\n for (var cx = 0; cx < side; cx++) {\n\n var scy = sy + cy - halfSide,\n scx = sx + cx - halfSide;\n\n /* jshint maxdepth:5 */\n if (scy < 0 || scy > sh || scx < 0 || scx > sw) {\n continue;\n }\n\n var srcOff = (scy * sw + scx) * 4,\n wt = weights[cy * side + cx];\n\n r += src[srcOff] * wt;\n g += src[srcOff + 1] * wt;\n b += src[srcOff + 2] * wt;\n a += src[srcOff + 3] * wt;\n }\n }\n dst[dstOff] = r;\n dst[dstOff + 1] = g;\n dst[dstOff + 2] = b;\n dst[dstOff + 3] = a + alphaFac * (255 - a);\n }\n }\n\n context.putImageData(output, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n opaque: this.opaque,\n matrix: this.matrix\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute\n */\n fabric.Image.filters.Convolute.fromObject = function(object) {\n return new fabric.Image.filters.Convolute(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * GradientTransparency filter class\n * @class fabric.Image.filters.GradientTransparency\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.GradientTransparency#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.GradientTransparency({\n * threshold: 200\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.GradientTransparency = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.GradientTransparency.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'GradientTransparency',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.GradientTransparency.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.threshold=100] Threshold value\n */\n initialize: function(options) {\n options = options || { };\n this.threshold = options.threshold || 100;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n threshold = this.threshold,\n total = data.length;\n\n for (var i = 0, len = data.length; i < len; i += 4) {\n data[i + 3] = threshold + 255 * (total - i) / total;\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n threshold: this.threshold\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.GradientTransparency} Instance of fabric.Image.filters.GradientTransparency\n */\n fabric.Image.filters.GradientTransparency.fromObject = function(object) {\n return new fabric.Image.filters.GradientTransparency(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n /**\n * Grayscale image filter class\n * @class fabric.Image.filters.Grayscale\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Grayscale();\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Grayscale = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Grayscale',\n\n /**\n * Applies filter to canvas element\n * @memberOf fabric.Image.filters.Grayscale.prototype\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n len = imageData.width * imageData.height * 4,\n index = 0,\n average;\n\n while (index < len) {\n average = (data[index] + data[index + 1] + data[index + 2]) / 3;\n data[index] = average;\n data[index + 1] = average;\n data[index + 2] = average;\n index += 4;\n }\n\n context.putImageData(imageData, 0, 0);\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale\n */\n fabric.Image.filters.Grayscale.fromObject = function() {\n return new fabric.Image.filters.Grayscale();\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n /**\n * Invert filter class\n * @class fabric.Image.filters.Invert\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Invert();\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Invert = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Invert',\n\n /**\n * Applies filter to canvas element\n * @memberOf fabric.Image.filters.Invert.prototype\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = data.length, i;\n\n for (i = 0; i < iLen; i+=4) {\n data[i] = 255 - data[i];\n data[i + 1] = 255 - data[i + 1];\n data[i + 2] = 255 - data[i + 2];\n }\n\n context.putImageData(imageData, 0, 0);\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert\n */\n fabric.Image.filters.Invert.fromObject = function() {\n return new fabric.Image.filters.Invert();\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Mask filter class\n * See http://resources.aleph-1.com/mask/\n * @class fabric.Image.filters.Mask\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Mask#initialize} for constructor definition\n */\n fabric.Image.filters.Mask = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Mask.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Mask',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Mask.prototype\n * @param {Object} [options] Options object\n * @param {fabric.Image} [options.mask] Mask image object\n * @param {Number} [options.channel=0] Rgb channel (0, 1, 2 or 3)\n */\n initialize: function(options) {\n options = options || { };\n\n this.mask = options.mask;\n this.channel = [ 0, 1, 2, 3 ].indexOf(options.channel) > -1 ? options.channel : 0;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n if (!this.mask) {\n return;\n }\n\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n maskEl = this.mask.getElement(),\n maskCanvasEl = fabric.util.createCanvasElement(),\n channel = this.channel,\n i,\n iLen = imageData.width * imageData.height * 4;\n\n maskCanvasEl.width = maskEl.width;\n maskCanvasEl.height = maskEl.height;\n\n maskCanvasEl.getContext('2d').drawImage(maskEl, 0, 0, maskEl.width, maskEl.height);\n\n var maskImageData = maskCanvasEl.getContext('2d').getImageData(0, 0, maskEl.width, maskEl.height),\n maskData = maskImageData.data;\n\n for (i = 0; i < iLen; i += 4) {\n data[i + 3] = maskData[i + channel];\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n mask: this.mask.toObject(),\n channel: this.channel\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @param {Function} [callback] Callback to invoke when a mask filter instance is created\n */\n fabric.Image.filters.Mask.fromObject = function(object, callback) {\n fabric.util.loadImage(object.mask.src, function(img) {\n object.mask = new fabric.Image(img, object.mask);\n callback && callback(new fabric.Image.filters.Mask(object));\n });\n };\n\n /**\n * Indicates that instances of this type are async\n * @static\n * @type Boolean\n * @default\n */\n fabric.Image.filters.Mask.async = true;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Noise filter class\n * @class fabric.Image.filters.Noise\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Noise({\n * noise: 700\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Noise = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Noise',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Noise.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.noise=0] Noise value\n */\n initialize: function(options) {\n options = options || { };\n this.noise = options.noise || 0;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n noise = this.noise, rand;\n\n for (var i = 0, len = data.length; i < len; i += 4) {\n\n rand = (0.5 - Math.random()) * noise;\n\n data[i] += rand;\n data[i + 1] += rand;\n data[i + 2] += rand;\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n noise: this.noise\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise\n */\n fabric.Image.filters.Noise.fromObject = function(object) {\n return new fabric.Image.filters.Noise(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Pixelate filter class\n * @class fabric.Image.filters.Pixelate\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Pixelate({\n * blocksize: 8\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Pixelate = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Pixelate',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Pixelate.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.blocksize=4] Blocksize for pixelate\n */\n initialize: function(options) {\n options = options || { };\n this.blocksize = options.blocksize || 4;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = imageData.height,\n jLen = imageData.width,\n index, i, j, r, g, b, a;\n\n for (i = 0; i < iLen; i += this.blocksize) {\n for (j = 0; j < jLen; j += this.blocksize) {\n\n index = (i * 4) * jLen + (j * 4);\n\n r = data[index];\n g = data[index + 1];\n b = data[index + 2];\n a = data[index + 3];\n\n /*\n blocksize: 4\n\n [1,x,x,x,1]\n [x,x,x,x,1]\n [x,x,x,x,1]\n [x,x,x,x,1]\n [1,1,1,1,1]\n */\n\n for (var _i = i, _ilen = i + this.blocksize; _i < _ilen; _i++) {\n for (var _j = j, _jlen = j + this.blocksize; _j < _jlen; _j++) {\n index = (_i * 4) * jLen + (_j * 4);\n data[index] = r;\n data[index + 1] = g;\n data[index + 2] = b;\n data[index + 3] = a;\n }\n }\n }\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n blocksize: this.blocksize\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate\n */\n fabric.Image.filters.Pixelate.fromObject = function(object) {\n return new fabric.Image.filters.Pixelate(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Remove white filter class\n * @class fabric.Image.filters.RemoveWhite\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.RemoveWhite#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.RemoveWhite({\n * threshold: 40,\n * distance: 140\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.RemoveWhite = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.RemoveWhite.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'RemoveWhite',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.RemoveWhite.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.threshold=30] Threshold value\n * @param {Number} [options.distance=20] Distance value\n */\n initialize: function(options) {\n options = options || { };\n this.threshold = options.threshold || 30;\n this.distance = options.distance || 20;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n threshold = this.threshold,\n distance = this.distance,\n limit = 255 - threshold,\n abs = Math.abs,\n r, g, b;\n\n for (var i = 0, len = data.length; i < len; i += 4) {\n r = data[i];\n g = data[i + 1];\n b = data[i + 2];\n\n if (r > limit &&\n g > limit &&\n b > limit &&\n abs(r - g) < distance &&\n abs(r - b) < distance &&\n abs(g - b) < distance\n ) {\n data[i + 3] = 1;\n }\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n threshold: this.threshold,\n distance: this.distance\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.RemoveWhite} Instance of fabric.Image.filters.RemoveWhite\n */\n fabric.Image.filters.RemoveWhite.fromObject = function(object) {\n return new fabric.Image.filters.RemoveWhite(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n /**\n * Sepia filter class\n * @class fabric.Image.filters.Sepia\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Sepia();\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Sepia = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Sepia.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Sepia',\n\n /**\n * Applies filter to canvas element\n * @memberOf fabric.Image.filters.Sepia.prototype\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = data.length, i, avg;\n\n for (i = 0; i < iLen; i+=4) {\n avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];\n data[i] = avg + 100;\n data[i + 1] = avg + 50;\n data[i + 2] = avg + 255;\n }\n\n context.putImageData(imageData, 0, 0);\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @return {fabric.Image.filters.Sepia} Instance of fabric.Image.filters.Sepia\n */\n fabric.Image.filters.Sepia.fromObject = function() {\n return new fabric.Image.filters.Sepia();\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n /**\n * Sepia2 filter class\n * @class fabric.Image.filters.Sepia2\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example\n * var filter = new fabric.Image.filters.Sepia2();\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Sepia2 = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Sepia2.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Sepia2',\n\n /**\n * Applies filter to canvas element\n * @memberOf fabric.Image.filters.Sepia.prototype\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = data.length, i, r, g, b;\n\n for (i = 0; i < iLen; i+=4) {\n r = data[i];\n g = data[i + 1];\n b = data[i + 2];\n\n data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;\n data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;\n data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;\n }\n\n context.putImageData(imageData, 0, 0);\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @return {fabric.Image.filters.Sepia2} Instance of fabric.Image.filters.Sepia2\n */\n fabric.Image.filters.Sepia2.fromObject = function() {\n return new fabric.Image.filters.Sepia2();\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Tint filter class\n * Adapted from https://github.com/mezzoblue/PaintbrushJS\n * @class fabric.Image.filters.Tint\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @see {@link fabric.Image.filters.Tint#initialize} for constructor definition\n * @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}\n * @example Tint filter with hex color and opacity\n * var filter = new fabric.Image.filters.Tint({\n * color: '#3513B0',\n * opacity: 0.5\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n * @example Tint filter with rgba color\n * var filter = new fabric.Image.filters.Tint({\n * color: 'rgba(53, 21, 176, 0.5)'\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Tint = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Tint.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Tint',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Tint.prototype\n * @param {Object} [options] Options object\n * @param {String} [options.color=#000000] Color to tint the image with\n * @param {Number} [options.opacity] Opacity value that controls the tint effect's transparency (0..1)\n */\n initialize: function(options) {\n options = options || { };\n\n this.color = options.color || '#000000';\n this.opacity = typeof options.opacity !== 'undefined'\n ? options.opacity\n : new fabric.Color(this.color).getAlpha();\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = data.length, i,\n tintR, tintG, tintB,\n r, g, b, alpha1,\n source;\n\n source = new fabric.Color(this.color).getSource();\n\n tintR = source[0] * this.opacity;\n tintG = source[1] * this.opacity;\n tintB = source[2] * this.opacity;\n\n alpha1 = 1 - this.opacity;\n\n for (i = 0; i < iLen; i+=4) {\n r = data[i];\n g = data[i + 1];\n b = data[i + 2];\n\n // alpha compositing\n data[i] = tintR + r * alpha1;\n data[i + 1] = tintG + g * alpha1;\n data[i + 2] = tintB + b * alpha1;\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n color: this.color,\n opacity: this.opacity\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Tint} Instance of fabric.Image.filters.Tint\n */\n fabric.Image.filters.Tint.fromObject = function(object) {\n return new fabric.Image.filters.Tint(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend;\n\n /**\n * Multiply filter class\n * Adapted from http://www.laurenscorijn.com/articles/colormath-basics\n * @class fabric.Image.filters.Multiply\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @example Multiply filter with hex color\n * var filter = new fabric.Image.filters.Multiply({\n * color: '#F0F'\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n * @example Multiply filter with rgb color\n * var filter = new fabric.Image.filters.Multiply({\n * color: 'rgb(53, 21, 176)'\n * });\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Multiply = fabric.util.createClass(fabric.Image.filters.BaseFilter, /** @lends fabric.Image.filters.Multiply.prototype */ {\n\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Multiply',\n\n /**\n * Constructor\n * @memberOf fabric.Image.filters.Multiply.prototype\n * @param {Object} [options] Options object\n * @param {String} [options.color=#000000] Color to multiply the image pixels with\n */\n initialize: function(options) {\n options = options || { };\n\n this.color = options.color || '#000000';\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvasEl Canvas element to apply filter to\n */\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n iLen = data.length, i,\n source;\n\n source = new fabric.Color(this.color).getSource();\n\n for (i = 0; i < iLen; i+=4) {\n data[i] *= source[0] / 255;\n data[i + 1] *= source[1] / 255;\n data[i + 2] *= source[2] / 255;\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return extend(this.callSuper('toObject'), {\n color: this.color\n });\n }\n });\n\n /**\n * Returns filter instance from an object representation\n * @static\n * @param {Object} object Object to create an instance from\n * @return {fabric.Image.filters.Multiply} Instance of fabric.Image.filters.Multiply\n */\n fabric.Image.filters.Multiply.fromObject = function(object) {\n return new fabric.Image.filters.Multiply(object);\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n 'use strict';\n\n var fabric = global.fabric;\n\n /**\n * Color Blend filter class\n * @class fabric.Image.filter.Blend\n * @memberOf fabric.Image.filters\n * @extends fabric.Image.filters.BaseFilter\n * @example\n * var filter = new fabric.Image.filters.Blend({\n * color: '#000',\n * mode: 'multiply'\n * });\n *\n * var filter = new fabric.Image.filters.Blend({\n * image: fabricImageObject,\n * mode: 'multiply',\n * alpha: 0.5\n * });\n\n * object.filters.push(filter);\n * object.applyFilters(canvas.renderAll.bind(canvas));\n */\n fabric.Image.filters.Blend = fabric.util.createClass({\n type: 'Blend',\n\n initialize: function(options) {\n options = options || {};\n this.color = options.color || '#000';\n this.image = options.image || false;\n this.mode = options.mode || 'multiply';\n this.alpha = options.alpha || 1;\n },\n\n applyTo: function(canvasEl) {\n var context = canvasEl.getContext('2d'),\n imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),\n data = imageData.data,\n tr, tg, tb,\n r, g, b,\n source,\n isImage = false;\n\n if (this.image) {\n // Blend images\n isImage = true;\n\n var _el = fabric.util.createCanvasElement();\n _el.width = this.image.width;\n _el.height = this.image.height;\n\n var tmpCanvas = new fabric.StaticCanvas(_el);\n tmpCanvas.add(this.image);\n var context2 = tmpCanvas.getContext('2d');\n source = context2.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height).data;\n }\n else {\n // Blend color\n source = new fabric.Color(this.color).getSource();\n\n tr = source[0] * this.alpha;\n tg = source[1] * this.alpha;\n tb = source[2] * this.alpha;\n }\n\n for (var i = 0, len = data.length; i < len; i += 4) {\n\n r = data[i];\n g = data[i + 1];\n b = data[i + 2];\n\n if (isImage) {\n tr = source[i] * this.alpha;\n tg = source[i + 1] * this.alpha;\n tb = source[i + 2] * this.alpha;\n }\n\n switch (this.mode) {\n case 'multiply':\n data[i] = r * tr / 255;\n data[i + 1] = g * tg / 255;\n data[i + 2] = b * tb / 255;\n break;\n case 'screen':\n data[i] = 1 - (1 - r) * (1 - tr);\n data[i + 1] = 1 - (1 - g) * (1 - tg);\n data[i + 2] = 1 - (1 - b) * (1 - tb);\n break;\n case 'add':\n data[i] = Math.min(255, r + tr);\n data[i + 1] = Math.min(255, g + tg);\n data[i + 2] = Math.min(255, b + tb);\n break;\n case 'diff':\n case 'difference':\n data[i] = Math.abs(r - tr);\n data[i + 1] = Math.abs(g - tg);\n data[i + 2] = Math.abs(b - tb);\n break;\n case 'subtract':\n var _r = r - tr,\n _g = g - tg,\n _b = b - tb;\n\n data[i] = (_r < 0) ? 0 : _r;\n data[i + 1] = (_g < 0) ? 0 : _g;\n data[i + 2] = (_b < 0) ? 0 : _b;\n break;\n case 'darken':\n data[i] = Math.min(r, tr);\n data[i + 1] = Math.min(g, tg);\n data[i + 2] = Math.min(b, tb);\n break;\n case 'lighten':\n data[i] = Math.max(r, tr);\n data[i + 1] = Math.max(g, tg);\n data[i + 2] = Math.max(b, tb);\n break;\n }\n }\n\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Returns object representation of an instance\n * @return {Object} Object representation of an instance\n */\n toObject: function() {\n return {\n color: this.color,\n image: this.image,\n mode: this.mode,\n alpha: this.alpha\n };\n }\n });\n\n fabric.Image.filters.Blend.fromObject = function(object) {\n return new fabric.Image.filters.Blend(object);\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n clone = fabric.util.object.clone,\n toFixed = fabric.util.toFixed,\n supportsLineDash = fabric.StaticCanvas.supports('setLineDash');\n\n if (fabric.Text) {\n fabric.warn('fabric.Text is already defined');\n return;\n }\n\n var stateProperties = fabric.Object.prototype.stateProperties.concat();\n stateProperties.push(\n 'fontFamily',\n 'fontWeight',\n 'fontSize',\n 'text',\n 'textDecoration',\n 'textAlign',\n 'fontStyle',\n 'lineHeight',\n 'textBackgroundColor',\n 'useNative',\n 'path'\n );\n\n /**\n * Text class\n * @class fabric.Text\n * @extends fabric.Object\n * @return {fabric.Text} thisArg\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#text}\n * @see {@link fabric.Text#initialize} for constructor definition\n */\n fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ {\n\n /**\n * Properties which when set cause object to change dimensions\n * @type Object\n * @private\n */\n _dimensionAffectingProps: {\n fontSize: true,\n fontWeight: true,\n fontFamily: true,\n textDecoration: true,\n fontStyle: true,\n lineHeight: true,\n stroke: true,\n strokeWidth: true,\n text: true\n },\n\n /**\n * @private\n */\n _reNewline: /\\r?\\n/,\n\n /**\n * Retrieves object's fontSize\n * @method getFontSize\n * @memberOf fabric.Text.prototype\n * @return {String} Font size (in pixels)\n */\n\n /**\n * Sets object's fontSize\n * @method setFontSize\n * @memberOf fabric.Text.prototype\n * @param {Number} fontSize Font size (in pixels)\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's fontWeight\n * @method getFontWeight\n * @memberOf fabric.Text.prototype\n * @return {(String|Number)} Font weight\n */\n\n /**\n * Sets object's fontWeight\n * @method setFontWeight\n * @memberOf fabric.Text.prototype\n * @param {(Number|String)} fontWeight Font weight\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's fontFamily\n * @method getFontFamily\n * @memberOf fabric.Text.prototype\n * @return {String} Font family\n */\n\n /**\n * Sets object's fontFamily\n * @method setFontFamily\n * @memberOf fabric.Text.prototype\n * @param {String} fontFamily Font family\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's text\n * @method getText\n * @memberOf fabric.Text.prototype\n * @return {String} text\n */\n\n /**\n * Sets object's text\n * @method setText\n * @memberOf fabric.Text.prototype\n * @param {String} text Text\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's textDecoration\n * @method getTextDecoration\n * @memberOf fabric.Text.prototype\n * @return {String} Text decoration\n */\n\n /**\n * Sets object's textDecoration\n * @method setTextDecoration\n * @memberOf fabric.Text.prototype\n * @param {String} textDecoration Text decoration\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's fontStyle\n * @method getFontStyle\n * @memberOf fabric.Text.prototype\n * @return {String} Font style\n */\n\n /**\n * Sets object's fontStyle\n * @method setFontStyle\n * @memberOf fabric.Text.prototype\n * @param {String} fontStyle Font style\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's lineHeight\n * @method getLineHeight\n * @memberOf fabric.Text.prototype\n * @return {Number} Line height\n */\n\n /**\n * Sets object's lineHeight\n * @method setLineHeight\n * @memberOf fabric.Text.prototype\n * @param {Number} lineHeight Line height\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's textAlign\n * @method getTextAlign\n * @memberOf fabric.Text.prototype\n * @return {String} Text alignment\n */\n\n /**\n * Sets object's textAlign\n * @method setTextAlign\n * @memberOf fabric.Text.prototype\n * @param {String} textAlign Text alignment\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Retrieves object's textBackgroundColor\n * @method getTextBackgroundColor\n * @memberOf fabric.Text.prototype\n * @return {String} Text background color\n */\n\n /**\n * Sets object's textBackgroundColor\n * @method setTextBackgroundColor\n * @memberOf fabric.Text.prototype\n * @param {String} textBackgroundColor Text background color\n * @return {fabric.Text}\n * @chainable\n */\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'text',\n\n /**\n * Font size (in pixels)\n * @type Number\n * @default\n */\n fontSize: 40,\n\n /**\n * Font weight (e.g. bold, normal, 400, 600, 800)\n * @type {(Number|String)}\n * @default\n */\n fontWeight: 'normal',\n\n /**\n * Font family\n * @type String\n * @default\n */\n fontFamily: 'Times New Roman',\n\n /**\n * Text decoration Possible values: \"\", \"underline\", \"overline\" or \"line-through\".\n * @type String\n * @default\n */\n textDecoration: '',\n\n /**\n * Text alignment. Possible values: \"left\", \"center\", or \"right\".\n * @type String\n * @default\n */\n textAlign: 'left',\n\n /**\n * Font style . Possible values: \"\", \"normal\", \"italic\" or \"oblique\".\n * @type String\n * @default\n */\n fontStyle: '',\n\n /**\n * Line height\n * @type Number\n * @default\n */\n lineHeight: 1.3,\n\n /**\n * Background color of text lines\n * @type String\n * @default\n */\n textBackgroundColor: '',\n\n /**\n * URL of a font file, when using Cufon\n * @type String | null\n * @default\n */\n path: null,\n\n /**\n * Indicates whether canvas native text methods should be used to render text (otherwise, Cufon is used)\n * @type Boolean\n * @default\n */\n useNative: true,\n\n /**\n * List of properties to consider when checking if\n * state of an object is changed ({@link fabric.Object#hasStateChanged})\n * as well as for history (undo/redo) purposes\n * @type Array\n */\n stateProperties: stateProperties,\n\n /**\n * When defined, an object is rendered via stroke and this property specifies its color.\n * Backwards incompatibility note: This property was named \"strokeStyle\" until v1.1.6\n * @type String\n * @default\n */\n stroke: null,\n\n /**\n * Shadow object representing shadow of this shape.\n * Backwards incompatibility note: This property was named \"textShadow\" (String) until v1.2.11\n * @type fabric.Shadow\n * @default\n */\n shadow: null,\n\n /**\n * Constructor\n * @param {String} text Text string\n * @param {Object} [options] Options object\n * @return {fabric.Text} thisArg\n */\n initialize: function(text, options) {\n options = options || { };\n\n this.text = text;\n this.__skipDimension = true;\n this.setOptions(options);\n this.__skipDimension = false;\n this._initDimensions();\n },\n\n /**\n * Renders text object on offscreen canvas, so that it would get dimensions\n * @private\n */\n _initDimensions: function() {\n if (this.__skipDimension) {\n return;\n }\n var canvasEl = fabric.util.createCanvasElement();\n this._render(canvasEl.getContext('2d'));\n },\n\n /**\n * Returns string representation of an instance\n * @return {String} String representation of text object\n */\n toString: function() {\n return '#';\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx) {\n\n if (typeof Cufon === 'undefined' || this.useNative === true) {\n this._renderViaNative(ctx);\n }\n else {\n this._renderViaCufon(ctx);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderViaNative: function(ctx) {\n var textLines = this.text.split(this._reNewline);\n\n this._setTextStyles(ctx);\n\n this.width = this._getTextWidth(ctx, textLines);\n this.height = this._getTextHeight(ctx, textLines);\n\n this.clipTo && fabric.util.clipContext(this, ctx);\n\n this._renderTextBackground(ctx, textLines);\n this._translateForTextAlign(ctx);\n this._renderText(ctx, textLines);\n\n if (this.textAlign !== 'left' && this.textAlign !== 'justify') {\n ctx.restore();\n }\n\n this._renderTextDecoration(ctx, textLines);\n this.clipTo && ctx.restore();\n\n this._setBoundaries(ctx, textLines);\n this._totalLineHeight = 0;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderText: function(ctx, textLines) {\n ctx.save();\n this._setShadow(ctx);\n this._setupCompositeOperation(ctx);\n this._renderTextFill(ctx, textLines);\n this._renderTextStroke(ctx, textLines);\n this._restoreCompositeOperation(ctx);\n this._removeShadow(ctx);\n ctx.restore();\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _translateForTextAlign: function(ctx) {\n if (this.textAlign !== 'left' && this.textAlign !== 'justify') {\n ctx.save();\n ctx.translate(this.textAlign === 'center' ? (this.width / 2) : this.width, 0);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _setBoundaries: function(ctx, textLines) {\n this._boundaries = [ ];\n\n for (var i = 0, len = textLines.length; i < len; i++) {\n\n var lineWidth = this._getLineWidth(ctx, textLines[i]),\n lineLeftOffset = this._getLineLeftOffset(lineWidth);\n\n this._boundaries.push({\n height: this.fontSize * this.lineHeight,\n width: lineWidth,\n left: lineLeftOffset\n });\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _setTextStyles: function(ctx) {\n this._setFillStyles(ctx);\n this._setStrokeStyles(ctx);\n ctx.textBaseline = 'alphabetic';\n if (!this.skipTextAlign) {\n ctx.textAlign = this.textAlign;\n }\n ctx.font = this._getFontDeclaration();\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n * @return {Number} Height of fabric.Text object\n */\n _getTextHeight: function(ctx, textLines) {\n return this.fontSize * textLines.length * this.lineHeight;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n * @return {Number} Maximum width of fabric.Text object\n */\n _getTextWidth: function(ctx, textLines) {\n var maxWidth = ctx.measureText(textLines[0] || '|').width;\n\n for (var i = 1, len = textLines.length; i < len; i++) {\n var currentLineWidth = ctx.measureText(textLines[i]).width;\n if (currentLineWidth > maxWidth) {\n maxWidth = currentLineWidth;\n }\n }\n return maxWidth;\n },\n\n /**\n * @private\n * @param {String} method Method name (\"fillText\" or \"strokeText\")\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} chars Chars to render\n * @param {Number} left Left position of text\n * @param {Number} top Top position of text\n */\n _renderChars: function(method, ctx, chars, left, top) {\n ctx[method](chars, left, top);\n },\n\n /**\n * @private\n * @param {String} method Method name (\"fillText\" or \"strokeText\")\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} line Text to render\n * @param {Number} left Left position of text\n * @param {Number} top Top position of text\n * @param {Number} lineIndex Index of a line in a text\n */\n _renderTextLine: function(method, ctx, line, left, top, lineIndex) {\n // lift the line by quarter of fontSize\n top -= this.fontSize / 4;\n\n // short-circuit\n if (this.textAlign !== 'justify') {\n this._renderChars(method, ctx, line, left, top, lineIndex);\n return;\n }\n\n var lineWidth = ctx.measureText(line).width,\n totalWidth = this.width;\n\n if (totalWidth > lineWidth) {\n // stretch the line\n var words = line.split(/\\s+/),\n wordsWidth = ctx.measureText(line.replace(/\\s+/g, '')).width,\n widthDiff = totalWidth - wordsWidth,\n numSpaces = words.length - 1,\n spaceWidth = widthDiff / numSpaces,\n leftOffset = 0;\n\n for (var i = 0, len = words.length; i < len; i++) {\n this._renderChars(method, ctx, words[i], left + leftOffset, top, lineIndex);\n leftOffset += ctx.measureText(words[i]).width + spaceWidth;\n }\n }\n else {\n this._renderChars(method, ctx, line, left, top, lineIndex);\n }\n },\n\n /**\n * @private\n * @return {Number} Left offset\n */\n _getLeftOffset: function() {\n if (fabric.isLikelyNode) {\n return 0;\n }\n return -this.width / 2;\n },\n\n /**\n * @private\n * @return {Number} Top offset\n */\n _getTopOffset: function() {\n return -this.height / 2;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextFill: function(ctx, textLines) {\n if (!this.fill && !this._skipFillStrokeCheck) {\n return;\n }\n\n this._boundaries = [ ];\n var lineHeights = 0;\n\n for (var i = 0, len = textLines.length; i < len; i++) {\n var heightOfLine = this._getHeightOfLine(ctx, i, textLines);\n lineHeights += heightOfLine;\n\n this._renderTextLine(\n 'fillText',\n ctx,\n textLines[i],\n this._getLeftOffset(),\n this._getTopOffset() + lineHeights,\n i\n );\n }\n if (this.shadow && !this.shadow.affectStroke) {\n this._removeShadow(ctx);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextStroke: function(ctx, textLines) {\n if ((!this.stroke || this.strokeWidth === 0) && !this._skipFillStrokeCheck) {\n return;\n }\n\n var lineHeights = 0;\n\n ctx.save();\n if (this.strokeDashArray) {\n // Spec requires the concatenation of two copies the dash list when the number of elements is odd\n if (1 & this.strokeDashArray.length) {\n this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);\n }\n supportsLineDash && ctx.setLineDash(this.strokeDashArray);\n }\n\n ctx.beginPath();\n for (var i = 0, len = textLines.length; i < len; i++) {\n var heightOfLine = this._getHeightOfLine(ctx, i, textLines);\n lineHeights += heightOfLine;\n\n this._renderTextLine(\n 'strokeText',\n ctx,\n textLines[i],\n this._getLeftOffset(),\n this._getTopOffset() + lineHeights,\n i\n );\n }\n ctx.closePath();\n ctx.restore();\n },\n\n _getHeightOfLine: function() {\n return this.fontSize * this.lineHeight;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextBackground: function(ctx, textLines) {\n this._renderTextBoxBackground(ctx);\n this._renderTextLinesBackground(ctx, textLines);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderTextBoxBackground: function(ctx) {\n if (!this.backgroundColor) {\n return;\n }\n\n ctx.save();\n ctx.fillStyle = this.backgroundColor;\n\n ctx.fillRect(\n this._getLeftOffset(),\n this._getTopOffset(),\n this.width,\n this.height\n );\n\n ctx.restore();\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextLinesBackground: function(ctx, textLines) {\n if (!this.textBackgroundColor) {\n return;\n }\n\n ctx.save();\n ctx.fillStyle = this.textBackgroundColor;\n\n for (var i = 0, len = textLines.length; i < len; i++) {\n\n if (textLines[i] !== '') {\n\n var lineWidth = this._getLineWidth(ctx, textLines[i]),\n lineLeftOffset = this._getLineLeftOffset(lineWidth);\n\n ctx.fillRect(\n this._getLeftOffset() + lineLeftOffset,\n this._getTopOffset() + (i * this.fontSize * this.lineHeight),\n lineWidth,\n this.fontSize * this.lineHeight\n );\n }\n }\n ctx.restore();\n },\n\n /**\n * @private\n * @param {Number} lineWidth Width of text line\n * @return {Number} Line left offset\n */\n _getLineLeftOffset: function(lineWidth) {\n if (this.textAlign === 'center') {\n return (this.width - lineWidth) / 2;\n }\n if (this.textAlign === 'right') {\n return this.width - lineWidth;\n }\n return 0;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} line Text line\n * @return {Number} Line width\n */\n _getLineWidth: function(ctx, line) {\n return this.textAlign === 'justify'\n ? this.width\n : ctx.measureText(line).width;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextDecoration: function(ctx, textLines) {\n if (!this.textDecoration) {\n return;\n }\n\n // var halfOfVerticalBox = this.originY === 'top' ? 0 : this._getTextHeight(ctx, textLines) / 2;\n var halfOfVerticalBox = this._getTextHeight(ctx, textLines) / 2,\n _this = this;\n\n /** @ignore */\n function renderLinesAtOffset(offset) {\n for (var i = 0, len = textLines.length; i < len; i++) {\n\n var lineWidth = _this._getLineWidth(ctx, textLines[i]),\n lineLeftOffset = _this._getLineLeftOffset(lineWidth);\n\n ctx.fillRect(\n _this._getLeftOffset() + lineLeftOffset,\n ~~((offset + (i * _this._getHeightOfLine(ctx, i, textLines))) - halfOfVerticalBox),\n lineWidth,\n 1);\n }\n }\n\n if (this.textDecoration.indexOf('underline') > -1) {\n renderLinesAtOffset(this.fontSize * this.lineHeight);\n }\n if (this.textDecoration.indexOf('line-through') > -1) {\n renderLinesAtOffset(this.fontSize * this.lineHeight - this.fontSize / 2);\n }\n if (this.textDecoration.indexOf('overline') > -1) {\n renderLinesAtOffset(this.fontSize * this.lineHeight - this.fontSize);\n }\n },\n\n /**\n * @private\n */\n _getFontDeclaration: function() {\n return [\n // node-canvas needs \"weight style\", while browsers need \"style weight\"\n (fabric.isLikelyNode ? this.fontWeight : this.fontStyle),\n (fabric.isLikelyNode ? this.fontStyle : this.fontWeight),\n this.fontSize + 'px',\n (fabric.isLikelyNode ? ('\"' + this.fontFamily + '\"') : this.fontFamily)\n ].join(' ');\n },\n\n /**\n * Renders text instance on a specified context\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n render: function(ctx, noTransform) {\n // do not render if object is not visible\n if (!this.visible) {\n return;\n }\n\n ctx.save();\n if (!noTransform) {\n this.transform(ctx);\n }\n\n var isInPathGroup = this.group && this.group.type === 'path-group';\n\n if (isInPathGroup) {\n ctx.translate(-this.group.width/2, -this.group.height/2);\n }\n if (this.transformMatrix) {\n ctx.transform.apply(ctx, this.transformMatrix);\n }\n if (isInPathGroup) {\n ctx.translate(this.left, this.top);\n }\n this._render(ctx);\n ctx.restore();\n },\n\n /**\n * Returns object representation of an instance\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n var object = extend(this.callSuper('toObject', propertiesToInclude), {\n text: this.text,\n fontSize: this.fontSize,\n fontWeight: this.fontWeight,\n fontFamily: this.fontFamily,\n fontStyle: this.fontStyle,\n lineHeight: this.lineHeight,\n textDecoration: this.textDecoration,\n textAlign: this.textAlign,\n path: this.path,\n textBackgroundColor: this.textBackgroundColor,\n useNative: this.useNative\n });\n if (!this.includeDefaultValues) {\n this._removeDefaultValues(object);\n }\n return object;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an instance\n * @param {Function} [reviver] Method for further parsing of svg representation.\n * @return {String} svg representation of an instance\n */\n toSVG: function(reviver) {\n var markup = [ ],\n textLines = this.text.split(this._reNewline),\n offsets = this._getSVGLeftTopOffsets(textLines),\n textAndBg = this._getSVGTextAndBg(offsets.lineTop, offsets.textLeft, textLines),\n shadowSpans = this._getSVGShadows(offsets.lineTop, textLines);\n\n // move top offset by an ascent\n offsets.textTop += (this._fontAscent ? ((this._fontAscent / 5) * this.lineHeight) : 0);\n\n this._wrapSVGTextAndBg(markup, textAndBg, shadowSpans, offsets);\n\n return reviver ? reviver(markup.join('')) : markup.join('');\n },\n\n /**\n * @private\n */\n _getSVGLeftTopOffsets: function(textLines) {\n var lineTop = this.useNative\n ? this.fontSize * this.lineHeight\n : (-this._fontAscent - ((this._fontAscent / 5) * this.lineHeight)),\n\n textLeft = -(this.width/2),\n textTop = this.useNative\n ? this.fontSize - 1\n : (this.height/2) - (textLines.length * this.fontSize) - this._totalLineHeight;\n\n return {\n textLeft: textLeft + (this.group && this.group.type === 'path-group' ? this.left : 0),\n textTop: textTop + (this.group && this.group.type === 'path-group' ? this.top : 0),\n lineTop: lineTop\n };\n },\n\n /**\n * @private\n */\n _wrapSVGTextAndBg: function(markup, textAndBg, shadowSpans, offsets) {\n markup.push(\n '\\n',\n textAndBg.textBgRects.join(''),\n '',\n shadowSpans.join(''),\n textAndBg.textSpans.join(''),\n '\\n',\n '\\n'\n );\n },\n\n /**\n * @private\n * @param {Number} lineHeight\n * @param {Array} textLines Array of all text lines\n * @return {Array}\n */\n _getSVGShadows: function(lineHeight, textLines) {\n var shadowSpans = [],\n i, len,\n lineTopOffsetMultiplier = 1;\n\n if (!this.shadow || !this._boundaries) {\n return shadowSpans;\n }\n\n for (i = 0, len = textLines.length; i < len; i++) {\n if (textLines[i] !== '') {\n var lineLeftOffset = (this._boundaries && this._boundaries[i]) ? this._boundaries[i].left : 0;\n shadowSpans.push(\n '',\n fabric.util.string.escapeXml(textLines[i]),\n '');\n lineTopOffsetMultiplier = 1;\n }\n else {\n // in some environments (e.g. IE 7 & 8) empty tspans are completely ignored, using a lineTopOffsetMultiplier\n // prevents empty tspans\n lineTopOffsetMultiplier++;\n }\n }\n\n return shadowSpans;\n },\n\n /**\n * @private\n * @param {Number} lineHeight\n * @param {Number} textLeftOffset Text left offset\n * @param {Array} textLines Array of all text lines\n * @return {Object}\n */\n _getSVGTextAndBg: function(lineHeight, textLeftOffset, textLines) {\n var textSpans = [ ],\n textBgRects = [ ],\n lineTopOffsetMultiplier = 1;\n\n // bounding-box background\n this._setSVGBg(textBgRects);\n\n // text and text-background\n for (var i = 0, len = textLines.length; i < len; i++) {\n if (textLines[i] !== '') {\n this._setSVGTextLineText(textLines[i], i, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects);\n lineTopOffsetMultiplier = 1;\n }\n else {\n // in some environments (e.g. IE 7 & 8) empty tspans are completely ignored, using a lineTopOffsetMultiplier\n // prevents empty tspans\n lineTopOffsetMultiplier++;\n }\n\n if (!this.textBackgroundColor || !this._boundaries) {\n continue;\n }\n\n this._setSVGTextLineBg(textBgRects, i, textLeftOffset, lineHeight);\n }\n\n return {\n textSpans: textSpans,\n textBgRects: textBgRects\n };\n },\n\n _setSVGTextLineText: function(textLine, i, textSpans, lineHeight, lineTopOffsetMultiplier) {\n var lineLeftOffset = (this._boundaries && this._boundaries[i])\n ? toFixed(this._boundaries[i].left, 2)\n : 0;\n\n textSpans.push(\n ' elements since setting opacity\n // on containing one doesn't work in Illustrator\n this._getFillAttributes(this.fill), '>',\n fabric.util.string.escapeXml(textLine),\n ''\n );\n },\n\n _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, lineHeight) {\n textBgRects.push(\n '\\n');\n },\n\n _setSVGBg: function(textBgRects) {\n if (this.backgroundColor && this._boundaries) {\n textBgRects.push(\n '');\n }\n },\n\n /**\n * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values\n * we work around it by \"moving\" alpha channel into opacity attribute and setting fill's alpha to 1\n *\n * @private\n * @param {Any} value\n * @return {String}\n */\n _getFillAttributes: function(value) {\n var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : '';\n if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) {\n return 'fill=\"' + value + '\"';\n }\n return 'opacity=\"' + fillColor.getAlpha() + '\" fill=\"' + fillColor.setAlpha(1).toRgb() + '\"';\n },\n /* _TO_SVG_END_ */\n\n /**\n * Sets specified property to a specified value\n * @param {String} key\n * @param {Any} value\n * @return {fabric.Text} thisArg\n * @chainable\n */\n _set: function(key, value) {\n if (key === 'fontFamily' && this.path) {\n this.path = this.path.replace(/(.*?)([^\\/]*)(\\.font\\.js)/, '$1' + value + '$3');\n }\n this.callSuper('_set', key, value);\n\n if (key in this._dimensionAffectingProps) {\n this._initDimensions();\n this.setCoords();\n }\n },\n\n /**\n * Returns complexity of an instance\n * @return {Number} complexity\n */\n complexity: function() {\n return 1;\n }\n });\n\n /* _FROM_SVG_START_ */\n /**\n * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement})\n * @static\n * @memberOf fabric.Text\n * @see: http://www.w3.org/TR/SVG/text.html#TextElement\n */\n fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(\n 'x y dx dy font-family font-style font-weight font-size text-decoration text-anchor'.split(' '));\n\n /**\n * Default SVG font size\n * @static\n * @memberOf fabric.Text\n */\n fabric.Text.DEFAULT_SVG_FONT_SIZE = 16;\n\n /**\n * Returns fabric.Text instance from an SVG element (not yet implemented)\n * @static\n * @memberOf fabric.Text\n * @param {SVGElement} element Element to parse\n * @param {Object} [options] Options object\n * @return {fabric.Text} Instance of fabric.Text\n */\n fabric.Text.fromElement = function(element, options) {\n if (!element) {\n return null;\n }\n\n var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES);\n options = fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes);\n\n if ('dx' in parsedAttributes) {\n options.left += parsedAttributes.dx;\n }\n if ('dy' in parsedAttributes) {\n options.top += parsedAttributes.dy;\n }\n if (!('fontSize' in options)) {\n options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;\n }\n\n if (!options.originX) {\n options.originX = 'left';\n }\n\n var text = new fabric.Text(element.textContent, options),\n /*\n Adjust positioning:\n x/y attributes in SVG correspond to the bottom-left corner of text bounding box\n top/left properties in Fabric correspond to center point of text bounding box\n */\n offX = 0;\n\n if (text.originX === 'left') {\n offX = text.getWidth() / 2;\n }\n if (text.originX === 'right') {\n offX = -text.getWidth() / 2;\n }\n text.set({\n left: text.getLeft() + offX,\n top: text.getTop() - text.getHeight() / 2\n });\n\n return text;\n };\n /* _FROM_SVG_END_ */\n\n /**\n * Returns fabric.Text instance from an object representation\n * @static\n * @memberOf fabric.Text\n * @param {Object} object Object to create an instance from\n * @return {fabric.Text} Instance of fabric.Text\n */\n fabric.Text.fromObject = function(object) {\n return new fabric.Text(object.text, clone(object));\n };\n\n fabric.util.createAccessors(fabric.Text);\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n\n var clone = fabric.util.object.clone;\n\n /**\n * IText class (introduced in v1.4) Events are also fired with \"text:\"\n * prefix when observing canvas.\n * @class fabric.IText\n * @extends fabric.Text\n * @mixes fabric.Observable\n *\n * @fires changed\n * @fires selection:changed\n * @fires editing:entered\n * @fires editing:exited\n *\n * @return {fabric.IText} thisArg\n * @see {@link fabric.IText#initialize} for constructor definition\n *\n *

        Supported key combinations:

        \n * 
        \n     *   Move cursor:                    left, right, up, down\n     *   Select character:               shift + left, shift + right\n     *   Select text vertically:         shift + up, shift + down\n     *   Move cursor by word:            alt + left, alt + right\n     *   Select words:                   shift + alt + left, shift + alt + right\n     *   Move cursor to line start/end:  cmd + left, cmd + right\n     *   Select till start/end of line:  cmd + shift + left, cmd + shift + right\n     *   Jump to start/end of text:      cmd + up, cmd + down\n     *   Select till start/end of text:  cmd + shift + up, cmd + shift + down\n     *   Delete character:               backspace\n     *   Delete word:                    alt + backspace\n     *   Delete line:                    cmd + backspace\n     *   Forward delete:                 delete\n     *   Copy text:                      ctrl/cmd + c\n     *   Paste text:                     ctrl/cmd + v\n     *   Cut text:                       ctrl/cmd + x\n     *   Select entire text:             ctrl/cmd + a\n     *
        \n *\n *

        Supported mouse/touch combination

        \n * 
        \n     *   Position cursor:                click/touch\n     *   Create selection:               click/touch & drag\n     *   Create selection:               click & shift + click\n     *   Select word:                    double click\n     *   Select line:                    triple click\n     *
        \n */\n fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ {\n\n /**\n * Type of an object\n * @type String\n * @default\n */\n type: 'i-text',\n\n /**\n * Index where text selection starts (or where cursor is when there is no selection)\n * @type Nubmer\n * @default\n */\n selectionStart: 0,\n\n /**\n * Index where text selection ends\n * @type Nubmer\n * @default\n */\n selectionEnd: 0,\n\n /**\n * Color of text selection\n * @type String\n * @default\n */\n selectionColor: 'rgba(17,119,255,0.3)',\n\n /**\n * Indicates whether text is in editing mode\n * @type Boolean\n * @default\n */\n isEditing: false,\n\n /**\n * Indicates whether a text can be edited\n * @type Boolean\n * @default\n */\n editable: true,\n\n /**\n * Border color of text object while it's in editing mode\n * @type String\n * @default\n */\n editingBorderColor: 'rgba(102,153,255,0.25)',\n\n /**\n * Width of cursor (in px)\n * @type Number\n * @default\n */\n cursorWidth: 2,\n\n /**\n * Color of default cursor (when not overwritten by character style)\n * @type String\n * @default\n */\n cursorColor: '#333',\n\n /**\n * Delay between cursor blink (in ms)\n * @type Number\n * @default\n */\n cursorDelay: 1000,\n\n /**\n * Duration of cursor fadein (in ms)\n * @type Number\n * @default\n */\n cursorDuration: 600,\n\n /**\n * Object containing character styles\n * (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line)\n * @type Object\n * @default\n */\n styles: null,\n\n /**\n * Indicates whether internal text char widths can be cached\n * @type Boolean\n * @default\n */\n caching: true,\n\n /**\n * @private\n * @type Boolean\n * @default\n */\n _skipFillStrokeCheck: true,\n\n /**\n * @private\n */\n _reSpace: /\\s|\\n/,\n\n /**\n * @private\n */\n _fontSizeFraction: 4,\n\n /**\n * @private\n */\n _currentCursorOpacity: 0,\n\n /**\n * @private\n */\n _selectionDirection: null,\n\n /**\n * @private\n */\n _abortCursorAnimation: false,\n\n /**\n * @private\n */\n _charWidthsCache: { },\n\n /**\n * Constructor\n * @param {String} text Text string\n * @param {Object} [options] Options object\n * @return {fabric.IText} thisArg\n */\n initialize: function(text, options) {\n this.styles = options ? (options.styles || { }) : { };\n this.callSuper('initialize', text, options);\n this.initBehavior();\n\n fabric.IText.instances.push(this);\n\n // caching\n this.__lineWidths = { };\n this.__lineHeights = { };\n this.__lineOffsets = { };\n },\n\n /**\n * Returns true if object has no styling\n */\n isEmptyStyles: function() {\n if (!this.styles) {\n return true;\n }\n var obj = this.styles;\n\n for (var p1 in obj) {\n for (var p2 in obj[p1]) {\n /*jshint unused:false */\n for (var p3 in obj[p1][p2]) {\n return false;\n }\n }\n }\n return true;\n },\n\n /**\n * Sets selection start (left boundary of a selection)\n * @param {Number} index Index to set selection start to\n */\n setSelectionStart: function(index) {\n if (this.selectionStart !== index) {\n this.fire('selection:changed');\n this.canvas && this.canvas.fire('text:selection:changed', { target: this });\n }\n this.selectionStart = index;\n this.hiddenTextarea && (this.hiddenTextarea.selectionStart = index);\n },\n\n /**\n * Sets selection end (right boundary of a selection)\n * @param {Number} index Index to set selection end to\n */\n setSelectionEnd: function(index) {\n if (this.selectionEnd !== index) {\n this.fire('selection:changed');\n this.canvas && this.canvas.fire('text:selection:changed', { target: this });\n }\n this.selectionEnd = index;\n this.hiddenTextarea && (this.hiddenTextarea.selectionEnd = index);\n },\n\n /**\n * Gets style of a current selection/cursor (at the start position)\n * @param {Number} [startIndex] Start index to get styles at\n * @param {Number} [endIndex] End index to get styles at\n * @return {Object} styles Style object at a specified (or current) index\n */\n getSelectionStyles: function(startIndex, endIndex) {\n\n if (arguments.length === 2) {\n var styles = [ ];\n for (var i = startIndex; i < endIndex; i++) {\n styles.push(this.getSelectionStyles(i));\n }\n return styles;\n }\n\n var loc = this.get2DCursorLocation(startIndex);\n if (this.styles[loc.lineIndex]) {\n return this.styles[loc.lineIndex][loc.charIndex] || { };\n }\n\n return { };\n },\n\n /**\n * Sets style of a current selection\n * @param {Object} [styles] Styles object\n * @return {fabric.IText} thisArg\n * @chainable\n */\n setSelectionStyles: function(styles) {\n if (this.selectionStart === this.selectionEnd) {\n this._extendStyles(this.selectionStart, styles);\n }\n else {\n for (var i = this.selectionStart; i < this.selectionEnd; i++) {\n this._extendStyles(i, styles);\n }\n }\n return this;\n },\n\n /**\n * @private\n */\n _extendStyles: function(index, styles) {\n var loc = this.get2DCursorLocation(index);\n\n if (!this.styles[loc.lineIndex]) {\n this.styles[loc.lineIndex] = { };\n }\n if (!this.styles[loc.lineIndex][loc.charIndex]) {\n this.styles[loc.lineIndex][loc.charIndex] = { };\n }\n\n fabric.util.object.extend(this.styles[loc.lineIndex][loc.charIndex], styles);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _render: function(ctx) {\n this.callSuper('_render', ctx);\n this.ctx = ctx;\n this.isEditing && this.renderCursorOrSelection();\n },\n\n /**\n * Renders cursor or selection (depending on what exists)\n */\n renderCursorOrSelection: function() {\n if (!this.active) {\n return;\n }\n\n var chars = this.text.split(''),\n boundaries;\n\n if (this.selectionStart === this.selectionEnd) {\n boundaries = this._getCursorBoundaries(chars, 'cursor');\n this.renderCursor(boundaries);\n }\n else {\n boundaries = this._getCursorBoundaries(chars, 'selection');\n this.renderSelection(chars, boundaries);\n }\n },\n\n /**\n * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)\n * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.\n */\n get2DCursorLocation: function(selectionStart) {\n if (typeof selectionStart === 'undefined') {\n selectionStart = this.selectionStart;\n }\n var textBeforeCursor = this.text.slice(0, selectionStart),\n linesBeforeCursor = textBeforeCursor.split(this._reNewline);\n\n return {\n lineIndex: linesBeforeCursor.length - 1,\n charIndex: linesBeforeCursor[linesBeforeCursor.length - 1].length\n };\n },\n\n /**\n * Returns complete style of char at the current cursor\n * @param {Number} lineIndex Line index\n * @param {Number} charIndex Char index\n * @return {Object} Character style\n */\n getCurrentCharStyle: function(lineIndex, charIndex) {\n var style = this.styles[lineIndex] && this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)];\n\n return {\n fontSize: style && style.fontSize || this.fontSize,\n fill: style && style.fill || this.fill,\n textBackgroundColor: style && style.textBackgroundColor || this.textBackgroundColor,\n textDecoration: style && style.textDecoration || this.textDecoration,\n fontFamily: style && style.fontFamily || this.fontFamily,\n fontWeight: style && style.fontWeight || this.fontWeight,\n fontStyle: style && style.fontStyle || this.fontStyle,\n stroke: style && style.stroke || this.stroke,\n strokeWidth: style && style.strokeWidth || this.strokeWidth\n };\n },\n\n /**\n * Returns fontSize of char at the current cursor\n * @param {Number} lineIndex Line index\n * @param {Number} charIndex Char index\n * @return {Number} Character font size\n */\n getCurrentCharFontSize: function(lineIndex, charIndex) {\n return (\n this.styles[lineIndex] &&\n this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&\n this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].fontSize) || this.fontSize;\n },\n\n /**\n * Returns color (fill) of char at the current cursor\n * @param {Number} lineIndex Line index\n * @param {Number} charIndex Char index\n * @return {String} Character color (fill)\n */\n getCurrentCharColor: function(lineIndex, charIndex) {\n return (\n this.styles[lineIndex] &&\n this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&\n this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].fill) || this.cursorColor;\n },\n\n /**\n * Returns cursor boundaries (left, top, leftOffset, topOffset)\n * @private\n * @param {Array} chars Array of characters\n * @param {String} typeOfBoundaries\n */\n _getCursorBoundaries: function(chars, typeOfBoundaries) {\n\n var cursorLocation = this.get2DCursorLocation(),\n\n textLines = this.text.split(this._reNewline),\n\n // left/top are left/top of entire text box\n // leftOffset/topOffset are offset from that left/top point of a text box\n\n left = Math.round(this._getLeftOffset()),\n top = this._getTopOffset(),\n\n offsets = this._getCursorBoundariesOffsets(\n chars, typeOfBoundaries, cursorLocation, textLines);\n\n return {\n left: left,\n top: top,\n leftOffset: offsets.left + offsets.lineLeft,\n topOffset: offsets.top\n };\n },\n\n /**\n * @private\n */\n _getCursorBoundariesOffsets: function(chars, typeOfBoundaries, cursorLocation, textLines) {\n\n var lineLeftOffset = 0,\n\n lineIndex = 0,\n charIndex = 0,\n\n leftOffset = 0,\n topOffset = typeOfBoundaries === 'cursor'\n // selection starts at the very top of the line,\n // whereas cursor starts at the padding created by line height\n ? (this._getHeightOfLine(this.ctx, 0) -\n this.getCurrentCharFontSize(cursorLocation.lineIndex, cursorLocation.charIndex))\n : 0;\n\n for (var i = 0; i < this.selectionStart; i++) {\n if (chars[i] === '\\n') {\n leftOffset = 0;\n var index = lineIndex + (typeOfBoundaries === 'cursor' ? 1 : 0);\n topOffset += this._getCachedLineHeight(index);\n\n lineIndex++;\n charIndex = 0;\n }\n else {\n leftOffset += this._getWidthOfChar(this.ctx, chars[i], lineIndex, charIndex);\n charIndex++;\n }\n\n lineLeftOffset = this._getCachedLineOffset(lineIndex, textLines);\n }\n\n this._clearCache();\n\n return {\n top: topOffset,\n left: leftOffset,\n lineLeft: lineLeftOffset\n };\n },\n\n /**\n * @private\n */\n _clearCache: function() {\n this.__lineWidths = { };\n this.__lineHeights = { };\n this.__lineOffsets = { };\n },\n\n /**\n * @private\n */\n _getCachedLineHeight: function(index) {\n return this.__lineHeights[index] ||\n (this.__lineHeights[index] = this._getHeightOfLine(this.ctx, index));\n },\n\n /**\n * @private\n */\n _getCachedLineWidth: function(lineIndex, textLines) {\n return this.__lineWidths[lineIndex] ||\n (this.__lineWidths[lineIndex] = this._getWidthOfLine(this.ctx, lineIndex, textLines));\n },\n\n /**\n * @private\n */\n _getCachedLineOffset: function(lineIndex, textLines) {\n var widthOfLine = this._getCachedLineWidth(lineIndex, textLines);\n\n return this.__lineOffsets[lineIndex] ||\n (this.__lineOffsets[lineIndex] = this._getLineLeftOffset(widthOfLine));\n },\n\n /**\n * Renders cursor\n * @param {Object} boundaries\n */\n renderCursor: function(boundaries) {\n var ctx = this.ctx;\n\n ctx.save();\n\n var cursorLocation = this.get2DCursorLocation(),\n lineIndex = cursorLocation.lineIndex,\n charIndex = cursorLocation.charIndex,\n charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),\n leftOffset = (lineIndex === 0 && charIndex === 0)\n ? this._getCachedLineOffset(lineIndex, this.text.split(this._reNewline))\n : boundaries.leftOffset;\n\n ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);\n ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;\n\n ctx.fillRect(\n boundaries.left + leftOffset,\n boundaries.top + boundaries.topOffset,\n this.cursorWidth / this.scaleX,\n charHeight);\n\n ctx.restore();\n },\n\n /**\n * Renders text selection\n * @param {Array} chars Array of characters\n * @param {Object} boundaries Object with left/top/leftOffset/topOffset\n */\n renderSelection: function(chars, boundaries) {\n var ctx = this.ctx;\n\n ctx.save();\n\n ctx.fillStyle = this.selectionColor;\n\n var start = this.get2DCursorLocation(this.selectionStart),\n end = this.get2DCursorLocation(this.selectionEnd),\n startLine = start.lineIndex,\n endLine = end.lineIndex,\n textLines = this.text.split(this._reNewline);\n\n for (var i = startLine; i <= endLine; i++) {\n var lineOffset = this._getCachedLineOffset(i, textLines) || 0,\n lineHeight = this._getCachedLineHeight(i),\n boxWidth = 0;\n\n if (i === startLine) {\n for (var j = 0, len = textLines[i].length; j < len; j++) {\n if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {\n boxWidth += this._getWidthOfChar(ctx, textLines[i][j], i, j);\n }\n if (j < start.charIndex) {\n lineOffset += this._getWidthOfChar(ctx, textLines[i][j], i, j);\n }\n }\n }\n else if (i > startLine && i < endLine) {\n boxWidth += this._getCachedLineWidth(i, textLines) || 5;\n }\n else if (i === endLine) {\n for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {\n boxWidth += this._getWidthOfChar(ctx, textLines[i][j2], i, j2);\n }\n }\n\n ctx.fillRect(\n boundaries.left + lineOffset,\n boundaries.top + boundaries.topOffset,\n boxWidth,\n lineHeight);\n\n boundaries.topOffset += lineHeight;\n }\n ctx.restore();\n },\n\n /**\n * @private\n * @param {String} method\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderChars: function(method, ctx, line, left, top, lineIndex) {\n\n if (this.isEmptyStyles()) {\n return this._renderCharsFast(method, ctx, line, left, top);\n }\n\n this.skipTextAlign = true;\n\n // set proper box offset\n left -= this.textAlign === 'center'\n ? (this.width / 2)\n : (this.textAlign === 'right')\n ? this.width\n : 0;\n\n // set proper line offset\n var textLines = this.text.split(this._reNewline),\n lineWidth = this._getWidthOfLine(ctx, lineIndex, textLines),\n lineHeight = this._getHeightOfLine(ctx, lineIndex, textLines),\n lineLeftOffset = this._getLineLeftOffset(lineWidth),\n chars = line.split(''),\n prevStyle,\n charsToRender = '';\n\n left += lineLeftOffset || 0;\n\n ctx.save();\n\n for (var i = 0, len = chars.length; i <= len; i++) {\n prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i);\n var thisStyle = this.getCurrentCharStyle(lineIndex, i + 1);\n\n if (this._hasStyleChanged(prevStyle, thisStyle) || i === len) {\n this._renderChar(method, ctx, lineIndex, i - 1, charsToRender, left, top, lineHeight);\n charsToRender = '';\n prevStyle = thisStyle;\n }\n charsToRender += chars[i];\n }\n\n ctx.restore();\n },\n\n /**\n * @private\n * @param {String} method\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} line Content of the line\n * @param {Number} left Left coordinate\n * @param {Number} top Top coordinate\n */\n _renderCharsFast: function(method, ctx, line, left, top) {\n this.skipTextAlign = false;\n\n if (method === 'fillText' && this.fill) {\n this.callSuper('_renderChars', method, ctx, line, left, top);\n }\n if (method === 'strokeText' && this.stroke) {\n this.callSuper('_renderChars', method, ctx, line, left, top);\n }\n },\n\n /**\n * @private\n * @param {String} method\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Number} lineIndex\n * @param {Number} i\n * @param {String} _char\n * @param {Number} left Left coordinate\n * @param {Number} top Top coordinate\n * @param {Number} lineHeight Height of the line\n */\n _renderChar: function(method, ctx, lineIndex, i, _char, left, top, lineHeight) {\n var decl, charWidth, charHeight;\n\n if (this.styles && this.styles[lineIndex] && (decl = this.styles[lineIndex][i])) {\n\n var shouldStroke = decl.stroke || this.stroke,\n shouldFill = decl.fill || this.fill;\n\n ctx.save();\n charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl);\n charHeight = this._getHeightOfChar(ctx, _char, lineIndex, i);\n\n if (shouldFill) {\n ctx.fillText(_char, left, top);\n }\n if (shouldStroke) {\n ctx.strokeText(_char, left, top);\n }\n\n this._renderCharDecoration(ctx, decl, left, top, charWidth, lineHeight, charHeight);\n ctx.restore();\n\n ctx.translate(charWidth, 0);\n }\n else {\n if (method === 'strokeText' && this.stroke) {\n ctx[method](_char, left, top);\n }\n if (method === 'fillText' && this.fill) {\n ctx[method](_char, left, top);\n }\n charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i);\n this._renderCharDecoration(ctx, null, left, top, charWidth, lineHeight);\n\n ctx.translate(ctx.measureText(_char).width, 0);\n }\n },\n\n /**\n * @private\n * @param {Object} prevStyle\n * @param {Object} thisStyle\n */\n _hasStyleChanged: function(prevStyle, thisStyle) {\n return (prevStyle.fill !== thisStyle.fill ||\n prevStyle.fontSize !== thisStyle.fontSize ||\n prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||\n prevStyle.textDecoration !== thisStyle.textDecoration ||\n prevStyle.fontFamily !== thisStyle.fontFamily ||\n prevStyle.fontWeight !== thisStyle.fontWeight ||\n prevStyle.fontStyle !== thisStyle.fontStyle ||\n prevStyle.stroke !== thisStyle.stroke ||\n prevStyle.strokeWidth !== thisStyle.strokeWidth\n );\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderCharDecoration: function(ctx, styleDeclaration, left, top, charWidth, lineHeight, charHeight) {\n\n var textDecoration = styleDeclaration\n ? (styleDeclaration.textDecoration || this.textDecoration)\n : this.textDecoration,\n\n fontSize = (styleDeclaration ? styleDeclaration.fontSize : null) || this.fontSize;\n\n if (!textDecoration) {\n return;\n }\n\n if (textDecoration.indexOf('underline') > -1) {\n this._renderCharDecorationAtOffset(\n ctx,\n left,\n top + (this.fontSize / this._fontSizeFraction),\n charWidth,\n 0,\n this.fontSize / 20\n );\n }\n if (textDecoration.indexOf('line-through') > -1) {\n this._renderCharDecorationAtOffset(\n ctx,\n left,\n top + (this.fontSize / this._fontSizeFraction),\n charWidth,\n charHeight / 2,\n fontSize / 20\n );\n }\n if (textDecoration.indexOf('overline') > -1) {\n this._renderCharDecorationAtOffset(\n ctx,\n left,\n top,\n charWidth,\n lineHeight - (this.fontSize / this._fontSizeFraction),\n this.fontSize / 20\n );\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _renderCharDecorationAtOffset: function(ctx, left, top, charWidth, offset, thickness) {\n ctx.fillRect(left, top - offset, charWidth, thickness);\n },\n\n /**\n * @private\n * @param {String} method\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} line\n */\n _renderTextLine: function(method, ctx, line, left, top, lineIndex) {\n // to \"cancel\" this.fontSize subtraction in fabric.Text#_renderTextLine\n top += this.fontSize / 4;\n this.callSuper('_renderTextLine', method, ctx, line, left, top, lineIndex);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines\n */\n _renderTextDecoration: function(ctx, textLines) {\n if (this.isEmptyStyles()) {\n return this.callSuper('_renderTextDecoration', ctx, textLines);\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _renderTextLinesBackground: function(ctx, textLines) {\n if (!this.textBackgroundColor && !this.styles) {\n return;\n }\n\n ctx.save();\n\n if (this.textBackgroundColor) {\n ctx.fillStyle = this.textBackgroundColor;\n }\n\n var lineHeights = 0,\n fractionOfFontSize = this.fontSize / this._fontSizeFraction;\n\n for (var i = 0, len = textLines.length; i < len; i++) {\n\n var heightOfLine = this._getHeightOfLine(ctx, i, textLines);\n if (textLines[i] === '') {\n lineHeights += heightOfLine;\n continue;\n }\n\n var lineWidth = this._getWidthOfLine(ctx, i, textLines),\n lineLeftOffset = this._getLineLeftOffset(lineWidth);\n\n if (this.textBackgroundColor) {\n ctx.fillStyle = this.textBackgroundColor;\n\n ctx.fillRect(\n this._getLeftOffset() + lineLeftOffset,\n this._getTopOffset() + lineHeights + fractionOfFontSize,\n lineWidth,\n heightOfLine\n );\n }\n if (this.styles[i]) {\n for (var j = 0, jlen = textLines[i].length; j < jlen; j++) {\n if (this.styles[i] && this.styles[i][j] && this.styles[i][j].textBackgroundColor) {\n\n var _char = textLines[i][j];\n\n ctx.fillStyle = this.styles[i][j].textBackgroundColor;\n\n ctx.fillRect(\n this._getLeftOffset() + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j, textLines),\n this._getTopOffset() + lineHeights + fractionOfFontSize,\n this._getWidthOfChar(ctx, _char, i, j, textLines) + 1,\n heightOfLine\n );\n }\n }\n }\n lineHeights += heightOfLine;\n }\n ctx.restore();\n },\n\n /**\n * @private\n */\n _getCacheProp: function(_char, styleDeclaration) {\n return _char +\n\n styleDeclaration.fontFamily +\n styleDeclaration.fontSize +\n styleDeclaration.fontWeight +\n styleDeclaration.fontStyle +\n\n styleDeclaration.shadow;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {String} _char\n * @param {Number} lineIndex\n * @param {Number} charIndex\n * @param {Object} [decl]\n */\n _applyCharStylesGetWidth: function(ctx, _char, lineIndex, charIndex, decl) {\n var styleDeclaration = decl ||\n (this.styles[lineIndex] &&\n this.styles[lineIndex][charIndex]);\n\n if (styleDeclaration) {\n // cloning so that original style object is not polluted with following font declarations\n styleDeclaration = clone(styleDeclaration);\n }\n else {\n styleDeclaration = { };\n }\n\n this._applyFontStyles(styleDeclaration);\n\n var cacheProp = this._getCacheProp(_char, styleDeclaration);\n\n // short-circuit if no styles\n if (this.isEmptyStyles() && this._charWidthsCache[cacheProp] && this.caching) {\n return this._charWidthsCache[cacheProp];\n }\n\n if (typeof styleDeclaration.shadow === 'string') {\n styleDeclaration.shadow = new fabric.Shadow(styleDeclaration.shadow);\n }\n\n var fill = styleDeclaration.fill || this.fill;\n ctx.fillStyle = fill.toLive\n ? fill.toLive(ctx)\n : fill;\n\n if (styleDeclaration.stroke) {\n ctx.strokeStyle = (styleDeclaration.stroke && styleDeclaration.stroke.toLive)\n ? styleDeclaration.stroke.toLive(ctx)\n : styleDeclaration.stroke;\n }\n\n ctx.lineWidth = styleDeclaration.strokeWidth || this.strokeWidth;\n ctx.font = this._getFontDeclaration.call(styleDeclaration);\n this._setShadow.call(styleDeclaration, ctx);\n\n if (!this.caching) {\n return ctx.measureText(_char).width;\n }\n\n if (!this._charWidthsCache[cacheProp]) {\n this._charWidthsCache[cacheProp] = ctx.measureText(_char).width;\n }\n\n return this._charWidthsCache[cacheProp];\n },\n\n /**\n * @private\n * @param {Object} styleDeclaration\n */\n _applyFontStyles: function(styleDeclaration) {\n if (!styleDeclaration.fontFamily) {\n styleDeclaration.fontFamily = this.fontFamily;\n }\n if (!styleDeclaration.fontSize) {\n styleDeclaration.fontSize = this.fontSize;\n }\n if (!styleDeclaration.fontWeight) {\n styleDeclaration.fontWeight = this.fontWeight;\n }\n if (!styleDeclaration.fontStyle) {\n styleDeclaration.fontStyle = this.fontStyle;\n }\n },\n\n /**\n * @private\n * @param {Number} lineIndex\n * @param {Number} charIndex\n */\n _getStyleDeclaration: function(lineIndex, charIndex) {\n return (this.styles[lineIndex] && this.styles[lineIndex][charIndex])\n ? clone(this.styles[lineIndex][charIndex])\n : { };\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getWidthOfChar: function(ctx, _char, lineIndex, charIndex) {\n if (this.textAlign === 'justify' && /\\s/.test(_char)) {\n return this._getWidthOfSpace(ctx, lineIndex);\n }\n\n var styleDeclaration = this._getStyleDeclaration(lineIndex, charIndex);\n this._applyFontStyles(styleDeclaration);\n var cacheProp = this._getCacheProp(_char, styleDeclaration);\n\n if (this._charWidthsCache[cacheProp] && this.caching) {\n return this._charWidthsCache[cacheProp];\n }\n else if (ctx) {\n ctx.save();\n var width = this._applyCharStylesGetWidth(ctx, _char, lineIndex, charIndex);\n ctx.restore();\n return width;\n }\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getHeightOfChar: function(ctx, _char, lineIndex, charIndex) {\n if (this.styles[lineIndex] && this.styles[lineIndex][charIndex]) {\n return this.styles[lineIndex][charIndex].fontSize || this.fontSize;\n }\n return this.fontSize;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getWidthOfCharAt: function(ctx, lineIndex, charIndex, lines) {\n lines = lines || this.text.split(this._reNewline);\n var _char = lines[lineIndex].split('')[charIndex];\n return this._getWidthOfChar(ctx, _char, lineIndex, charIndex);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getHeightOfCharAt: function(ctx, lineIndex, charIndex, lines) {\n lines = lines || this.text.split(this._reNewline);\n var _char = lines[lineIndex].split('')[charIndex];\n return this._getHeightOfChar(ctx, _char, lineIndex, charIndex);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getWidthOfCharsAt: function(ctx, lineIndex, charIndex, lines) {\n var width = 0;\n for (var i = 0; i < charIndex; i++) {\n width += this._getWidthOfCharAt(ctx, lineIndex, i, lines);\n }\n return width;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getWidthOfLine: function(ctx, lineIndex, textLines) {\n // if (!this.styles[lineIndex]) {\n // return this.callSuper('_getLineWidth', ctx, textLines[lineIndex]);\n // }\n return this._getWidthOfCharsAt(ctx, lineIndex, textLines[lineIndex].length, textLines);\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Number} lineIndex\n */\n _getWidthOfSpace: function (ctx, lineIndex) {\n var lines = this.text.split(this._reNewline),\n line = lines[lineIndex],\n words = line.split(/\\s+/),\n wordsWidth = this._getWidthOfWords(ctx, line, lineIndex),\n widthDiff = this.width - wordsWidth,\n numSpaces = words.length - 1,\n width = widthDiff / numSpaces;\n\n return width;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Number} line\n * @param {Number} lineIndex\n */\n _getWidthOfWords: function (ctx, line, lineIndex) {\n var width = 0;\n\n for (var charIndex = 0; charIndex < line.length; charIndex++) {\n var _char = line[charIndex];\n\n if (!_char.match(/\\s/)) {\n width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex);\n }\n }\n\n return width;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getTextWidth: function(ctx, textLines) {\n\n if (this.isEmptyStyles()) {\n return this.callSuper('_getTextWidth', ctx, textLines);\n }\n\n var maxWidth = this._getWidthOfLine(ctx, 0, textLines);\n\n for (var i = 1, len = textLines.length; i < len; i++) {\n var currentLineWidth = this._getWidthOfLine(ctx, i, textLines);\n if (currentLineWidth > maxWidth) {\n maxWidth = currentLineWidth;\n }\n }\n return maxWidth;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n */\n _getHeightOfLine: function(ctx, lineIndex, textLines) {\n\n textLines = textLines || this.text.split(this._reNewline);\n\n var maxHeight = this._getHeightOfChar(ctx, textLines[lineIndex][0], lineIndex, 0),\n line = textLines[lineIndex],\n chars = line.split('');\n\n for (var i = 1, len = chars.length; i < len; i++) {\n var currentCharHeight = this._getHeightOfChar(ctx, chars[i], lineIndex, i);\n if (currentCharHeight > maxHeight) {\n maxHeight = currentCharHeight;\n }\n }\n\n return maxHeight * this.lineHeight;\n },\n\n /**\n * @private\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @param {Array} textLines Array of all text lines\n */\n _getTextHeight: function(ctx, textLines) {\n var height = 0;\n for (var i = 0, len = textLines.length; i < len; i++) {\n height += this._getHeightOfLine(ctx, i, textLines);\n }\n return height;\n },\n\n /**\n * @private\n */\n _getTopOffset: function() {\n var topOffset = fabric.Text.prototype._getTopOffset.call(this);\n return topOffset - (this.fontSize / this._fontSizeFraction);\n },\n\n /**\n * This method is overwritten to account for different top offset\n * @private\n */\n _renderTextBoxBackground: function(ctx) {\n if (!this.backgroundColor) {\n return;\n }\n\n ctx.save();\n ctx.fillStyle = this.backgroundColor;\n\n ctx.fillRect(\n this._getLeftOffset(),\n this._getTopOffset() + (this.fontSize / this._fontSizeFraction),\n this.width,\n this.height\n );\n\n ctx.restore();\n },\n\n /**\n * Returns object representation of an instance\n * @method toObject\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} object representation of an instance\n */\n toObject: function(propertiesToInclude) {\n return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {\n styles: clone(this.styles)\n });\n }\n });\n\n /**\n * Returns fabric.IText instance from an object representation\n * @static\n * @memberOf fabric.IText\n * @param {Object} object Object to create an instance from\n * @return {fabric.IText} instance of fabric.IText\n */\n fabric.IText.fromObject = function(object) {\n return new fabric.IText(object.text, clone(object));\n };\n\n /**\n * Contains all fabric.IText objects that have been created\n * @static\n * @memberof fabric.IText\n * @type Array\n */\n fabric.IText.instances = [ ];\n\n})();\n\n\n(function() {\n\n var clone = fabric.util.object.clone;\n\n fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {\n\n /**\n * Initializes all the interactive behavior of IText\n */\n initBehavior: function() {\n this.initAddedHandler();\n this.initCursorSelectionHandlers();\n this.initDoubleClickSimulation();\n },\n\n /**\n * Initializes \"selected\" event handler\n */\n initSelectedHandler: function() {\n this.on('selected', function() {\n\n var _this = this;\n setTimeout(function() {\n _this.selected = true;\n }, 100);\n });\n },\n\n /**\n * Initializes \"added\" event handler\n */\n initAddedHandler: function() {\n this.on('added', function() {\n if (this.canvas && !this.canvas._hasITextHandlers) {\n this.canvas._hasITextHandlers = true;\n this._initCanvasHandlers();\n }\n });\n },\n\n /**\n * @private\n */\n _initCanvasHandlers: function() {\n this.canvas.on('selection:cleared', function() {\n fabric.IText.prototype.exitEditingOnOthers.call();\n });\n\n this.canvas.on('mouse:up', function() {\n fabric.IText.instances.forEach(function(obj) {\n obj.__isMousedown = false;\n });\n });\n\n this.canvas.on('object:selected', function(options) {\n fabric.IText.prototype.exitEditingOnOthers.call(options.target);\n });\n },\n\n /**\n * @private\n */\n _tick: function() {\n if (this._abortCursorAnimation) {\n return;\n }\n\n var _this = this;\n\n this.animate('_currentCursorOpacity', 1, {\n\n duration: this.cursorDuration,\n\n onComplete: function() {\n _this._onTickComplete();\n },\n\n onChange: function() {\n _this.canvas && _this.canvas.renderAll();\n },\n\n abort: function() {\n return _this._abortCursorAnimation;\n }\n });\n },\n\n /**\n * @private\n */\n _onTickComplete: function() {\n if (this._abortCursorAnimation) {\n return;\n }\n\n var _this = this;\n if (this._cursorTimeout1) {\n clearTimeout(this._cursorTimeout1);\n }\n this._cursorTimeout1 = setTimeout(function() {\n _this.animate('_currentCursorOpacity', 0, {\n duration: this.cursorDuration / 2,\n onComplete: function() {\n _this._tick();\n },\n onChange: function() {\n _this.canvas && _this.canvas.renderAll();\n },\n abort: function() {\n return _this._abortCursorAnimation;\n }\n });\n }, 100);\n },\n\n /**\n * Initializes delayed cursor\n */\n initDelayedCursor: function(restart) {\n var _this = this,\n delay = restart ? 0 : this.cursorDelay;\n\n if (restart) {\n this._abortCursorAnimation = true;\n clearTimeout(this._cursorTimeout1);\n this._currentCursorOpacity = 1;\n this.canvas && this.canvas.renderAll();\n }\n if (this._cursorTimeout2) {\n clearTimeout(this._cursorTimeout2);\n }\n this._cursorTimeout2 = setTimeout(function() {\n _this._abortCursorAnimation = false;\n _this._tick();\n }, delay);\n },\n\n /**\n * Aborts cursor animation and clears all timeouts\n */\n abortCursorAnimation: function() {\n this._abortCursorAnimation = true;\n\n clearTimeout(this._cursorTimeout1);\n clearTimeout(this._cursorTimeout2);\n\n this._currentCursorOpacity = 0;\n this.canvas && this.canvas.renderAll();\n\n var _this = this;\n setTimeout(function() {\n _this._abortCursorAnimation = false;\n }, 10);\n },\n\n /**\n * Selects entire text\n */\n selectAll: function() {\n this.selectionStart = 0;\n this.selectionEnd = this.text.length;\n this.fire('selection:changed');\n this.canvas && this.canvas.fire('text:selection:changed', { target: this });\n },\n\n /**\n * Returns selected text\n * @return {String}\n */\n getSelectedText: function() {\n return this.text.slice(this.selectionStart, this.selectionEnd);\n },\n\n /**\n * Find new selection index representing start of current word according to current selection index\n * @param {Number} startFrom Surrent selection index\n * @return {Number} New selection index\n */\n findWordBoundaryLeft: function(startFrom) {\n var offset = 0, index = startFrom - 1;\n\n // remove space before cursor first\n if (this._reSpace.test(this.text.charAt(index))) {\n while (this._reSpace.test(this.text.charAt(index))) {\n offset++;\n index--;\n }\n }\n while (/\\S/.test(this.text.charAt(index)) && index > -1) {\n offset++;\n index--;\n }\n\n return startFrom - offset;\n },\n\n /**\n * Find new selection index representing end of current word according to current selection index\n * @param {Number} startFrom Current selection index\n * @return {Number} New selection index\n */\n findWordBoundaryRight: function(startFrom) {\n var offset = 0, index = startFrom;\n\n // remove space after cursor first\n if (this._reSpace.test(this.text.charAt(index))) {\n while (this._reSpace.test(this.text.charAt(index))) {\n offset++;\n index++;\n }\n }\n while (/\\S/.test(this.text.charAt(index)) && index < this.text.length) {\n offset++;\n index++;\n }\n\n return startFrom + offset;\n },\n\n /**\n * Find new selection index representing start of current line according to current selection index\n * @param {Number} startFrom Current selection index\n * @return {Number} New selection index\n */\n findLineBoundaryLeft: function(startFrom) {\n var offset = 0, index = startFrom - 1;\n\n while (!/\\n/.test(this.text.charAt(index)) && index > -1) {\n offset++;\n index--;\n }\n\n return startFrom - offset;\n },\n\n /**\n * Find new selection index representing end of current line according to current selection index\n * @param {Number} startFrom Current selection index\n * @return {Number} New selection index\n */\n findLineBoundaryRight: function(startFrom) {\n var offset = 0, index = startFrom;\n\n while (!/\\n/.test(this.text.charAt(index)) && index < this.text.length) {\n offset++;\n index++;\n }\n\n return startFrom + offset;\n },\n\n /**\n * Returns number of newlines in selected text\n * @return {Number} Number of newlines in selected text\n */\n getNumNewLinesInSelectedText: function() {\n var selectedText = this.getSelectedText(),\n numNewLines = 0;\n\n for (var i = 0, chars = selectedText.split(''), len = chars.length; i < len; i++) {\n if (chars[i] === '\\n') {\n numNewLines++;\n }\n }\n return numNewLines;\n },\n\n /**\n * Finds index corresponding to beginning or end of a word\n * @param {Number} selectionStart Index of a character\n * @param {Number} direction: 1 or -1\n * @return {Number} Index of the beginning or end of a word\n */\n searchWordBoundary: function(selectionStart, direction) {\n var index = this._reSpace.test(this.text.charAt(selectionStart)) ? selectionStart - 1 : selectionStart,\n _char = this.text.charAt(index),\n reNonWord = /[ \\n\\.,;!\\?\\-]/;\n\n while (!reNonWord.test(_char) && index > 0 && index < this.text.length) {\n index += direction;\n _char = this.text.charAt(index);\n }\n if (reNonWord.test(_char) && _char !== '\\n') {\n index += direction === 1 ? 0 : 1;\n }\n return index;\n },\n\n /**\n * Selects a word based on the index\n * @param {Number} selectionStart Index of a character\n */\n selectWord: function(selectionStart) {\n var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */\n newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */\n\n this.setSelectionStart(newSelectionStart);\n this.setSelectionEnd(newSelectionEnd);\n this.initDelayedCursor(true);\n },\n\n /**\n * Selects a line based on the index\n * @param {Number} selectionStart Index of a character\n */\n selectLine: function(selectionStart) {\n var newSelectionStart = this.findLineBoundaryLeft(selectionStart),\n newSelectionEnd = this.findLineBoundaryRight(selectionStart);\n\n this.setSelectionStart(newSelectionStart);\n this.setSelectionEnd(newSelectionEnd);\n this.initDelayedCursor(true);\n },\n\n /**\n * Enters editing state\n * @return {fabric.IText} thisArg\n * @chainable\n */\n enterEditing: function() {\n if (this.isEditing || !this.editable) {\n return;\n }\n\n this.exitEditingOnOthers();\n\n this.isEditing = true;\n\n this.initHiddenTextarea();\n this._updateTextarea();\n this._saveEditingProps();\n this._setEditingProps();\n\n this._tick();\n this.canvas && this.canvas.renderAll();\n\n this.fire('editing:entered');\n this.canvas && this.canvas.fire('text:editing:entered', { target: this });\n\n return this;\n },\n\n exitEditingOnOthers: function() {\n fabric.IText.instances.forEach(function(obj) {\n obj.selected = false;\n if (obj.isEditing) {\n obj.exitEditing();\n }\n }, this);\n },\n\n /**\n * @private\n */\n _setEditingProps: function() {\n this.hoverCursor = 'text';\n\n if (this.canvas) {\n this.canvas.defaultCursor = this.canvas.moveCursor = 'text';\n }\n\n this.borderColor = this.editingBorderColor;\n\n this.hasControls = this.selectable = false;\n this.lockMovementX = this.lockMovementY = true;\n },\n\n /**\n * @private\n */\n _updateTextarea: function() {\n if (!this.hiddenTextarea) {\n return;\n }\n\n this.hiddenTextarea.value = this.text;\n this.hiddenTextarea.selectionStart = this.selectionStart;\n },\n\n /**\n * @private\n */\n _saveEditingProps: function() {\n this._savedProps = {\n hasControls: this.hasControls,\n borderColor: this.borderColor,\n lockMovementX: this.lockMovementX,\n lockMovementY: this.lockMovementY,\n hoverCursor: this.hoverCursor,\n defaultCursor: this.canvas && this.canvas.defaultCursor,\n moveCursor: this.canvas && this.canvas.moveCursor\n };\n },\n\n /**\n * @private\n */\n _restoreEditingProps: function() {\n if (!this._savedProps) {\n return;\n }\n\n this.hoverCursor = this._savedProps.overCursor;\n this.hasControls = this._savedProps.hasControls;\n this.borderColor = this._savedProps.borderColor;\n this.lockMovementX = this._savedProps.lockMovementX;\n this.lockMovementY = this._savedProps.lockMovementY;\n\n if (this.canvas) {\n this.canvas.defaultCursor = this._savedProps.defaultCursor;\n this.canvas.moveCursor = this._savedProps.moveCursor;\n }\n },\n\n /**\n * Exits from editing state\n * @return {fabric.IText} thisArg\n * @chainable\n */\n exitEditing: function() {\n\n this.selected = false;\n this.isEditing = false;\n this.selectable = true;\n\n this.selectionEnd = this.selectionStart;\n this.hiddenTextarea && this.canvas && this.hiddenTextarea.parentNode.removeChild(this.hiddenTextarea);\n this.hiddenTextarea = null;\n\n this.abortCursorAnimation();\n this._restoreEditingProps();\n this._currentCursorOpacity = 0;\n\n this.fire('editing:exited');\n this.canvas && this.canvas.fire('text:editing:exited', { target: this });\n\n return this;\n },\n\n /**\n * @private\n */\n _removeExtraneousStyles: function() {\n var textLines = this.text.split(this._reNewline);\n for (var prop in this.styles) {\n if (!textLines[prop]) {\n delete this.styles[prop];\n }\n }\n },\n\n /**\n * @private\n */\n _removeCharsFromTo: function(start, end) {\n\n var i = end;\n while (i !== start) {\n\n var prevIndex = this.get2DCursorLocation(i).charIndex;\n i--;\n\n var index = this.get2DCursorLocation(i).charIndex,\n isNewline = index > prevIndex;\n\n if (isNewline) {\n this.removeStyleObject(isNewline, i + 1);\n }\n else {\n this.removeStyleObject(this.get2DCursorLocation(i).charIndex === 0, i);\n }\n\n }\n\n this.text = this.text.slice(0, start) +\n this.text.slice(end);\n },\n\n /**\n * Inserts a character where cursor is (replacing selection if one exists)\n * @param {String} _chars Characters to insert\n */\n insertChars: function(_chars) {\n var isEndOfLine = this.text.slice(this.selectionStart, this.selectionStart + 1) === '\\n';\n\n this.text = this.text.slice(0, this.selectionStart) +\n _chars +\n this.text.slice(this.selectionEnd);\n\n if (this.selectionStart === this.selectionEnd) {\n this.insertStyleObjects(_chars, isEndOfLine, this.copiedStyles);\n }\n // else if (this.selectionEnd - this.selectionStart > 1) {\n // TODO: replace styles properly\n // console.log('replacing MORE than 1 char');\n // }\n\n this.selectionStart += _chars.length;\n this.selectionEnd = this.selectionStart;\n\n if (this.canvas) {\n // TODO: double renderAll gets rid of text box shift happenning sometimes\n // need to find out what exactly causes it and fix it\n this.canvas.renderAll().renderAll();\n }\n\n this.setCoords();\n this.fire('changed');\n this.canvas && this.canvas.fire('text:changed', { target: this });\n },\n\n /**\n * Inserts new style object\n * @param {Number} lineIndex Index of a line\n * @param {Number} charIndex Index of a char\n * @param {Boolean} isEndOfLine True if it's end of line\n */\n insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {\n\n this.shiftLineStyles(lineIndex, +1);\n\n if (!this.styles[lineIndex + 1]) {\n this.styles[lineIndex + 1] = { };\n }\n\n var currentCharStyle = this.styles[lineIndex][charIndex - 1],\n newLineStyles = { };\n\n // if there's nothing after cursor,\n // we clone current char style onto the next (otherwise empty) line\n if (isEndOfLine) {\n newLineStyles[0] = clone(currentCharStyle);\n this.styles[lineIndex + 1] = newLineStyles;\n }\n // otherwise we clone styles of all chars\n // after cursor onto the next line, from the beginning\n else {\n for (var index in this.styles[lineIndex]) {\n if (parseInt(index, 10) >= charIndex) {\n newLineStyles[parseInt(index, 10) - charIndex] = this.styles[lineIndex][index];\n // remove lines from the previous line since they're on a new line now\n delete this.styles[lineIndex][index];\n }\n }\n this.styles[lineIndex + 1] = newLineStyles;\n }\n },\n\n /**\n * Inserts style object for a given line/char index\n * @param {Number} lineIndex Index of a line\n * @param {Number} charIndex Index of a char\n * @param {Object} [style] Style object to insert, if given\n */\n insertCharStyleObject: function(lineIndex, charIndex, style) {\n\n var currentLineStyles = this.styles[lineIndex],\n currentLineStylesCloned = clone(currentLineStyles);\n\n if (charIndex === 0 && !style) {\n charIndex = 1;\n }\n\n // shift all char styles by 1 forward\n // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4\n for (var index in currentLineStylesCloned) {\n var numericIndex = parseInt(index, 10);\n if (numericIndex >= charIndex) {\n currentLineStyles[numericIndex + 1] = currentLineStylesCloned[numericIndex];\n //delete currentLineStyles[index];\n }\n }\n\n this.styles[lineIndex][charIndex] =\n style || clone(currentLineStyles[charIndex - 1]);\n },\n\n /**\n * Inserts style object(s)\n * @param {String} _chars Characters at the location where style is inserted\n * @param {Boolean} isEndOfLine True if it's end of line\n * @param {Array} [styles] Styles to insert\n */\n insertStyleObjects: function(_chars, isEndOfLine, styles) {\n\n // short-circuit\n if (this.isEmptyStyles()) {\n return;\n }\n\n var cursorLocation = this.get2DCursorLocation(),\n lineIndex = cursorLocation.lineIndex,\n charIndex = cursorLocation.charIndex;\n\n if (!this.styles[lineIndex]) {\n this.styles[lineIndex] = { };\n }\n\n if (_chars === '\\n') {\n this.insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine);\n }\n else {\n if (styles) {\n this._insertStyles(styles);\n }\n else {\n // TODO: support multiple style insertion if _chars.length > 1\n this.insertCharStyleObject(lineIndex, charIndex);\n }\n }\n },\n\n /**\n * @private\n */\n _insertStyles: function(styles) {\n for (var i = 0, len = styles.length; i < len; i++) {\n\n var cursorLocation = this.get2DCursorLocation(this.selectionStart + i),\n lineIndex = cursorLocation.lineIndex,\n charIndex = cursorLocation.charIndex;\n\n this.insertCharStyleObject(lineIndex, charIndex, styles[i]);\n }\n },\n\n /**\n * Shifts line styles up or down\n * @param {Number} lineIndex Index of a line\n * @param {Number} offset Can be -1 or +1\n */\n shiftLineStyles: function(lineIndex, offset) {\n // shift all line styles by 1 upward\n var clonedStyles = clone(this.styles);\n for (var line in this.styles) {\n var numericLine = parseInt(line, 10);\n if (numericLine > lineIndex) {\n this.styles[numericLine + offset] = clonedStyles[numericLine];\n }\n }\n },\n\n /**\n * Removes style object\n * @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line\n * @param {Number} [index] Optional index. When not given, current selectionStart is used.\n */\n removeStyleObject: function(isBeginningOfLine, index) {\n\n var cursorLocation = this.get2DCursorLocation(index),\n lineIndex = cursorLocation.lineIndex,\n charIndex = cursorLocation.charIndex;\n\n if (isBeginningOfLine) {\n\n var textLines = this.text.split(this._reNewline),\n textOnPreviousLine = textLines[lineIndex - 1],\n newCharIndexOnPrevLine = textOnPreviousLine\n ? textOnPreviousLine.length\n : 0;\n\n if (!this.styles[lineIndex - 1]) {\n this.styles[lineIndex - 1] = { };\n }\n\n for (charIndex in this.styles[lineIndex]) {\n this.styles[lineIndex - 1][parseInt(charIndex, 10) + newCharIndexOnPrevLine]\n = this.styles[lineIndex][charIndex];\n }\n\n this.shiftLineStyles(lineIndex, -1);\n }\n else {\n var currentLineStyles = this.styles[lineIndex];\n\n if (currentLineStyles) {\n var offset = this.selectionStart === this.selectionEnd ? -1 : 0;\n delete currentLineStyles[charIndex + offset];\n // console.log('deleting', lineIndex, charIndex + offset);\n }\n\n var currentLineStylesCloned = clone(currentLineStyles);\n\n // shift all styles by 1 backwards\n for (var i in currentLineStylesCloned) {\n var numericIndex = parseInt(i, 10);\n if (numericIndex >= charIndex && numericIndex !== 0) {\n currentLineStyles[numericIndex - 1] = currentLineStylesCloned[numericIndex];\n delete currentLineStyles[numericIndex];\n }\n }\n }\n },\n\n /**\n * Inserts new line\n */\n insertNewline: function() {\n this.insertChars('\\n');\n }\n });\n})();\n\n\nfabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {\n /**\n * Initializes \"dbclick\" event handler\n */\n initDoubleClickSimulation: function() {\n\n // for double click\n this.__lastClickTime = +new Date();\n\n // for triple click\n this.__lastLastClickTime = +new Date();\n\n this.__lastPointer = { };\n\n this.on('mousedown', this.onMouseDown.bind(this));\n },\n\n onMouseDown: function(options) {\n\n this.__newClickTime = +new Date();\n var newPointer = this.canvas.getPointer(options.e);\n\n if (this.isTripleClick(newPointer)) {\n this.fire('tripleclick', options);\n this._stopEvent(options.e);\n }\n else if (this.isDoubleClick(newPointer)) {\n this.fire('dblclick', options);\n this._stopEvent(options.e);\n }\n\n this.__lastLastClickTime = this.__lastClickTime;\n this.__lastClickTime = this.__newClickTime;\n this.__lastPointer = newPointer;\n this.__lastIsEditing = this.isEditing;\n this.__lastSelected = this.selected;\n },\n\n isDoubleClick: function(newPointer) {\n return this.__newClickTime - this.__lastClickTime < 500 &&\n this.__lastPointer.x === newPointer.x &&\n this.__lastPointer.y === newPointer.y && this.__lastIsEditing;\n },\n\n isTripleClick: function(newPointer) {\n return this.__newClickTime - this.__lastClickTime < 500 &&\n this.__lastClickTime - this.__lastLastClickTime < 500 &&\n this.__lastPointer.x === newPointer.x &&\n this.__lastPointer.y === newPointer.y;\n },\n\n /**\n * @private\n */\n _stopEvent: function(e) {\n e.preventDefault && e.preventDefault();\n e.stopPropagation && e.stopPropagation();\n },\n\n /**\n * Initializes event handlers related to cursor or selection\n */\n initCursorSelectionHandlers: function() {\n this.initSelectedHandler();\n this.initMousedownHandler();\n this.initMousemoveHandler();\n this.initMouseupHandler();\n this.initClicks();\n },\n\n /**\n * Initializes double and triple click event handlers\n */\n initClicks: function() {\n this.on('dblclick', function(options) {\n this.selectWord(this.getSelectionStartFromPointer(options.e));\n });\n this.on('tripleclick', function(options) {\n this.selectLine(this.getSelectionStartFromPointer(options.e));\n });\n },\n\n /**\n * Initializes \"mousedown\" event handler\n */\n initMousedownHandler: function() {\n this.on('mousedown', function(options) {\n\n var pointer = this.canvas.getPointer(options.e);\n\n this.__mousedownX = pointer.x;\n this.__mousedownY = pointer.y;\n this.__isMousedown = true;\n\n if (this.hiddenTextarea && this.canvas) {\n this.canvas.wrapperEl.appendChild(this.hiddenTextarea);\n }\n\n if (this.selected) {\n this.setCursorByClick(options.e);\n }\n\n if (this.isEditing) {\n this.__selectionStartOnMouseDown = this.selectionStart;\n this.initDelayedCursor(true);\n }\n });\n },\n\n /**\n * Initializes \"mousemove\" event handler\n */\n initMousemoveHandler: function() {\n this.on('mousemove', function(options) {\n if (!this.__isMousedown || !this.isEditing) {\n return;\n }\n\n var newSelectionStart = this.getSelectionStartFromPointer(options.e);\n\n if (newSelectionStart >= this.__selectionStartOnMouseDown) {\n this.setSelectionStart(this.__selectionStartOnMouseDown);\n this.setSelectionEnd(newSelectionStart);\n }\n else {\n this.setSelectionStart(newSelectionStart);\n this.setSelectionEnd(this.__selectionStartOnMouseDown);\n }\n });\n },\n\n /**\n * @private\n */\n _isObjectMoved: function(e) {\n var pointer = this.canvas.getPointer(e);\n\n return this.__mousedownX !== pointer.x ||\n this.__mousedownY !== pointer.y;\n },\n\n /**\n * Initializes \"mouseup\" event handler\n */\n initMouseupHandler: function() {\n this.on('mouseup', function(options) {\n this.__isMousedown = false;\n if (this._isObjectMoved(options.e)) {\n return;\n }\n\n if (this.__lastSelected) {\n this.enterEditing();\n this.initDelayedCursor(true);\n }\n this.selected = true;\n });\n },\n\n /**\n * Changes cursor location in a text depending on passed pointer (x/y) object\n * @param {Event} e Event object\n */\n setCursorByClick: function(e) {\n var newSelectionStart = this.getSelectionStartFromPointer(e);\n\n if (e.shiftKey) {\n if (newSelectionStart < this.selectionStart) {\n this.setSelectionEnd(this.selectionStart);\n this.setSelectionStart(newSelectionStart);\n }\n else {\n this.setSelectionEnd(newSelectionStart);\n }\n }\n else {\n this.setSelectionStart(newSelectionStart);\n this.setSelectionEnd(newSelectionStart);\n }\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @return {Object} Coordinates of a pointer (x, y)\n */\n _getLocalRotatedPointer: function(e) {\n var pointer = this.canvas.getPointer(e),\n\n pClicked = new fabric.Point(pointer.x, pointer.y),\n pLeftTop = new fabric.Point(this.left, this.top),\n\n rotated = fabric.util.rotatePoint(\n pClicked, pLeftTop, fabric.util.degreesToRadians(-this.angle));\n\n return this.getLocalPointer(e, rotated);\n },\n\n /**\n * Returns index of a character corresponding to where an object was clicked\n * @param {Event} e Event object\n * @return {Number} Index of a character\n */\n getSelectionStartFromPointer: function(e) {\n var mouseOffset = this._getLocalRotatedPointer(e),\n textLines = this.text.split(this._reNewline),\n prevWidth = 0,\n width = 0,\n height = 0,\n charIndex = 0,\n newSelectionStart;\n\n for (var i = 0, len = textLines.length; i < len; i++) {\n\n height += this._getHeightOfLine(this.ctx, i) * this.scaleY;\n\n var widthOfLine = this._getWidthOfLine(this.ctx, i, textLines),\n lineLeftOffset = this._getLineLeftOffset(widthOfLine);\n\n width = lineLeftOffset * this.scaleX;\n\n if (this.flipX) {\n // when oject is horizontally flipped we reverse chars\n textLines[i] = textLines[i].split('').reverse().join('');\n }\n\n for (var j = 0, jlen = textLines[i].length; j < jlen; j++) {\n\n var _char = textLines[i][j];\n prevWidth = width;\n\n width += this._getWidthOfChar(this.ctx, _char, i, this.flipX ? jlen - j : j) *\n this.scaleX;\n\n if (height <= mouseOffset.y || width <= mouseOffset.x) {\n charIndex++;\n continue;\n }\n\n return this._getNewSelectionStartFromOffset(\n mouseOffset, prevWidth, width, charIndex + i, jlen);\n }\n\n if (mouseOffset.y < height) {\n return this._getNewSelectionStartFromOffset(\n mouseOffset, prevWidth, width, charIndex + i, jlen);\n }\n }\n\n // clicked somewhere after all chars, so set at the end\n if (typeof newSelectionStart === 'undefined') {\n return this.text.length;\n }\n },\n\n /**\n * @private\n */\n _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) {\n\n var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth,\n distanceBtwNextCharAndCursor = width - mouseOffset.x,\n offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor ? 0 : 1,\n newSelectionStart = index + offset;\n\n // if object is horizontally flipped, mirror cursor location from the end\n if (this.flipX) {\n newSelectionStart = jlen - newSelectionStart;\n }\n\n if (newSelectionStart > this.text.length) {\n newSelectionStart = this.text.length;\n }\n\n return newSelectionStart;\n }\n});\n\n\nfabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {\n\n /**\n * Initializes hidden textarea (needed to bring up keyboard in iOS)\n */\n initHiddenTextarea: function() {\n this.hiddenTextarea = fabric.document.createElement('textarea');\n\n this.hiddenTextarea.setAttribute('autocapitalize', 'off');\n this.hiddenTextarea.style.cssText = 'position: absolute; top: 0; left: -9999px';\n\n fabric.document.body.appendChild(this.hiddenTextarea);\n\n fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));\n fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this));\n fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));\n fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this));\n\n if (!this._clickHandlerInitialized && this.canvas) {\n fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this));\n this._clickHandlerInitialized = true;\n }\n },\n\n /**\n * @private\n */\n _keysMap: {\n 8: 'removeChars',\n 9: 'exitEditing',\n 27: 'exitEditing',\n 13: 'insertNewline',\n 33: 'moveCursorUp',\n 34: 'moveCursorDown',\n 35: 'moveCursorRight',\n 36: 'moveCursorLeft',\n 37: 'moveCursorLeft',\n 38: 'moveCursorUp',\n 39: 'moveCursorRight',\n 40: 'moveCursorDown',\n 46: 'forwardDelete'\n },\n\n /**\n * @private\n */\n _ctrlKeysMap: {\n 65: 'selectAll',\n 88: 'cut'\n },\n\n onClick: function() {\n // No need to trigger click event here, focus is enough to have the keyboard appear on Android\n this.hiddenTextarea && this.hiddenTextarea.focus();\n },\n\n /**\n * Handles keyup event\n * @param {Event} e Event object\n */\n onKeyDown: function(e) {\n if (!this.isEditing) {\n return;\n }\n\n if (e.keyCode in this._keysMap) {\n this[this._keysMap[e.keyCode]](e);\n }\n else if ((e.keyCode in this._ctrlKeysMap) && (e.ctrlKey || e.metaKey)) {\n this[this._ctrlKeysMap[e.keyCode]](e);\n }\n else {\n return;\n }\n\n e.stopImmediatePropagation();\n e.preventDefault();\n\n this.canvas && this.canvas.renderAll();\n },\n\n /**\n * Forward delete\n */\n forwardDelete: function(e) {\n if (this.selectionStart === this.selectionEnd) {\n this.moveCursorRight(e);\n }\n this.removeChars(e);\n },\n\n /**\n * Copies selected text\n * @param {Event} e Event object\n */\n copy: function(e) {\n var selectedText = this.getSelectedText(),\n clipboardData = this._getClipboardData(e);\n\n // Check for backward compatibility with old browsers\n if (clipboardData) {\n clipboardData.setData('text', selectedText);\n }\n\n this.copiedText = selectedText;\n this.copiedStyles = this.getSelectionStyles(\n this.selectionStart,\n this.selectionEnd);\n },\n\n /**\n * Pastes text\n * @param {Event} e Event object\n */\n paste: function(e) {\n var copiedText = null,\n clipboardData = this._getClipboardData(e);\n\n // Check for backward compatibility with old browsers\n if (clipboardData) {\n copiedText = clipboardData.getData('text');\n }\n else {\n copiedText = this.copiedText;\n }\n\n if (copiedText) {\n this.insertChars(copiedText);\n }\n },\n\n /**\n * Cuts text\n * @param {Event} e Event object\n */\n cut: function(e) {\n if (this.selectionStart === this.selectionEnd) {\n return;\n }\n\n this.copy();\n this.removeChars(e);\n },\n\n /**\n * @private\n * @param {Event} e Event object\n * @return {Object} Clipboard data object\n */\n _getClipboardData: function(e) {\n return e && (e.clipboardData || fabric.window.clipboardData);\n },\n\n /**\n * Handles keypress event\n * @param {Event} e Event object\n */\n onKeyPress: function(e) {\n if (!this.isEditing || e.metaKey || e.ctrlKey) {\n return;\n }\n if (e.which !== 0) {\n this.insertChars(String.fromCharCode(e.which));\n }\n e.stopPropagation();\n },\n\n /**\n * Gets start offset of a selection\n * @param {Event} e Event object\n * @param {Boolean} isRight\n * @return {Number}\n */\n getDownCursorOffset: function(e, isRight) {\n var selectionProp = isRight ? this.selectionEnd : this.selectionStart,\n textLines = this.text.split(this._reNewline),\n _char,\n lineLeftOffset,\n\n textBeforeCursor = this.text.slice(0, selectionProp),\n textAfterCursor = this.text.slice(selectionProp),\n\n textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\\n') + 1),\n textOnSameLineAfterCursor = textAfterCursor.match(/(.*)\\n?/)[1],\n textOnNextLine = (textAfterCursor.match(/.*\\n(.*)\\n?/) || { })[1] || '',\n\n cursorLocation = this.get2DCursorLocation(selectionProp);\n\n // if on last line, down cursor goes to end of line\n if (cursorLocation.lineIndex === textLines.length - 1 || e.metaKey || e.keyCode === 34) {\n\n // move to the end of a text\n return this.text.length - selectionProp;\n }\n\n var widthOfSameLineBeforeCursor = this._getWidthOfLine(this.ctx, cursorLocation.lineIndex, textLines);\n lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor);\n\n var widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,\n lineIndex = cursorLocation.lineIndex;\n\n for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {\n _char = textOnSameLineBeforeCursor[i];\n widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);\n }\n\n var indexOnNextLine = this._getIndexOnNextLine(\n cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor, textLines);\n\n return textOnSameLineAfterCursor.length + 1 + indexOnNextLine;\n },\n\n /**\n * @private\n */\n _getIndexOnNextLine: function(cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor, textLines) {\n var lineIndex = cursorLocation.lineIndex + 1,\n widthOfNextLine = this._getWidthOfLine(this.ctx, lineIndex, textLines),\n lineLeftOffset = this._getLineLeftOffset(widthOfNextLine),\n widthOfCharsOnNextLine = lineLeftOffset,\n indexOnNextLine = 0,\n foundMatch;\n\n for (var j = 0, jlen = textOnNextLine.length; j < jlen; j++) {\n\n var _char = textOnNextLine[j],\n widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);\n\n widthOfCharsOnNextLine += widthOfChar;\n\n if (widthOfCharsOnNextLine > widthOfCharsOnSameLineBeforeCursor) {\n\n foundMatch = true;\n\n var leftEdge = widthOfCharsOnNextLine - widthOfChar,\n rightEdge = widthOfCharsOnNextLine,\n offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),\n offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);\n\n indexOnNextLine = offsetFromRightEdge < offsetFromLeftEdge ? j + 1 : j;\n\n break;\n }\n }\n\n // reached end\n if (!foundMatch) {\n indexOnNextLine = textOnNextLine.length;\n }\n\n return indexOnNextLine;\n },\n\n /**\n * Moves cursor down\n * @param {Event} e Event object\n */\n moveCursorDown: function(e) {\n this.abortCursorAnimation();\n this._currentCursorOpacity = 1;\n\n var offset = this.getDownCursorOffset(e, this._selectionDirection === 'right');\n\n if (e.shiftKey) {\n this.moveCursorDownWithShift(offset);\n }\n else {\n this.moveCursorDownWithoutShift(offset);\n }\n\n this.initDelayedCursor();\n },\n\n /**\n * Moves cursor down without keeping selection\n * @param {Number} offset\n */\n moveCursorDownWithoutShift: function(offset) {\n this._selectionDirection = 'right';\n this.selectionStart += offset;\n\n if (this.selectionStart > this.text.length) {\n this.selectionStart = this.text.length;\n }\n this.selectionEnd = this.selectionStart;\n },\n\n /**\n * private\n */\n swapSelectionPoints: function() {\n var swapSel = this.selectionEnd;\n this.selectionEnd = this.selectionStart;\n this.selectionStart = swapSel;\n },\n\n /**\n * Moves cursor down while keeping selection\n * @param {Number} offset\n */\n moveCursorDownWithShift: function(offset) {\n if (this.selectionEnd === this.selectionStart) {\n this._selectionDirection = 'right';\n }\n var prop = this._selectionDirection === 'right' ? 'selectionEnd' : 'selectionStart';\n this[prop] += offset;\n if (this.selectionEnd < this.selectionStart && this._selectionDirection === 'left') {\n this.swapSelectionPoints();\n this._selectionDirection = 'right';\n }\n if (this.selectionEnd > this.text.length) {\n this.selectionEnd = this.text.length;\n }\n },\n\n /**\n * @param {Event} e Event object\n * @param {Boolean} isRight\n * @return {Number}\n */\n getUpCursorOffset: function(e, isRight) {\n var selectionProp = isRight ? this.selectionEnd : this.selectionStart,\n cursorLocation = this.get2DCursorLocation(selectionProp);\n // if on first line, up cursor goes to start of line\n if (cursorLocation.lineIndex === 0 || e.metaKey || e.keyCode === 33) {\n return selectionProp;\n }\n\n var textBeforeCursor = this.text.slice(0, selectionProp),\n textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\\n') + 1),\n textOnPreviousLine = (textBeforeCursor.match(/\\n?(.*)\\n.*$/) || {})[1] || '',\n textLines = this.text.split(this._reNewline),\n _char,\n widthOfSameLineBeforeCursor = this._getWidthOfLine(this.ctx, cursorLocation.lineIndex, textLines),\n lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor),\n widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,\n lineIndex = cursorLocation.lineIndex;\n\n for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {\n _char = textOnSameLineBeforeCursor[i];\n widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);\n }\n\n var indexOnPrevLine = this._getIndexOnPrevLine(\n cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor, textLines);\n\n return textOnPreviousLine.length - indexOnPrevLine + textOnSameLineBeforeCursor.length;\n },\n\n /**\n * @private\n */\n _getIndexOnPrevLine: function(cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor, textLines) {\n\n var lineIndex = cursorLocation.lineIndex - 1,\n widthOfPreviousLine = this._getWidthOfLine(this.ctx, lineIndex, textLines),\n lineLeftOffset = this._getLineLeftOffset(widthOfPreviousLine),\n widthOfCharsOnPreviousLine = lineLeftOffset,\n indexOnPrevLine = 0,\n foundMatch;\n\n for (var j = 0, jlen = textOnPreviousLine.length; j < jlen; j++) {\n\n var _char = textOnPreviousLine[j],\n widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);\n\n widthOfCharsOnPreviousLine += widthOfChar;\n\n if (widthOfCharsOnPreviousLine > widthOfCharsOnSameLineBeforeCursor) {\n\n foundMatch = true;\n\n var leftEdge = widthOfCharsOnPreviousLine - widthOfChar,\n rightEdge = widthOfCharsOnPreviousLine,\n offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),\n offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);\n\n indexOnPrevLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1);\n\n break;\n }\n }\n\n // reached end\n if (!foundMatch) {\n indexOnPrevLine = textOnPreviousLine.length - 1;\n }\n\n return indexOnPrevLine;\n },\n\n /**\n * Moves cursor up\n * @param {Event} e Event object\n */\n moveCursorUp: function(e) {\n\n this.abortCursorAnimation();\n this._currentCursorOpacity = 1;\n\n var offset = this.getUpCursorOffset(e, this._selectionDirection === 'right');\n if (e.shiftKey) {\n this.moveCursorUpWithShift(offset);\n }\n else {\n this.moveCursorUpWithoutShift(offset);\n }\n\n this.initDelayedCursor();\n },\n\n /**\n * Moves cursor up with shift\n * @param {Number} offset\n */\n moveCursorUpWithShift: function(offset) {\n if (this.selectionEnd === this.selectionStart) {\n this._selectionDirection = 'left';\n }\n var prop = this._selectionDirection === 'right' ? 'selectionEnd' : 'selectionStart';\n this[prop] -= offset;\n if (this.selectionEnd < this.selectionStart && this._selectionDirection === 'right') {\n this.swapSelectionPoints();\n this._selectionDirection = 'left';\n }\n if (this.selectionStart < 0) {\n this.selectionStart = 0;\n }\n },\n\n /**\n * Moves cursor up without shift\n * @param {Number} offset\n */\n moveCursorUpWithoutShift: function(offset) {\n if (this.selectionStart === this.selectionEnd) {\n this.selectionStart -= offset;\n }\n if (this.selectionStart < 0) {\n this.selectionStart = 0;\n }\n this.selectionEnd = this.selectionStart;\n\n this._selectionDirection = 'left';\n },\n\n /**\n * Moves cursor left\n * @param {Event} e Event object\n */\n moveCursorLeft: function(e) {\n if (this.selectionStart === 0 && this.selectionEnd === 0) {\n return;\n }\n\n this.abortCursorAnimation();\n this._currentCursorOpacity = 1;\n\n if (e.shiftKey) {\n this.moveCursorLeftWithShift(e);\n }\n else {\n this.moveCursorLeftWithoutShift(e);\n }\n\n this.initDelayedCursor();\n },\n\n /**\n * @private\n */\n _move: function(e, prop, direction) {\n if (e.altKey) {\n this[prop] = this['findWordBoundary' + direction](this[prop]);\n }\n else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) {\n this[prop] = this['findLineBoundary' + direction](this[prop]);\n }\n else {\n this[prop] += (direction === 'Left' ? -1 : 1);\n }\n },\n\n /**\n * @private\n */\n _moveLeft: function(e, prop) {\n this._move(e, prop, 'Left');\n },\n\n /**\n * @private\n */\n _moveRight: function(e, prop) {\n this._move(e, prop, 'Right');\n },\n\n /**\n * Moves cursor left without keeping selection\n * @param {Event} e\n */\n moveCursorLeftWithoutShift: function(e) {\n this._selectionDirection = 'left';\n\n // only move cursor when there is no selection,\n // otherwise we discard it, and leave cursor on same place\n if (this.selectionEnd === this.selectionStart) {\n this._moveLeft(e, 'selectionStart');\n }\n this.selectionEnd = this.selectionStart;\n },\n\n /**\n * Moves cursor left while keeping selection\n * @param {Event} e\n */\n moveCursorLeftWithShift: function(e) {\n if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {\n this._moveLeft(e, 'selectionEnd');\n }\n else {\n this._selectionDirection = 'left';\n this._moveLeft(e, 'selectionStart');\n\n // increase selection by one if it's a newline\n if (this.text.charAt(this.selectionStart) === '\\n') {\n this.selectionStart--;\n }\n if (this.selectionStart < 0) {\n this.selectionStart = 0;\n }\n }\n },\n\n /**\n * Moves cursor right\n * @param {Event} e Event object\n */\n moveCursorRight: function(e) {\n if (this.selectionStart >= this.text.length && this.selectionEnd >= this.text.length) {\n return;\n }\n\n this.abortCursorAnimation();\n this._currentCursorOpacity = 1;\n\n if (e.shiftKey) {\n this.moveCursorRightWithShift(e);\n }\n else {\n this.moveCursorRightWithoutShift(e);\n }\n\n this.initDelayedCursor();\n },\n\n /**\n * Moves cursor right while keeping selection\n * @param {Event} e\n */\n moveCursorRightWithShift: function(e) {\n if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {\n this._moveRight(e, 'selectionStart');\n }\n else {\n this._selectionDirection = 'right';\n this._moveRight(e, 'selectionEnd');\n\n // increase selection by one if it's a newline\n if (this.text.charAt(this.selectionEnd - 1) === '\\n') {\n this.selectionEnd++;\n }\n if (this.selectionEnd > this.text.length) {\n this.selectionEnd = this.text.length;\n }\n }\n },\n\n /**\n * Moves cursor right without keeping selection\n * @param {Event} e Event object\n */\n moveCursorRightWithoutShift: function(e) {\n this._selectionDirection = 'right';\n\n if (this.selectionStart === this.selectionEnd) {\n this._moveRight(e, 'selectionStart');\n this.selectionEnd = this.selectionStart;\n }\n else {\n this.selectionEnd += this.getNumNewLinesInSelectedText();\n if (this.selectionEnd > this.text.length) {\n this.selectionEnd = this.text.length;\n }\n this.selectionStart = this.selectionEnd;\n }\n },\n\n /**\n * Inserts a character where cursor is (replacing selection if one exists)\n * @param {Event} e Event object\n */\n removeChars: function(e) {\n if (this.selectionStart === this.selectionEnd) {\n this._removeCharsNearCursor(e);\n }\n else {\n this._removeCharsFromTo(this.selectionStart, this.selectionEnd);\n }\n\n this.selectionEnd = this.selectionStart;\n\n this._removeExtraneousStyles();\n\n if (this.canvas) {\n // TODO: double renderAll gets rid of text box shift happenning sometimes\n // need to find out what exactly causes it and fix it\n this.canvas.renderAll().renderAll();\n }\n\n this.setCoords();\n this.fire('changed');\n this.canvas && this.canvas.fire('text:changed', { target: this });\n },\n\n /**\n * @private\n * @param {Event} e Event object\n */\n _removeCharsNearCursor: function(e) {\n if (this.selectionStart !== 0) {\n\n if (e.metaKey) {\n // remove all till the start of current line\n var leftLineBoundary = this.findLineBoundaryLeft(this.selectionStart);\n\n this._removeCharsFromTo(leftLineBoundary, this.selectionStart);\n this.selectionStart = leftLineBoundary;\n }\n else if (e.altKey) {\n // remove all till the start of current word\n var leftWordBoundary = this.findWordBoundaryLeft(this.selectionStart);\n\n this._removeCharsFromTo(leftWordBoundary, this.selectionStart);\n this.selectionStart = leftWordBoundary;\n }\n else {\n var isBeginningOfLine = this.text.slice(this.selectionStart - 1, this.selectionStart) === '\\n';\n this.removeStyleObject(isBeginningOfLine);\n\n this.selectionStart--;\n this.text = this.text.slice(0, this.selectionStart) +\n this.text.slice(this.selectionStart + 1);\n }\n }\n }\n});\n\n\n/* _TO_SVG_START_ */\nfabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {\n\n /**\n * @private\n */\n _setSVGTextLineText: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {\n if (!this.styles[lineIndex]) {\n this.callSuper('_setSVGTextLineText',\n textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier);\n }\n else {\n this._setSVGTextLineChars(\n textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects);\n }\n },\n\n /**\n * @private\n */\n _setSVGTextLineChars: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {\n\n var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy',\n chars = textLine.split(''),\n charOffset = 0,\n lineLeftOffset = this._getSVGLineLeftOffset(lineIndex),\n lineTopOffset = this._getSVGLineTopOffset(lineIndex),\n heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);\n\n for (var i = 0, len = chars.length; i < len; i++) {\n var styleDecl = this.styles[lineIndex][i] || { };\n\n textSpans.push(\n this._createTextCharSpan(\n chars[i], styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset));\n\n var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);\n\n if (styleDecl.textBackgroundColor) {\n textBgRects.push(\n this._createTextCharBg(\n styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset));\n }\n\n charOffset += charWidth;\n }\n },\n\n /**\n * @private\n */\n _getSVGLineLeftOffset: function(lineIndex) {\n return (this._boundaries && this._boundaries[lineIndex])\n ? fabric.util.toFixed(this._boundaries[lineIndex].left, 2)\n : 0;\n },\n\n /**\n * @private\n */\n _getSVGLineTopOffset: function(lineIndex) {\n var lineTopOffset = 0;\n for (var j = 0; j <= lineIndex; j++) {\n lineTopOffset += this._getHeightOfLine(this.ctx, j);\n }\n return lineTopOffset - this.height / 2;\n },\n\n /**\n * @private\n */\n _createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {\n return [\n //jscs:disable validateIndentation\n ''\n //jscs:enable validateIndentation\n ].join('');\n },\n\n /**\n * @private\n */\n _createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset) {\n\n var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({\n visible: true,\n fill: this.fill,\n stroke: this.stroke,\n type: 'text'\n }, styleDecl));\n\n return [\n //jscs:disable validateIndentation\n '',\n\n fabric.util.string.escapeXml(_char),\n ''\n //jscs:enable validateIndentation\n ].join('');\n }\n});\n/* _TO_SVG_END_ */\n\n\n(function() {\n\n if (typeof document !== 'undefined' && typeof window !== 'undefined') {\n return;\n }\n\n var DOMParser = require('xmldom').DOMParser,\n URL = require('url'),\n HTTP = require('http'),\n HTTPS = require('https'),\n\n Canvas = require('canvas'),\n Image = require('canvas').Image;\n\n /** @private */\n function request(url, encoding, callback) {\n var oURL = URL.parse(url);\n\n // detect if http or https is used\n if ( !oURL.port ) {\n oURL.port = ( oURL.protocol.indexOf('https:') === 0 ) ? 443 : 80;\n }\n\n // assign request handler based on protocol\n var reqHandler = ( oURL.port === 443 ) ? HTTPS : HTTP,\n req = reqHandler.request({\n hostname: oURL.hostname,\n port: oURL.port,\n path: oURL.path,\n method: 'GET'\n }, function(response) {\n var body = '';\n if (encoding) {\n response.setEncoding(encoding);\n }\n response.on('end', function () {\n callback(body);\n });\n response.on('data', function (chunk) {\n if (response.statusCode === 200) {\n body += chunk;\n }\n });\n });\n\n req.on('error', function(err) {\n if (err.errno === process.ECONNREFUSED) {\n fabric.log('ECONNREFUSED: connection refused to ' + oURL.hostname + ':' + oURL.port);\n }\n else {\n fabric.log(err.message);\n }\n });\n\n req.end();\n }\n\n /** @private */\n function requestFs(path, callback) {\n var fs = require('fs');\n fs.readFile(path, function (err, data) {\n if (err) {\n fabric.log(err);\n throw err;\n }\n else {\n callback(data);\n }\n });\n }\n\n fabric.util.loadImage = function(url, callback, context) {\n function createImageAndCallBack(data) {\n img.src = new Buffer(data, 'binary');\n // preserving original url, which seems to be lost in node-canvas\n img._src = url;\n callback && callback.call(context, img);\n }\n var img = new Image();\n if (url && (url instanceof Buffer || url.indexOf('data') === 0)) {\n img.src = img._src = url;\n callback && callback.call(context, img);\n }\n else if (url && url.indexOf('http') !== 0) {\n requestFs(url, createImageAndCallBack);\n }\n else if (url) {\n request(url, 'binary', createImageAndCallBack);\n }\n else {\n callback && callback.call(context, url);\n }\n };\n\n fabric.loadSVGFromURL = function(url, callback, reviver) {\n url = url.replace(/^\\n\\s*/, '').replace(/\\?.*$/, '').trim();\n if (url.indexOf('http') !== 0) {\n requestFs(url, function(body) {\n fabric.loadSVGFromString(body.toString(), callback, reviver);\n });\n }\n else {\n request(url, '', function(body) {\n fabric.loadSVGFromString(body, callback, reviver);\n });\n }\n };\n\n fabric.loadSVGFromString = function(string, callback, reviver) {\n var doc = new DOMParser().parseFromString(string);\n fabric.parseSVGDocument(doc.documentElement, function(results, options) {\n callback && callback(results, options);\n }, reviver);\n };\n\n fabric.util.getScript = function(url, callback) {\n request(url, '', function(body) {\n eval(body);\n callback && callback();\n });\n };\n\n fabric.Image.fromObject = function(object, callback) {\n fabric.util.loadImage(object.src, function(img) {\n var oImg = new fabric.Image(img);\n\n oImg._initConfig(object);\n oImg._initFilters(object, function(filters) {\n oImg.filters = filters || [ ];\n callback && callback(oImg);\n });\n });\n };\n\n /**\n * Only available when running fabric on node.js\n * @param {Number} width Canvas width\n * @param {Number} height Canvas height\n * @param {Object} [options] Options to pass to FabricCanvas.\n * @param {Object} [nodeCanvasOptions] Options to pass to NodeCanvas.\n * @return {Object} wrapped canvas instance\n */\n fabric.createCanvasForNode = function(width, height, options, nodeCanvasOptions) {\n nodeCanvasOptions = nodeCanvasOptions || options;\n\n var canvasEl = fabric.document.createElement('canvas'),\n nodeCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions);\n\n // jsdom doesn't create style on canvas element, so here be temp. workaround\n canvasEl.style = { };\n\n canvasEl.width = nodeCanvas.width;\n canvasEl.height = nodeCanvas.height;\n\n var FabricCanvas = fabric.Canvas || fabric.StaticCanvas,\n fabricCanvas = new FabricCanvas(canvasEl, options);\n\n fabricCanvas.contextContainer = nodeCanvas.getContext('2d');\n fabricCanvas.nodeCanvas = nodeCanvas;\n fabricCanvas.Font = Canvas.Font;\n\n return fabricCanvas;\n };\n\n /** @ignore */\n fabric.StaticCanvas.prototype.createPNGStream = function() {\n return this.nodeCanvas.createPNGStream();\n };\n\n fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {\n return this.nodeCanvas.createJPEGStream(opts);\n };\n\n var origSetWidth = fabric.StaticCanvas.prototype.setWidth;\n fabric.StaticCanvas.prototype.setWidth = function(width, options) {\n origSetWidth.call(this, width, options);\n this.nodeCanvas.width = width;\n return this;\n };\n if (fabric.Canvas) {\n fabric.Canvas.prototype.setWidth = fabric.StaticCanvas.prototype.setWidth;\n }\n\n var origSetHeight = fabric.StaticCanvas.prototype.setHeight;\n fabric.StaticCanvas.prototype.setHeight = function(height, options) {\n origSetHeight.call(this, height, options);\n this.nodeCanvas.height = height;\n return this;\n };\n if (fabric.Canvas) {\n fabric.Canvas.prototype.setHeight = fabric.StaticCanvas.prototype.setHeight;\n }\n\n})();\n\n\n\n" }, { "path": "src/libs/fabric.require1-4-12.min.js", "content": "var fabric=fabric||{version:\"1.4.12\"};\"undefined\"!=typeof exports&&(exports.fabric=fabric),\"undefined\"!=typeof document&&\"undefined\"!=typeof window?(fabric.document=document,fabric.window=window):(fabric.document=require(\"jsdom\").jsdom(\"\"),fabric.window=fabric.document.createWindow()),fabric.isTouchSupported=\"ontouchstart\"in fabric.document.documentElement,fabric.isLikelyNode=\"undefined\"!=typeof Buffer&&\"undefined\"==typeof window,fabric.SHARED_ATTRIBUTES=[\"display\",\"transform\",\"fill\",\"fill-opacity\",\"fill-rule\",\"opacity\",\"stroke\",\"stroke-dasharray\",\"stroke-linecap\",\"stroke-linejoin\",\"stroke-miterlimit\",\"stroke-opacity\",\"stroke-width\"],fabric.DPI=96,function(){function a(a,b){this.__eventListeners[a]&&(b?fabric.util.removeFromArray(this.__eventListeners[a],b):this.__eventListeners[a].length=0)}function b(a,b){if(this.__eventListeners||(this.__eventListeners={}),1===arguments.length)for(var c in a)this.on(c,a[c]);else this.__eventListeners[a]||(this.__eventListeners[a]=[]),this.__eventListeners[a].push(b);return this}function c(b,c){if(this.__eventListeners){if(0===arguments.length)this.__eventListeners={};else if(1===arguments.length&&\"object\"==typeof arguments[0])for(var d in b)a.call(this,d,b[d]);else a.call(this,b,c);return this}}function d(a,b){if(this.__eventListeners){var c=this.__eventListeners[a];if(c){for(var d=0,e=c.length;d-1},complexity:function(){return this.getObjects().reduce(function(a,b){return a+=b.complexity?b.complexity():0},0)}},function(a){var b=Math.sqrt,c=Math.atan2,d=Math.PI/180;fabric.util={removeFromArray:function(a,b){var c=a.indexOf(b);return c!==-1&&a.splice(c,1),a},getRandomInt:function(a,b){return Math.floor(Math.random()*(b-a+1))+a},degreesToRadians:function(a){return a*d},radiansToDegrees:function(a){return a/d},rotatePoint:function(a,b,c){var d=Math.sin(c),e=Math.cos(c);a.subtractEquals(b);var f=a.x*e-a.y*d,g=a.x*d+a.y*e;return new fabric.Point(f,g).addEquals(b)},transformPoint:function(a,b,c){return c?new fabric.Point(b[0]*a.x+b[1]*a.y,b[2]*a.x+b[3]*a.y):new fabric.Point(b[0]*a.x+b[1]*a.y+b[4],b[2]*a.x+b[3]*a.y+b[5])},invertTransform:function(a){var b=a.slice(),c=1/(a[0]*a[3]-a[1]*a[2]);b=[c*a[3],-c*a[1],-c*a[2],c*a[0],0,0];var d=fabric.util.transformPoint({x:a[4],y:a[5]},b);return b[4]=-d.x,b[5]=-d.y,b},toFixed:function(a,b){return parseFloat(Number(a).toFixed(b))},parseUnit:function(a){var b=/\\D{0,2}$/.exec(a),c=parseFloat(a);switch(b[0]){case\"mm\":return c*fabric.DPI/25.4;case\"cm\":return c*fabric.DPI/2.54;case\"in\":return c*fabric.DPI;case\"pt\":return c*fabric.DPI/72;case\"pc\":return c*fabric.DPI/72*12;default:return c}},falseFunction:function(){return!1},getKlass:function(a,b){return a=fabric.util.string.camelize(a.charAt(0).toUpperCase()+a.slice(1)),fabric.util.resolveNamespace(b)[a]},resolveNamespace:function(b){if(!b)return fabric;for(var c=b.split(\".\"),d=c.length,e=a||fabric.window,f=0;fd;)d+=h[n++%m],d>k&&(d=k),a[o?\"lineTo\":\"moveTo\"](d,0),o=!o;a.restore()},createCanvasElement:function(a){return a||(a=fabric.document.createElement(\"canvas\")),a.getContext||\"undefined\"==typeof G_vmlCanvasManager||G_vmlCanvasManager.initElement(a),a},createImage:function(){return fabric.isLikelyNode?new(require(\"canvas\").Image):fabric.document.createElement(\"img\")},createAccessors:function(a){for(var b=a.prototype,c=b.stateProperties.length;c--;){var d=b.stateProperties[c],e=d.charAt(0).toUpperCase()+d.slice(1),f=\"set\"+e,g=\"get\"+e;b[g]||(b[g]=function(a){return new Function('return this.get(\"'+a+'\")')}(d)),b[f]||(b[f]=function(a){return new Function(\"value\",'return this.set(\"'+a+'\", value)')}(d))}},clipContext:function(a,b){b.save(),b.beginPath(),a.clipTo(b),b.clip()},multiplyTransformMatrices:function(a,b){for(var c=[[a[0],a[2],a[4]],[a[1],a[3],a[5]],[0,0,1]],d=[[b[0],b[2],b[4]],[b[1],b[3],b[5]],[0,0,1]],e=[],f=0;f<3;f++){e[f]=[];for(var g=0;g<3;g++){for(var h=0,i=0;i<3;i++)h+=c[f][i]*d[i][g];e[f][g]=h}}return[e[0][0],e[1][0],e[0][1],e[1][1],e[0][2],e[1][2]]},getFunctionBody:function(a){return(String(a).match(/function[^{]*\\{([\\s\\S]*)\\}/)||{})[1]},isTransparent:function(a,b,c,d){d>0&&(b>d?b-=d:b=0,c>d?c-=d:c=0);for(var e=!0,f=a.getImageData(b,c,2*d||1,2*d||1),g=3,h=f.data.length;g0?G-=2*m:1===j&&G<0&&(G+=2*m);for(var H=Math.ceil(Math.abs(G/m*2)),I=[],J=G/H,K=8/3*Math.sin(J/4)*Math.sin(J/4)/Math.sin(J/2),L=F+J,M=0;M=e?f-e:2*Math.PI-(e-f)}function h(a,b,e,f,g,h,i,j){var k=d.call(arguments);if(c[k])return c[k];var r,s,t,u,v,w,x,y,l=Math.sqrt,m=Math.min,n=Math.max,o=Math.abs,p=[],q=[[],[]];s=6*a-12*e+6*g,r=-3*a+9*e-9*g+3*i,t=3*e-3*a;for(var z=0;z<2;++z)if(z>0&&(s=6*b-12*f+6*h,r=-3*b+9*f-9*h+3*j,t=3*f-3*b),o(r)<1e-12){if(o(s)<1e-12)continue;u=-t/s,0=b})}function d(a,b){return e(a,b,function(a,b){return a>>0;if(0===c)return-1;var d=0;if(arguments.length>0&&(d=Number(arguments[1]),d!==d?d=0:0!==d&&d!==Number.POSITIVE_INFINITY&&d!==Number.NEGATIVE_INFINITY&&(d=(d>0||-1)*Math.floor(Math.abs(d)))),d>=c)return-1;for(var e=d>=0?d:Math.max(c-Math.abs(d),0);e>>0;c>>0;d>>0;c>>0;c>>0;e>>0,c=0;if(arguments.length>1)d=arguments[1];else for(;;){if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}for(;c/g,\">\")}String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^[\\s\\xA0]+/,\"\").replace(/[\\s\\xA0]+$/,\"\")}),fabric.util.string={camelize:a,capitalize:b,escapeXml:c}}(),function(){var a=Array.prototype.slice,b=Function.prototype.apply,c=function(){};Function.prototype.bind||(Function.prototype.bind=function(d){var g,e=this,f=a.call(arguments,1);return g=f.length?function(){return b.call(e,this instanceof c?this:d,f.concat(a.call(arguments)))}:function(){return b.call(e,this instanceof c?this:d,arguments)},c.prototype=this.prototype,g.prototype=new c,g})}(),function(){function e(){}function f(b){var c=this.constructor.superclass.prototype[b];return arguments.length>1?c.apply(this,a.call(arguments,1)):c.call(this)}function g(){function h(){this.initialize.apply(this,arguments)}var c=null,g=a.call(arguments,0);\"function\"==typeof g[0]&&(c=g.shift()),h.superclass=c,h.subclasses=[],c&&(e.prototype=c.prototype,h.prototype=new e,c.subclasses.push(h));for(var i=0,j=g.length;i-1?a.prototype[e]=function(a){return function(){var c=this.constructor.superclass;this.constructor.superclass=d;var e=b[a].apply(this,arguments);if(this.constructor.superclass=c,\"initialize\"!==a)return e}}(e):a.prototype[e]=b[e],c&&(b.toString!==Object.prototype.toString&&(a.prototype.toString=b.toString),b.valueOf!==Object.prototype.valueOf&&(a.prototype.valueOf=b.valueOf))};fabric.util.createClass=g}(),function(){function b(a){var c,d,b=Array.prototype.slice.call(arguments,1),e=b.length;for(d=0;d-1?f(a,b.match(/opacity:\\s*(\\d?\\.?\\d*)/)[1]):a;for(var d in b)if(\"opacity\"===d)f(a,b[d]);else{var e=\"float\"===d||\"cssFloat\"===d?\"undefined\"==typeof c.styleFloat?\"cssFloat\":\"styleFloat\":d;c[e]=b[d]}return a}var b=fabric.document.createElement(\"div\"),c=\"string\"==typeof b.style.opacity,d=\"string\"==typeof b.style.filter,e=/alpha\\s*\\(\\s*opacity\\s*=\\s*([^\\)]+)\\)/,f=function(a){return a};c?f=function(a,b){return a.style.opacity=b,a}:d&&(f=function(a,b){var c=a.style;return a.currentStyle&&!a.currentStyle.hasLayout&&(c.zoom=1),e.test(c.filter)?(b=b>=.9999?\"\":\"alpha(opacity=\"+100*b+\")\",c.filter=c.filter.replace(e,b)):c.filter+=\" alpha(opacity=\"+100*b+\")\",a}),fabric.util.setStyle=a}(),function(){function b(a){return\"string\"==typeof a?fabric.document.getElementById(a):a}function e(a,b){var c=fabric.document.createElement(a);for(var d in b)\"class\"===d?c.className=b[d]:\"for\"===d?c.htmlFor=b[d]:c.setAttribute(d,b[d]);return c}function f(a,b){a&&(\" \"+a.className+\" \").indexOf(\" \"+b+\" \")===-1&&(a.className+=(a.className?\" \":\"\")+b)}function g(a,b,c){return\"string\"==typeof b&&(b=e(b,c)),a.parentNode&&a.parentNode.replaceChild(b,a),b.appendChild(a),b}function h(a,b){var c,d,e=0,f=0,g=fabric.document.documentElement,h=fabric.document.body||{scrollLeft:0,scrollTop:0};for(d=a;a&&a.parentNode&&!c;)a=a.parentNode,1===a.nodeType&&\"fixed\"===fabric.util.getElementStyle(a,\"position\")&&(c=a),1===a.nodeType&&d!==b&&\"absolute\"===fabric.util.getElementStyle(a,\"position\")?(e=0,f=0):a===fabric.document?(e=h.scrollLeft||g.scrollLeft||0,f=h.scrollTop||g.scrollTop||0):(e+=a.scrollLeft||0,f+=a.scrollTop||0);return{left:e,top:f}}function i(a){var b,f,c=a&&a.ownerDocument,d={left:0,top:0},e={left:0,top:0},g={borderLeftWidth:\"left\",borderTopWidth:\"top\",paddingLeft:\"left\",paddingTop:\"top\"};if(!c)return{left:0,top:0};for(var h in g)e[g[h]]+=parseInt(j(a,h),10)||0;return b=c.documentElement,\"undefined\"!=typeof a.getBoundingClientRect&&(d=a.getBoundingClientRect()),f=fabric.util.getScrollLeftTop(a,null),{left:d.left+f.left-(b.clientLeft||0)+e.left,top:d.top+f.top-(b.clientTop||0)+e.top}}var c,a=Array.prototype.slice,d=function(b){return a.call(b,0)};try{c=d(fabric.document.childNodes)instanceof Array}catch(a){}c||(d=function(a){for(var b=new Array(a.length),c=a.length;c--;)b[c]=a[c];return b});var j;j=fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?function(a,b){var c=fabric.document.defaultView.getComputedStyle(a,null);return c?c[b]:void 0}:function(a,b){var c=a.style[b];return!c&&a.currentStyle&&(c=a.currentStyle[b]),c},function(){function c(a){return\"undefined\"!=typeof a.onselectstart&&(a.onselectstart=fabric.util.falseFunction),b?a.style[b]=\"none\":\"string\"==typeof a.unselectable&&(a.unselectable=\"on\"),a}function d(a){return\"undefined\"!=typeof a.onselectstart&&(a.onselectstart=null),b?a.style[b]=\"\":\"string\"==typeof a.unselectable&&(a.unselectable=\"\"),a}var a=fabric.document.documentElement.style,b=\"userSelect\"in a?\"userSelect\":\"MozUserSelect\"in a?\"MozUserSelect\":\"WebkitUserSelect\"in a?\"WebkitUserSelect\":\"KhtmlUserSelect\"in a?\"KhtmlUserSelect\":\"\";fabric.util.makeElementUnselectable=c,fabric.util.makeElementSelectable=d}(),function(){function a(a,b){var c=fabric.document.getElementsByTagName(\"head\")[0],d=fabric.document.createElement(\"script\"),e=!0;d.onload=d.onreadystatechange=function(a){if(e){if(\"string\"==typeof this.readyState&&\"loaded\"!==this.readyState&&\"complete\"!==this.readyState)return;e=!1,b(a||fabric.window.event),d=d.onload=d.onreadystatechange=null}},d.src=a,c.appendChild(d)}fabric.util.getScript=a}(),fabric.util.getById=b,fabric.util.toArray=d,fabric.util.makeElement=e,fabric.util.addClass=f,fabric.util.wrapElement=g,fabric.util.getScrollLeftTop=h,fabric.util.getElementOffset=i,fabric.util.getElementStyle=j}(),function(){function a(a,b){return a+(/\\?/.test(a)?\"&\":\"?\")+b}function c(){}function d(d,e){e||(e={});var i,f=e.method?e.method.toUpperCase():\"GET\",g=e.onComplete||function(){},h=b();return h.onreadystatechange=function(){4===h.readyState&&(g(h),h.onreadystatechange=c)},\"GET\"===f&&(i=null,\"string\"==typeof e.parameters&&(d=a(d,e.parameters))),h.open(f,d,!0),\"POST\"!==f&&\"PUT\"!==f||h.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\"),h.send(i),h}var b=function(){for(var a=[function(){return new ActiveXObject(\"Microsoft.XMLHTTP\")},function(){return new ActiveXObject(\"Msxml2.XMLHTTP\")},function(){return new ActiveXObject(\"Msxml2.XMLHTTP.3.0\")},function(){return new XMLHttpRequest}],b=a.length;b--;)try{var c=a[b]();if(c)return a[b]}catch(a){}}();fabric.util.request=d}(),fabric.log=function(){},fabric.warn=function(){},\"undefined\"!=typeof console&&[\"log\",\"warn\"].forEach(function(a){\"undefined\"!=typeof console[a]&&console[a].apply&&(fabric[a]=function(){return console[a].apply(console,arguments)})}),function(){function a(a){c(function(b){a||(a={});var g,d=b||+new Date,e=a.duration||500,f=d+e,h=a.onChange||function(){},i=a.abort||function(){return!1},j=a.easing||function(a,b,c,d){return-c*Math.cos(a/d*(Math.PI/2))+c+b},k=\"startValue\"in a?a.startValue:0,l=\"endValue\"in a?a.endValue:100,m=a.byValue||l-k;a.onStart&&a.onStart(),function b(l){g=l||+new Date;var n=g>f?e:g-d;return i()?void(a.onComplete&&a.onComplete()):(h(j(n,k,m,e)),g>f?void(a.onComplete&&a.onComplete()):void c(b))}(d)})}function c(){return b.apply(fabric.window,arguments)}var b=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(a){fabric.window.setTimeout(a,1e3/60)};fabric.util.animate=a,fabric.util.requestAnimFrame=c}(),function(){function a(a,b,c,d){return ab[3]?b[3]:b[0],1!==b[0]||1!==b[3]||0!==b[4]||0!==b[5]){for(var c=a.ownerDocument.createElement(\"g\");null!=a.firstChild;)c.appendChild(a.firstChild);c.setAttribute(\"transform\",\"matrix(\"+b[0]+\" \"+b[1]+\" \"+b[2]+\" \"+b[3]+\" \"+b[4]+\" \"+b[5]+\")\"),a.appendChild(c)}}function x(a){var c=a.objects,e=a.options;return c=c.map(function(a){return b[d(a.type)].fromObject(a)}),{objects:c,options:e}}function y(a,b,c){b[c]&&b[c].toSVG&&a.push('','')}var b=a.fabric||(a.fabric={}),c=b.util.object.extend,d=b.util.string.capitalize,e=b.util.object.clone,f=b.util.toFixed,g=b.util.parseUnit,h=b.util.multiplyTransformMatrices,i={cx:\"left\",x:\"left\",r:\"radius\",cy:\"top\",y:\"top\",display:\"visible\",visibility:\"visible\",transform:\"transformMatrix\",\"fill-opacity\":\"fillOpacity\",\"fill-rule\":\"fillRule\",\"font-family\":\"fontFamily\",\"font-size\":\"fontSize\",\"font-style\":\"fontStyle\",\"font-weight\":\"fontWeight\",\"stroke-dasharray\":\"strokeDashArray\",\"stroke-linecap\":\"strokeLineCap\",\"stroke-linejoin\":\"strokeLineJoin\",\"stroke-miterlimit\":\"strokeMiterLimit\",\"stroke-opacity\":\"strokeOpacity\",\"stroke-width\":\"strokeWidth\",\"text-decoration\":\"textDecoration\",\"text-anchor\":\"originX\"},j={stroke:\"strokeOpacity\",fill:\"fillOpacity\"};b.cssRules={},b.gradientDefs={},b.parseTransformAttribute=function(){function a(a,b){var c=b[0];a[0]=Math.cos(c),a[1]=Math.sin(c),a[2]=-Math.sin(c),a[3]=Math.cos(c)}function c(a,b){var c=b[0],d=2===b.length?b[1]:b[0];a[0]=c,a[3]=d}function d(a,c){a[2]=Math.tan(b.util.degreesToRadians(c[0]))}function e(a,c){a[1]=Math.tan(b.util.degreesToRadians(c[0]))}function f(a,b){a[4]=b[0],2===b.length&&(a[5]=b[1])}var g=[1,0,0,1,0,0],h=\"(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)\",i=\"(?:\\\\s+,?\\\\s*|,\\\\s*)\",j=\"(?:(skewX)\\\\s*\\\\(\\\\s*(\"+h+\")\\\\s*\\\\))\",k=\"(?:(skewY)\\\\s*\\\\(\\\\s*(\"+h+\")\\\\s*\\\\))\",l=\"(?:(rotate)\\\\s*\\\\(\\\\s*(\"+h+\")(?:\"+i+\"(\"+h+\")\"+i+\"(\"+h+\"))?\\\\s*\\\\))\",m=\"(?:(scale)\\\\s*\\\\(\\\\s*(\"+h+\")(?:\"+i+\"(\"+h+\"))?\\\\s*\\\\))\",n=\"(?:(translate)\\\\s*\\\\(\\\\s*(\"+h+\")(?:\"+i+\"(\"+h+\"))?\\\\s*\\\\))\",o=\"(?:(matrix)\\\\s*\\\\(\\\\s*(\"+h+\")\"+i+\"(\"+h+\")\"+i+\"(\"+h+\")\"+i+\"(\"+h+\")\"+i+\"(\"+h+\")\"+i+\"(\"+h+\")\\\\s*\\\\))\",p=\"(?:\"+o+\"|\"+n+\"|\"+m+\"|\"+l+\"|\"+j+\"|\"+k+\")\",q=\"(?:\"+p+\"(?:\"+i+p+\")*)\",r=\"^\\\\s*(?:\"+q+\"?)\\\\s*$\",s=new RegExp(r),t=new RegExp(p,\"g\");return function(h){var i=g.concat(),j=[];if(!h||h&&!s.test(h))return i;h.replace(t,function(h){var k=new RegExp(p).exec(h).filter(function(a){return\"\"!==a&&null!=a}),l=k[1],m=k.slice(2).map(parseFloat);switch(l){case\"translate\":f(i,m);break;case\"rotate\":m[0]=b.util.degreesToRadians(m[0]),a(i,m);break;case\"scale\":c(i,m);break;case\"skewX\":d(i,m);break;case\"skewY\":e(i,m);break;case\"matrix\":i=m}j.push(i.concat()),i=g.concat()});for(var k=j[0];j.length>1;)j.shift(),k=b.util.multiplyTransformMatrices(k,j[0]);return k}}(),b.parseSVGDocument=function(){function f(a,b){for(;a&&(a=a.parentNode);)if(b.test(a.nodeName))return!0;return!1}var a=/^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/,c=\"(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)\",d=new RegExp(\"^\\\\s*(\"+c+\"+)\\\\s*,?\\\\s*(\"+c+\"+)\\\\s*,?\\\\s*(\"+c+\"+)\\\\s*,?\\\\s*(\"+c+\"+)\\\\s*$\");return function(c,h,i){if(c){var j=new Date,k=b.Object.__uid++;u(c);var o,p,l=c.getAttribute(\"viewBox\"),m=g(c.getAttribute(\"width\")||\"100%\"),n=g(c.getAttribute(\"height\")||\"100%\");if(l&&(l=l.match(d))){var q=parseFloat(l[1]),r=parseFloat(l[2]),s=1,t=1;o=parseFloat(l[3]),p=parseFloat(l[4]),m&&m!==o&&(s=m/o),n&&n!==p&&(t=n/p),v(c,[s,0,0,t,s*-q,t*-r])}var w=b.util.toArray(c.getElementsByTagName(\"*\"));if(0===w.length&&b.isLikelyNode){w=c.selectNodes('//*[name(.)!=\"svg\"]');for(var x=[],y=0,z=w.length;y/i,\"\"))),f&&f.documentElement&&b.parseSVGDocument(f.documentElement,function(d,e){w.set(a,{objects:b.util.array.invoke(d,\"toObject\"),options:e}),c(d,e)},d)}a=a.replace(/^\\n\\s*/,\"\").trim(),w.has(a,function(d){d?w.get(a,function(a){var b=x(a);c(b.objects,b.options)}):new b.util.request(a,{method:\"get\",onComplete:e})})},loadSVGFromString:function(a,c,d){a=a.trim();var e;if(\"undefined\"!=typeof DOMParser){var f=new DOMParser;f&&f.parseFromString&&(e=f.parseFromString(a,\"text/xml\"))}else b.window.ActiveXObject&&(e=new ActiveXObject(\"Microsoft.XMLDOM\"),e.async=\"false\",e.loadXML(a.replace(//i,\"\")));b.parseSVGDocument(e.documentElement,function(a,b){c(a,b)},d)},createSVGFontFacesMarkup:function(a){for(var b=\"\",c=0,d=a.length;c',\"\",\"\"].join(\"\")),b},createSVGRefElementsMarkup:function(a){var b=[];return y(b,a,\"backgroundColor\"),y(b,a,\"overlayColor\"),b.join(\"\")}})}(\"undefined\"!=typeof exports?exports:this),fabric.ElementsParser=function(a,b,c,d){this.elements=a,this.callback=b,this.options=c,this.reviver=d,this.svgUid=c&&c.svgUid||0},fabric.ElementsParser.prototype.parse=function(){this.instances=new Array(this.elements.length),this.numElements=this.elements.length,this.createObjects()},fabric.ElementsParser.prototype.createObjects=function(){for(var a=0,b=this.elements.length;aa.x&&this.y>a.y},gte:function(a){return this.x>=a.x&&this.y>=a.y},lerp:function(a,b){return new c(this.x+(a.x-this.x)*b,this.y+(a.y-this.y)*b)},distanceFrom:function(a){var b=this.x-a.x,c=this.y-a.y;return Math.sqrt(b*b+c*c)},midPointFrom:function(a){return new c(this.x+(a.x-this.x)/2,this.y+(a.y-this.y)/2)},min:function(a){return new c(Math.min(this.x,a.x),Math.min(this.y,a.y))},max:function(a){return new c(Math.max(this.x,a.x),Math.max(this.y,a.y))},toString:function(){return this.x+\",\"+this.y},setXY:function(a,b){this.x=a,this.y=b},setFromPoint:function(a){this.x=a.x,this.y=a.y},swap:function(a){var b=this.x,c=this.y;this.x=a.x,this.y=a.y,a.x=b,a.y=c}}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";function c(a){this.status=a,this.points=[]}var b=a.fabric||(a.fabric={});return b.Intersection?void b.warn(\"fabric.Intersection is already defined\"):(b.Intersection=c,b.Intersection.prototype={appendPoint:function(a){this.points.push(a)},appendPoints:function(a){this.points=this.points.concat(a)}},b.Intersection.intersectLineLine=function(a,d,e,f){var g,h=(f.x-e.x)*(a.y-e.y)-(f.y-e.y)*(a.x-e.x),i=(d.x-a.x)*(a.y-e.y)-(d.y-a.y)*(a.x-e.x),j=(f.y-e.y)*(d.x-a.x)-(f.x-e.x)*(d.y-a.y);if(0!==j){var k=h/j,l=i/j;0<=k&&k<=1&&0<=l&&l<=1?(g=new c(\"Intersection\"),g.points.push(new b.Point(a.x+k*(d.x-a.x),a.y+k*(d.y-a.y)))):g=new c}else g=new c(0===h||0===i?\"Coincident\":\"Parallel\");return g},b.Intersection.intersectLinePolygon=function(a,b,d){for(var e=new c,f=d.length,g=0;g0&&(e.status=\"Intersection\"),e},b.Intersection.intersectPolygonPolygon=function(a,b){for(var d=new c,e=a.length,f=0;f0&&(d.status=\"Intersection\"),d},void(b.Intersection.intersectPolygonRectangle=function(a,d,e){var f=d.min(e),g=d.max(e),h=new b.Point(g.x,f.y),i=new b.Point(f.x,g.y),j=c.intersectLinePolygon(f,h,a),k=c.intersectLinePolygon(h,g,a),l=c.intersectLinePolygon(g,i,a),m=c.intersectLinePolygon(i,f,a),n=new c;return n.appendPoints(j.points),n.appendPoints(k.points),n.appendPoints(l.points),n.appendPoints(m.points),n.points.length>0&&(n.status=\"Intersection\"),n}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";function c(a){a?this._tryParsingColor(a):this.setSource([0,0,0,1])}function d(a,b,c){return c<0&&(c+=1),c>1&&(c-=1),c<1/6?a+6*(b-a)*c:c<.5?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var b=a.fabric||(a.fabric={});return b.Color?void b.warn(\"fabric.Color is already defined.\"):(b.Color=c,b.Color.prototype={_tryParsingColor:function(a){var b;return a in c.colorNameMap&&(a=c.colorNameMap[a]),\"transparent\"===a?void this.setSource([255,255,255,0]):(b=c.sourceFromHex(a),b||(b=c.sourceFromRgb(a)),b||(b=c.sourceFromHsl(a)),void(b&&this.setSource(b)))},_rgbToHsl:function(a,c,d){a/=255,c/=255,d/=255;var e,f,g,h=b.util.array.max([a,c,d]),i=b.util.array.min([a,c,d]);if(g=(h+i)/2,h===i)e=f=0;else{var j=h-i;switch(f=g>.5?j/(2-h-i):j/(h+i),h){case a:e=(c-d)/j+(c1?1:c,b){var g=b.split(/\\s*;\\s*/);\"\"===g[g.length-1]&&g.pop();for(var h=g.length;h--;){var i=g[h].split(/\\s*:\\s*/),j=i[0].trim(),k=i[1].trim();\"stop-color\"===j?d=k:\"stop-opacity\"===j&&(f=k)}}return d||(d=a.getAttribute(\"stop-color\")||\"rgb(0,0,0)\"),f||(f=a.getAttribute(\"stop-opacity\")),d=new fabric.Color(d),e=d.getAlpha(),f=isNaN(parseFloat(f))?1:parseFloat(f),f*=e,{offset:c,color:d.toRgb(),opacity:f}}function b(a){return{x1:a.getAttribute(\"x1\")||0,y1:a.getAttribute(\"y1\")||0,x2:a.getAttribute(\"x2\")||\"100%\",y2:a.getAttribute(\"y2\")||0}}function c(a){return{x1:a.getAttribute(\"fx\")||a.getAttribute(\"cx\")||\"50%\",y1:a.getAttribute(\"fy\")||a.getAttribute(\"cy\")||\"50%\",r1:0,x2:a.getAttribute(\"cx\")||\"50%\",y2:a.getAttribute(\"cy\")||\"50%\",r2:a.getAttribute(\"r\")||\"50%\"}}function d(a,b,c){var d,e=0,f=1,g=\"\";for(var h in b)d=parseFloat(b[h],10),f=\"string\"==typeof b[h]&&/^\\d+%$/.test(b[h])?.01:1,\"x1\"===h||\"x2\"===h||\"r2\"===h?(f*=\"objectBoundingBox\"===c?a.width:1,e=\"objectBoundingBox\"===c?a.left||0:0):\"y1\"!==h&&\"y2\"!==h||(f*=\"objectBoundingBox\"===c?a.height:1,e=\"objectBoundingBox\"===c?a.top||0:0),b[h]=d*f+e;if(\"ellipse\"===a.type&&null!==b.r2&&\"objectBoundingBox\"===c&&a.rx!==a.ry){var i=a.ry/a.rx;g=\" scale(1, \"+i+\")\",b.y1&&(b.y1/=i),b.y2&&(b.y2/=i)}return g}fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,initialize:function(a){a||(a={});var b={};this.id=fabric.Object.__uid++,this.type=a.type||\"linear\",b={x1:a.coords.x1||0,y1:a.coords.y1||0,x2:a.coords.x2||0,y2:a.coords.y2||0},\"radial\"===this.type&&(b.r1=a.coords.r1||0,b.r2=a.coords.r2||0),this.coords=b,this.colorStops=a.colorStops.slice(),a.gradientTransform&&(this.gradientTransform=a.gradientTransform),this.offsetX=a.offsetX||this.offsetX,this.offsetY=a.offsetY||this.offsetY},addColorStop:function(a){for(var b in a){var c=new fabric.Color(a[b]);this.colorStops.push({offset:b,color:c.toRgb(),opacity:c.getAlpha()})}return this},toObject:function(){return{type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY}},toSVG:function(a){var c,d,b=fabric.util.object.clone(this.coords);if(this.colorStops.sort(function(a,b){return a.offset-b.offset}),!a.group||\"path-group\"!==a.group.type)for(var e in b)\"x1\"===e||\"x2\"===e||\"r2\"===e?b[e]+=this.offsetX-a.width/2:\"y1\"!==e&&\"y2\"!==e||(b[e]+=this.offsetY-a.height/2);d='id=\"SVGID_'+this.id+'\" gradientUnits=\"userSpaceOnUse\"',this.gradientTransform&&(d+=' gradientTransform=\"matrix('+this.gradientTransform.join(\" \")+')\" '),\"linear\"===this.type?c=[\"\\n']:\"radial\"===this.type&&(c=[\"\\n']);for(var f=0;f\\n');return c.push(\"linear\"===this.type?\"\\n\":\"\\n\"),c.join(\"\")},toLive:function(a,b){var c,d=fabric.util.object.clone(this.coords);if(this.type){if(b.group&&\"path-group\"===b.group.type)for(var e in d)\"x1\"===e||\"x2\"===e?d[e]+=-this.offsetX+b.width/2:\"y1\"!==e&&\"y2\"!==e||(d[e]+=-this.offsetY+b.height/2);\"linear\"===this.type?c=a.createLinearGradient(d.x1,d.y1,d.x2,d.y2):\"radial\"===this.type&&(c=a.createRadialGradient(d.x1,d.y1,d.r1,d.x2,d.y2,d.r2));for(var f=0,g=this.colorStops.length;f'},toLive:function(a){var b=\"function\"==typeof this.source?this.source():this.source;if(!b)return\"\";if(\"undefined\"!=typeof b.src){if(!b.complete)return\"\";if(0===b.naturalWidth||0===b.naturalHeight)return\"\"}return a.createPattern(b,this.repeat)}}),function(a){\"use strict\";var b=a.fabric||(a.fabric={});return b.Shadow?void b.warn(\"fabric.Shadow is already defined.\"):(b.Shadow=b.util.createClass({color:\"rgb(0,0,0)\",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,initialize:function(a){\"string\"==typeof a&&(a=this._parseShadow(a));for(var c in a)this[c]=a[c];this.id=b.Object.__uid++},_parseShadow:function(a){var c=a.trim(),d=b.Shadow.reOffsetsAndBlur.exec(c)||[],e=c.replace(b.Shadow.reOffsetsAndBlur,\"\")||\"rgb(0,0,0)\";return{color:e.trim(),offsetX:parseInt(d[1],10)||0,offsetY:parseInt(d[2],10)||0,blur:parseInt(d[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join(\"px \")},toSVG:function(a){var b=\"SourceAlpha\";return!a||a.fill!==this.color&&a.stroke!==this.color||(b=\"SourceGraphic\"),''},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY};var a={},c=b.Shadow.prototype;return this.color!==c.color&&(a.color=this.color),this.blur!==c.blur&&(a.blur=this.blur),this.offsetX!==c.offsetX&&(a.offsetX=this.offsetX),this.offsetY!==c.offsetY&&(a.offsetY=this.offsetY),a}}),void(b.Shadow.reOffsetsAndBlur=/(?:\\s|^)(-?\\d+(?:px)?(?:\\s?|$))?(-?\\d+(?:px)?(?:\\s?|$))?(\\d+(?:px)?)?(?:\\s?|$)(?:$|\\s)/))}(\"undefined\"!=typeof exports?exports:this),function(){\"use strict\";if(fabric.StaticCanvas)return void fabric.warn(\"fabric.StaticCanvas is already defined.\");var a=fabric.util.object.extend,b=fabric.util.getElementOffset,c=fabric.util.removeFromArray,d=new Error(\"Could not initialize `canvas` element\");fabric.StaticCanvas=fabric.util.createClass({initialize:function(a,b){b||(b={}),this._initStatic(a,b),fabric.StaticCanvas.activeInstance=this},backgroundColor:\"\",backgroundImage:null,overlayColor:\"\",overlayImage:null,includeDefaultValues:!0,stateful:!0,renderOnAddRemove:!0,clipTo:null,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,preserveObjectStacking:!1,viewportTransform:[1,0,0,1,0,0],onBeforeScaleRotate:function(){},_initStatic:function(a,b){this._objects=[],this._createLowerCanvas(a),this._initOptions(b),this._setImageSmoothing(),b.overlayImage&&this.setOverlayImage(b.overlayImage,this.renderAll.bind(this)),b.backgroundImage&&this.setBackgroundImage(b.backgroundImage,this.renderAll.bind(this)),b.backgroundColor&&this.setBackgroundColor(b.backgroundColor,this.renderAll.bind(this)),b.overlayColor&&this.setOverlayColor(b.overlayColor,this.renderAll.bind(this)),this.calcOffset()},calcOffset:function(){return this._offset=b(this.lowerCanvasEl),this},setOverlayImage:function(a,b,c){return this.__setBgOverlayImage(\"overlayImage\",a,b,c)},setBackgroundImage:function(a,b,c){return this.__setBgOverlayImage(\"backgroundImage\",a,b,c)},setOverlayColor:function(a,b){return this.__setBgOverlayColor(\"overlayColor\",a,b)},setBackgroundColor:function(a,b){return this.__setBgOverlayColor(\"backgroundColor\",a,b)},_setImageSmoothing:function(){var a=this.getContext();a.imageSmoothingEnabled=this.imageSmoothingEnabled,a.imageSmoothingEnabled=this.imageSmoothingEnabled,a.mozImageSmoothingEnabled=this.imageSmoothingEnabled,a.msImageSmoothingEnabled=this.imageSmoothingEnabled,a.oImageSmoothingEnabled=this.imageSmoothingEnabled},__setBgOverlayImage:function(a,b,c,d){return\"string\"==typeof b?fabric.util.loadImage(b,function(b){this[a]=new fabric.Image(b,d),c&&c()},this):(this[a]=b,c&&c()),this},__setBgOverlayColor:function(a,b,c){if(b&&b.source){var d=this;fabric.util.loadImage(b.source,function(e){d[a]=new fabric.Pattern({source:e,repeat:b.repeat,offsetX:b.offsetX,offsetY:b.offsetY}),c&&c()})}else this[a]=b,c&&c();return this},_createCanvasElement:function(){var a=fabric.document.createElement(\"canvas\");if(a.style||(a.style={}),!a)throw d;return this._initCanvasElement(a),a},_initCanvasElement:function(a){if(fabric.util.createCanvasElement(a),\"undefined\"==typeof a.getContext)throw d},_initOptions:function(a){for(var b in a)this[b]=a[b];this.width=this.width||parseInt(this.lowerCanvasEl.width,10)||0,this.height=this.height||parseInt(this.lowerCanvasEl.height,10)||0,this.lowerCanvasEl.style&&(this.lowerCanvasEl.width=this.width,this.lowerCanvasEl.height=this.height,this.lowerCanvasEl.style.width=this.width+\"px\",this.lowerCanvasEl.style.height=this.height+\"px\",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(a){this.lowerCanvasEl=fabric.util.getById(a)||this._createCanvasElement(),this._initCanvasElement(this.lowerCanvasEl),fabric.util.addClass(this.lowerCanvasEl,\"lower-canvas\"),this.interactive&&this._applyCanvasStyle(this.lowerCanvasEl),this.contextContainer=this.lowerCanvasEl.getContext(\"2d\")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(a,b){return this.setDimensions({width:a},b)},setHeight:function(a,b){return this.setDimensions({height:a},b)},setDimensions:function(a,b){var c;b=b||{};for(var d in a)c=a[d],b.cssOnly||(this._setBackstoreDimension(d,a[d]),c+=\"px\"),b.backstoreOnly||this._setCssDimension(d,c);return b.cssOnly||this.renderAll(),this.calcOffset(),this},_setBackstoreDimension:function(a,b){return this.lowerCanvasEl[a]=b,this.upperCanvasEl&&(this.upperCanvasEl[a]=b),this.cacheCanvasEl&&(this.cacheCanvasEl[a]=b),this[a]=b,this},_setCssDimension:function(a,b){return this.lowerCanvasEl.style[a]=b,this.upperCanvasEl&&(this.upperCanvasEl.style[a]=b),this.wrapperEl&&(this.wrapperEl.style[a]=b),this},getZoom:function(){return Math.sqrt(this.viewportTransform[0]*this.viewportTransform[3])},setViewportTransform:function(a){this.viewportTransform=a,this.renderAll();for(var b=0,c=this._objects.length;b\"),c.join(\"\")},_setSVGPreamble:function(a,b){b.suppressPreamble||a.push('','\\n')},_setSVGHeader:function(a,b){var c,d,e;b.viewBox?(c=b.viewBox.width,d=b.viewBox.height):(c=this.width,d=this.height,this.svgViewportTransformation||(e=this.viewportTransform,c/=e[0],d/=e[3])),a.push(\"',\"Created with Fabric.js \",fabric.version,\"\",\"\",fabric.createSVGFontFacesMarkup(this.getObjects()),fabric.createSVGRefElementsMarkup(this),\"\")},_setSVGObjects:function(a,b){var c=this.getActiveGroup();c&&this.discardActiveGroup();for(var d=0,e=this.getObjects(),f=e.length;d        \"):this[b]&&\"overlayColor\"===b&&a.push('\")},sendToBack:function(a){return c(this._objects,a),this._objects.unshift(a),this.renderAll&&this.renderAll()},bringToFront:function(a){return c(this._objects,a),this._objects.push(a),this.renderAll&&this.renderAll()},sendBackwards:function(a,b){var d=this._objects.indexOf(a);if(0!==d){var e=this._findNewLowerIndex(a,d,b);c(this._objects,a),this._objects.splice(e,0,a),this.renderAll&&this.renderAll()}return this},\n_findNewLowerIndex:function(a,b,c){var d;if(c){d=b;for(var e=b-1;e>=0;--e){var f=a.intersectsWithObject(this._objects[e])||a.isContainedWithinObject(this._objects[e])||this._objects[e].isContainedWithinObject(a);if(f){d=e;break}}}else d=b-1;return d},bringForward:function(a,b){var d=this._objects.indexOf(a);if(d!==this._objects.length-1){var e=this._findNewUpperIndex(a,d,b);c(this._objects,a),this._objects.splice(e,0,a),this.renderAll&&this.renderAll()}return this},_findNewUpperIndex:function(a,b,c){var d;if(c){d=b;for(var e=b+1;e\"}}),a(fabric.StaticCanvas.prototype,fabric.Observable),a(fabric.StaticCanvas.prototype,fabric.Collection),a(fabric.StaticCanvas.prototype,fabric.DataURLExporter),a(fabric.StaticCanvas,{EMPTY_JSON:'{\"objects\": [], \"background\": \"white\"}',supports:function(a){var b=fabric.util.createCanvasElement();if(!b||!b.getContext)return null;var c=b.getContext(\"2d\");if(!c)return null;switch(a){case\"getImageData\":return\"undefined\"!=typeof c.getImageData;case\"setLineDash\":return\"undefined\"!=typeof c.setLineDash;case\"toDataURL\":return\"undefined\"!=typeof b.toDataURL;case\"toDataURLWithQuality\":try{return b.toDataURL(\"image/jpeg\",0),!0}catch(a){}return!1;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject}(),fabric.BaseBrush=fabric.util.createClass({color:\"rgb(0, 0, 0)\",width:1,shadow:null,strokeLineCap:\"round\",strokeLineJoin:\"round\",setShadow:function(a){return this.shadow=new fabric.Shadow(a),this},_setBrushStyles:function(){var a=this.canvas.contextTop;a.strokeStyle=this.color,a.lineWidth=this.width,a.lineCap=this.strokeLineCap,a.lineJoin=this.strokeLineJoin},_setShadow:function(){if(this.shadow){var a=this.canvas.contextTop;a.shadowColor=this.shadow.color,a.shadowBlur=this.shadow.blur,a.shadowOffsetX=this.shadow.offsetX,a.shadowOffsetY=this.shadow.offsetY}},_resetShadow:function(){var a=this.canvas.contextTop;a.shadowColor=\"\",a.shadowBlur=a.shadowOffsetX=a.shadowOffsetY=0}}),function(){fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{initialize:function(a){this.canvas=a,this._points=[]},onMouseDown:function(a){this._prepareForDrawing(a),this._captureDrawingPath(a),this._render()},onMouseMove:function(a){this._captureDrawingPath(a),this.canvas.clearContext(this.canvas.contextTop),this._render()},onMouseUp:function(){this._finalizeAndAddPath()},_prepareForDrawing:function(a){var b=new fabric.Point(a.x,a.y);this._reset(),this._addPoint(b),this.canvas.contextTop.moveTo(b.x,b.y)},_addPoint:function(a){this._points.push(a)},_reset:function(){this._points.length=0,this._setBrushStyles(),this._setShadow()},_captureDrawingPath:function(a){var b=new fabric.Point(a.x,a.y);this._addPoint(b)},_render:function(){var a=this.canvas.contextTop,b=this.canvas.viewportTransform,c=this._points[0],d=this._points[1];a.save(),a.transform(b[0],b[1],b[2],b[3],b[4],b[5]),a.beginPath(),2===this._points.length&&c.x===d.x&&c.y===d.y&&(c.x-=.5,d.x+=.5),a.moveTo(c.x,c.y);for(var e=1,f=this._points.length;ec.padding?a.x<0?a.x+=c.padding:a.x-=c.padding:a.x=0,e(a.y)>c.padding?a.y<0?a.y+=c.padding:a.y-=c.padding:a.y=0},_rotateObject:function(a,b){var e=this._currentTransform;if(!e.target.get(\"lockRotation\")){var f=d(e.ey-e.top,e.ex-e.left),g=d(b-e.top,a-e.left),h=c(g-f+e.theta);h<0&&(h=360+h),e.target.angle=h}},setCursor:function(a){this.upperCanvasEl.style.cursor=a},_resetObjectTransform:function(a){a.scaleX=1,a.scaleY=1,a.setAngle(0)},_drawSelection:function(){var a=this.contextTop,b=this._groupSelector,c=b.left,d=b.top,g=e(c),h=e(d);if(a.fillStyle=this.selectionColor,a.fillRect(b.ex-(c>0?0:-c),b.ey-(d>0?0:-d),g,h),a.lineWidth=this.selectionLineWidth,a.strokeStyle=this.selectionBorderColor,this.selectionDashArray.length>1){var i=b.ex+f-(c>0?0:g),j=b.ey+f-(d>0?0:h);a.beginPath(),fabric.util.drawDashedLine(a,i,j,i+g,j,this.selectionDashArray),fabric.util.drawDashedLine(a,i,j+h-1,i+g,j+h-1,this.selectionDashArray),fabric.util.drawDashedLine(a,i,j,i,j+h,this.selectionDashArray),fabric.util.drawDashedLine(a,i+g-1,j,i+g-1,j+h,this.selectionDashArray),a.closePath(),a.stroke()}else a.strokeRect(b.ex+f-(c>0?0:g),b.ey+f-(d>0?0:h),g,h)},_isLastRenderedObject:function(a){return this.controlsAboveOverlay&&this.lastRenderedObjectWithControlsAboveOverlay&&this.lastRenderedObjectWithControlsAboveOverlay.visible&&this.containsPoint(a,this.lastRenderedObjectWithControlsAboveOverlay)&&this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(this.getPointer(a,!0))},findTarget:function(a,b){if(!this.skipTargetFind){if(this._isLastRenderedObject(a))return this.lastRenderedObjectWithControlsAboveOverlay;var c=this.getActiveGroup();if(c&&!b&&this.containsPoint(a,c))return c;var d=this._searchPossibleTargets(a);return this._fireOverOutEvents(d),d}},_fireOverOutEvents:function(a){if(a){if(this._hoveredTarget!==a){if(this.fire(\"mouse:over\",{target:a}),a.fire(\"mouseover\"),this._hoveredTarget){if(this.fire(\"mouse:out\",{target:this._hoveredTarget}),!this._hoveredTarget.fire)return;this._hoveredTarget.fire(\"mouseout\")}this._hoveredTarget=a}}else if(this._hoveredTarget){if(this.fire(\"mouse:out\",{target:this._hoveredTarget}),!this._hoveredTarget.fire)return;this._hoveredTarget.fire(\"mouseout\"),this._hoveredTarget=null}},_checkTarget:function(a,b,c){if(b&&b.visible&&b.evented&&this.containsPoint(a,b)){if(!this.perPixelTargetFind&&!b.perPixelTargetFind||b.isEditing)return!0;var d=this.isTargetTransparent(b,c.x,c.y);if(!d)return!0}},_searchPossibleTargets:function(a){for(var b,c=this.getPointer(a,!0),d=this._objects.length;d--;)if(this._checkTarget(a,this._objects[d],c)){this.relatedTarget=this._objects[d],b=this._objects[d];break}return b},getPointer:function(b,c,d){d||(d=this.upperCanvasEl);var i,e=a(b,d),f=d.getBoundingClientRect(),g=f.width||0,h=f.height||0;return g&&h||(\"top\"in f&&\"bottom\"in f&&(h=Math.abs(f.top-f.bottom)),\"right\"in f&&\"left\"in f&&(g=Math.abs(f.right-f.left))),this.calcOffset(),e.x=e.x-this._offset.left,e.y=e.y-this._offset.top,c||(e=fabric.util.transformPoint(e,fabric.util.invertTransform(this.viewportTransform))),i=0===g||0===h?{width:1,height:1}:{width:d.width/g,height:d.height/h},{x:e.x*i.width,y:e.y*i.height}},_createUpperCanvas:function(){var a=this.lowerCanvasEl.className.replace(/\\s*lower-canvas\\s*/,\"\");this.upperCanvasEl=this._createCanvasElement(),fabric.util.addClass(this.upperCanvasEl,\"upper-canvas \"+a),this.wrapperEl.appendChild(this.upperCanvasEl),this._copyCanvasStyle(this.lowerCanvasEl,this.upperCanvasEl),this._applyCanvasStyle(this.upperCanvasEl),this.contextTop=this.upperCanvasEl.getContext(\"2d\")},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute(\"width\",this.width),this.cacheCanvasEl.setAttribute(\"height\",this.height),this.contextCache=this.cacheCanvasEl.getContext(\"2d\")},_initWrapperElement:function(){this.wrapperEl=fabric.util.wrapElement(this.lowerCanvasEl,\"div\",{class:this.containerClass}),fabric.util.setStyle(this.wrapperEl,{width:this.getWidth()+\"px\",height:this.getHeight()+\"px\",position:\"relative\"}),fabric.util.makeElementUnselectable(this.wrapperEl)},_applyCanvasStyle:function(a){var b=this.getWidth()||a.width,c=this.getHeight()||a.height;fabric.util.setStyle(a,{position:\"absolute\",width:b+\"px\",height:c+\"px\",left:0,top:0}),a.width=b,a.height=c,fabric.util.makeElementUnselectable(a)},_copyCanvasStyle:function(a,b){b.style.cssText=a.style.cssText},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},_setActiveObject:function(a){this._activeObject&&this._activeObject.set(\"active\",!1),this._activeObject=a,a.set(\"active\",!0)},setActiveObject:function(a,b){return this._setActiveObject(a),this.renderAll(),this.fire(\"object:selected\",{target:a,e:b}),a.fire(\"selected\",{e:b}),this},getActiveObject:function(){return this._activeObject},_discardActiveObject:function(){this._activeObject&&this._activeObject.set(\"active\",!1),this._activeObject=null},discardActiveObject:function(a){return this._discardActiveObject(),this.renderAll(),this.fire(\"selection:cleared\",{e:a}),this},_setActiveGroup:function(a){this._activeGroup=a,a&&a.set(\"active\",!0)},setActiveGroup:function(a,b){return this._setActiveGroup(a),a&&(this.fire(\"object:selected\",{target:a,e:b}),a.fire(\"selected\",{e:b})),this},getActiveGroup:function(){return this._activeGroup},_discardActiveGroup:function(){var a=this.getActiveGroup();a&&a.destroy(),this.setActiveGroup(null)},discardActiveGroup:function(a){return this._discardActiveGroup(),this.fire(\"selection:cleared\",{e:a}),this},deactivateAll:function(){for(var a=this.getObjects(),b=0,c=a.length;b1&&(b=new fabric.Group(b.reverse(),{originX:\"center\",\noriginY:\"center\",canvas:this}),b.addWithUpdate(),this.setActiveGroup(b,a),b.saveCoords(),this.fire(\"selection:created\",{target:b}),this.renderAll())},_collectObjects:function(){for(var d,c=[],e=this._groupSelector.ex,f=this._groupSelector.ey,g=e+this._groupSelector.left,h=f+this._groupSelector.top,i=new fabric.Point(a(e,g),a(f,h)),j=new fabric.Point(b(e,g),b(f,h)),k=e===g&&f===h,l=this._objects.length;l--&&(d=this._objects[l],!(d&&d.selectable&&d.visible&&(d.intersectsWithRect(i,j)||d.isContainedWithinRect(i,j)||d.containsPoint(i)||d.containsPoint(j))&&(d.set(\"active\",!0),c.push(d),k))););return c},_maybeGroupObjects:function(a){this.selection&&this._groupSelector&&this._groupSelectedObjects(a);var b=this.getActiveGroup();b&&(b.setObjectsCoords().setCoords(),b.isMoving=!1,this.setCursor(this.defaultCursor)),this._groupSelector=null,this._currentTransform=null}})}(),fabric.util.object.extend(fabric.StaticCanvas.prototype,{toDataURL:function(a){a||(a={});var b=a.format||\"png\",c=a.quality||1,d=a.multiplier||1,e={left:a.left,top:a.top,width:a.width,height:a.height};return 1!==d?this.__toDataURLWithMultiplier(b,c,e,d):this.__toDataURL(b,c,e)},__toDataURL:function(a,b,c){this.renderAll(!0);var d=this.upperCanvasEl||this.lowerCanvasEl,e=this.__getCroppedCanvas(d,c);\"jpg\"===a&&(a=\"jpeg\");var f=fabric.StaticCanvas.supports(\"toDataURLWithQuality\")?(e||d).toDataURL(\"image/\"+a,b):(e||d).toDataURL(\"image/\"+a);return this.contextTop&&this.clearContext(this.contextTop),this.renderAll(),e&&(e=null),f},__getCroppedCanvas:function(a,b){var c,d,e=\"left\"in b||\"top\"in b||\"width\"in b||\"height\"in b;return e&&(c=fabric.util.createCanvasElement(),d=c.getContext(\"2d\"),c.width=b.width||this.width,c.height=b.height||this.height,d.drawImage(a,-b.left||0,-b.top||0)),c},__toDataURLWithMultiplier:function(a,b,c,d){var e=this.getWidth(),f=this.getHeight(),g=e*d,h=f*d,i=this.getActiveObject(),j=this.getActiveGroup(),k=this.contextTop||this.contextContainer;d>1&&this.setWidth(g).setHeight(h),k.scale(d,d),c.left&&(c.left*=d),c.top&&(c.top*=d),c.width?c.width*=d:d<1&&(c.width=g),c.height?c.height*=d:d<1&&(c.height=h),j?this._tempRemoveBordersControlsFromGroup(j):i&&this.deactivateAll&&this.deactivateAll(),this.renderAll(!0);var l=this.__toDataURL(a,b,c);return this.width=e,this.height=f,k.scale(1/d,1/d),this.setWidth(e).setHeight(f),j?this._restoreBordersControlsOnGroup(j):i&&this.setActiveObject&&this.setActiveObject(i),this.contextTop&&this.clearContext(this.contextTop),this.renderAll(),l},toDataURLWithMultiplier:function(a,b,c){return this.toDataURL({format:a,multiplier:b,quality:c})},_tempRemoveBordersControlsFromGroup:function(a){a.origHasControls=a.hasControls,a.origBorderColor=a.borderColor,a.hasControls=!0,a.borderColor=\"rgba(0,0,0,0)\",a.forEachObject(function(a){a.origBorderColor=a.borderColor,a.borderColor=\"rgba(0,0,0,0)\"})},_restoreBordersControlsOnGroup:function(a){a.hideControls=a.origHideControls,a.borderColor=a.origBorderColor,a.forEachObject(function(a){a.borderColor=a.origBorderColor,delete a.origBorderColor})}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromDatalessJSON:function(a,b,c){return this.loadFromJSON(a,b,c)},loadFromJSON:function(a,b,c){if(a){var d=\"string\"==typeof a?JSON.parse(a):a;this.clear();var e=this;return this._enlivenObjects(d.objects,function(){e._setBgOverlay(d,b)},c),this}},_setBgOverlay:function(a,b){var c=this,d={backgroundColor:!1,overlayColor:!1,backgroundImage:!1,overlayImage:!1};if(!(a.backgroundImage||a.overlayImage||a.background||a.overlay))return void(b&&b());var e=function(){d.backgroundImage&&d.overlayImage&&d.backgroundColor&&d.overlayColor&&(c.renderAll(),b&&b())};this.__setBgOverlay(\"backgroundImage\",a.backgroundImage,d,e),this.__setBgOverlay(\"overlayImage\",a.overlayImage,d,e),this.__setBgOverlay(\"backgroundColor\",a.background,d,e),this.__setBgOverlay(\"overlayColor\",a.overlay,d,e),e()},__setBgOverlay:function(a,b,c,d){var e=this;return b?void(\"backgroundImage\"===a||\"overlayImage\"===a?fabric.Image.fromObject(b,function(b){e[a]=b,c[a]=!0,d&&d()}):this[\"set\"+fabric.util.string.capitalize(a,!0)](b,function(){c[a]=!0,d&&d()})):void(c[a]=!0)},_enlivenObjects:function(a,b,c){var d=this;if(!a||0===a.length)return void(b&&b());var e=this.renderOnAddRemove;this.renderOnAddRemove=!1,fabric.util.enlivenObjects(a,function(a){a.forEach(function(a,b){d.insertAt(a,b,!0)}),d.renderOnAddRemove=e,b&&b()},null,c)},_toDataURL:function(a,b){this.clone(function(c){b(c.toDataURL(a))})},_toDataURLWithMultiplier:function(a,b,c){this.clone(function(d){c(d.toDataURLWithMultiplier(a,b))})},clone:function(a,b){var c=JSON.stringify(this.toJSON(b));this.cloneWithoutData(function(b){b.loadFromJSON(c,function(){a&&a(b)})})},cloneWithoutData:function(a){var b=fabric.document.createElement(\"canvas\");b.width=this.getWidth(),b.height=this.getHeight();var c=new fabric.Canvas(b);c.clipTo=this.clipTo,this.backgroundImage?(c.setBackgroundImage(this.backgroundImage.src,function(){c.renderAll(),a&&a(c)}),c.backgroundImageOpacity=this.backgroundImageOpacity,c.backgroundImageStretch=this.backgroundImageStretch):a&&a(c)}}),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=b.util.object.extend,d=b.util.toFixed,e=b.util.string.capitalize,f=b.util.degreesToRadians,g=b.StaticCanvas.supports(\"setLineDash\");b.Object||(b.Object=b.util.createClass({type:\"object\",originX:\"left\",originY:\"top\",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,cornerSize:12,transparentCorners:!0,hoverCursor:null,padding:0,borderColor:\"rgba(102,153,255,0.75)\",cornerColor:\"rgba(102,153,255,0.5)\",centeredScaling:!1,centeredRotation:!0,fill:\"rgb(0,0,0)\",fillRule:\"nonzero\",globalCompositeOperation:\"source-over\",backgroundColor:\"\",stroke:null,strokeWidth:1,strokeDashArray:null,strokeLineCap:\"butt\",strokeLineJoin:\"miter\",strokeMiterLimit:10,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,transformMatrix:null,minScaleLimit:.01,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,hasRotatingPoint:!0,rotatingPointOffset:40,perPixelTargetFind:!1,includeDefaultValues:!0,clipTo:null,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockUniScaling:!1,lockScalingFlip:!1,stateProperties:\"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor\".split(\" \"),initialize:function(a){a&&this.setOptions(a)},_initGradient:function(a){!a.fill||!a.fill.colorStops||a.fill instanceof b.Gradient||this.set(\"fill\",new b.Gradient(a.fill))},_initPattern:function(a){!a.fill||!a.fill.source||a.fill instanceof b.Pattern||this.set(\"fill\",new b.Pattern(a.fill)),!a.stroke||!a.stroke.source||a.stroke instanceof b.Pattern||this.set(\"stroke\",new b.Pattern(a.stroke))},_initClipping:function(a){if(a.clipTo&&\"string\"==typeof a.clipTo){var c=b.util.getFunctionBody(a.clipTo);\"undefined\"!=typeof c&&(this.clipTo=new Function(\"ctx\",c))}},setOptions:function(a){for(var b in a)this.set(b,a[b]);this._initGradient(a),this._initPattern(a),this._initClipping(a)},transform:function(a,b){this.group&&this.group.transform(a,b);var c=b?this._getLeftTopCoords():this.getCenterPoint();a.translate(c.x,c.y),a.rotate(f(this.angle)),a.scale(this.scaleX*(this.flipX?-1:1),this.scaleY*(this.flipY?-1:1))},toObject:function(a){var c=b.Object.NUM_FRACTION_DIGITS,e={type:this.type,originX:this.originX,originY:this.originY,left:d(this.left,c),top:d(this.top,c),width:d(this.width,c),height:d(this.height,c),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:d(this.strokeWidth,c),strokeDashArray:this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeLineJoin:this.strokeLineJoin,strokeMiterLimit:d(this.strokeMiterLimit,c),scaleX:d(this.scaleX,c),scaleY:d(this.scaleY,c),angle:d(this.getAngle(),c),flipX:this.flipX,flipY:this.flipY,opacity:d(this.opacity,c),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,clipTo:this.clipTo&&String(this.clipTo),backgroundColor:this.backgroundColor,fillRule:this.fillRule,globalCompositeOperation:this.globalCompositeOperation};return this.includeDefaultValues||(e=this._removeDefaultValues(e)),b.util.populateWithProperties(this,e,a),e},toDatalessObject:function(a){return this.toObject(a)},_removeDefaultValues:function(a){var c=b.util.getKlass(a.type).prototype,d=c.stateProperties;return d.forEach(function(b){a[b]===c[b]&&delete a[b]}),a},toString:function(){return\"#\"},get:function(a){return this[a]},_setObject:function(a){for(var b in a)this._set(b,a[b])},set:function(a,b){return\"object\"==typeof a?this._setObject(a):\"function\"==typeof b&&\"clipTo\"!==a?this._set(a,b(this.get(a))):this._set(a,b),this},_set:function(a,c){var e=\"scaleX\"===a||\"scaleY\"===a;return e&&(c=this._constrainScale(c)),\"scaleX\"===a&&c<0?(this.flipX=!this.flipX,c*=-1):\"scaleY\"===a&&c<0?(this.flipY=!this.flipY,c*=-1):\"width\"===a||\"height\"===a?this.minScaleLimit=d(Math.min(.1,1/Math.max(this.width,this.height)),2):\"shadow\"!==a||!c||c instanceof b.Shadow||(c=new b.Shadow(c)),this[a]=c,this},toggle:function(a){var b=this.get(a);return\"boolean\"==typeof b&&this.set(a,!b),this},setSourcePath:function(a){return this.sourcePath=a,this},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:[1,0,0,1,0,0]},render:function(a,c){0!==this.width&&0!==this.height&&this.visible&&(a.save(),this._setupCompositeOperation(a),c||this.transform(a),this._setStrokeStyles(a),this._setFillStyles(a),this.group&&\"path-group\"===this.group.type&&a.translate(-this.group.width/2,-this.group.height/2),this.transformMatrix&&a.transform.apply(a,this.transformMatrix),this._setOpacity(a),this._setShadow(a),this.clipTo&&b.util.clipContext(this,a),this._render(a,c),this.clipTo&&a.restore(),this._removeShadow(a),this._restoreCompositeOperation(a),a.restore())},_setOpacity:function(a){this.group&&this.group._setOpacity(a),a.globalAlpha*=this.opacity},_setStrokeStyles:function(a){this.stroke&&(a.lineWidth=this.strokeWidth,a.lineCap=this.strokeLineCap,a.lineJoin=this.strokeLineJoin,a.miterLimit=this.strokeMiterLimit,a.strokeStyle=this.stroke.toLive?this.stroke.toLive(a,this):this.stroke)},_setFillStyles:function(a){this.fill&&(a.fillStyle=this.fill.toLive?this.fill.toLive(a,this):this.fill)},_renderControls:function(a,c){var d=this.getViewportTransform();if(a.save(),this.active&&!c){var e;this.group&&(e=b.util.transformPoint(this.group.getCenterPoint(),d),a.translate(e.x,e.y),a.rotate(f(this.group.angle))),e=b.util.transformPoint(this.getCenterPoint(),d,null!=this.group),this.group&&(e.x*=this.group.scaleX,e.y*=this.group.scaleY),a.translate(e.x,e.y),a.rotate(f(this.angle)),this.drawBorders(a),this.drawControls(a)}a.restore()},_setShadow:function(a){this.shadow&&(a.shadowColor=this.shadow.color,a.shadowBlur=this.shadow.blur,a.shadowOffsetX=this.shadow.offsetX,a.shadowOffsetY=this.shadow.offsetY)},_removeShadow:function(a){this.shadow&&(a.shadowColor=\"\",a.shadowBlur=a.shadowOffsetX=a.shadowOffsetY=0)},_renderFill:function(a){if(this.fill){if(a.save(),this.fill.gradientTransform){var b=this.fill.gradientTransform;a.transform.apply(a,b)}this.fill.toLive&&a.translate(-this.width/2+this.fill.offsetX||0,-this.height/2+this.fill.offsetY||0),\"evenodd\"===this.fillRule?a.fill(\"evenodd\"):a.fill(),a.restore(),this.shadow&&!this.shadow.affectStroke&&this._removeShadow(a)}},_renderStroke:function(a){if(this.stroke&&0!==this.strokeWidth){if(a.save(),this.strokeDashArray)1&this.strokeDashArray.length&&this.strokeDashArray.push.apply(this.strokeDashArray,this.strokeDashArray),g?(a.setLineDash(this.strokeDashArray),this._stroke&&this._stroke(a)):this._renderDashedStroke&&this._renderDashedStroke(a),a.stroke();else{if(this.stroke.gradientTransform){var b=this.stroke.gradientTransform;a.transform.apply(a,b)}this._stroke?this._stroke(a):a.stroke()}this._removeShadow(a),a.restore()}},clone:function(a,c){return this.constructor.fromObject?this.constructor.fromObject(this.toObject(c),a):new b.Object(this.toObject(c))},cloneAsImage:function(a){var c=this.toDataURL();return b.util.loadImage(c,function(c){a&&a(new b.Image(c))}),this},toDataURL:function(a){a||(a={});var c=b.util.createCanvasElement(),d=this.getBoundingRect();c.width=d.width,c.height=d.height,b.util.wrapElement(c,\"div\");var e=new b.Canvas(c);\"jpg\"===a.format&&(a.format=\"jpeg\"),\"jpeg\"===a.format&&(e.backgroundColor=\"#fff\");var f={active:this.get(\"active\"),left:this.getLeft(),top:this.getTop()};this.set(\"active\",!1),this.setPositionByOrigin(new b.Point(c.width/2,c.height/2),\"center\",\"center\");var g=this.canvas;e.add(this);var h=e.toDataURL(a);return this.set(f).setCoords(),this.canvas=g,e.dispose(),e=null,h},isType:function(a){return this.type===a},complexity:function(){return 0},toJSON:function(a){return this.toObject(a)},setGradient:function(a,c){c||(c={});var d={colorStops:[]};d.type=c.type||(c.r1||c.r2?\"radial\":\"linear\"),d.coords={x1:c.x1,y1:c.y1,x2:c.x2,y2:c.y2},(c.r1||c.r2)&&(d.coords.r1=c.r1,d.coords.r2=c.r2);for(var e in c.colorStops){var f=new b.Color(c.colorStops[e]);d.colorStops.push({offset:e,color:f.toRgb(),opacity:f.getAlpha()})}return this.set(a,b.Gradient.forObject(this,d))},setPatternFill:function(a){return this.set(\"fill\",new b.Pattern(a))},setShadow:function(a){return this.set(\"shadow\",a?new b.Shadow(a):null)},setColor:function(a){return this.set(\"fill\",a),this},setAngle:function(a){var b=(\"center\"!==this.originX||\"center\"!==this.originY)&&this.centeredRotation;return b&&this._setOriginToCenter(),this.set(\"angle\",a),b&&this._resetOrigin(),this},centerH:function(){return this.canvas.centerObjectH(this),this},centerV:function(){return this.canvas.centerObjectV(this),this},center:function(){return this.canvas.centerObject(this),this},remove:function(){return this.canvas.remove(this),this},getLocalPointer:function(a,b){b=b||this.canvas.getPointer(a);var c=this.translateToOriginPoint(this.getCenterPoint(),\"left\",\"top\");return{x:b.x-c.x,y:b.y-c.y}},_setupCompositeOperation:function(a){this.globalCompositeOperation&&(this._prevGlobalCompositeOperation=a.globalCompositeOperation,a.globalCompositeOperation=this.globalCompositeOperation)},_restoreCompositeOperation:function(a){this.globalCompositeOperation&&this._prevGlobalCompositeOperation&&(a.globalCompositeOperation=this._prevGlobalCompositeOperation)}}),b.util.createAccessors(b.Object),b.Object.prototype.rotate=b.Object.prototype.setAngle,c(b.Object.prototype,b.Observable),b.Object.NUM_FRACTION_DIGITS=2,b.Object.__uid=0)}(\"undefined\"!=typeof exports?exports:this),function(){var a=fabric.util.degreesToRadians;fabric.util.object.extend(fabric.Object.prototype,{translateToCenterPoint:function(b,c,d){var e=b.x,f=b.y,g=this.stroke?this.strokeWidth:0;return\"left\"===c?e=b.x+(this.getWidth()+g*this.scaleX)/2:\"right\"===c&&(e=b.x-(this.getWidth()+g*this.scaleX)/2),\"top\"===d?f=b.y+(this.getHeight()+g*this.scaleY)/2:\"bottom\"===d&&(f=b.y-(this.getHeight()+g*this.scaleY)/2),fabric.util.rotatePoint(new fabric.Point(e,f),b,a(this.angle))},translateToOriginPoint:function(b,c,d){var e=b.x,f=b.y,g=this.stroke?this.strokeWidth:0;return\"left\"===c?e=b.x-(this.getWidth()+g*this.scaleX)/2:\"right\"===c&&(e=b.x+(this.getWidth()+g*this.scaleX)/2),\"top\"===d?f=b.y-(this.getHeight()+g*this.scaleY)/2:\"bottom\"===d&&(f=b.y+(this.getHeight()+g*this.scaleY)/2),fabric.util.rotatePoint(new fabric.Point(e,f),b,a(this.angle))},getCenterPoint:function(){var a=new fabric.Point(this.left,this.top);return this.translateToCenterPoint(a,this.originX,this.originY)},getPointByOrigin:function(a,b){var c=this.getCenterPoint();return this.translateToOriginPoint(c,a,b)},toLocalPoint:function(b,c,d){var g,h,e=this.getCenterPoint(),f=this.stroke?this.strokeWidth:0;return c&&d?(g=\"left\"===c?e.x-(this.getWidth()+f*this.scaleX)/2:\"right\"===c?e.x+(this.getWidth()+f*this.scaleX)/2:e.x,h=\"top\"===d?e.y-(this.getHeight()+f*this.scaleY)/2:\"bottom\"===d?e.y+(this.getHeight()+f*this.scaleY)/2:e.y):(g=this.left,h=this.top),fabric.util.rotatePoint(new fabric.Point(b.x,b.y),e,-a(this.angle)).subtractEquals(new fabric.Point(g,h))},setPositionByOrigin:function(a,b,c){var d=this.translateToCenterPoint(a,b,c),e=this.translateToOriginPoint(d,this.originX,this.originY);this.set(\"left\",e.x),this.set(\"top\",e.y)},adjustPosition:function(b){var c=a(this.angle),d=this.getWidth()/2,e=Math.cos(c)*d,f=Math.sin(c)*d,g=this.getWidth(),h=Math.cos(c)*g,i=Math.sin(c)*g;\"center\"===this.originX&&\"left\"===b||\"right\"===this.originX&&\"center\"===b?(this.left-=e,this.top-=f):\"left\"===this.originX&&\"center\"===b||\"center\"===this.originX&&\"right\"===b?(this.left+=e,this.top+=f):\"left\"===this.originX&&\"right\"===b?(this.left+=h,this.top+=i):\"right\"===this.originX&&\"left\"===b&&(this.left-=h,this.top-=i),this.setCoords(),this.originX=b},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var a=this.getCenterPoint();this.originX=\"center\",this.originY=\"center\",this.left=a.x,this.top=a.y},_resetOrigin:function(){var a=this.translateToOriginPoint(this.getCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=a.x,this.top=a.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getCenterPoint(),\"left\",\"center\")}})}(),function(){var a=fabric.util.degreesToRadians;fabric.util.object.extend(fabric.Object.prototype,{oCoords:null,intersectsWithRect:function(a,b){var c=this.oCoords,d=new fabric.Point(c.tl.x,c.tl.y),e=new fabric.Point(c.tr.x,c.tr.y),f=new fabric.Point(c.bl.x,c.bl.y),g=new fabric.Point(c.br.x,c.br.y),h=fabric.Intersection.intersectPolygonRectangle([d,e,g,f],a,b);return\"Intersection\"===h.status},intersectsWithObject:function(a){function b(a){return{tl:new fabric.Point(a.tl.x,a.tl.y),tr:new fabric.Point(a.tr.x,a.tr.y),bl:new fabric.Point(a.bl.x,a.bl.y),br:new fabric.Point(a.br.x,a.br.y)}}var c=b(this.oCoords),d=b(a.oCoords),e=fabric.Intersection.intersectPolygonPolygon([c.tl,c.tr,c.br,c.bl],[d.tl,d.tr,d.br,d.bl]);return\"Intersection\"===e.status},isContainedWithinObject:function(a){var b=a.getBoundingRect(),c=new fabric.Point(b.left,b.top),d=new fabric.Point(b.left+b.width,b.top+b.height);return this.isContainedWithinRect(c,d)},isContainedWithinRect:function(a,b){var c=this.getBoundingRect();return c.left>=a.x&&c.left+c.width<=b.x&&c.top>=a.y&&c.top+c.height<=b.y},containsPoint:function(a){var b=this._getImageLines(this.oCoords),c=this._findCrossPoints(a,b);return 0!==c&&c%2===1},_getImageLines:function(a){return{topline:{o:a.tl,d:a.tr},rightline:{o:a.tr,d:a.br},bottomline:{o:a.br,d:a.bl},leftline:{o:a.bl,d:a.tl}}},_findCrossPoints:function(a,b){var c,d,e,f,g,h,j,i=0;for(var k in b)if(j=b[k],!(j.o.y=a.y&&j.d.y>=a.y||(j.o.x===j.d.x&&j.o.x>=a.x?(g=j.o.x,h=a.y):(c=0,d=(j.d.y-j.o.y)/(j.d.x-j.o.x),e=a.y-c*a.x,f=j.o.y-d*j.o.x,g=-(e-f)/(c-d),h=e+c*g),g>=a.x&&(i+=1),2!==i)))break;return i},getBoundingRectWidth:function(){return this.getBoundingRect().width},getBoundingRectHeight:function(){return this.getBoundingRect().height},getBoundingRect:function(){this.oCoords||this.setCoords();var a=[this.oCoords.tl.x,this.oCoords.tr.x,this.oCoords.br.x,this.oCoords.bl.x],b=fabric.util.array.min(a),c=fabric.util.array.max(a),d=Math.abs(b-c),e=[this.oCoords.tl.y,this.oCoords.tr.y,this.oCoords.br.y,this.oCoords.bl.y],f=fabric.util.array.min(e),g=fabric.util.array.max(e),h=Math.abs(f-g);return{left:b,top:f,width:d,height:h}},getWidth:function(){return this.width*this.scaleX},getHeight:function(){return this.height*this.scaleY},_constrainScale:function(a){return Math.abs(a)1?this.strokeWidth:0,c=a(this.angle),d=this.getViewportTransform(),e=function(a){return fabric.util.transformPoint(a,d)},f=this.width,g=this.height,h=\"round\"===this.strokeLineCap||\"square\"===this.strokeLineCap,i=\"line\"===this.type&&1===this.width,j=\"line\"===this.type&&1===this.height,k=h&&j||\"line\"!==this.type,l=h&&i||\"line\"!==this.type;i?f=b:j&&(g=b),k&&(f+=b),l&&(g+=b),this.currentWidth=f*this.scaleX,this.currentHeight=g*this.scaleY,this.currentWidth<0&&(this.currentWidth=Math.abs(this.currentWidth));var m=Math.sqrt(Math.pow(this.currentWidth/2,2)+Math.pow(this.currentHeight/2,2)),n=Math.atan(isFinite(this.currentHeight/this.currentWidth)?this.currentHeight/this.currentWidth:0),o=Math.cos(n+c)*m,p=Math.sin(n+c)*m,q=Math.sin(c),r=Math.cos(c),s=this.getCenterPoint(),t=new fabric.Point(this.currentWidth,this.currentHeight),u=new fabric.Point(s.x-o,s.y-p),v=new fabric.Point(u.x+t.x*r,u.y+t.x*q),w=new fabric.Point(u.x-t.y*q,u.y+t.y*r),x=new fabric.Point(u.x+t.x/2*r,u.y+t.x/2*q),y=e(u),z=e(v),A=e(new fabric.Point(v.x-t.y*q,v.y+t.y*r)),B=e(w),C=e(new fabric.Point(u.x-t.y/2*q,u.y+t.y/2*r)),D=e(x),E=e(new fabric.Point(v.x-t.y/2*q,v.y+t.y/2*r)),F=e(new fabric.Point(w.x+t.x/2*r,w.y+t.x/2*q)),G=e(new fabric.Point(x.x,x.y)),H=Math.cos(n+c)*this.padding*Math.sqrt(2),I=Math.sin(n+c)*this.padding*Math.sqrt(2);return y=y.add(new fabric.Point(-H,-I)),z=z.add(new fabric.Point(I,-H)),A=A.add(new fabric.Point(H,I)),B=B.add(new fabric.Point(-I,H)),C=C.add(new fabric.Point((-H-I)/2,(-I+H)/2)),D=D.add(new fabric.Point((I-H)/2,-(I+H)/2)),E=E.add(new fabric.Point((I+H)/2,(I-H)/2)),F=F.add(new fabric.Point((H-I)/2,(H+I)/2)),G=G.add(new fabric.Point((I-H)/2,-(I+H)/2)),this.oCoords={tl:y,tr:z,br:A,bl:B,ml:C,mt:D,mr:E,mb:F,mtr:G},this._setCornerCoords&&this._setCornerCoords(),this}})}(),fabric.util.object.extend(fabric.Object.prototype,{sendToBack:function(){return this.group?fabric.StaticCanvas.prototype.sendToBack.call(this.group,this):this.canvas.sendToBack(this),this},bringToFront:function(){return this.group?fabric.StaticCanvas.prototype.bringToFront.call(this.group,this):this.canvas.bringToFront(this),this},sendBackwards:function(a){return this.group?fabric.StaticCanvas.prototype.sendBackwards.call(this.group,this,a):this.canvas.sendBackwards(this,a),this},bringForward:function(a){return this.group?fabric.StaticCanvas.prototype.bringForward.call(this.group,this,a):this.canvas.bringForward(this,a),this},moveTo:function(a){return this.group?fabric.StaticCanvas.prototype.moveTo.call(this.group,this,a):this.canvas.moveTo(this,a),this}}),fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(){var a=this.fill?this.fill.toLive?\"url(#SVGID_\"+this.fill.id+\")\":this.fill:\"none\",b=this.fillRule,c=this.stroke?this.stroke.toLive?\"url(#SVGID_\"+this.stroke.id+\")\":this.stroke:\"none\",d=this.strokeWidth?this.strokeWidth:\"0\",e=this.strokeDashArray?this.strokeDashArray.join(\" \"):\"\",f=this.strokeLineCap?this.strokeLineCap:\"butt\",g=this.strokeLineJoin?this.strokeLineJoin:\"miter\",h=this.strokeMiterLimit?this.strokeMiterLimit:\"4\",i=\"undefined\"!=typeof this.opacity?this.opacity:\"1\",j=this.visible?\"\":\" visibility: hidden;\",k=this.shadow&&\"text\"!==this.type?\"filter: url(#SVGID_\"+this.shadow.id+\");\":\"\";return[\"stroke: \",c,\"; \",\"stroke-width: \",d,\"; \",\"stroke-dasharray: \",e,\"; \",\"stroke-linecap: \",f,\"; \",\"stroke-linejoin: \",g,\"; \",\"stroke-miterlimit: \",h,\"; \",\"fill: \",a,\"; \",\"fill-rule: \",b,\"; \",\"opacity: \",i,\";\",k,j].join(\"\")},getSvgTransform:function(){if(this.group&&\"path-group\"===this.group.type)return\"\";var a=fabric.util.toFixed,b=this.getAngle(),c=!this.canvas||this.canvas.svgViewportTransformation?this.getViewportTransform():[1,0,0,1,0,0],d=fabric.util.transformPoint(this.getCenterPoint(),c),e=fabric.Object.NUM_FRACTION_DIGITS,f=\"path-group\"===this.type?\"\":\"translate(\"+a(d.x,e)+\" \"+a(d.y,e)+\")\",g=0!==b?\" rotate(\"+a(b,e)+\")\":\"\",h=1===this.scaleX&&1===this.scaleY&&1===c[0]&&1===c[3]?\"\":\" scale(\"+a(this.scaleX*c[0],e)+\" \"+a(this.scaleY*c[3],e)+\")\",i=\"path-group\"===this.type?this.width*c[0]:0,j=this.flipX?\" matrix(-1 0 0 1 \"+i+\" 0) \":\"\",k=\"path-group\"===this.type?this.height*c[3]:0,l=this.flipY?\" matrix(1 0 0 -1 0 \"+k+\")\":\"\";return[f,g,h,j,l].join(\"\")},getSvgTransformMatrix:function(){return this.transformMatrix?\" matrix(\"+this.transformMatrix.join(\" \")+\")\":\"\"},_createBaseSVGMarkup:function(){var a=[];return this.fill&&this.fill.toLive&&a.push(this.fill.toSVG(this,!1)),this.stroke&&this.stroke.toLive&&a.push(this.stroke.toSVG(this,!1)),this.shadow&&a.push(this.shadow.toSVG(this)),a}}),fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(){return this.stateProperties.some(function(a){return this.get(a)!==this.originalState[a]},this)},saveState:function(a){return this.stateProperties.forEach(function(a){this.originalState[a]=this.get(a)},this),a&&a.stateProperties&&a.stateProperties.forEach(function(a){this.originalState[a]=this.get(a)},this),this},setupState:function(){return this.originalState={},this.saveState(),this}}),function(){var a=fabric.util.degreesToRadians,b=function(){return\"undefined\"!=typeof G_vmlCanvasManager};fabric.util.object.extend(fabric.Object.prototype,{_controlsVisibility:null,_findTargetCorner:function(a){if(!this.hasControls||!this.active)return!1;var d,e,b=a.x,c=a.y;for(var f in this.oCoords)if(this.isControlVisible(f)&&(\"mtr\"!==f||this.hasRotatingPoint)&&(!this.get(\"lockUniScaling\")||\"mt\"!==f&&\"mr\"!==f&&\"mb\"!==f&&\"ml\"!==f)&&(e=this._getImageLines(this.oCoords[f].corner),d=this._findCrossPoints({x:b,y:c},e),0!==d&&d%2===1))return this.__corner=f,f;return!1},_setCornerCoords:function(){var b=this.oCoords,c=a(this.angle),d=a(45-this.angle),e=Math.sqrt(2*Math.pow(this.cornerSize,2))/2,f=e*Math.cos(d),g=e*Math.sin(d),h=Math.sin(c),i=Math.cos(c);b.tl.corner={tl:{x:b.tl.x-g,y:b.tl.y-f},tr:{x:b.tl.x+f,y:b.tl.y-g},bl:{x:b.tl.x-f,y:b.tl.y+g},br:{x:b.tl.x+g,y:b.tl.y+f}},b.tr.corner={tl:{x:b.tr.x-g,y:b.tr.y-f},tr:{x:b.tr.x+f,y:b.tr.y-g},br:{x:b.tr.x+g,y:b.tr.y+f},bl:{x:b.tr.x-f,y:b.tr.y+g}},b.bl.corner={tl:{x:b.bl.x-g,y:b.bl.y-f},bl:{x:b.bl.x-f,y:b.bl.y+g},br:{x:b.bl.x+g,y:b.bl.y+f},tr:{x:b.bl.x+f,y:b.bl.y-g}},b.br.corner={tr:{x:b.br.x+f,y:b.br.y-g},bl:{x:b.br.x-f,y:b.br.y+g},br:{x:b.br.x+g,y:b.br.y+f},tl:{x:b.br.x-g,y:b.br.y-f}},b.ml.corner={tl:{x:b.ml.x-g,y:b.ml.y-f},tr:{x:b.ml.x+f,y:b.ml.y-g},bl:{x:b.ml.x-f,y:b.ml.y+g},br:{x:b.ml.x+g,y:b.ml.y+f}},b.mt.corner={tl:{x:b.mt.x-g,y:b.mt.y-f},tr:{x:b.mt.x+f,y:b.mt.y-g},bl:{x:b.mt.x-f,y:b.mt.y+g},br:{x:b.mt.x+g,y:b.mt.y+f}},b.mr.corner={tl:{x:b.mr.x-g,y:b.mr.y-f},tr:{x:b.mr.x+f,y:b.mr.y-g},bl:{x:b.mr.x-f,y:b.mr.y+g},br:{x:b.mr.x+g,y:b.mr.y+f}},b.mb.corner={tl:{x:b.mb.x-g,y:b.mb.y-f},tr:{x:b.mb.x+f,y:b.mb.y-g},bl:{x:b.mb.x-f,y:b.mb.y+g},br:{x:b.mb.x+g,y:b.mb.y+f}},b.mtr.corner={tl:{x:b.mtr.x-g+h*this.rotatingPointOffset,y:b.mtr.y-f-i*this.rotatingPointOffset},tr:{x:b.mtr.x+f+h*this.rotatingPointOffset,y:b.mtr.y-g-i*this.rotatingPointOffset},bl:{x:b.mtr.x-f+h*this.rotatingPointOffset,y:b.mtr.y+g-i*this.rotatingPointOffset},br:{x:b.mtr.x+g+h*this.rotatingPointOffset,y:b.mtr.y+f-i*this.rotatingPointOffset}}},drawBorders:function(a){if(!this.hasBorders)return this;var b=this.padding,c=2*b,d=this.getViewportTransform();a.save(),a.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,a.strokeStyle=this.borderColor;var e=1/this._constrainScale(this.scaleX),f=1/this._constrainScale(this.scaleY);a.lineWidth=1/this.borderScaleFactor;var g=this.getWidth(),h=this.getHeight(),i=this.strokeWidth>1?this.strokeWidth:0,j=\"round\"===this.strokeLineCap||\"square\"===this.strokeLineCap,k=\"line\"===this.type&&1===this.width,l=\"line\"===this.type&&1===this.height,m=j&&l||\"line\"!==this.type,n=j&&k||\"line\"!==this.type;k?g=i/e:l&&(h=i/f),m&&(g+=i/e),n&&(h+=i/f);var o=fabric.util.transformPoint(new fabric.Point(g,h),d,!0),p=o.x,q=o.y;if(this.group&&(p*=this.group.scaleX,q*=this.group.scaleY),a.strokeRect(~~(-(p/2)-b)-.5,~~(-(q/2)-b)-.5,~~(p+c)+1,~~(q+c)+1),this.hasRotatingPoint&&this.isControlVisible(\"mtr\")&&!this.get(\"lockRotation\")&&this.hasControls){var r=(-q-2*b)/2;a.beginPath(),a.moveTo(0,r),a.lineTo(0,r-this.rotatingPointOffset),a.closePath(),a.stroke()}return a.restore(),this},drawControls:function(a){if(!this.hasControls)return this;var b=this.cornerSize,c=b/2,d=this.getViewportTransform(),e=this.strokeWidth>1?this.strokeWidth:0,f=this.width,g=this.height,h=\"round\"===this.strokeLineCap||\"square\"===this.strokeLineCap,i=\"line\"===this.type&&1===this.width,j=\"line\"===this.type&&1===this.height,k=h&&j||\"line\"!==this.type,l=h&&i||\"line\"!==this.type;i?f=e:j&&(g=e),k&&(f+=e),l&&(g+=e),f*=this.scaleX,g*=this.scaleY;var m=fabric.util.transformPoint(new fabric.Point(f,g),d,!0),n=m.x,o=m.y,p=-(n/2),q=-(o/2),r=this.padding,s=c,t=c-b,u=this.transparentCorners?\"strokeRect\":\"fillRect\";return a.save(),a.lineWidth=1,a.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,a.strokeStyle=a.fillStyle=this.cornerColor,this._drawControl(\"tl\",a,u,p-s-r,q-s-r),this._drawControl(\"tr\",a,u,p+n-s+r,q-s-r),this._drawControl(\"bl\",a,u,p-s-r,q+o+t+r),this._drawControl(\"br\",a,u,p+n+t+r,q+o+t+r),this.get(\"lockUniScaling\")||(this._drawControl(\"mt\",a,u,p+n/2-s,q-s-r),this._drawControl(\"mb\",a,u,p+n/2-s,q+o+t+r),this._drawControl(\"mr\",a,u,p+n+t+r,q+o/2-s),this._drawControl(\"ml\",a,u,p-s-r,q+o/2-s)),this.hasRotatingPoint&&this._drawControl(\"mtr\",a,u,p+n/2-s,q-this.rotatingPointOffset-this.cornerSize/2-r),a.restore(),this},_drawControl:function(a,c,d,e,f){var g=this.cornerSize;this.isControlVisible(a)&&(b()||this.transparentCorners||c.clearRect(e,f,g,g),c[d](e,f,g,g))},isControlVisible:function(a){return this._getControlsVisibility()[a]},setControlVisible:function(a,b){return this._getControlsVisibility()[a]=b,this},setControlsVisibility:function(a){a||(a={});for(var b in a)this.setControlVisible(b,a[b]);return this},_getControlsVisibility:function(){return this._controlsVisibility||(this._controlsVisibility={tl:!0,tr:!0,br:!0,bl:!0,ml:!0,mt:!0,mr:!0,mb:!0,mtr:!0}),this._controlsVisibility}})}(),fabric.util.object.extend(fabric.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(a,b){b=b||{};var c=function(){},d=b.onComplete||c,e=b.onChange||c,f=this;return fabric.util.animate({startValue:a.get(\"left\"),endValue:this.getCenter().left,duration:this.FX_DURATION,onChange:function(b){a.set(\"left\",b),f.renderAll(),e()},onComplete:function(){a.setCoords(),d()}}),this},fxCenterObjectV:function(a,b){b=b||{};var c=function(){},d=b.onComplete||c,e=b.onChange||c,f=this;return fabric.util.animate({startValue:a.get(\"top\"),endValue:this.getCenter().top,duration:this.FX_DURATION,onChange:function(b){a.set(\"top\",b),f.renderAll(),e()},onComplete:function(){a.setCoords(),d()}}),this},fxRemove:function(a,b){b=b||{};var c=function(){},d=b.onComplete||c,e=b.onChange||c,f=this;return fabric.util.animate({startValue:a.get(\"opacity\"),endValue:0,duration:this.FX_DURATION,onStart:function(){a.set(\"active\",!1)},onChange:function(b){a.set(\"opacity\",b),f.renderAll(),e()},onComplete:function(){f.remove(a),d()}}),this}}),fabric.util.object.extend(fabric.Object.prototype,{animate:function(){if(arguments[0]&&\"object\"==typeof arguments[0]){var b,c,a=[];for(b in arguments[0])a.push(b);for(var d=0,e=a.length;d\\n'),a?a(b.join(\"\")):b.join(\"\")},complexity:function(){return 1}}),b.Line.ATTRIBUTE_NAMES=b.SHARED_ATTRIBUTES.concat(\"x1 y1 x2 y2\".split(\" \")),b.Line.fromElement=function(a,d){var e=b.parseAttributes(a,b.Line.ATTRIBUTE_NAMES),f=[e.x1||0,e.y1||0,e.x2||0,e.y2||0];return new b.Line(f,c(e,d))},void(b.Line.fromObject=function(a){var c=[a.x1,a.y1,a.x2,a.y2];return new b.Line(c,a)}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";function e(a){return\"radius\"in a&&a.radius>0}var b=a.fabric||(a.fabric={}),c=Math.PI,d=b.util.object.extend;return b.Circle?void b.warn(\"fabric.Circle is already defined.\"):(b.Circle=b.util.createClass(b.Object,{type:\"circle\",radius:0,startAngle:0,endAngle:2*c,initialize:function(a){a=a||{},this.callSuper(\"initialize\",a),this.set(\"radius\",a.radius||0),this.startAngle=a.startAngle||this.startAngle,this.endAngle=a.endAngle||this.endAngle},_set:function(a,b){return this.callSuper(\"_set\",a,b),\"radius\"===a&&this.setRadius(b),this},toObject:function(a){return d(this.callSuper(\"toObject\",a),{radius:this.get(\"radius\"),startAngle:this.startAngle,endAngle:this.endAngle})},toSVG:function(a){var b=this._createBaseSVGMarkup(),d=0,e=0,f=(this.endAngle-this.startAngle)%(2*c);if(0===f)this.group&&\"path-group\"===this.group.type&&(d=this.left+this.radius,e=this.top+this.radius),b.push(\"\\n');else{var g=Math.cos(this.startAngle)*this.radius,h=Math.sin(this.startAngle)*this.radius,i=Math.cos(this.endAngle)*this.radius,j=Math.sin(this.endAngle)*this.radius,k=f>c?\"1\":\"0\";b.push('\\n')}return a?a(b.join(\"\")):b.join(\"\")},_render:function(a,b){a.beginPath(),a.arc(b?this.left+this.radius:0,b?this.top+this.radius:0,this.radius,this.startAngle,this.endAngle,!1),this._renderFill(a),this._renderStroke(a)},getRadiusX:function(){return this.get(\"radius\")*this.get(\"scaleX\")},getRadiusY:function(){return this.get(\"radius\")*this.get(\"scaleY\")},setRadius:function(a){this.radius=a,this.set(\"width\",2*a).set(\"height\",2*a)},complexity:function(){return 1}}),b.Circle.ATTRIBUTE_NAMES=b.SHARED_ATTRIBUTES.concat(\"cx cy r\".split(\" \")),b.Circle.fromElement=function(a,c){c||(c={});var f=b.parseAttributes(a,b.Circle.ATTRIBUTE_NAMES);if(!e(f))throw new Error(\"value of `r` attribute is required and can not be negative\");f.left=f.left||0,f.top=f.top||0;var g=new b.Circle(d(f,c));return g.left-=g.radius,g.top-=g.radius,g},void(b.Circle.fromObject=function(a){return new b.Circle(a)}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={});return b.Triangle?void b.warn(\"fabric.Triangle is already defined\"):(b.Triangle=b.util.createClass(b.Object,{type:\"triangle\",initialize:function(a){a=a||{},this.callSuper(\"initialize\",a),this.set(\"width\",a.width||100).set(\"height\",a.height||100)},_render:function(a){var b=this.width/2,c=this.height/2;a.beginPath(),a.moveTo(-b,c),a.lineTo(0,-c),a.lineTo(b,c),a.closePath(),this._renderFill(a),this._renderStroke(a)},_renderDashedStroke:function(a){var c=this.width/2,d=this.height/2;a.beginPath(),b.util.drawDashedLine(a,-c,d,0,-d,this.strokeDashArray),b.util.drawDashedLine(a,0,-d,c,d,this.strokeDashArray),b.util.drawDashedLine(a,c,d,-c,d,this.strokeDashArray),a.closePath()},toSVG:function(a){var b=this._createBaseSVGMarkup(),c=this.width/2,d=this.height/2,e=[-c+\" \"+d,\"0 \"+-d,c+\" \"+d].join(\",\");return b.push(\"'),a?a(b.join(\"\")):b.join(\"\")},complexity:function(){return 1}}),void(b.Triangle.fromObject=function(a){return new b.Triangle(a)}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=2*Math.PI,d=b.util.object.extend;return b.Ellipse?void b.warn(\"fabric.Ellipse is already defined.\"):(b.Ellipse=b.util.createClass(b.Object,{type:\"ellipse\",rx:0,ry:0,initialize:function(a){a=a||{},this.callSuper(\"initialize\",a),this.set(\"rx\",a.rx||0),this.set(\"ry\",a.ry||0)},_set:function(a,b){switch(this.callSuper(\"_set\",a,b),a){case\"rx\":this.rx=b,this.set(\"width\",2*b);break;case\"ry\":this.ry=b,this.set(\"height\",2*b)}return this},getRx:function(){return this.get(\"rx\")*this.get(\"scaleX\")},getRy:function(){return this.get(\"ry\")*this.get(\"scaleY\")},toObject:function(a){return d(this.callSuper(\"toObject\",a),{rx:this.get(\"rx\"),ry:this.get(\"ry\")})},toSVG:function(a){var b=this._createBaseSVGMarkup(),c=0,d=0;return this.group&&\"path-group\"===this.group.type&&(c=this.left+this.rx,d=this.top+this.ry),b.push(\"\\n'),a?a(b.join(\"\")):b.join(\"\")},_render:function(a,b){a.beginPath(),a.save(),a.transform(1,0,0,this.ry/this.rx,0,0),a.arc(b?this.left+this.rx:0,b?(this.top+this.ry)*this.rx/this.ry:0,this.rx,0,c,!1),a.restore(),this._renderFill(a),this._renderStroke(a)},complexity:function(){return 1}}),b.Ellipse.ATTRIBUTE_NAMES=b.SHARED_ATTRIBUTES.concat(\"cx cy rx ry\".split(\" \")),b.Ellipse.fromElement=function(a,c){c||(c={});var e=b.parseAttributes(a,b.Ellipse.ATTRIBUTE_NAMES);e.left=e.left||0,e.top=e.top||0;var f=new b.Ellipse(d(e,c));return f.top-=f.ry,f.left-=f.rx,f},void(b.Ellipse.fromObject=function(a){return new b.Ellipse(a)}))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=b.util.object.extend;if(b.Rect)return void console.warn(\"fabric.Rect is already defined\");var d=b.Object.prototype.stateProperties.concat();d.push(\"rx\",\"ry\",\"x\",\"y\"),b.Rect=b.util.createClass(b.Object,{stateProperties:d,type:\"rect\",rx:0,ry:0,strokeDashArray:null,initialize:function(a){a=a||{},this.callSuper(\"initialize\",a),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(a,b){if(1===this.width&&1===this.height)return void a.fillRect(0,0,1,1);var c=this.rx?Math.min(this.rx,this.width/2):0,d=this.ry?Math.min(this.ry,this.height/2):0,e=this.width,f=this.height,g=b?this.left:-this.width/2,h=b?this.top:-this.height/2,i=0!==c||0!==d,j=.4477152502;a.beginPath(),a.moveTo(g+c,h),a.lineTo(g+e-c,h),i&&a.bezierCurveTo(g+e-j*c,h,g+e,h+j*d,g+e,h+d),a.lineTo(g+e,h+f-d),i&&a.bezierCurveTo(g+e,h+f-j*d,g+e-j*c,h+f,g+e-c,h+f),a.lineTo(g+c,h+f),i&&a.bezierCurveTo(g+j*c,h+f,g,h+f-j*d,g,h+f-d),a.lineTo(g,h+d),i&&a.bezierCurveTo(g,h+j*d,g+j*c,h,g+c,h),a.closePath(),this._renderFill(a),this._renderStroke(a)},_renderDashedStroke:function(a){var c=-this.width/2,d=-this.height/2,e=this.width,f=this.height;a.beginPath(),b.util.drawDashedLine(a,c,d,c+e,d,this.strokeDashArray),b.util.drawDashedLine(a,c+e,d,c+e,d+f,this.strokeDashArray),b.util.drawDashedLine(a,c+e,d+f,c,d+f,this.strokeDashArray),b.util.drawDashedLine(a,c,d+f,c,d,this.strokeDashArray),a.closePath()},toObject:function(a){var b=c(this.callSuper(\"toObject\",a),{rx:this.get(\"rx\")||0,ry:this.get(\"ry\")||0});return this.includeDefaultValues||this._removeDefaultValues(b),b},toSVG:function(a){var b=this._createBaseSVGMarkup(),c=this.left,d=this.top;return this.group&&\"path-group\"===this.group.type||(c=-this.width/2,d=-this.height/2),b.push(\"\\n'),a?a(b.join(\"\")):b.join(\"\")},complexity:function(){return 1}}),b.Rect.ATTRIBUTE_NAMES=b.SHARED_ATTRIBUTES.concat(\"x y rx ry width height\".split(\" \")),b.Rect.fromElement=function(a,d){if(!a)return null;d=d||{};var e=b.parseAttributes(a,b.Rect.ATTRIBUTE_NAMES);return e.left=e.left||0,e.top=e.top||0,new b.Rect(c(d?b.util.object.clone(d):{},e))},b.Rect.fromObject=function(a){return new b.Rect(a)}}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={});return b.Polyline?void b.warn(\"fabric.Polyline is already defined\"):(b.Polyline=b.util.createClass(b.Object,{type:\"polyline\",points:null,minX:0,minY:0,initialize:function(a,c){return b.Polygon.prototype.initialize.call(this,a,c)},_calcDimensions:function(){return b.Polygon.prototype._calcDimensions.call(this)},_applyPointOffset:function(){return b.Polygon.prototype._applyPointOffset.call(this)},toObject:function(a){return b.Polygon.prototype.toObject.call(this,a)},toSVG:function(a){return b.Polygon.prototype.toSVG.call(this,a)},_render:function(a){b.Polygon.prototype.commonRender.call(this,a),this._renderFill(a),this._renderStroke(a)},_renderDashedStroke:function(a){var c,d;a.beginPath();for(var e=0,f=this.points.length;e\\n'),a?a(c.join(\"\")):c.join(\"\")},_render:function(a){this.commonRender(a),this._renderFill(a),(this.stroke||this.strokeDashArray)&&(a.closePath(),this._renderStroke(a))},commonRender:function(a){var b;a.beginPath(),this._applyPointOffset&&(this.group&&\"path-group\"===this.group.type||this._applyPointOffset(),this._applyPointOffset=null),a.moveTo(this.points[0].x,this.points[0].y);for(var c=0,d=this.points.length;c\"},toObject:function(a){var b=e(this.callSuper(\"toObject\",a),{path:this.path.map(function(a){return a.slice()}),pathOffset:this.pathOffset});return this.sourcePath&&(b.sourcePath=this.sourcePath),this.transformMatrix&&(b.transformMatrix=this.transformMatrix),b},toDatalessObject:function(a){var b=this.toObject(a);return this.sourcePath&&(b.path=this.sourcePath),delete b.sourcePath,b},toSVG:function(a){for(var b=[],c=this._createBaseSVGMarkup(),d=\"\",e=0,f=this.path.length;e\\n\"),a?a(c.join(\"\")):c.join(\"\")},complexity:function(){return this.path.length},_parsePath:function(){for(var c,d,f,g,k,a=[],b=[],e=/([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:e[-+]?\\d+)?)/gi,j=0,l=this.path.length;jp)for(var r=1,s=k.length;r\\n\"],e=0,f=b.length;e\\n\"),a?a(d.join(\"\")):d.join(\"\")},toString:function(){return\"#\"},isSameColor:function(){var a=(this.getObjects()[0].get(\"fill\")||\"\").toLowerCase();return this.getObjects().every(function(b){return(b.get(\"fill\")||\"\").toLowerCase()===a})},complexity:function(){return this.paths.reduce(function(a,b){return a+(b&&b.complexity?b.complexity():0)},0)},getObjects:function(){return this.paths}}),b.PathGroup.fromObject=function(a,c){\"string\"==typeof a.paths?b.loadSVGFromURL(a.paths,function(d){var e=a.paths;delete a.paths;var f=b.util.groupSVGElements(d,a,e);c(f)}):b.util.enlivenObjects(a.paths,function(d){delete a.paths,c(new b.PathGroup(d,a))})},void(b.PathGroup.async=!0))}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=b.util.object.extend,d=b.util.array.min,e=b.util.array.max,f=b.util.array.invoke;if(!b.Group){var g={lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0};b.Group=b.util.createClass(b.Object,b.Collection,{type:\"group\",initialize:function(a,b){b=b||{},this._objects=a||[];for(var d=this._objects.length;d--;)this._objects[d].group=this;this.originalState={},this.callSuper(\"initialize\"),this._calcBounds(),this._updateObjectsCoords(),b&&c(this,b),this.setCoords(),this.saveCoords()},_updateObjectsCoords:function(){this.forEachObject(this._updateObjectCoords,this)},_updateObjectCoords:function(a){var b=a.getLeft(),c=a.getTop();a.set({originalLeft:b,originalTop:c,left:b-this.left,top:c-this.top}),a.setCoords(),a.__origHasControls=a.hasControls,a.hasControls=!1},toString:function(){return\"#\"},addWithUpdate:function(a){return this._restoreObjectsState(),a&&(this._objects.push(a),a.group=this),this.forEachObject(this._setObjectActive,this),this._calcBounds(),this._updateObjectsCoords(),this},_setObjectActive:function(a){a.set(\"active\",!0),a.group=this},removeWithUpdate:function(a){return this._moveFlippedObject(a),this._restoreObjectsState(),this.forEachObject(this._setObjectActive,this),this.remove(a),this._calcBounds(),this._updateObjectsCoords(),this},_onObjectAdded:function(a){a.group=this},_onObjectRemoved:function(a){delete a.group,a.set(\"active\",!1)},delegatedProperties:{fill:!0,opacity:!0,fontFamily:!0,fontWeight:!0,fontSize:!0,fontStyle:!0,lineHeight:!0,textDecoration:!0,textAlign:!0,backgroundColor:!0},_set:function(a,b){if(a in this.delegatedProperties){var c=this._objects.length;for(this[a]=b;c--;)this._objects[c].set(a,b)}else this[a]=b},toObject:function(a){return c(this.callSuper(\"toObject\",a),{objects:f(this._objects,\"toObject\",a)})},render:function(a){if(this.visible){a.save(),this.clipTo&&b.util.clipContext(this,a);for(var c=0,d=this._objects.length;c\\n'],c=0,d=this._objects.length;c\\n\"),a?a(b.join(\"\")):b.join(\"\")},get:function(a){if(a in g){if(this[a])return this[a];for(var b=0,c=this._objects.length;b\\n','\\n\"),this.stroke||this.strokeDashArray){var e=this.fill;this.fill=null,b.push(\"\\n'),this.fill=e}return b.push(\"        \\n\"),a?a(b.join(\"\")):b.join(\"\")},getSrc:function(){if(this.getElement())return this.getElement().src||this.getElement()._src},toString:function(){return'#'},clone:function(a,b){this.constructor.fromObject(this.toObject(b),a)},applyFilters:function(a){if(this._originalElement){if(0===this.filters.length)return this._element=this._originalElement,void(a&&a());var b=this._originalElement,c=fabric.util.createCanvasElement(),d=fabric.util.createImage(),e=this;return c.width=b.width,c.height=b.height,c.getContext(\"2d\").drawImage(b,0,0,b.width,b.height),this.filters.forEach(function(a){a&&a.applyTo(c)}),d.width=b.width,d.height=b.height,fabric.isLikelyNode?(d.src=c.toBuffer(void 0,fabric.Image.pngCompression),e._element=d,a&&a()):(d.onload=function(){e._element=d,a&&a(),d.onload=c=b=null},d.src=c.toDataURL(\"image/png\")),this}},_render:function(a,b){\nthis._element&&a.drawImage(this._element,b?this.left:-this.width/2,b?this.top:-this.height/2,this.width,this.height),this._renderStroke(a)},_resetWidthHeight:function(){var a=this.getElement();this.set(\"width\",a.width),this.set(\"height\",a.height)},_initElement:function(a){this.setElement(fabric.util.getById(a)),fabric.util.addClass(this.getElement(),fabric.Image.CSS_CANVAS)},_initConfig:function(a){a||(a={}),this.setOptions(a),this._setWidthHeight(a),this._element&&this.crossOrigin&&(this._element.crossOrigin=this.crossOrigin)},_initFilters:function(a,b){a.filters&&a.filters.length?fabric.util.enlivenObjects(a.filters,function(a){b&&b(a)},\"fabric.Image.filters\"):b&&b()},_setWidthHeight:function(a){this.width=\"width\"in a?a.width:this.getElement()?this.getElement().width||0:0,this.height=\"height\"in a?a.height:this.getElement()?this.getElement().height||0:0},complexity:function(){return 1}}),fabric.Image.CSS_CANVAS=\"canvas-img\",fabric.Image.prototype.getSvgSrc=fabric.Image.prototype.getSrc,fabric.Image.fromObject=function(a,b){fabric.util.loadImage(a.src,function(c){fabric.Image.prototype._initFilters.call(a,a,function(d){a.filters=d||[];var e=new fabric.Image(c,a);b&&b(e)})},null,a.crossOrigin)},fabric.Image.fromURL=function(a,b,c){fabric.util.loadImage(a,function(a){b(new fabric.Image(a,c))},null,c&&c.crossOrigin)},fabric.Image.ATTRIBUTE_NAMES=fabric.SHARED_ATTRIBUTES.concat(\"x y width height xlink:href\".split(\" \")),fabric.Image.fromElement=function(a,c,d){var e=fabric.parseAttributes(a,fabric.Image.ATTRIBUTE_NAMES);fabric.Image.fromURL(e[\"xlink:href\"],c,b(d?fabric.util.object.clone(d):{},e))},fabric.Image.async=!0,void(fabric.Image.pngCompression=1))}(\"undefined\"!=typeof exports?exports:this),fabric.util.object.extend(fabric.Object.prototype,{_getAngleValueForStraighten:function(){var a=this.getAngle()%360;return a>0?90*Math.round((a-1)/90):90*Math.round(a/90)},straighten:function(){return this.setAngle(this._getAngleValueForStraighten()),this},fxStraighten:function(a){a=a||{};var b=function(){},c=a.onComplete||b,d=a.onChange||b,e=this;return fabric.util.animate({startValue:this.get(\"angle\"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(a){e.setAngle(a),d()},onComplete:function(){e.setCoords(),c()},onStart:function(){e.set(\"active\",!1)}}),this}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{straightenObject:function(a){return a.straighten(),this.renderAll(),this},fxStraightenObject:function(a){return a.fxStraighten({onChange:this.renderAll.bind(this)}),this}}),fabric.Image.filters=fabric.Image.filters||{},fabric.Image.filters.BaseFilter=fabric.util.createClass({type:\"BaseFilter\",toObject:function(){return{type:this.type}},toJSON:function(){return this.toObject()}}),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=b.util.object.extend;b.Image.filters.Brightness=b.util.createClass(b.Image.filters.BaseFilter,{type:\"Brightness\",initialize:function(a){a=a||{},this.brightness=a.brightness||0},applyTo:function(a){for(var b=a.getContext(\"2d\"),c=b.getImageData(0,0,a.width,a.height),d=c.data,e=this.brightness,f=0,g=d.length;fi||A<0||A>h)){var B=4*(z*h+A),C=b[x*e+y];t+=g[B]*C,u+=g[B+1]*C,v+=g[B+2]*C,w+=g[B+3]*C}}m[s]=t,m[s+1]=u,m[s+2]=v,m[s+3]=w+n*(255-w)}c.putImageData(l,0,0)},toObject:function(){return c(this.callSuper(\"toObject\"),{opaque:this.opaque,matrix:this.matrix})}}),b.Image.filters.Convolute.fromObject=function(a){return new b.Image.filters.Convolute(a)}}(\"undefined\"!=typeof exports?exports:this),function(a){\"use strict\";var b=a.fabric||(a.fabric={}),c=b.util.object.extend;b.Image.filters.GradientTransparency=b.util.createClass(b.Image.filters.BaseFilter,{type:\"GradientTransparency\",initialize:function(a){a=a||{},this.threshold=a.threshold||100},applyTo:function(a){for(var b=a.getContext(\"2d\"),c=b.getImageData(0,0,a.width,a.height),d=c.data,e=this.threshold,f=d.length,g=0,h=d.length;g-1?a.channel:0},applyTo:function(a){if(this.mask){var i,c=a.getContext(\"2d\"),d=c.getImageData(0,0,a.width,a.height),e=d.data,f=this.mask.getElement(),g=b.util.createCanvasElement(),h=this.channel,j=d.width*d.height*4;g.width=f.width,g.height=f.height,g.getContext(\"2d\").drawImage(f,0,0,f.width,f.height);var k=g.getContext(\"2d\").getImageData(0,0,f.width,f.height),l=k.data;for(i=0;ig&&j>g&&k>g&&h(i-j)'},_render:function(a){\"undefined\"==typeof Cufon||this.useNative===!0?this._renderViaNative(a):this._renderViaCufon(a)},_renderViaNative:function(a){var c=this.text.split(this._reNewline);this._setTextStyles(a),this.width=this._getTextWidth(a,c),this.height=this._getTextHeight(a,c),this.clipTo&&b.util.clipContext(this,a),this._renderTextBackground(a,c),this._translateForTextAlign(a),this._renderText(a,c),\"left\"!==this.textAlign&&\"justify\"!==this.textAlign&&a.restore(),this._renderTextDecoration(a,c),this.clipTo&&a.restore(),this._setBoundaries(a,c),this._totalLineHeight=0},_renderText:function(a,b){a.save(),this._setShadow(a),this._setupCompositeOperation(a),this._renderTextFill(a,b),this._renderTextStroke(a,b),this._restoreCompositeOperation(a),this._removeShadow(a),a.restore()},_translateForTextAlign:function(a){\"left\"!==this.textAlign&&\"justify\"!==this.textAlign&&(a.save(),a.translate(\"center\"===this.textAlign?this.width/2:this.width,0))},_setBoundaries:function(a,b){this._boundaries=[];for(var c=0,d=b.length;cc&&(c=f)}return c},_renderChars:function(a,b,c,d,e){b[a](c,d,e)},_renderTextLine:function(a,b,c,d,e,f){if(e-=this.fontSize/4,\"justify\"!==this.textAlign)return void this._renderChars(a,b,c,d,e,f);var g=b.measureText(c).width,h=this.width;if(h>g)for(var i=c.split(/\\s+/),j=b.measureText(c.replace(/\\s+/g,\"\")).width,k=h-j,l=i.length-1,m=k/l,n=0,o=0,p=i.length;o-1&&e(this.fontSize*this.lineHeight),this.textDecoration.indexOf(\"line-through\")>-1&&e(this.fontSize*this.lineHeight-this.fontSize/2),this.textDecoration.indexOf(\"overline\")>-1&&e(this.fontSize*this.lineHeight-this.fontSize)}},_getFontDeclaration:function(){return[b.isLikelyNode?this.fontWeight:this.fontStyle,b.isLikelyNode?this.fontStyle:this.fontWeight,this.fontSize+\"px\",b.isLikelyNode?'\"'+this.fontFamily+'\"':this.fontFamily].join(\" \")},render:function(a,b){if(this.visible){a.save(),b||this.transform(a);var c=this.group&&\"path-group\"===this.group.type;c&&a.translate(-this.group.width/2,-this.group.height/2),this.transformMatrix&&a.transform.apply(a,this.transformMatrix),c&&a.translate(this.left,this.top),this._render(a),a.restore()}},toObject:function(a){var b=c(this.callSuper(\"toObject\",a),{text:this.text,fontSize:this.fontSize,fontWeight:this.fontWeight,fontFamily:this.fontFamily,fontStyle:this.fontStyle,lineHeight:this.lineHeight,textDecoration:this.textDecoration,textAlign:this.textAlign,path:this.path,textBackgroundColor:this.textBackgroundColor,useNative:this.useNative});return this.includeDefaultValues||this._removeDefaultValues(b),b},toSVG:function(a){var b=[],c=this.text.split(this._reNewline),d=this._getSVGLeftTopOffsets(c),e=this._getSVGTextAndBg(d.lineTop,d.textLeft,c),f=this._getSVGShadows(d.lineTop,c);return d.textTop+=this._fontAscent?this._fontAscent/5*this.lineHeight:0,this._wrapSVGTextAndBg(b,e,f,d),a?a(b.join(\"\")):b.join(\"\")},_getSVGLeftTopOffsets:function(a){var b=this.useNative?this.fontSize*this.lineHeight:-this._fontAscent-this._fontAscent/5*this.lineHeight,c=-(this.width/2),d=this.useNative?this.fontSize-1:this.height/2-a.length*this.fontSize-this._totalLineHeight;return{textLeft:c+(this.group&&\"path-group\"===this.group.type?this.left:0),textTop:d+(this.group&&\"path-group\"===this.group.type?this.top:0),lineTop:b}},_wrapSVGTextAndBg:function(a,b,c,d){a.push('\\n',b.textBgRects.join(\"\"),\"',c.join(\"\"),b.textSpans.join(\"\"),\"\\n\",\"\\n\")},_getSVGShadows:function(a,c){var f,g,d=[],h=1;if(!this.shadow||!this._boundaries)return d;for(f=0,g=c.length;f\",b.util.string.escapeXml(c[f]),\"\"),h=1}else h++;return d},_getSVGTextAndBg:function(a,b,c){var d=[],e=[],f=1;this._setSVGBg(e);for(var g=0,h=c.length;g\",b.util.string.escapeXml(a),\"\")},_setSVGTextLineBg:function(a,b,c,d){a.push(\"\\n')},_setSVGBg:function(a){this.backgroundColor&&this._boundaries&&a.push(\"')},_getFillAttributes:function(a){var c=a&&\"string\"==typeof a?new b.Color(a):\"\";return c&&c.getSource()&&1!==c.getAlpha()?'opacity=\"'+c.getAlpha()+'\" fill=\"'+c.setAlpha(1).toRgb()+'\"':'fill=\"'+a+'\"'},_set:function(a,b){\"fontFamily\"===a&&this.path&&(this.path=this.path.replace(/(.*?)([^\\/]*)(\\.font\\.js)/,\"$1\"+b+\"$3\")),this.callSuper(\"_set\",a,b),a in this._dimensionAffectingProps&&(this._initDimensions(),this.setCoords())},complexity:function(){return 1}}),b.Text.ATTRIBUTE_NAMES=b.SHARED_ATTRIBUTES.concat(\"x y dx dy font-family font-style font-weight font-size text-decoration text-anchor\".split(\" \")),b.Text.DEFAULT_SVG_FONT_SIZE=16,b.Text.fromElement=function(a,c){if(!a)return null;var d=b.parseAttributes(a,b.Text.ATTRIBUTE_NAMES);c=b.util.object.extend(c?b.util.object.clone(c):{},d),\"dx\"in d&&(c.left+=d.dx),\"dy\"in d&&(c.top+=d.dy),\"fontSize\"in c||(c.fontSize=b.Text.DEFAULT_SVG_FONT_SIZE),c.originX||(c.originX=\"left\");var e=new b.Text(a.textContent,c),f=0;return\"left\"===e.originX&&(f=e.getWidth()/2),\"right\"===e.originX&&(f=-e.getWidth()/2),e.set({left:e.getLeft()+f,top:e.getTop()-e.getHeight()/2}),e},b.Text.fromObject=function(a){return new b.Text(a.text,d(a))},b.util.createAccessors(b.Text)}(\"undefined\"!=typeof exports?exports:this),function(){var a=fabric.util.object.clone;fabric.IText=fabric.util.createClass(fabric.Text,fabric.Observable,{type:\"i-text\",selectionStart:0,selectionEnd:0,selectionColor:\"rgba(17,119,255,0.3)\",isEditing:!1,editable:!0,editingBorderColor:\"rgba(102,153,255,0.25)\",cursorWidth:2,cursorColor:\"#333\",cursorDelay:1e3,cursorDuration:600,styles:null,caching:!0,_skipFillStrokeCheck:!0,_reSpace:/\\s|\\n/,_fontSizeFraction:4,_currentCursorOpacity:0,_selectionDirection:null,_abortCursorAnimation:!1,_charWidthsCache:{},initialize:function(a,b){this.styles=b?b.styles||{}:{},this.callSuper(\"initialize\",a,b),this.initBehavior(),fabric.IText.instances.push(this),this.__lineWidths={},this.__lineHeights={},this.__lineOffsets={}},isEmptyStyles:function(){if(!this.styles)return!0;var a=this.styles;for(var b in a)for(var c in a[b])for(var d in a[b][c])return!1;return!0},setSelectionStart:function(a){this.selectionStart!==a&&(this.fire(\"selection:changed\"),this.canvas&&this.canvas.fire(\"text:selection:changed\",{target:this})),this.selectionStart=a,this.hiddenTextarea&&(this.hiddenTextarea.selectionStart=a)},setSelectionEnd:function(a){this.selectionEnd!==a&&(this.fire(\"selection:changed\"),this.canvas&&this.canvas.fire(\"text:selection:changed\",{target:this})),this.selectionEnd=a,this.hiddenTextarea&&(this.hiddenTextarea.selectionEnd=a)},getSelectionStyles:function(a,b){if(2===arguments.length){for(var c=[],d=a;d=d.charIndex&&(i!==g||mf&&i-1&&this._renderCharDecorationAtOffset(a,c,d+this.fontSize/this._fontSizeFraction,e,0,this.fontSize/20),\nh.indexOf(\"line-through\")>-1&&this._renderCharDecorationAtOffset(a,c,d+this.fontSize/this._fontSizeFraction,e,g/2,i/20),h.indexOf(\"overline\")>-1&&this._renderCharDecorationAtOffset(a,c,d,e,f-this.fontSize/this._fontSizeFraction,this.fontSize/20))},_renderCharDecorationAtOffset:function(a,b,c,d,e,f){a.fillRect(b,c-e,d,f)},_renderTextLine:function(a,b,c,d,e,f){e+=this.fontSize/4,this.callSuper(\"_renderTextLine\",a,b,c,d,e,f)},_renderTextDecoration:function(a,b){if(this.isEmptyStyles())return this.callSuper(\"_renderTextDecoration\",a,b)},_renderTextLinesBackground:function(a,b){if(this.textBackgroundColor||this.styles){a.save(),this.textBackgroundColor&&(a.fillStyle=this.textBackgroundColor);for(var c=0,d=this.fontSize/this._fontSizeFraction,e=0,f=b.length;ec&&(c=f)}return c},_getHeightOfLine:function(a,b,c){c=c||this.text.split(this._reNewline);for(var d=this._getHeightOfChar(a,c[b][0],b,0),e=c[b],f=e.split(\"\"),g=1,h=f.length;gd&&(d=i)}return d*this.lineHeight},_getTextHeight:function(a,b){for(var c=0,d=0,e=b.length;d-1;)b++,c--;return a-b},findWordBoundaryRight:function(a){var b=0,c=a;if(this._reSpace.test(this.text.charAt(c)))for(;this._reSpace.test(this.text.charAt(c));)b++,c++;for(;/\\S/.test(this.text.charAt(c))&&c-1;)b++,c--;return a-b},findLineBoundaryRight:function(a){for(var b=0,c=a;!/\\n/.test(this.text.charAt(c))&&c0&&cd;f?this.removeStyleObject(f,c+1):this.removeStyleObject(0===this.get2DCursorLocation(c).charIndex,c)}this.text=this.text.slice(0,a)+this.text.slice(b)},insertChars:function(a){var b=\"\\n\"===this.text.slice(this.selectionStart,this.selectionStart+1);this.text=this.text.slice(0,this.selectionStart)+a+this.text.slice(this.selectionEnd),this.selectionStart===this.selectionEnd&&this.insertStyleObjects(a,b,this.copiedStyles),this.selectionStart+=a.length,this.selectionEnd=this.selectionStart,this.canvas&&this.canvas.renderAll().renderAll(),this.setCoords(),this.fire(\"changed\"),this.canvas&&this.canvas.fire(\"text:changed\",{target:this})},insertNewlineStyleObject:function(b,c,d){this.shiftLineStyles(b,1),this.styles[b+1]||(this.styles[b+1]={});var e=this.styles[b][c-1],f={};if(d)f[0]=a(e),this.styles[b+1]=f;else{for(var g in this.styles[b])parseInt(g,10)>=c&&(f[parseInt(g,10)-c]=this.styles[b][g],delete this.styles[b][g]);this.styles[b+1]=f}},insertCharStyleObject:function(b,c,d){var e=this.styles[b],f=a(e);0!==c||d||(c=1);for(var g in f){var h=parseInt(g,10);h>=c&&(e[h+1]=f[h])}this.styles[b][c]=d||a(e[c-1])},insertStyleObjects:function(a,b,c){if(!this.isEmptyStyles()){var d=this.get2DCursorLocation(),e=d.lineIndex,f=d.charIndex;this.styles[e]||(this.styles[e]={}),\"\\n\"===a?this.insertNewlineStyleObject(e,f,b):c?this._insertStyles(c):this.insertCharStyleObject(e,f)}},_insertStyles:function(a){for(var b=0,c=a.length;bb&&(this.styles[f+c]=d[f])}},removeStyleObject:function(b,c){var d=this.get2DCursorLocation(c),e=d.lineIndex,f=d.charIndex;if(b){var g=this.text.split(this._reNewline),h=g[e-1],i=h?h.length:0;this.styles[e-1]||(this.styles[e-1]={});for(f in this.styles[e])this.styles[e-1][parseInt(f,10)+i]=this.styles[e][f];this.shiftLineStyles(e,-1)}else{var j=this.styles[e];if(j){var k=this.selectionStart===this.selectionEnd?-1:0;delete j[f+k]}var l=a(j);for(var m in l){var n=parseInt(m,10);n>=f&&0!==n&&(j[n-1]=l[n],delete j[n])}}},insertNewline:function(){this.insertChars(\"\\n\")}})}(),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on(\"mousedown\",this.onMouseDown.bind(this))},onMouseDown:function(a){this.__newClickTime=+new Date;var b=this.canvas.getPointer(a.e);this.isTripleClick(b)?(this.fire(\"tripleclick\",a),this._stopEvent(a.e)):this.isDoubleClick(b)&&(this.fire(\"dblclick\",a),this._stopEvent(a.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=b,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected},isDoubleClick:function(a){return this.__newClickTime-this.__lastClickTime<500&&this.__lastPointer.x===a.x&&this.__lastPointer.y===a.y&&this.__lastIsEditing},isTripleClick:function(a){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===a.x&&this.__lastPointer.y===a.y},_stopEvent:function(a){a.preventDefault&&a.preventDefault(),a.stopPropagation&&a.stopPropagation()},initCursorSelectionHandlers:function(){this.initSelectedHandler(),this.initMousedownHandler(),this.initMousemoveHandler(),this.initMouseupHandler(),this.initClicks()},initClicks:function(){this.on(\"dblclick\",function(a){this.selectWord(this.getSelectionStartFromPointer(a.e))}),this.on(\"tripleclick\",function(a){this.selectLine(this.getSelectionStartFromPointer(a.e))})},initMousedownHandler:function(){this.on(\"mousedown\",function(a){var b=this.canvas.getPointer(a.e);this.__mousedownX=b.x,this.__mousedownY=b.y,this.__isMousedown=!0,this.hiddenTextarea&&this.canvas&&this.canvas.wrapperEl.appendChild(this.hiddenTextarea),this.selected&&this.setCursorByClick(a.e),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.initDelayedCursor(!0))})},initMousemoveHandler:function(){this.on(\"mousemove\",function(a){if(this.__isMousedown&&this.isEditing){var b=this.getSelectionStartFromPointer(a.e);b>=this.__selectionStartOnMouseDown?(this.setSelectionStart(this.__selectionStartOnMouseDown),this.setSelectionEnd(b)):(this.setSelectionStart(b),this.setSelectionEnd(this.__selectionStartOnMouseDown))}})},_isObjectMoved:function(a){var b=this.canvas.getPointer(a);return this.__mousedownX!==b.x||this.__mousedownY!==b.y},initMouseupHandler:function(){this.on(\"mouseup\",function(a){this.__isMousedown=!1,this._isObjectMoved(a.e)||(this.__lastSelected&&(this.enterEditing(),this.initDelayedCursor(!0)),this.selected=!0)})},setCursorByClick:function(a){var b=this.getSelectionStartFromPointer(a);a.shiftKey?bf?0:1,i=d+h;return this.flipX&&(i=e-i),i>this.text.length&&(i=this.text.length),i}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement(\"textarea\"),this.hiddenTextarea.setAttribute(\"autocapitalize\",\"off\"),this.hiddenTextarea.style.cssText=\"position: absolute; top: 0; left: -9999px\",fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,\"keydown\",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"keypress\",this.onKeyPress.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"copy\",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"paste\",this.paste.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,\"click\",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},_keysMap:{8:\"removeChars\",9:\"exitEditing\",27:\"exitEditing\",13:\"insertNewline\",33:\"moveCursorUp\",34:\"moveCursorDown\",35:\"moveCursorRight\",36:\"moveCursorLeft\",37:\"moveCursorLeft\",38:\"moveCursorUp\",39:\"moveCursorRight\",40:\"moveCursorDown\",46:\"forwardDelete\"},_ctrlKeysMap:{65:\"selectAll\",88:\"cut\"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(a){if(this.isEditing){if(a.keyCode in this._keysMap)this[this._keysMap[a.keyCode]](a);else{if(!(a.keyCode in this._ctrlKeysMap&&(a.ctrlKey||a.metaKey)))return;this[this._ctrlKeysMap[a.keyCode]](a)}a.stopImmediatePropagation(),a.preventDefault(),this.canvas&&this.canvas.renderAll()}},forwardDelete:function(a){this.selectionStart===this.selectionEnd&&this.moveCursorRight(a),this.removeChars(a)},copy:function(a){var b=this.getSelectedText(),c=this._getClipboardData(a);c&&c.setData(\"text\",b),this.copiedText=b,this.copiedStyles=this.getSelectionStyles(this.selectionStart,this.selectionEnd)},paste:function(a){var b=null,c=this._getClipboardData(a);b=c?c.getData(\"text\"):this.copiedText,b&&this.insertChars(b)},cut:function(a){this.selectionStart!==this.selectionEnd&&(this.copy(),this.removeChars(a))},_getClipboardData:function(a){return a&&(a.clipboardData||fabric.window.clipboardData)},onKeyPress:function(a){!this.isEditing||a.metaKey||a.ctrlKey||(0!==a.which&&this.insertChars(String.fromCharCode(a.which)),a.stopPropagation())},getDownCursorOffset:function(a,b){var e,f,c=b?this.selectionEnd:this.selectionStart,d=this.text.split(this._reNewline),g=this.text.slice(0,c),h=this.text.slice(c),i=g.slice(g.lastIndexOf(\"\\n\")+1),j=h.match(/(.*)\\n?/)[1],k=(h.match(/.*\\n(.*)\\n?/)||{})[1]||\"\",l=this.get2DCursorLocation(c);if(l.lineIndex===d.length-1||a.metaKey||34===a.keyCode)return this.text.length-c;var m=this._getWidthOfLine(this.ctx,l.lineIndex,d);f=this._getLineLeftOffset(m);for(var n=f,o=l.lineIndex,p=0,q=i.length;pc){j=!0;var o=h-n,p=h,q=Math.abs(o-c),r=Math.abs(p-c);i=rthis.text.length&&(this.selectionStart=this.text.length),this.selectionEnd=this.selectionStart},swapSelectionPoints:function(){var a=this.selectionEnd;this.selectionEnd=this.selectionStart,this.selectionStart=a},moveCursorDownWithShift:function(a){this.selectionEnd===this.selectionStart&&(this._selectionDirection=\"right\");var b=\"right\"===this._selectionDirection?\"selectionEnd\":\"selectionStart\";this[b]+=a,this.selectionEndthis.text.length&&(this.selectionEnd=this.text.length)},getUpCursorOffset:function(a,b){var c=b?this.selectionEnd:this.selectionStart,d=this.get2DCursorLocation(c);if(0===d.lineIndex||a.metaKey||33===a.keyCode)return c;for(var i,e=this.text.slice(0,c),f=e.slice(e.lastIndexOf(\"\\n\")+1),g=(e.match(/\\n?(.*)\\n.*$/)||{})[1]||\"\",h=this.text.split(this._reNewline),j=this._getWidthOfLine(this.ctx,d.lineIndex,h),k=this._getLineLeftOffset(j),l=k,m=d.lineIndex,n=0,o=f.length;nc){j=!0;var o=h-n,p=h,q=Math.abs(o-c),r=Math.abs(p-c);i=r=this.text.length&&this.selectionEnd>=this.text.length||(this.abortCursorAnimation(),this._currentCursorOpacity=1,a.shiftKey?this.moveCursorRightWithShift(a):this.moveCursorRightWithoutShift(a),this.initDelayedCursor())},moveCursorRightWithShift:function(a){\"left\"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(a,\"selectionStart\"):(this._selectionDirection=\"right\",this._moveRight(a,\"selectionEnd\"),\"\\n\"===this.text.charAt(this.selectionEnd-1)&&this.selectionEnd++,this.selectionEnd>this.text.length&&(this.selectionEnd=this.text.length))},moveCursorRightWithoutShift:function(a){this._selectionDirection=\"right\",this.selectionStart===this.selectionEnd?(this._moveRight(a,\"selectionStart\"),this.selectionEnd=this.selectionStart):(this.selectionEnd+=this.getNumNewLinesInSelectedText(),this.selectionEnd>this.text.length&&(this.selectionEnd=this.text.length),this.selectionStart=this.selectionEnd)},removeChars:function(a){this.selectionStart===this.selectionEnd?this._removeCharsNearCursor(a):this._removeCharsFromTo(this.selectionStart,this.selectionEnd),this.selectionEnd=this.selectionStart,this._removeExtraneousStyles(),this.canvas&&this.canvas.renderAll().renderAll(),this.setCoords(),this.fire(\"changed\"),this.canvas&&this.canvas.fire(\"text:changed\",{target:this})},_removeCharsNearCursor:function(a){if(0!==this.selectionStart)if(a.metaKey){var b=this.findLineBoundaryLeft(this.selectionStart);this._removeCharsFromTo(b,this.selectionStart),this.selectionStart=b}else if(a.altKey){var c=this.findWordBoundaryLeft(this.selectionStart);this._removeCharsFromTo(c,this.selectionStart),this.selectionStart=c}else{var d=\"\\n\"===this.text.slice(this.selectionStart-1,this.selectionStart);this.removeStyleObject(d),this.selectionStart--,this.text=this.text.slice(0,this.selectionStart)+this.text.slice(this.selectionStart+1)}}}),fabric.util.object.extend(fabric.IText.prototype,{_setSVGTextLineText:function(a,b,c,d,e,f){this.styles[b]?this._setSVGTextLineChars(a,b,c,d,e,f):this.callSuper(\"_setSVGTextLineText\",a,b,c,d,e)},_setSVGTextLineChars:function(a,b,c,d,e,f){for(var g=0===b||this.useNative?\"y\":\"dy\",h=a.split(\"\"),i=0,j=this._getSVGLineLeftOffset(b),k=this._getSVGLineTopOffset(b),l=this._getHeightOfLine(this.ctx,b),m=0,n=h.length;m'].join(\"\")},_createTextCharSpan:function(a,b,c,d,e,f){var g=this.getSvgStyles.call(fabric.util.object.extend({visible:!0,fill:this.fill,stroke:this.stroke,type:\"text\"},b));return['',fabric.util.string.escapeXml(a),\"\"].join(\"\")}}),function(){function request(a,b,c){var d=URL.parse(a);d.port||(d.port=0===d.protocol.indexOf(\"https:\")?443:80);var e=443===d.port?HTTPS:HTTP,f=e.request({hostname:d.hostname,port:d.port,path:d.path,method:\"GET\"},function(a){var d=\"\";b&&a.setEncoding(b),a.on(\"end\",function(){c(d)}),a.on(\"data\",function(b){200===a.statusCode&&(d+=b)})});f.on(\"error\",function(a){a.errno===process.ECONNREFUSED?fabric.log(\"ECONNREFUSED: connection refused to \"+d.hostname+\":\"+d.port):fabric.log(a.message)}),f.end()}function requestFs(a,b){var c=require(\"fs\");c.readFile(a,function(a,c){if(a)throw fabric.log(a),a;b(c)})}if(\"undefined\"==typeof document||\"undefined\"==typeof window){var DOMParser=require(\"xmldom\").DOMParser,URL=require(\"url\"),HTTP=require(\"http\"),HTTPS=require(\"https\"),Canvas=require(\"canvas\"),Image=require(\"canvas\").Image;fabric.util.loadImage=function(a,b,c){function d(d){e.src=new Buffer(d,\"binary\"),e._src=a,b&&b.call(c,e)}var e=new Image;a&&(a instanceof Buffer||0===a.indexOf(\"data\"))?(e.src=e._src=a,b&&b.call(c,e)):a&&0!==a.indexOf(\"http\")?requestFs(a,d):a?request(a,\"binary\",d):b&&b.call(c,a)},fabric.loadSVGFromURL=function(a,b,c){a=a.replace(/^\\n\\s*/,\"\").replace(/\\?.*$/,\"\").trim(),0!==a.indexOf(\"http\")?requestFs(a,function(a){fabric.loadSVGFromString(a.toString(),b,c)}):request(a,\"\",function(a){fabric.loadSVGFromString(a,b,c)})},fabric.loadSVGFromString=function(a,b,c){var d=(new DOMParser).parseFromString(a);fabric.parseSVGDocument(d.documentElement,function(a,c){b&&b(a,c)},c)},fabric.util.getScript=function(url,callback){request(url,\"\",function(body){eval(body),callback&&callback()})},fabric.Image.fromObject=function(a,b){fabric.util.loadImage(a.src,function(c){var d=new fabric.Image(c);d._initConfig(a),d._initFilters(a,function(a){d.filters=a||[],b&&b(d)})})},fabric.createCanvasForNode=function(a,b,c,d){d=d||c;var e=fabric.document.createElement(\"canvas\"),f=new Canvas(a||600,b||600,d);e.style={},e.width=f.width,e.height=f.height;var g=fabric.Canvas||fabric.StaticCanvas,h=new g(e,c);return h.contextContainer=f.getContext(\"2d\"),h.nodeCanvas=f,h.Font=Canvas.Font,h},fabric.StaticCanvas.prototype.createPNGStream=function(){return this.nodeCanvas.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(a){return this.nodeCanvas.createJPEGStream(a)};var origSetWidth=fabric.StaticCanvas.prototype.setWidth;fabric.StaticCanvas.prototype.setWidth=function(a,b){return origSetWidth.call(this,a,b),this.nodeCanvas.width=a,this},fabric.Canvas&&(fabric.Canvas.prototype.setWidth=fabric.StaticCanvas.prototype.setWidth);var origSetHeight=fabric.StaticCanvas.prototype.setHeight;fabric.StaticCanvas.prototype.setHeight=function(a,b){return origSetHeight.call(this,a,b),this.nodeCanvas.height=a,this},fabric.Canvas&&(fabric.Canvas.prototype.setHeight=fabric.StaticCanvas.prototype.setHeight)}}();" }, { "path": "src/libs/fabric1-4-2.min.js", "content": "/* build: `node build.js modules=ALL exclude=gestures,cufon,json minifier=uglifyjs` *//*! Fabric.js Copyright 2008-2014, Printio (Juriy Zaytsev, Maxim Chernyak) */var fabric=fabric||{version:\"1.4.12\"};typeof exports!=\"undefined\"&&(exports.fabric=fabric),typeof document!=\"undefined\"&&typeof window!=\"undefined\"?(fabric.document=document,fabric.window=window):(fabric.document=require(\"jsdom\").jsdom(\"\"),fabric.window=fabric.document.createWindow()),fabric.isTouchSupported=\"ontouchstart\"in fabric.document.documentElement,fabric.isLikelyNode=typeof Buffer!=\"undefined\"&&typeof window==\"undefined\",fabric.SHARED_ATTRIBUTES=[\"display\",\"transform\",\"fill\",\"fill-opacity\",\"fill-rule\",\"opacity\",\"stroke\",\"stroke-dasharray\",\"stroke-linecap\",\"stroke-linejoin\",\"stroke-miterlimit\",\"stroke-opacity\",\"stroke-width\"],fabric.DPI=96,function(){function e(e,t){if(!this.__eventListeners[e])return;t?fabric.util.removeFromArray(this.__eventListeners[e],t):this.__eventListeners[e].length=0}function t(e,t){this.__eventListeners||(this.__eventListeners={});if(arguments.length===1)for(var n in e)this.on(n,e[n]);else this.__eventListeners[e]||(this.__eventListeners[e]=[]),this.__eventListeners[e].push(t);return this}function n(t,n){if(!this.__eventListeners)return;if(arguments.length===0)this.__eventListeners={};else if(arguments.length===1&&typeof arguments[0]==\"object\")for(var r in t)e.call(this,r,t[r]);else e.call(this,t,n);return this}function r(e,t){if(!this.__eventListeners)return;var n=this.__eventListeners[e];if(!n)return;for(var r=0,i=n.length;r-1},complexity:function(){return this.getObjects().reduce(function(e,t){return e+=t.complexity?t.complexity():0,e},0)}},function(e){var t=Math.sqrt,n=Math.atan2,r=Math.PI/180;fabric.util={removeFromArray:function(e,t){var n=e.indexOf(t);return n!==-1&&e.splice(n,1),e},getRandomInt:function(e,t){return Math.floor(Math.random()*(t-e+1))+e},degreesToRadians:function(e){return e*r},radiansToDegrees:function(e){return e/r},rotatePoint:function(e,t,n){var r=Math.sin(n),i=Math.cos(n);e.subtractEquals(t);var s=e.x*i-e.y*r,o=e.x*r+e.y*i;return(new fabric.Point(s,o)).addEquals(t)},transformPoint:function(e,t,n){return n?new fabric.Point(t[0]*e.x+t[1]*e.y,t[2]*e.x+t[3]*e.y):new fabric.Point(t[0]*e.x+t[1]*e.y+t[4],t[2]*e.x+t[3]*e.y+t[5])},invertTransform:function(e){var t=e.slice(),n=1/(e[0]*e[3]-e[1]*e[2]);t=[n*e[3],-n*e[1],-n*e[2],n*e[0],0,0];var r=fabric.util.transformPoint({x:e[4],y:e[5]},t);return t[4]=-r.x,t[5]=-r.y,t},toFixed:function(e,t){return parseFloat(Number(e).toFixed(t))},parseUnit:function(e){var t=/\\D{0,2}$/.exec(e),n=parseFloat(e);switch(t[0]){case\"mm\":return n*fabric.DPI/25.4;case\"cm\":return n*fabric.DPI/2.54;case\"in\":return n*fabric.DPI;case\"pt\":return n*fabric.DPI/72;case\"pc\":return n*fabric.DPI/72*12;default:return n}},falseFunction:function(){return!1},getKlass:function(e,t){return e=fabric.util.string.camelize(e.charAt(0).toUpperCase()+e.slice(1)),fabric.util.resolveNamespace(t)[e]},resolveNamespace:function(t){if(!t)return fabric;var n=t.split(\".\"),r=n.length,i=e||fabric.window;for(var s=0;sr)r+=u[p++%h],r>l&&(r=l),e[d?\"lineTo\":\"moveTo\"](r,0),d=!d;e.restore()},createCanvasElement:function(e){return e||(e=fabric.document.createElement(\"canvas\")),!e.getContext&&typeof G_vmlCanvasManager!=\"undefined\"&&G_vmlCanvasManager.initElement(e),e},createImage:function(){return fabric.isLikelyNode?new(require(\"canvas\").Image):fabric.document.createElement(\"img\")},createAccessors:function(e){var t=e.prototype;for(var n=t.stateProperties.length;n--;){var r=t.stateProperties[n],i=r.charAt(0).toUpperCase()+r.slice(1),s=\"set\"+i,o=\"get\"+i;t[o]||(t[o]=function(e){return new Function('return this.get(\"'+e+'\")')}(r)),t[s]||(t[s]=function(e){return new Function(\"value\",'return this.set(\"'+e+'\", value)')}(r))}},clipContext:function(e,t){t.save(),t.beginPath(),e.clipTo(t),t.clip()},multiplyTransformMatrices:function(e,t){var n=[[e[0],e[2],e[4]],[e[1],e[3],e[5]],[0,0,1]],r=[[t[0],t[2],t[4]],[t[1],t[3],t[5]],[0,0,1]],i=[];for(var s=0;s<3;s++){i[s]=[];for(var o=0;o<3;o++){var u=0;for(var a=0;a<3;a++)u+=n[s][a]*r[a][o];i[s][o]=u}}return[i[0][0],i[1][0],i[0][1],i[1][1],i[0][2],i[1][2]]},getFunctionBody:function(e){return(String(e).match(/function[^{]*\\{([\\s\\S]*)\\}/)||{})[1]},isTransparent:function(e,t,n,r){r>0&&(t>r?t-=r:t=0,n>r?n-=r:n=0);var i=!0,s=e.getImageData(t,n,r*2||1,r*2||1);for(var o=3,u=s.data.length;o0?_-=2*h:f===1&&_<0&&(_+=2*h);var D=Math.ceil(Math.abs(_/h*2)),P=[],H=_/D,B=8/3*Math.sin(H/4)*Math.sin(H/4)/Math.sin(H/2),j=M+H;for(var F=0;F=i?s-i:2*Math.PI-(i-s)}function u(e,t,i,s,o,u,a,f){var l=r.call(arguments);if(n[l])return n[l];var c=Math.sqrt,h=Math.min,p=Math.max,d=Math.abs,v=[],m=[[],[]],g,y,b,w,E,S,x,T;y=6*e-12*i+6*o,g=-3*e+9*i-9*o+3*a,b=3*i-3*e;for(var N=0;N<2;++N){N>0&&(y=6*t-12*s+6*u,g=-3*t+9*s-9*u+3*f,b=3*s-3*t);if(d(g)<1e-12){if(d(y)<1e-12)continue;w=-b/y,0=t})}function r(e,t){return i(e,t,function(e,t){return e>>0;if(n===0)return-1;var r=0;arguments.length>0&&(r=Number(arguments[1]),r!==r?r=0:r!==0&&r!==Number.POSITIVE_INFINITY&&r!==Number.NEGATIVE_INFINITY&&(r=(r>0||-1)*Math.floor(Math.abs(r))));if(r>=n)return-1;var i=r>=0?r:Math.max(n-Math.abs(r),0);for(;i>>0;n>>0;r>>0;n>>0;n>>0;i>>0,n=0,r;if(arguments.length>1)r=arguments[1];else do{if(n in this){r=this[n++];break}if(++n>=t)throw new TypeError}while(!0);for(;n/g,\">\")}String.prototype.trim||(String.prototype.trim=function(){return this.replace(/^[\\s\\xA0]+/,\"\").replace(/[\\s\\xA0]+$/,\"\")}),fabric.util.string={camelize:e,capitalize:t,escapeXml:n}}(),function(){var e=Array.prototype.slice,t=Function.prototype.apply,n=function(){};Function.prototype.bind||(Function.prototype.bind=function(r){var i=this,s=e.call(arguments,1),o;return s.length?o=function(){return t.call(i,this instanceof n?this:r,s.concat(e.call(arguments)))}:o=function(){return t.call(i,this instanceof n?this:r,arguments)},n.prototype=this.prototype,o.prototype=new n,o})}(),function(){function i(){}function s(t){var n=this.constructor.superclass.prototype[t];return arguments.length>1?n.apply(this,e.call(arguments,1)):n.call(this)}function o(){function u(){this.initialize.apply(this,arguments)}var n=null,o=e.call(arguments,0);typeof o[0]==\"function\"&&(n=o.shift()),u.superclass=n,u.subclasses=[],n&&(i.prototype=n.prototype,u.prototype=new i,n.subclasses.push(u));for(var a=0,f=o.length;a-1?e.prototype[i]=function(e){return function(){var n=this.constructor.superclass;this.constructor.superclass=r;var i=t[e].apply(this,arguments);this.constructor.superclass=n;if(e!==\"initialize\")return i}}(i):e.prototype[i]=t[i],n&&(t.toString!==Object.prototype.toString&&(e.prototype.toString=t.toString),t.valueOf!==Object.prototype.valueOf&&(e.prototype.valueOf=t.valueOf))};fabric.util.createClass=o}(),function(){function t(e){var t=Array.prototype.slice.call(arguments,1),n,r,i=t.length;for(r=0;r-1?s(e,t.match(/opacity:\\s*(\\d?\\.?\\d*)/)[1]):e;for(var r in t)if(r===\"opacity\")s(e,t[r]);else{var i=r===\"float\"||r===\"cssFloat\"?typeof n.styleFloat==\"undefined\"?\"cssFloat\":\"styleFloat\":r;n[i]=t[r]}return e}var t=fabric.document.createElement(\"div\"),n=typeof t.style.opacity==\"string\",r=typeof t.style.filter==\"string\",i=/alpha\\s*\\(\\s*opacity\\s*=\\s*([^\\)]+)\\)/,s=function(e){return e};n?s=function(e,t){return e.style.opacity=t,e}:r&&(s=function(e,t){var n=e.style;return e.currentStyle&&!e.currentStyle.hasLayout&&(n.zoom=1),i.test(n.filter)?(t=t>=.9999?\"\":\"alpha(opacity=\"+t*100+\")\",n.filter=n.filter.replace(i,t)):n.filter+=\" alpha(opacity=\"+t*100+\")\",e}),fabric.util.setStyle=e}(),function(){function t(e){return typeof e==\"string\"?fabric.document.getElementById(e):e}function s(e,t){var n=fabric.document.createElement(e);for(var r in t)r===\"class\"?n.className=t[r]:r===\"for\"?n.htmlFor=t[r]:n.setAttribute(r,t[r]);return n}function o(e,t){e&&(\" \"+e.className+\" \").indexOf(\" \"+t+\" \")===-1&&(e.className+=(e.className?\" \":\"\")+t)}function u(e,t,n){return typeof t==\"string\"&&(t=s(t,n)),e.parentNode&&e.parentNode.replaceChild(t,e),t.appendChild(e),t}function a(e,t){var n,r,i=0,s=0,o=fabric.document.documentElement,u=fabric.document.body||{scrollLeft:0,scrollTop:0};r=e;while(e&&e.parentNode&&!n)e=e.parentNode,e.nodeType===1&&fabric.util.getElementStyle(e,\"position\")===\"fixed\"&&(n=e),e.nodeType===1&&r!==t&&fabric.util.getElementStyle(e,\"position\")===\"absolute\"?(i=0,s=0):e===fabric.document?(i=u.scrollLeft||o.scrollLeft||0,s=u.scrollTop||o.scrollTop||0):(i+=e.scrollLeft||0,s+=e.scrollTop||0);return{left:i,top:s}}function f(e){var t,n=e&&e.ownerDocument,r={left:0,top:0},i={left:0,top:0},s,o={borderLeftWidth:\"left\",borderTopWidth:\"top\",paddingLeft:\"left\",paddingTop:\"top\"};if(!n)return{left:0,top:0};for(var u in o)i[o[u]]+=parseInt(l(e,u),10)||0;return t=n.documentElement,typeof e.getBoundingClientRect!=\"undefined\"&&(r=e.getBoundingClientRect()),s=fabric.util.getScrollLeftTop(e,null),{left:r.left+s.left-(t.clientLeft||0)+i.left,top:r.top+s.top-(t.clientTop||0)+i.top}}var e=Array.prototype.slice,n,r=function(t){return e.call(t,0)};try{n=r(fabric.document.childNodes)instanceof Array}catch(i){}n||(r=function(e){var t=new Array(e.length),n=e.length;while(n--)t[n]=e[n];return t});var l;fabric.document.defaultView&&fabric.document.defaultView.getComputedStyle?l=function(e,t){var n=fabric.document.defaultView.getComputedStyle(e,null);return n?n[t]:undefined}:l=function(e,t){var n=e.style[t];return!n&&e.currentStyle&&(n=e.currentStyle[t]),n},function(){function n(e){return typeof e.onselectstart!=\"undefined\"&&(e.onselectstart=fabric.util.falseFunction),t?e.style[t]=\"none\":typeof e.unselectable==\"string\"&&(e.unselectable=\"on\"),e}function r(e){return typeof e.onselectstart!=\"undefined\"&&(e.onselectstart=null),t?e.style[t]=\"\":typeof e.unselectable==\"string\"&&(e.unselectable=\"\"),e}var e=fabric.document.documentElement.style,t=\"userSelect\"in e?\"userSelect\":\"MozUserSelect\"in e?\"MozUserSelect\":\"WebkitUserSelect\"in e?\"WebkitUserSelect\":\"KhtmlUserSelect\"in e?\"KhtmlUserSelect\":\"\";fabric.util.makeElementUnselectable=n,fabric.util.makeElementSelectable=r}(),function(){function e(e,t){var n=fabric.document.getElementsByTagName(\"head\")[0],r=fabric.document.createElement(\"script\"),i=!0;r.onload=r.onreadystatechange=function(e){if(i){if(typeof this.readyState==\"string\"&&this.readyState!==\"loaded\"&&this.readyState!==\"complete\")return;i=!1,t(e||fabric.window.event),r=r.onload=r.onreadystatechange=null}},r.src=e,n.appendChild(r)}fabric.util.getScript=e}(),fabric.util.getById=t,fabric.util.toArray=r,fabric.util.makeElement=s,fabric.util.addClass=o,fabric.util.wrapElement=u,fabric.util.getScrollLeftTop=a,fabric.util.getElementOffset=f,fabric.util.getElementStyle=l}(),function(){function e(e,t){return e+(/\\?/.test(e)?\"&\":\"?\")+t}function n(){}function r(r,i){i||(i={});var s=i.method?i.method.toUpperCase():\"GET\",o=i.onComplete||function(){},u=t(),a;return u.onreadystatechange=function(){u.readyState===4&&(o(u),u.onreadystatechange=n)},s===\"GET\"&&(a=null,typeof i.parameters==\"string\"&&(r=e(r,i.parameters))),u.open(s,r,!0),(s===\"POST\"||s===\"PUT\")&&u.setRequestHeader(\"Content-Type\",\"application/x-www-form-urlencoded\"),u.send(a),u}var t=function(){var e=[function(){return new ActiveXObject(\"Microsoft.XMLHTTP\")},function(){return new ActiveXObject(\"Msxml2.XMLHTTP\")},function(){return new ActiveXObject(\"Msxml2.XMLHTTP.3.0\")},function(){return new XMLHttpRequest}];for(var t=e.length;t--;)try{var n=e[t]();if(n)return e[t]}catch(r){}}();fabric.util.request=r}(),fabric.log=function(){},fabric.warn=function(){},typeof console!=\"undefined\"&&[\"log\",\"warn\"].forEach(function(e){typeof console[e]!=\"undefined\"&&console[e].apply&&(fabric[e]=function(){return console[e].apply(console,arguments)})}),function(){function e(e){n(function(t){e||(e={});var r=t||+(new Date),i=e.duration||500,s=r+i,o,u=e.onChange||function(){},a=e.abort||function(){return!1},f=e.easing||function(e,t,n,r){return-n*Math.cos(e/r*(Math.PI/2))+n+t},l=\"startValue\"in e?e.startValue:0,c=\"endValue\"in e?e.endValue:100,h=e.byValue||c-l;e.onStart&&e.onStart(),function p(t){o=t||+(new Date);var c=o>s?i:o-r;if(a()){e.onComplete&&e.onComplete();return}u(f(c,l,h,i));if(o>s){e.onComplete&&e.onComplete();return}n(p)}(r)})}function n(){return t.apply(fabric.window,arguments)}var t=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(e){fabric.window.setTimeout(e,1e3/60)};fabric.util.animate=e,fabric.util.requestAnimFrame=n}(),function(){function e(e,t,n,r){return et[3]?t[3]:t[0];if(t[0]===1&&t[3]===1&&t[4]===0&&t[5]===0)return;var n=e.ownerDocument.createElement(\"g\");while(e.firstChild!=null)n.appendChild(e.firstChild);n.setAttribute(\"transform\",\"matrix(\"+t[0]+\" \"+t[1]+\" \"+t[2]+\" \"+t[3]+\" \"+t[4]+\" \"+t[5]+\")\"),e.appendChild(n)}function x(e){var n=e.objects,i=e.options;return n=n.map(function(e){return t[r(e.type)].fromObject(e)}),{objects:n,options:i}}function T(e,t,n){t[n]&&t[n].toSVG&&e.push('','')}var t=e.fabric||(e.fabric={}),n=t.util.object.extend,r=t.util.string.capitalize,i=t.util.object.clone,s=t.util.toFixed,o=t.util.parseUnit,u=t.util.multiplyTransformMatrices,a={cx:\"left\",x:\"left\",r:\"radius\",cy:\"top\",y:\"top\",display:\"visible\",visibility:\"visible\",transform:\"transformMatrix\",\"fill-opacity\":\"fillOpacity\",\"fill-rule\":\"fillRule\",\"font-family\":\"fontFamily\",\"font-size\":\"fontSize\",\"font-style\":\"fontStyle\",\"font-weight\":\"fontWeight\",\"stroke-dasharray\":\"strokeDashArray\",\"stroke-linecap\":\"strokeLineCap\",\"stroke-linejoin\":\"strokeLineJoin\",\"stroke-miterlimit\":\"strokeMiterLimit\",\"stroke-opacity\":\"strokeOpacity\",\"stroke-width\":\"strokeWidth\",\"text-decoration\":\"textDecoration\",\"text-anchor\":\"originX\"},f={stroke:\"strokeOpacity\",fill:\"fillOpacity\"};t.cssRules={},t.gradientDefs={},t.parseTransformAttribute=function(){function e(e,t){var n=t[0];e[0]=Math.cos(n),e[1]=Math.sin(n),e[2]=-Math.sin(n),e[3]=Math.cos(n)}function n(e,t){var n=t[0],r=t.length===2?t[1]:t[0];e[0]=n,e[3]=r}function r(e,n){e[2]=Math.tan(t.util.degreesToRadians(n[0]))}function i(e,n){e[1]=Math.tan(t.util.degreesToRadians(n[0]))}function s(e,t){e[4]=t[0],t.length===2&&(e[5]=t[1])}var o=[1,0,0,1,0,0],u=\"(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)\",a=\"(?:\\\\s+,?\\\\s*|,\\\\s*)\",f=\"(?:(skewX)\\\\s*\\\\(\\\\s*(\"+u+\")\\\\s*\\\\))\",l=\"(?:(skewY)\\\\s*\\\\(\\\\s*(\"+u+\")\\\\s*\\\\))\",c=\"(?:(rotate)\\\\s*\\\\(\\\\s*(\"+u+\")(?:\"+a+\"(\"+u+\")\"+a+\"(\"+u+\"))?\\\\s*\\\\))\",h=\"(?:(scale)\\\\s*\\\\(\\\\s*(\"+u+\")(?:\"+a+\"(\"+u+\"))?\\\\s*\\\\))\",p=\"(?:(translate)\\\\s*\\\\(\\\\s*(\"+u+\")(?:\"+a+\"(\"+u+\"))?\\\\s*\\\\))\",d=\"(?:(matrix)\\\\s*\\\\(\\\\s*(\"+u+\")\"+a+\"(\"+u+\")\"+a+\"(\"+u+\")\"+a+\"(\"+u+\")\"+a+\"(\"+u+\")\"+a+\"(\"+u+\")\"+\"\\\\s*\\\\))\",v=\"(?:\"+d+\"|\"+p+\"|\"+h+\"|\"+c+\"|\"+f+\"|\"+l+\")\",m=\"(?:\"+v+\"(?:\"+a+v+\")*\"+\")\",g=\"^\\\\s*(?:\"+m+\"?)\\\\s*$\",y=new RegExp(g),b=new RegExp(v,\"g\");return function(u){var a=o.concat(),f=[];if(!u||u&&!y.test(u))return a;u.replace(b,function(u){var l=(new RegExp(v)).exec(u).filter(function(e){return e!==\"\"&&e!=null}),c=l[1],h=l.slice(2).map(parseFloat);switch(c){case\"translate\":s(a,h);break;case\"rotate\":h[0]=t.util.degreesToRadians(h[0]),e(a,h);break;case\"scale\":n(a,h);break;case\"skewX\":r(a,h);break;case\"skewY\":i(a,h);break;case\"matrix\":a=h}f.push(a.concat()),a=o.concat()});var l=f[0];while(f.length>1)f.shift(),l=t.util.multiplyTransformMatrices(l,f[0]);return l}}(),t.parseSVGDocument=function(){function s(e,t){while(e&&(e=e.parentNode))if(t.test(e.nodeName))return!0;return!1}var e=/^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/,n=\"(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:e[-+]?\\\\d+)?)\",r=new RegExp(\"^\\\\s*(\"+n+\"+)\\\\s*,?\"+\"\\\\s*(\"+n+\"+)\\\\s*,?\"+\"\\\\s*(\"+n+\"+)\\\\s*,?\"+\"\\\\s*(\"+n+\"+)\\\\s*\"+\"$\");return function(n,u,a){if(!n)return;var f=new Date,l=t.Object.__uid++;w(n);var c=n.getAttribute(\"viewBox\"),h=o(n.getAttribute(\"width\")||\"100%\"),p=o(n.getAttribute(\"height\")||\"100%\"),d,v;if(c&&(c=c.match(r))){var m=parseFloat(c[1]),g=parseFloat(c[2]),y=1,b=1;d=parseFloat(c[3]),v=parseFloat(c[4]),h&&h!==d&&(y=h/d),p&&p!==v&&(b=p/v),E(n,[y,0,0,b,y*-m,b*-g])}var S=t.util.toArray(n.getElementsByTagName(\"*\"));if(S.length===0&&t.isLikelyNode){S=n.selectNodes('//*[name(.)!=\"svg\"]');var x=[];for(var T=0,N=S.length;T/i,\"\")));if(!s||!s.documentElement)return;t.parseSVGDocument(s.documentElement,function(r,i){S.set(e,{objects:t.util.array.invoke(r,\"toObject\"),options:i}),n(r,i)},r)}e=e.replace(/^\\n\\s*/,\"\").trim(),S.has(e,function(r){r?S.get(e,function(e){var t=x(e);n(t.objects,t.options)}):new t.util.request(e,{method:\"get\",onComplete:i})})},loadSVGFromString:function(e,n,r){e=e.trim();var i;if(typeof DOMParser!=\"undefined\"){var s=new DOMParser;s&&s.parseFromString&&(i=s.parseFromString(e,\"text/xml\"))}else t.window.ActiveXObject&&(i=new ActiveXObject(\"Microsoft.XMLDOM\"),i.async=\"false\",i.loadXML(e.replace(//i,\"\")));t.parseSVGDocument(i.documentElement,function(e,t){n(e,t)},r)},createSVGFontFacesMarkup:function(e){var t=\"\";for(var n=0,r=e.length;n',\"\",\"\"].join(\"\")),t},createSVGRefElementsMarkup:function(e){var t=[];return T(t,e,\"backgroundColor\"),T(t,e,\"overlayColor\"),t.join(\"\")}})}(typeof exports!=\"undefined\"?exports:this),fabric.ElementsParser=function(e,t,n,r){this.elements=e,this.callback=t,this.options=n,this.reviver=r,this.svgUid=n&&n.svgUid||0},fabric.ElementsParser.prototype.parse=function(){this.instances=new Array(this.elements.length),this.numElements=this.elements.length,this.createObjects()},fabric.ElementsParser.prototype.createObjects=function(){for(var e=0,t=this.elements.length;ee.x&&this.y>e.y},gte:function(e){return this.x>=e.x&&this.y>=e.y},lerp:function(e,t){return new n(this.x+(e.x-this.x)*t,this.y+(e.y-this.y)*t)},distanceFrom:function(e){var t=this.x-e.x,n=this.y-e.y;return Math.sqrt(t*t+n*n)},midPointFrom:function(e){return new n(this.x+(e.x-this.x)/2,this.y+(e.y-this.y)/2)},min:function(e){return new n(Math.min(this.x,e.x),Math.min(this.y,e.y))},max:function(e){return new n(Math.max(this.x,e.x),Math.max(this.y,e.y))},toString:function(){return this.x+\",\"+this.y},setXY:function(e,t){this.x=e,this.y=t},setFromPoint:function(e){this.x=e.x,this.y=e.y},swap:function(e){var t=this.x,n=this.y;this.x=e.x,this.y=e.y,e.x=t,e.y=n}}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";function n(e){this.status=e,this.points=[]}var t=e.fabric||(e.fabric={});if(t.Intersection){t.warn(\"fabric.Intersection is already defined\");return}t.Intersection=n,t.Intersection.prototype={appendPoint:function(e){this.points.push(e)},appendPoints:function(e){this.points=this.points.concat(e)}},t.Intersection.intersectLineLine=function(e,r,i,s){var o,u=(s.x-i.x)*(e.y-i.y)-(s.y-i.y)*(e.x-i.x),a=(r.x-e.x)*(e.y-i.y)-(r.y-e.y)*(e.x-i.x),f=(s.y-i.y)*(r.x-e.x)-(s.x-i.x)*(r.y-e.y);if(f!==0){var l=u/f,c=a/f;0<=l&&l<=1&&0<=c&&c<=1?(o=new n(\"Intersection\"),o.points.push(new t.Point(e.x+l*(r.x-e.x),e.y+l*(r.y-e.y)))):o=new n}else u===0||a===0?o=new n(\"Coincident\"):o=new n(\"Parallel\");return o},t.Intersection.intersectLinePolygon=function(e,t,r){var i=new n,s=r.length;for(var o=0;o0&&(i.status=\"Intersection\"),i},t.Intersection.intersectPolygonPolygon=function(e,t){var r=new n,i=e.length;for(var s=0;s0&&(r.status=\"Intersection\"),r},t.Intersection.intersectPolygonRectangle=function(e,r,i){var s=r.min(i),o=r.max(i),u=new t.Point(o.x,s.y),a=new t.Point(s.x,o.y),f=n.intersectLinePolygon(s,u,e),l=n.intersectLinePolygon(u,o,e),c=n.intersectLinePolygon(o,a,e),h=n.intersectLinePolygon(a,s,e),p=new n;return p.appendPoints(f.points),p.appendPoints(l.points),p.appendPoints(c.points),p.appendPoints(h.points),p.points.length>0&&(p.status=\"Intersection\"),p}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";function n(e){e?this._tryParsingColor(e):this.setSource([0,0,0,1])}function r(e,t,n){return n<0&&(n+=1),n>1&&(n-=1),n<1/6?e+(t-e)*6*n:n<.5?t:n<2/3?e+(t-e)*(2/3-n)*6:e}var t=e.fabric||(e.fabric={});if(t.Color){t.warn(\"fabric.Color is already defined.\");return}t.Color=n,t.Color.prototype={_tryParsingColor:function(e){var t;e in n.colorNameMap&&(e=n.colorNameMap[e]);if(e===\"transparent\"){this.setSource([255,255,255,0]);return}t=n.sourceFromHex(e),t||(t=n.sourceFromRgb(e)),t||(t=n.sourceFromHsl(e)),t&&this.setSource(t)},_rgbToHsl:function(e,n,r){e/=255,n/=255,r/=255;var i,s,o,u=t.util.array.max([e,n,r]),a=t.util.array.min([e,n,r]);o=(u+a)/2;if(u===a)i=s=0;else{var f=u-a;s=o>.5?f/(2-u-a):f/(u+a);switch(u){case e:i=(n-r)/f+(n1?1:n;if(t){var o=t.split(/\\s*;\\s*/);o[o.length-1]===\"\"&&o.pop();for(var u=o.length;u--;){var a=o[u].split(/\\s*:\\s*/),f=a[0].trim(),l=a[1].trim();f===\"stop-color\"?r=l:f===\"stop-opacity\"&&(s=l)}}return r||(r=e.getAttribute(\"stop-color\")||\"rgb(0,0,0)\"),s||(s=e.getAttribute(\"stop-opacity\")),r=new fabric.Color(r),i=r.getAlpha(),s=isNaN(parseFloat(s))?1:parseFloat(s),s*=i,{offset:n,color:r.toRgb(),opacity:s}}function t(e){return{x1:e.getAttribute(\"x1\")||0,y1:e.getAttribute(\"y1\")||0,x2:e.getAttribute(\"x2\")||\"100%\",y2:e.getAttribute(\"y2\")||0}}function n(e){return{x1:e.getAttribute(\"fx\")||e.getAttribute(\"cx\")||\"50%\",y1:e.getAttribute(\"fy\")||e.getAttribute(\"cy\")||\"50%\",r1:0,x2:e.getAttribute(\"cx\")||\"50%\",y2:e.getAttribute(\"cy\")||\"50%\",r2:e.getAttribute(\"r\")||\"50%\"}}function r(e,t,n){var r,i=0,s=1,o=\"\";for(var u in t){r=parseFloat(t[u],10),typeof t[u]==\"string\"&&/^\\d+%$/.test(t[u])?s=.01:s=1;if(u===\"x1\"||u===\"x2\"||u===\"r2\")s*=n===\"objectBoundingBox\"?e.width:1,i=n===\"objectBoundingBox\"?e.left||0:0;else if(u===\"y1\"||u===\"y2\")s*=n===\"objectBoundingBox\"?e.height:1,i=n===\"objectBoundingBox\"?e.top||0:0;t[u]=r*s+i}if(e.type===\"ellipse\"&&t.r2!==null&&n===\"objectBoundingBox\"&&e.rx!==e.ry){var a=e.ry/e.rx;o=\" scale(1, \"+a+\")\",t.y1&&(t.y1/=a),t.y2&&(t.y2/=a)}return o}fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,initialize:function(e){e||(e={});var t={};this.id=fabric.Object.__uid++,this.type=e.type||\"linear\",t={x1:e.coords.x1||0,y1:e.coords.y1||0,x2:e.coords.x2||0,y2:e.coords.y2||0},this.type===\"radial\"&&(t.r1=e.coords.r1||0,t.r2=e.coords.r2||0),this.coords=t,this.colorStops=e.colorStops.slice(),e.gradientTransform&&(this.gradientTransform=e.gradientTransform),this.offsetX=e.offsetX||this.offsetX,this.offsetY=e.offsetY||this.offsetY},addColorStop:function(e){for(var t in e){var n=new fabric.Color(e[t]);this.colorStops.push({offset:t,color:n.toRgb(),opacity:n.getAlpha()})}return this},toObject:function(){return{type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY}},toSVG:function(e){var t=fabric.util.object.clone(this.coords),n,r;this.colorStops.sort(function(e,t){return e.offset-t.offset});if(!e.group||e.group.type!==\"path-group\")for(var i in t)if(i===\"x1\"||i===\"x2\"||i===\"r2\")t[i]+=this.offsetX-e.width/2;else if(i===\"y1\"||i===\"y2\")t[i]+=this.offsetY-e.height/2;r='id=\"SVGID_'+this.id+'\" gradientUnits=\"userSpaceOnUse\"',this.gradientTransform&&(r+=' gradientTransform=\"matrix('+this.gradientTransform.join(\" \")+')\" '),this.type===\"linear\"?n=[\"\\n']:this.type===\"radial\"&&(n=[\"\\n']);for(var s=0;s\\n');return n.push(this.type===\"linear\"?\"\\n\":\"\\n\"),n.join(\"\")},toLive:function(e,t){var n,r=fabric.util.object.clone(this.coords);if(!this.type)return;if(t.group&&t.group.type===\"path-group\")for(var i in r)if(i===\"x1\"||i===\"x2\")r[i]+=-this.offsetX+t.width/2;else if(i===\"y1\"||i===\"y2\")r[i]+=-this.offsetY+t.height/2;this.type===\"linear\"?n=e.createLinearGradient(r.x1,r.y1,r.x2,r.y2):this.type===\"radial\"&&(n=e.createRadialGradient(r.x1,r.y1,r.r1,r.x2,r.y2,r.r2));for(var s=0,o=this.colorStops.length;s'+''+\"\"},toLive:function(e){var t=typeof this.source==\"function\"?this.source():this.source;if(!t)return\"\";if(typeof t.src!=\"undefined\"){if(!t.complete)return\"\";if(t.naturalWidth===0||t.naturalHeight===0)return\"\"}return e.createPattern(t,this.repeat)}}),function(e){\"use strict\";var t=e.fabric||(e.fabric={});if(t.Shadow){t.warn(\"fabric.Shadow is already defined.\");return}t.Shadow=t.util.createClass({color:\"rgb(0,0,0)\",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,initialize:function(e){typeof e==\"string\"&&(e=this._parseShadow(e));for(var n in e)this[n]=e[n];this.id=t.Object.__uid++},_parseShadow:function(e){var n=e.trim(),r=t.Shadow.reOffsetsAndBlur.exec(n)||[],i=n.replace(t.Shadow.reOffsetsAndBlur,\"\")||\"rgb(0,0,0)\";return{color:i.trim(),offsetX:parseInt(r[1],10)||0,offsetY:parseInt(r[2],10)||0,blur:parseInt(r[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join(\"px \")},toSVG:function(e){var t=\"SourceAlpha\";return e&&(e.fill===this.color||e.stroke===this.color)&&(t=\"SourceGraphic\"),''+''+''+\"\"+\"\"+''+\"\"+\"\"},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY};var e={},n=t.Shadow.prototype;return this.color!==n.color&&(e.color=this.color),this.blur!==n.blur&&(e.blur=this.blur),this.offsetX!==n.offsetX&&(e.offsetX=this.offsetX),this.offsetY!==n.offsetY&&(e.offsetY=this.offsetY),e}}),t.Shadow.reOffsetsAndBlur=/(?:\\s|^)(-?\\d+(?:px)?(?:\\s?|$))?(-?\\d+(?:px)?(?:\\s?|$))?(\\d+(?:px)?)?(?:\\s?|$)(?:$|\\s)/}(typeof exports!=\"undefined\"?exports:this),function(){\"use strict\";if(fabric.StaticCanvas){fabric.warn(\"fabric.StaticCanvas is already defined.\");return}var e=fabric.util.object.extend,t=fabric.util.getElementOffset,n=fabric.util.removeFromArray,r=new Error(\"Could not initialize `canvas` element\");fabric.StaticCanvas=fabric.util.createClass({initialize:function(e,t){t||(t={}),this._initStatic(e,t),fabric.StaticCanvas.activeInstance=this},backgroundColor:\"\",backgroundImage:null,overlayColor:\"\",overlayImage:null,includeDefaultValues:!0,stateful:!0,renderOnAddRemove:!0,clipTo:null,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,preserveObjectStacking:!1,viewportTransform:[1,0,0,1,0,0],onBeforeScaleRotate:function(){},_initStatic:function(e,t){this._objects=[],this._createLowerCanvas(e),this._initOptions(t),this._setImageSmoothing(),t.overlayImage&&this.setOverlayImage(t.overlayImage,this.renderAll.bind(this)),t.backgroundImage&&this.setBackgroundImage(t.backgroundImage,this.renderAll.bind(this)),t.backgroundColor&&this.setBackgroundColor(t.backgroundColor,this.renderAll.bind(this)),t.overlayColor&&this.setOverlayColor(t.overlayColor,this.renderAll.bind(this)),this.calcOffset()},calcOffset:function(){return this._offset=t(this.lowerCanvasEl),this},setOverlayImage:function(e,t,n){return this.__setBgOverlayImage(\"overlayImage\",e,t,n)},setBackgroundImage:function(e,t,n){return this.__setBgOverlayImage(\"backgroundImage\",e,t,n)},setOverlayColor:function(e,t){return this.__setBgOverlayColor(\"overlayColor\",e,t)},setBackgroundColor:function(e,t){return this.__setBgOverlayColor(\"backgroundColor\",e,t)},_setImageSmoothing:function(){var e=this.getContext();e.imageSmoothingEnabled=this.imageSmoothingEnabled,e.webkitImageSmoothingEnabled=this.imageSmoothingEnabled,e.mozImageSmoothingEnabled=this.imageSmoothingEnabled,e.msImageSmoothingEnabled=this.imageSmoothingEnabled,e.oImageSmoothingEnabled=this.imageSmoothingEnabled},__setBgOverlayImage:function(e,t,n,r){return typeof t==\"string\"?fabric.util.loadImage(t,function(t){this[e]=new fabric.Image(t,r),n&&n()},this):(this[e]=t,n&&n()),this},__setBgOverlayColor:function(e,t,n){if(t&&t.source){var r=this;fabric.util.loadImage(t.source,function(i){r[e]=new fabric.Pattern({source:i,repeat:t.repeat,offsetX:t.offsetX,offsetY:t.offsetY}),n&&n()})}else this[e]=t,n&&n();return this},_createCanvasElement:function(){var e=fabric.document.createElement(\"canvas\");e.style||(e.style={});if(!e)throw r;return this._initCanvasElement(e),e},_initCanvasElement:function(e){fabric.util.createCanvasElement(e);if(typeof e.getContext==\"undefined\")throw r},_initOptions:function(e){for(var t in e)this[t]=e[t];this.width=this.width||parseInt(this.lowerCanvasEl.width,10)||0,this.height=this.height||parseInt(this.lowerCanvasEl.height,10)||0;if(!this.lowerCanvasEl.style)return;this.lowerCanvasEl.width=this.width,this.lowerCanvasEl.height=this.height,this.lowerCanvasEl.style.width=this.width+\"px\",this.lowerCanvasEl.style.height=this.height+\"px\",this.viewportTransform=this.viewportTransform.slice()},_createLowerCanvas:function(e){this.lowerCanvasEl=fabric.util.getById(e)||this._createCanvasElement(),this._initCanvasElement(this.lowerCanvasEl),fabric.util.addClass(this.lowerCanvasEl,\"lower-canvas\"),this.interactive&&this._applyCanvasStyle(this.lowerCanvasEl),this.contextContainer=this.lowerCanvasEl.getContext(\"2d\")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(e,t){return this.setDimensions({width:e},t)},setHeight:function(e,t){return this.setDimensions({height:e},t)},setDimensions:function(e,t){var n;t=t||{};for(var r in e)n=e[r],t.cssOnly||(this._setBackstoreDimension(r,e[r]),n+=\"px\"),t.backstoreOnly||this._setCssDimension(r,n);return t.cssOnly||this.renderAll(),this.calcOffset(),this},_setBackstoreDimension:function(e,t){return this.lowerCanvasEl[e]=t,this.upperCanvasEl&&(this.upperCanvasEl[e]=t),this.cacheCanvasEl&&(this.cacheCanvasEl[e]=t),this[e]=t,this},_setCssDimension:function(e,t){return this.lowerCanvasEl.style[e]=t,this.upperCanvasEl&&(this.upperCanvasEl.style[e]=t),this.wrapperEl&&(this.wrapperEl.style[e]=t),this},getZoom:function(){return Math.sqrt(this.viewportTransform[0]*this.viewportTransform[3])},setViewportTransform:function(e){this.viewportTransform=e,this.renderAll();for(var t=0,n=this._objects.length;t\"),n.join(\"\")},_setSVGPreamble:function(e,t){t.suppressPreamble||e.push('','\\n')},_setSVGHeader:function(e,t){var n,r,i;t.viewBox?(n=t.viewBox.width,r=t.viewBox.height):(n=this.width,r=this.height,this.svgViewportTransformation||(i=this.viewportTransform,n/=i[0],r/=i[3])),e.push(\"',\"Created with Fabric.js \",fabric.version,\"\",\"\",fabric.createSVGFontFacesMarkup(this.getObjects()),fabric.createSVGRefElementsMarkup(this),\"\")},_setSVGObjects:function(e,t){var n=this.getActiveGroup();n&&this.discardActiveGroup();for(var r=0,i=this.getObjects(),s=i.length;r\"):this[t]&&t===\"overlayColor\"&&e.push('\")},sendToBack:function(e){return n(this._objects,e),this._objects.unshift(e),this.renderAll&&this.renderAll()},bringToFront:function(e){return n(this._objects,e),this._objects.push(e),this.renderAll&&this.renderAll()},sendBackwards:function(e,t){var r=this._objects.indexOf(e);if(r!==0){var i=this._findNewLowerIndex(e,r,t);n(this._objects,e),this._objects.splice(i,0,e),this.renderAll&&this.renderAll()}return this},_findNewLowerIndex:function(e,t,n){var r;if(n){r=t;for(var i=t-1;i>=0;--i){var s=e.intersectsWithObject(this._objects[i])||e.isContainedWithinObject(this._objects[i])||this._objects[i].isContainedWithinObject(e);if(s){r=i;break}}}else r=t-1;return r},bringForward:function(e,t){var r=this._objects.indexOf(e);if(r!==this._objects.length-1){var i=this._findNewUpperIndex(e,r,t);n(this._objects,e),this._objects.splice(i,0,e),this.renderAll&&this.renderAll()}return this},_findNewUpperIndex:function(e,t,n){var r;if(n){r=t;for(var i=t+1;i\"}}),e(fabric.StaticCanvas.prototype,fabric.Observable),e(fabric.StaticCanvas.prototype,fabric.Collection),e(fabric.StaticCanvas.prototype,fabric.DataURLExporter),e(fabric.StaticCanvas,{EMPTY_JSON:'{\"objects\": [], \"background\": \"white\"}',supports:function(e){var t=fabric.util.createCanvasElement();if(!t||!t.getContext)return null;var n=t.getContext(\"2d\");if(!n)return null;switch(e){case\"getImageData\":return typeof n.getImageData!=\"undefined\";case\"setLineDash\":return typeof n.setLineDash!=\"undefined\";case\"toDataURL\":return typeof t.toDataURL!=\"undefined\";case\"toDataURLWithQuality\":try{return t.toDataURL(\"image/jpeg\",0),!0}catch(r){}return!1;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject}(),fabric.BaseBrush=fabric.util.createClass({color:\"rgb(0, 0, 0)\",width:1,shadow:null,strokeLineCap:\"round\",strokeLineJoin:\"round\",setShadow:function(e){return this.shadow=new fabric.Shadow(e),this},_setBrushStyles:function(){var e=this.canvas.contextTop;e.strokeStyle=this.color,e.lineWidth=this.width,e.lineCap=this.strokeLineCap,e.lineJoin=this.strokeLineJoin},_setShadow:function(){if(!this.shadow)return;var e=this.canvas.contextTop;e.shadowColor=this.shadow.color,e.shadowBlur=this.shadow.blur,e.shadowOffsetX=this.shadow.offsetX,e.shadowOffsetY=this.shadow.offsetY},_resetShadow:function(){var e=this.canvas.contextTop;e.shadowColor=\"\",e.shadowBlur=e.shadowOffsetX=e.shadowOffsetY=0}}),function(){fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{initialize:function(e){this.canvas=e,this._points=[]},onMouseDown:function(e){this._prepareForDrawing(e),this._captureDrawingPath(e),this._render()},onMouseMove:function(e){this._captureDrawingPath(e),this.canvas.clearContext(this.canvas.contextTop),this._render()},onMouseUp:function(){this._finalizeAndAddPath()},_prepareForDrawing:function(e){var t=new fabric.Point(e.x,e.y);this._reset(),this._addPoint(t),this.canvas.contextTop.moveTo(t.x,t.y)},_addPoint:function(e){this._points.push(e)},_reset:function(){this._points.length=0,this._setBrushStyles(),this._setShadow()},_captureDrawingPath:function(e){var t=new fabric.Point(e.x,e.y);this._addPoint(t)},_render:function(){var e=this.canvas.contextTop,t=this.canvas.viewportTransform,n=this._points[0],r=this._points[1];e.save(),e.transform(t[0],t[1],t[2],t[3],t[4],t[5]),e.beginPath(),this._points.length===2&&n.x===r.x&&n.y===r.y&&(n.x-=.5,r.x+=.5),e.moveTo(n.x,n.y);for(var i=1,s=this._points.length;in.padding?e.x<0?e.x+=n.padding:e.x-=n.padding:e.x=0,i(e.y)>n.padding?e.y<0?e.y+=n.padding:e.y-=n.padding:e.y=0},_rotateObject:function(e,t){var i=this._currentTransform;if(i.target.get(\"lockRotation\"))return;var s=r(i.ey-i.top,i.ex-i.left),o=r(t-i.top,e-i.left),u=n(o-s+i.theta);u<0&&(u=360+u),i.target.angle=u},setCursor:function(e){this.upperCanvasEl.style.cursor=e},_resetObjectTransform:function(e){e.scaleX=1,e.scaleY=1,e.setAngle(0)},_drawSelection:function(){var e=this.contextTop,t=this._groupSelector,n=t.left,r=t.top,o=i(n),u=i(r);e.fillStyle=this.selectionColor,e.fillRect(t.ex-(n>0?0:-n),t.ey-(r>0?0:-r),o,u),e.lineWidth=this.selectionLineWidth,e.strokeStyle=this.selectionBorderColor;if(this.selectionDashArray.length>1){var a=t.ex+s-(n>0?0:o),f=t.ey+s-(r>0?0:u);e.beginPath(),fabric.util.drawDashedLine(e,a,f,a+o,f,this.selectionDashArray),fabric.util.drawDashedLine(e,a,f+u-1,a+o,f+u-1,this.selectionDashArray),fabric.util.drawDashedLine(e,a,f,a,f+u,this.selectionDashArray),fabric.util.drawDashedLine(e,a+o-1,f,a+o-1,f+u,this.selectionDashArray),e.closePath(),e.stroke()}else e.strokeRect(t.ex+s-(n>0?0:o),t.ey+s-(r>0?0:u),o,u)},_isLastRenderedObject:function(e){return this.controlsAboveOverlay&&this.lastRenderedObjectWithControlsAboveOverlay&&this.lastRenderedObjectWithControlsAboveOverlay.visible&&this.containsPoint(e,this.lastRenderedObjectWithControlsAboveOverlay)&&this.lastRenderedObjectWithControlsAboveOverlay._findTargetCorner(this.getPointer(e,!0))},findTarget:function(e,t){if(this.skipTargetFind)return;if(this._isLastRenderedObject(e))return this.lastRenderedObjectWithControlsAboveOverlay;var n=this.getActiveGroup();if(n&&!t&&this.containsPoint(e,n))return n;var r=this._searchPossibleTargets(e);return this._fireOverOutEvents(r),r},_fireOverOutEvents:function(e){e?this._hoveredTarget!==e&&(this.fire(\"mouse:over\",{target:e}),e.fire(\"mouseover\"),this._hoveredTarget&&(this.fire(\"mouse:out\",{target:this._hoveredTarget}),this._hoveredTarget.fire(\"mouseout\")),this._hoveredTarget=e):this._hoveredTarget&&(this.fire(\"mouse:out\",{target:this._hoveredTarget}),this._hoveredTarget.fire(\"mouseout\"),this._hoveredTarget=null)},_checkTarget:function(e,t,n){if(t&&t.visible&&t.evented&&this.containsPoint(e,t)){if(!this.perPixelTargetFind&&!t.perPixelTargetFind||!!t.isEditing)return!0;var r=this.isTargetTransparent(t,n.x,n.y);if(!r)return!0}},_searchPossibleTargets:function(e){var t,n=this.getPointer(e,!0),r=this._objects.length;while(r--)if(this._checkTarget(e,this._objects[r],n)){this.relatedTarget=this._objects[r],t=this._objects[r];break}return t},getPointer:function(t,n,r){r||(r=this.upperCanvasEl);var i=e(t,r),s=r.getBoundingClientRect(),o=s.width||0,u=s.height||0,a;if(!o||!u)\"top\"in s&&\"bottom\"in s&&(u=Math.abs(s.top-s.bottom)),\"right\"in s&&\"left\"in s&&(o=Math.abs(s.right-s.left));return this.calcOffset(),i.x=i.x-this._offset.left,i.y=i.y-this._offset.top,n||(i=fabric.util.transformPoint(i,fabric.util.invertTransform(this.viewportTransform))),o===0||u===0?a={width:1,height:1}:a={width:r.width/o,height:r.height/u},{x:i.x*a.width,y:i.y*a.height}},_createUpperCanvas:function(){var e=this.lowerCanvasEl.className.replace(/\\s*lower-canvas\\s*/,\"\");this.upperCanvasEl=this._createCanvasElement(),fabric.util.addClass(this.upperCanvasEl,\"upper-canvas \"+e),this.wrapperEl.appendChild(this.upperCanvasEl),this._copyCanvasStyle(this.lowerCanvasEl,this.upperCanvasEl),this._applyCanvasStyle(this.upperCanvasEl),this.contextTop=this.upperCanvasEl.getContext(\"2d\")},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute(\"width\",this.width),this.cacheCanvasEl.setAttribute(\"height\",this.height),this.contextCache=this.cacheCanvasEl.getContext(\"2d\")},_initWrapperElement:function(){this.wrapperEl=fabric.util.wrapElement(this.lowerCanvasEl,\"div\",{\"class\":this.containerClass}),fabric.util.setStyle(this.wrapperEl,{width:this.getWidth()+\"px\",height:this.getHeight()+\"px\",position:\"relative\"}),fabric.util.makeElementUnselectable(this.wrapperEl)},_applyCanvasStyle:function(e){var t=this.getWidth()||e.width,n=this.getHeight()||e.height;fabric.util.setStyle(e,{position:\"absolute\",width:t+\"px\",height:n+\"px\",left:0,top:0}),e.width=t,e.height=n,fabric.util.makeElementUnselectable(e)},_copyCanvasStyle:function(e,t){t.style.cssText=e.style.cssText},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},_setActiveObject:function(e){this._activeObject&&this._activeObject.set(\"active\",!1),this._activeObject=e,e.set(\"active\",!0)},setActiveObject:function(e,t){return this._setActiveObject(e),this.renderAll(),this.fire(\"object:selected\",{target:e,e:t}),e.fire(\"selected\",{e:t}),this},getActiveObject:function(){return this._activeObject},_discardActiveObject:function(){this._activeObject&&this._activeObject.set(\"active\",!1),this._activeObject=null},discardActiveObject:function(e){return this._discardActiveObject(),this.renderAll(),this.fire(\"selection:cleared\",{e:e}),this},_setActiveGroup:function(e){this._activeGroup=e,e&&e.set(\"active\",!0)},setActiveGroup:function(e,t){return this._setActiveGroup(e),e&&(this.fire(\"object:selected\",{target:e,e:t}),e.fire(\"selected\",{e:t})),this},getActiveGroup:function(){return this._activeGroup},_discardActiveGroup:function(){var e=this.getActiveGroup();e&&e.destroy(),this.setActiveGroup(null)},discardActiveGroup:function(e){return this._discardActiveGroup(),this.fire(\"selection:cleared\",{e:e}),this},deactivateAll:function(){var e=this.getObjects(),t=0,n=e.length;for(;t1&&(t=new fabric.Group(t.reverse(),{originX:\"center\",originY:\"center\",canvas:this}),t.addWithUpdate(),this.setActiveGroup(t,e),t.saveCoords(),this.fire(\"selection:created\",{target:t}),this.renderAll())},_collectObjects:function(){var n=[],r,i=this._groupSelector.ex,s=this._groupSelector.ey,o=i+this._groupSelector.left,u=s+this._groupSelector.top,a=new fabric.Point(e(i,o),e(s,u)),f=new fabric.Point(t(i,o),t(s,u)),l=i===o&&s===u;for(var c=this._objects.length;c--;){r=this._objects[c];if(!r||!r.selectable||!r.visible)continue;if(r.intersectsWithRect(a,f)||r.isContainedWithinRect(a,f)||r.containsPoint(a)||r.containsPoint(f)){r.set(\"active\",!0),n.push(r);if(l)break}}return n},_maybeGroupObjects:function(e){this.selection&&this._groupSelector&&this._groupSelectedObjects(e);var t=this.getActiveGroup();t&&(t.setObjectsCoords().setCoords(),t.isMoving=!1,this.setCursor(this.defaultCursor)),this._groupSelector=null,this._currentTransform=null}})}(),fabric.util.object.extend(fabric.StaticCanvas.prototype,{toDataURL:function(e){e||(e={});var t=e.format||\"png\",n=e.quality||1,r=e.multiplier||1,i={left:e.left,top:e.top,width:e.width,height:e.height};return r!==1?this.__toDataURLWithMultiplier(t,n,i,r):this.__toDataURL(t,n,i)},__toDataURL:function(e,t,n){this.renderAll(!0);var r=this.upperCanvasEl||this.lowerCanvasEl,i=this.__getCroppedCanvas(r,n);e===\"jpg\"&&(e=\"jpeg\");var s=fabric.StaticCanvas.supports(\"toDataURLWithQuality\")?(i||r).toDataURL(\"image/\"+e,t):(i||r).toDataURL(\"image/\"+e);return this.contextTop&&this.clearContext(this.contextTop),this.renderAll(),i&&(i=null),s},__getCroppedCanvas:function(e,t){var n,r,i=\"left\"in t||\"top\"in t||\"width\"in t||\"height\"in t;return i&&(n=fabric.util.createCanvasElement(),r=n.getContext(\"2d\"),n.width=t.width||this.width,n.height=t.height||this.height,r.drawImage\n(e,-t.left||0,-t.top||0)),n},__toDataURLWithMultiplier:function(e,t,n,r){var i=this.getWidth(),s=this.getHeight(),o=i*r,u=s*r,a=this.getActiveObject(),f=this.getActiveGroup(),l=this.contextTop||this.contextContainer;r>1&&this.setWidth(o).setHeight(u),l.scale(r,r),n.left&&(n.left*=r),n.top&&(n.top*=r),n.width?n.width*=r:r<1&&(n.width=o),n.height?n.height*=r:r<1&&(n.height=u),f?this._tempRemoveBordersControlsFromGroup(f):a&&this.deactivateAll&&this.deactivateAll(),this.renderAll(!0);var c=this.__toDataURL(e,t,n);return this.width=i,this.height=s,l.scale(1/r,1/r),this.setWidth(i).setHeight(s),f?this._restoreBordersControlsOnGroup(f):a&&this.setActiveObject&&this.setActiveObject(a),this.contextTop&&this.clearContext(this.contextTop),this.renderAll(),c},toDataURLWithMultiplier:function(e,t,n){return this.toDataURL({format:e,multiplier:t,quality:n})},_tempRemoveBordersControlsFromGroup:function(e){e.origHasControls=e.hasControls,e.origBorderColor=e.borderColor,e.hasControls=!0,e.borderColor=\"rgba(0,0,0,0)\",e.forEachObject(function(e){e.origBorderColor=e.borderColor,e.borderColor=\"rgba(0,0,0,0)\"})},_restoreBordersControlsOnGroup:function(e){e.hideControls=e.origHideControls,e.borderColor=e.origBorderColor,e.forEachObject(function(e){e.borderColor=e.origBorderColor,delete e.origBorderColor})}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromDatalessJSON:function(e,t,n){return this.loadFromJSON(e,t,n)},loadFromJSON:function(e,t,n){if(!e)return;var r=typeof e==\"string\"?JSON.parse(e):e;this.clear();var i=this;return this._enlivenObjects(r.objects,function(){i._setBgOverlay(r,t)},n),this},_setBgOverlay:function(e,t){var n=this,r={backgroundColor:!1,overlayColor:!1,backgroundImage:!1,overlayImage:!1};if(!e.backgroundImage&&!e.overlayImage&&!e.background&&!e.overlay){t&&t();return}var i=function(){r.backgroundImage&&r.overlayImage&&r.backgroundColor&&r.overlayColor&&(n.renderAll(),t&&t())};this.__setBgOverlay(\"backgroundImage\",e.backgroundImage,r,i),this.__setBgOverlay(\"overlayImage\",e.overlayImage,r,i),this.__setBgOverlay(\"backgroundColor\",e.background,r,i),this.__setBgOverlay(\"overlayColor\",e.overlay,r,i),i()},__setBgOverlay:function(e,t,n,r){var i=this;if(!t){n[e]=!0;return}e===\"backgroundImage\"||e===\"overlayImage\"?fabric.Image.fromObject(t,function(t){i[e]=t,n[e]=!0,r&&r()}):this[\"set\"+fabric.util.string.capitalize(e,!0)](t,function(){n[e]=!0,r&&r()})},_enlivenObjects:function(e,t,n){var r=this;if(!e||e.length===0){t&&t();return}var i=this.renderOnAddRemove;this.renderOnAddRemove=!1,fabric.util.enlivenObjects(e,function(e){e.forEach(function(e,t){r.insertAt(e,t,!0)}),r.renderOnAddRemove=i,t&&t()},null,n)},_toDataURL:function(e,t){this.clone(function(n){t(n.toDataURL(e))})},_toDataURLWithMultiplier:function(e,t,n){this.clone(function(r){n(r.toDataURLWithMultiplier(e,t))})},clone:function(e,t){var n=JSON.stringify(this.toJSON(t));this.cloneWithoutData(function(t){t.loadFromJSON(n,function(){e&&e(t)})})},cloneWithoutData:function(e){var t=fabric.document.createElement(\"canvas\");t.width=this.getWidth(),t.height=this.getHeight();var n=new fabric.Canvas(t);n.clipTo=this.clipTo,this.backgroundImage?(n.setBackgroundImage(this.backgroundImage.src,function(){n.renderAll(),e&&e(n)}),n.backgroundImageOpacity=this.backgroundImageOpacity,n.backgroundImageStretch=this.backgroundImageStretch):e&&e(n)}}),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=t.util.object.extend,r=t.util.toFixed,i=t.util.string.capitalize,s=t.util.degreesToRadians,o=t.StaticCanvas.supports(\"setLineDash\");if(t.Object)return;t.Object=t.util.createClass({type:\"object\",originX:\"left\",originY:\"top\",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,cornerSize:12,transparentCorners:!0,hoverCursor:null,padding:0,borderColor:\"rgba(102,153,255,0.75)\",cornerColor:\"rgba(102,153,255,0.5)\",centeredScaling:!1,centeredRotation:!0,fill:\"rgb(0,0,0)\",fillRule:\"nonzero\",globalCompositeOperation:\"source-over\",backgroundColor:\"\",stroke:null,strokeWidth:1,strokeDashArray:null,strokeLineCap:\"butt\",strokeLineJoin:\"miter\",strokeMiterLimit:10,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,transformMatrix:null,minScaleLimit:.01,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,hasRotatingPoint:!0,rotatingPointOffset:40,perPixelTargetFind:!1,includeDefaultValues:!0,clipTo:null,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockUniScaling:!1,lockScalingFlip:!1,stateProperties:\"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor\".split(\" \"),initialize:function(e){e&&this.setOptions(e)},_initGradient:function(e){e.fill&&e.fill.colorStops&&!(e.fill instanceof t.Gradient)&&this.set(\"fill\",new t.Gradient(e.fill))},_initPattern:function(e){e.fill&&e.fill.source&&!(e.fill instanceof t.Pattern)&&this.set(\"fill\",new t.Pattern(e.fill)),e.stroke&&e.stroke.source&&!(e.stroke instanceof t.Pattern)&&this.set(\"stroke\",new t.Pattern(e.stroke))},_initClipping:function(e){if(!e.clipTo||typeof e.clipTo!=\"string\")return;var n=t.util.getFunctionBody(e.clipTo);typeof n!=\"undefined\"&&(this.clipTo=new Function(\"ctx\",n))},setOptions:function(e){for(var t in e)this.set(t,e[t]);this._initGradient(e),this._initPattern(e),this._initClipping(e)},transform:function(e,t){this.group&&this.group.transform(e,t);var n=t?this._getLeftTopCoords():this.getCenterPoint();e.translate(n.x,n.y),e.rotate(s(this.angle)),e.scale(this.scaleX*(this.flipX?-1:1),this.scaleY*(this.flipY?-1:1))},toObject:function(e){var n=t.Object.NUM_FRACTION_DIGITS,i={type:this.type,originX:this.originX,originY:this.originY,left:r(this.left,n),top:r(this.top,n),width:r(this.width,n),height:r(this.height,n),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:r(this.strokeWidth,n),strokeDashArray:this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeLineJoin:this.strokeLineJoin,strokeMiterLimit:r(this.strokeMiterLimit,n),scaleX:r(this.scaleX,n),scaleY:r(this.scaleY,n),angle:r(this.getAngle(),n),flipX:this.flipX,flipY:this.flipY,opacity:r(this.opacity,n),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,clipTo:this.clipTo&&String(this.clipTo),backgroundColor:this.backgroundColor,fillRule:this.fillRule,globalCompositeOperation:this.globalCompositeOperation};return this.includeDefaultValues||(i=this._removeDefaultValues(i)),t.util.populateWithProperties(this,i,e),i},toDatalessObject:function(e){return this.toObject(e)},_removeDefaultValues:function(e){var n=t.util.getKlass(e.type).prototype,r=n.stateProperties;return r.forEach(function(t){e[t]===n[t]&&delete e[t]}),e},toString:function(){return\"#\"},get:function(e){return this[e]},_setObject:function(e){for(var t in e)this._set(t,e[t])},set:function(e,t){return typeof e==\"object\"?this._setObject(e):typeof t==\"function\"&&e!==\"clipTo\"?this._set(e,t(this.get(e))):this._set(e,t),this},_set:function(e,n){var i=e===\"scaleX\"||e===\"scaleY\";return i&&(n=this._constrainScale(n)),e===\"scaleX\"&&n<0?(this.flipX=!this.flipX,n*=-1):e===\"scaleY\"&&n<0?(this.flipY=!this.flipY,n*=-1):e===\"width\"||e===\"height\"?this.minScaleLimit=r(Math.min(.1,1/Math.max(this.width,this.height)),2):e===\"shadow\"&&n&&!(n instanceof t.Shadow)&&(n=new t.Shadow(n)),this[e]=n,this},toggle:function(e){var t=this.get(e);return typeof t==\"boolean\"&&this.set(e,!t),this},setSourcePath:function(e){return this.sourcePath=e,this},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:[1,0,0,1,0,0]},render:function(e,n){if(this.width===0||this.height===0||!this.visible)return;e.save(),this._setupCompositeOperation(e),n||this.transform(e),this._setStrokeStyles(e),this._setFillStyles(e),this.group&&this.group.type===\"path-group\"&&e.translate(-this.group.width/2,-this.group.height/2),this.transformMatrix&&e.transform.apply(e,this.transformMatrix),this._setOpacity(e),this._setShadow(e),this.clipTo&&t.util.clipContext(this,e),this._render(e,n),this.clipTo&&e.restore(),this._removeShadow(e),this._restoreCompositeOperation(e),e.restore()},_setOpacity:function(e){this.group&&this.group._setOpacity(e),e.globalAlpha*=this.opacity},_setStrokeStyles:function(e){this.stroke&&(e.lineWidth=this.strokeWidth,e.lineCap=this.strokeLineCap,e.lineJoin=this.strokeLineJoin,e.miterLimit=this.strokeMiterLimit,e.strokeStyle=this.stroke.toLive?this.stroke.toLive(e,this):this.stroke)},_setFillStyles:function(e){this.fill&&(e.fillStyle=this.fill.toLive?this.fill.toLive(e,this):this.fill)},_renderControls:function(e,n){var r=this.getViewportTransform();e.save();if(this.active&&!n){var i;this.group&&(i=t.util.transformPoint(this.group.getCenterPoint(),r),e.translate(i.x,i.y),e.rotate(s(this.group.angle))),i=t.util.transformPoint(this.getCenterPoint(),r,null!=this.group),this.group&&(i.x*=this.group.scaleX,i.y*=this.group.scaleY),e.translate(i.x,i.y),e.rotate(s(this.angle)),this.drawBorders(e),this.drawControls(e)}e.restore()},_setShadow:function(e){if(!this.shadow)return;e.shadowColor=this.shadow.color,e.shadowBlur=this.shadow.blur,e.shadowOffsetX=this.shadow.offsetX,e.shadowOffsetY=this.shadow.offsetY},_removeShadow:function(e){if(!this.shadow)return;e.shadowColor=\"\",e.shadowBlur=e.shadowOffsetX=e.shadowOffsetY=0},_renderFill:function(e){if(!this.fill)return;e.save();if(this.fill.gradientTransform){var t=this.fill.gradientTransform;e.transform.apply(e,t)}this.fill.toLive&&e.translate(-this.width/2+this.fill.offsetX||0,-this.height/2+this.fill.offsetY||0),this.fillRule===\"evenodd\"?e.fill(\"evenodd\"):e.fill(),e.restore(),this.shadow&&!this.shadow.affectStroke&&this._removeShadow(e)},_renderStroke:function(e){if(!this.stroke||this.strokeWidth===0)return;e.save();if(this.strokeDashArray)1&this.strokeDashArray.length&&this.strokeDashArray.push.apply(this.strokeDashArray,this.strokeDashArray),o?(e.setLineDash(this.strokeDashArray),this._stroke&&this._stroke(e)):this._renderDashedStroke&&this._renderDashedStroke(e),e.stroke();else{if(this.stroke.gradientTransform){var t=this.stroke.gradientTransform;e.transform.apply(e,t)}this._stroke?this._stroke(e):e.stroke()}this._removeShadow(e),e.restore()},clone:function(e,n){return this.constructor.fromObject?this.constructor.fromObject(this.toObject(n),e):new t.Object(this.toObject(n))},cloneAsImage:function(e){var n=this.toDataURL();return t.util.loadImage(n,function(n){e&&e(new t.Image(n))}),this},toDataURL:function(e){e||(e={});var n=t.util.createCanvasElement(),r=this.getBoundingRect();n.width=r.width,n.height=r.height,t.util.wrapElement(n,\"div\");var i=new t.Canvas(n);e.format===\"jpg\"&&(e.format=\"jpeg\"),e.format===\"jpeg\"&&(i.backgroundColor=\"#fff\");var s={active:this.get(\"active\"),left:this.getLeft(),top:this.getTop()};this.set(\"active\",!1),this.setPositionByOrigin(new t.Point(n.width/2,n.height/2),\"center\",\"center\");var o=this.canvas;i.add(this);var u=i.toDataURL(e);return this.set(s).setCoords(),this.canvas=o,i.dispose(),i=null,u},isType:function(e){return this.type===e},complexity:function(){return 0},toJSON:function(e){return this.toObject(e)},setGradient:function(e,n){n||(n={});var r={colorStops:[]};r.type=n.type||(n.r1||n.r2?\"radial\":\"linear\"),r.coords={x1:n.x1,y1:n.y1,x2:n.x2,y2:n.y2};if(n.r1||n.r2)r.coords.r1=n.r1,r.coords.r2=n.r2;for(var i in n.colorStops){var s=new t.Color(n.colorStops[i]);r.colorStops.push({offset:i,color:s.toRgb(),opacity:s.getAlpha()})}return this.set(e,t.Gradient.forObject(this,r))},setPatternFill:function(e){return this.set(\"fill\",new t.Pattern(e))},setShadow:function(e){return this.set(\"shadow\",e?new t.Shadow(e):null)},setColor:function(e){return this.set(\"fill\",e),this},setAngle:function(e){var t=(this.originX!==\"center\"||this.originY!==\"center\")&&this.centeredRotation;return t&&this._setOriginToCenter(),this.set(\"angle\",e),t&&this._resetOrigin(),this},centerH:function(){return this.canvas.centerObjectH(this),this},centerV:function(){return this.canvas.centerObjectV(this),this},center:function(){return this.canvas.centerObject(this),this},remove:function(){return this.canvas.remove(this),this},getLocalPointer:function(e,t){t=t||this.canvas.getPointer(e);var n=this.translateToOriginPoint(this.getCenterPoint(),\"left\",\"top\");return{x:t.x-n.x,y:t.y-n.y}},_setupCompositeOperation:function(e){this.globalCompositeOperation&&(this._prevGlobalCompositeOperation=e.globalCompositeOperation,e.globalCompositeOperation=this.globalCompositeOperation)},_restoreCompositeOperation:function(e){this.globalCompositeOperation&&this._prevGlobalCompositeOperation&&(e.globalCompositeOperation=this._prevGlobalCompositeOperation)}}),t.util.createAccessors(t.Object),t.Object.prototype.rotate=t.Object.prototype.setAngle,n(t.Object.prototype,t.Observable),t.Object.NUM_FRACTION_DIGITS=2,t.Object.__uid=0}(typeof exports!=\"undefined\"?exports:this),function(){var e=fabric.util.degreesToRadians;fabric.util.object.extend(fabric.Object.prototype,{translateToCenterPoint:function(t,n,r){var i=t.x,s=t.y,o=this.stroke?this.strokeWidth:0;return n===\"left\"?i=t.x+(this.getWidth()+o*this.scaleX)/2:n===\"right\"&&(i=t.x-(this.getWidth()+o*this.scaleX)/2),r===\"top\"?s=t.y+(this.getHeight()+o*this.scaleY)/2:r===\"bottom\"&&(s=t.y-(this.getHeight()+o*this.scaleY)/2),fabric.util.rotatePoint(new fabric.Point(i,s),t,e(this.angle))},translateToOriginPoint:function(t,n,r){var i=t.x,s=t.y,o=this.stroke?this.strokeWidth:0;return n===\"left\"?i=t.x-(this.getWidth()+o*this.scaleX)/2:n===\"right\"&&(i=t.x+(this.getWidth()+o*this.scaleX)/2),r===\"top\"?s=t.y-(this.getHeight()+o*this.scaleY)/2:r===\"bottom\"&&(s=t.y+(this.getHeight()+o*this.scaleY)/2),fabric.util.rotatePoint(new fabric.Point(i,s),t,e(this.angle))},getCenterPoint:function(){var e=new fabric.Point(this.left,this.top);return this.translateToCenterPoint(e,this.originX,this.originY)},getPointByOrigin:function(e,t){var n=this.getCenterPoint();return this.translateToOriginPoint(n,e,t)},toLocalPoint:function(t,n,r){var i=this.getCenterPoint(),s=this.stroke?this.strokeWidth:0,o,u;return n&&r?(n===\"left\"?o=i.x-(this.getWidth()+s*this.scaleX)/2:n===\"right\"?o=i.x+(this.getWidth()+s*this.scaleX)/2:o=i.x,r===\"top\"?u=i.y-(this.getHeight()+s*this.scaleY)/2:r===\"bottom\"?u=i.y+(this.getHeight()+s*this.scaleY)/2:u=i.y):(o=this.left,u=this.top),fabric.util.rotatePoint(new fabric.Point(t.x,t.y),i,-e(this.angle)).subtractEquals(new fabric.Point(o,u))},setPositionByOrigin:function(e,t,n){var r=this.translateToCenterPoint(e,t,n),i=this.translateToOriginPoint(r,this.originX,this.originY);this.set(\"left\",i.x),this.set(\"top\",i.y)},adjustPosition:function(t){var n=e(this.angle),r=this.getWidth()/2,i=Math.cos(n)*r,s=Math.sin(n)*r,o=this.getWidth(),u=Math.cos(n)*o,a=Math.sin(n)*o;this.originX===\"center\"&&t===\"left\"||this.originX===\"right\"&&t===\"center\"?(this.left-=i,this.top-=s):this.originX===\"left\"&&t===\"center\"||this.originX===\"center\"&&t===\"right\"?(this.left+=i,this.top+=s):this.originX===\"left\"&&t===\"right\"?(this.left+=u,this.top+=a):this.originX===\"right\"&&t===\"left\"&&(this.left-=u,this.top-=a),this.setCoords(),this.originX=t},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var e=this.getCenterPoint();this.originX=\"center\",this.originY=\"center\",this.left=e.x,this.top=e.y},_resetOrigin:function(){var e=this.translateToOriginPoint(this.getCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=e.x,this.top=e.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getCenterPoint(),\"left\",\"center\")}})}(),function(){var e=fabric.util.degreesToRadians;fabric.util.object.extend(fabric.Object.prototype,{oCoords:null,intersectsWithRect:function(e,t){var n=this.oCoords,r=new fabric.Point(n.tl.x,n.tl.y),i=new fabric.Point(n.tr.x,n.tr.y),s=new fabric.Point(n.bl.x,n.bl.y),o=new fabric.Point(n.br.x,n.br.y),u=fabric.Intersection.intersectPolygonRectangle([r,i,o,s],e,t);return u.status===\"Intersection\"},intersectsWithObject:function(e){function t(e){return{tl:new fabric.Point(e.tl.x,e.tl.y),tr:new fabric.Point(e.tr.x,e.tr.y),bl:new fabric.Point(e.bl.x,e.bl.y),br:new fabric.Point(e.br.x,e.br.y)}}var n=t(this.oCoords),r=t(e.oCoords),i=fabric.Intersection.intersectPolygonPolygon([n.tl,n.tr,n.br,n.bl],[r.tl,r.tr,r.br,r.bl]);return i.status===\"Intersection\"},isContainedWithinObject:function(e){var t=e.getBoundingRect(),n=new fabric.Point(t.left,t.top),r=new fabric.Point(t.left+t.width,t.top+t.height);return this.isContainedWithinRect(n,r)},isContainedWithinRect:function(e,t){var n=this.getBoundingRect();return n.left>=e.x&&n.left+n.width<=t.x&&n.top>=e.y&&n.top+n.height<=t.y},containsPoint:function(e){var t=this._getImageLines(this.oCoords),n=this._findCrossPoints(e,t);return n!==0&&n%2===1},_getImageLines:function(e){return{topline:{o:e.tl,d:e.tr},rightline:{o:e.tr,d:e.br},bottomline:{o:e.br,d:e.bl},leftline:{o:e.bl,d:e.tl}}},_findCrossPoints:function(e,t){var n,r,i,s,o,u,a=0,f;for(var l in t){f=t[l];if(f.o.y=e.y&&f.d.y>=e.y)continue;f.o.x===f.d.x&&f.o.x>=e.x?(o=f.o.x,u=e.y):(n=0,r=(f.d.y-f.o.y)/(f.d.x-f.o.x),i=e.y-n*e.x,s=f.o.y-r*f.o.x,o=-(i-s)/(n-r),u=i+n*o),o>=e.x&&(a+=1);if(a===2)break}return a},getBoundingRectWidth:function(){return this.getBoundingRect().width},getBoundingRectHeight:function(){return this.getBoundingRect().height},getBoundingRect:function(){this.oCoords||this.setCoords();var e=[this.oCoords.tl.x,this.oCoords.tr.x,this.oCoords.br.x,this.oCoords.bl.x],t=fabric.util.array.min(e),n=fabric.util.array.max(e),r=Math.abs(t-n),i=[this.oCoords.tl.y,this.oCoords.tr.y,this.oCoords.br.y,this.oCoords.bl.y],s=fabric.util.array.min(i),o=fabric.util.array.max(i),u=Math.abs(s-o);return{left:t,top:s,width:r,height:u}},getWidth:function(){return this.width*this.scaleX},getHeight:function(){return this.height*this.scaleY},_constrainScale:function(e){return Math.abs(e)1?this.strokeWidth:0,n=e(this.angle),r=this.getViewportTransform(),i=function(e){return fabric.util.transformPoint(e,r)},s=this.width,o=this.height,u=this.strokeLineCap===\"round\"||this.strokeLineCap===\"square\",a=this.type===\"line\"&&this.width===1,f=this.type===\"line\"&&this.height===1,l=u&&f||this.type!==\"line\",c=u&&a||this.type!==\"line\";a?s=t:f&&(o=t),l&&(s+=t),c&&(o+=t),this.currentWidth=s*this.scaleX,this.currentHeight=o*this.scaleY,this.currentWidth<0&&(this.currentWidth=Math.abs(this.currentWidth));var h=Math.sqrt(Math.pow(this.currentWidth/2,2)+Math.pow(this.currentHeight/2,2)),p=Math.atan(isFinite(this.currentHeight/this.currentWidth)?this.currentHeight/this.currentWidth:0),d=Math.cos(p+n)*h,v=Math.sin(p+n)*h,m=Math.sin(n),g=Math.cos(n),y=this.getCenterPoint(),b=new fabric.Point(this.currentWidth,this.currentHeight),w=new fabric.Point(y.x-d,y.y-v),E=new fabric.Point(w.x+b.x*g,w.y+b.x*m),S=new fabric.Point(w.x-b.y*m,w.y+b.y*g),x=new fabric.Point(w.x+b.x/2*g,w.y+b.x/2*m),T=i(w),N=i(E),C=i(new fabric.Point(E.x-b.y*m,E.y+b.y*g)),k=i(S),L=i(new fabric.Point(w.x-b.y/2*m,w.y+b.y/2*g)),A=i(x),O=i(new fabric.Point(E.x-b.y/2*m,E.y+b.y/2*g)),M=i(new fabric.Point(S.x+b.x/2*g,S.y+b.x/2*m)),_=i(new fabric.Point(x.x,x.y)),D=Math.cos(p+n)*this.padding*Math.sqrt(2),P=Math.sin(p+n)*this.padding*Math.sqrt(2);return T=T.add(new fabric.Point(-D,-P)),N=N.add(new fabric.Point(P,-D)),C=C.add(new fabric.Point(D,P)),k=k.add(new fabric.Point(-P,D)),L=L.add(new fabric.Point((-D-P)/2,(-P+D)/2)),A=A.add(new fabric.Point((P-D)/2,-(P+D)/2)),O=O.add(new fabric.Point((P+D)/2,(P-D)/2)),M=M.add(new fabric.Point((D-P)/2,(D+P)/2)),_=_.add(new fabric.Point((P-D)/2,-(P+D)/2)),this.oCoords={tl:T,tr:N,br:C,bl:k,ml:L,mt:A,mr:O,mb:M,mtr:_},this._setCornerCoords&&this._setCornerCoords(),this}})}(),fabric.util.object.extend(fabric.Object.prototype,{sendToBack:function(){return this.group?fabric.StaticCanvas.prototype.sendToBack.call(this.group,this):this.canvas.sendToBack(this),this},bringToFront:function(){return this.group?fabric.StaticCanvas.prototype.bringToFront.call(this.group,this):this.canvas.bringToFront(this),this},sendBackwards:function(e){return this.group?fabric.StaticCanvas.prototype.sendBackwards.call(this.group,this,e):this.canvas.sendBackwards(this,e),this},bringForward:function(e){return this.group?fabric.StaticCanvas.prototype.bringForward.call(this.group,this,e):this.canvas.bringForward(this,e),this},moveTo:function(e){return this.group?fabric.StaticCanvas.prototype.moveTo.call(this.group,this,e):this.canvas.moveTo(this,e),this}}),fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(){var e=this.fill?this.fill.toLive?\"url(#SVGID_\"+this.fill.id+\")\":this.fill:\"none\",t=this.fillRule,n=this.stroke?this.stroke.toLive?\"url(#SVGID_\"+this.stroke.id+\")\":this.stroke:\"none\",r=this.strokeWidth?this.strokeWidth:\"0\",i=this.strokeDashArray?this.strokeDashArray.join(\" \"):\"\",s=this.strokeLineCap?this.strokeLineCap:\"butt\",o=this.strokeLineJoin?this.strokeLineJoin:\"miter\",u=this.strokeMiterLimit?this.strokeMiterLimit:\"4\",a=typeof this.opacity!=\"undefined\"?this.opacity:\"1\",f=this.visible?\"\":\" visibility: hidden;\",l=this.shadow&&this.type!==\"text\"?\"filter: url(#SVGID_\"+this.shadow.id+\");\":\"\";return[\"stroke: \",n,\"; \",\"stroke-width: \",r,\"; \",\"stroke-dasharray: \",i,\"; \",\"stroke-linecap: \",s,\"; \",\"stroke-linejoin: \",o,\"; \",\"stroke-miterlimit: \",u,\"; \",\"fill: \",e,\"; \",\"fill-rule: \",t,\"; \",\"opacity: \",a,\";\",l,f].join(\"\")},getSvgTransform:function(){if(this.group&&this.group.type===\"path-group\")return\"\";var e=fabric.util.toFixed,t=this.getAngle(),n=!this.canvas||this.canvas.svgViewportTransformation?this.getViewportTransform():[1,0,0,1,0,0],r=fabric.util.transformPoint(this.getCenterPoint(),n),i=fabric.Object.NUM_FRACTION_DIGITS,s=this.type===\"path-group\"?\"\":\"translate(\"+e(r.x,i)+\" \"+e(r.y,i)+\")\",o=t!==0?\" rotate(\"+e(t,i)+\")\":\"\",u=this.scaleX===1&&this.scaleY===1&&n[0]===1&&n[3]===1?\"\":\" scale(\"+e(this.scaleX*n[0],i)+\" \"+e(this.scaleY*n[3],i)+\")\",a=this.type===\"path-group\"?this.width*n[0]:0,f=this.flipX?\" matrix(-1 0 0 1 \"+a+\" 0) \":\"\",l=this.type===\"path-group\"?this.height*n[3]:0,c=this.flipY?\" matrix(1 0 0 -1 0 \"+l+\")\":\"\";return[s,o,u,f,c].join(\"\")},getSvgTransformMatrix:function(){return this.transformMatrix?\" matrix(\"+this.transformMatrix.join(\" \")+\")\":\"\"},_createBaseSVGMarkup:function(){var e=[];return this.fill&&this.fill.toLive&&e.push(this.fill.toSVG(this,!1)),this.stroke&&this.stroke.toLive&&e.push(this.stroke.toSVG(this,!1)),this.shadow&&e.push(this.shadow.toSVG(this)),e}}),fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(){return this.stateProperties.some(function(e){return this.get(e)!==this.originalState[e]},this)},saveState:function(e){return this.stateProperties.forEach(function(e){this.originalState[e]=this.get(e)},this),e&&e.stateProperties&&e.stateProperties.forEach(function(e){this.originalState[e]=this.get(e)},this),this},setupState:function(){return this.originalState={},this.saveState(),this}}),function(){var e=fabric.util.degreesToRadians,t=function(){return typeof G_vmlCanvasManager!=\"undefined\"};fabric.util.object.extend(fabric.Object.prototype,{_controlsVisibility:null,_findTargetCorner:function(e){if(!this.hasControls||!this.active)return!1;var t=e.x,n=e.y,r,i;for(var s in this.oCoords){if(!this.isControlVisible(s))continue;if(s===\"mtr\"&&!this.hasRotatingPoint)continue;if(!(!this.get(\"lockUniScaling\")||s!==\"mt\"&&s!==\"mr\"&&s!==\"mb\"&&s!==\"ml\"))continue;i=this._getImageLines(this.oCoords[s].corner),r=this._findCrossPoints({x:t,y:n},i);if(r!==0&&r%2===1)return this.__corner=s,s}return!1},_setCornerCoords:function(){var t=this.oCoords,n=e(this.angle),r=e(45-this.angle),i=Math.sqrt(2*Math.pow(this.cornerSize,2))/2,s=i*Math.cos(r),o=i*Math.sin(r),u=Math.sin(n),a=Math.cos(n);t.tl.corner={tl:{x:t.tl.x-o,y:t.tl.y-s},tr:{x:t.tl.x+s,y:t.tl.y-o},bl:{x:t.tl.x-s,y:t.tl.y+o},br:{x:t.tl.x+o,y:t.tl.y+s}},t.tr.corner={tl:{x:t.tr.x-o,y:t.tr.y-s},tr:{x:t.tr.x+s,y:t.tr.y-o},br:{x:t.tr.x+o,y:t.tr.y+s},bl:{x:t.tr.x-s,y:t.tr.y+o}},t.bl.corner={tl:{x:t.bl.x-o,y:t.bl.y-s},bl:{x:t.bl.x-s,y:t.bl.y+o},br:{x:t.bl.x+o,y:t.bl.y+s},tr:{x:t.bl.x+s,y:t.bl.y-o}},t.br.corner={tr:{x:t.br.x+s,y:t.br.y-o},bl:{x:t.br.x-s,y:t.br.y+o},br:{x:t.br.x+o,y:t.br.y+s},tl:{x:t.br.x-o,y:t.br.y-s}},t.ml.corner={tl:{x:t.ml.x-o,y:t.ml.y-s},tr:{x:t.ml.x+s,y:t.ml.y-o},bl:{x:t.ml.x-s,y:t.ml.y+o},br:{x:t.ml.x+o,y:t.ml.y+s}},t.mt.corner={tl:{x:t.mt.x-o,y:t.mt.y-s},tr:{x:t.mt.x+s,y:t.mt.y-o},bl:{x:t.mt.x-s,y:t.mt.y+o},br:{x:t.mt.x+o,y:t.mt.y+s}},t.mr.corner={tl:{x:t.mr.x-o,y:t.mr.y-s},tr:{x:t.mr.x+s,y:t.mr.y-o},bl:{x:t.mr.x-s,y:t.mr.y+o},br:{x:t.mr.x+o,y:t.mr.y+s}},t.mb.corner={tl:{x:t.mb.x-o,y:t.mb.y-s},tr:{x:t.mb.x+s,y:t.mb.y-o},bl:{x:t.mb.x-s,y:t.mb.y+o},br:{x:t.mb.x+o,y:t.mb.y+s}},t.mtr.corner={tl:{x:t.mtr.x-o+u*this.rotatingPointOffset,y:t.mtr.y-s-a*this.rotatingPointOffset},tr:{x:t.mtr.x+s+u*this.rotatingPointOffset,y:t.mtr.y-o-a*this.rotatingPointOffset},bl:{x:t.mtr.x-s+u*this.rotatingPointOffset,y:t.mtr.y+o-a*this.rotatingPointOffset},br:{x:t.mtr.x+o+u*this.rotatingPointOffset,y:t.mtr.y+s-a*this.rotatingPointOffset}}},drawBorders:function(e){if(!this.hasBorders)return this;var t=this.padding,n=t*2,r=this.getViewportTransform();e.save(),e.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,e.strokeStyle=this.borderColor;var i=1/this._constrainScale(this.scaleX),s=1/this._constrainScale(this.scaleY);e.lineWidth=1/this.borderScaleFactor;var o=this.getWidth(),u=this.getHeight(),a=this.strokeWidth>1?this.strokeWidth:0,f=this.strokeLineCap===\"round\"||this.strokeLineCap===\"square\",l=this.type===\"line\"&&this.width===1,c=this.type===\"line\"&&this.height===1,h=f&&c||this.type!==\"line\",p=f&&l||this.type!==\"line\";l?o=a/i:c&&(u=a/s),h&&(o+=a/i),p&&(u+=a/s);var d=fabric.util.transformPoint(new fabric.Point(o,u),r,!0),v=d.x,m=d.y;this.group&&(v*=this.group.scaleX,m*=this.group.scaleY),e.strokeRect(~~(-(v/2)-t)-.5,~~(-(m/2)-t)-.5,~~(v+n)+1,~~(m+n)+1);if(this.hasRotatingPoint&&this.isControlVisible(\"mtr\")&&!this.get(\"lockRotation\")&&this.hasControls){var g=(-m-t*2)/2;e.beginPath(),e.moveTo(0,g),e.lineTo(0,g-this.rotatingPointOffset),e.closePath(),e.stroke()}return e.restore(),this},drawControls:function(e){if(!this.hasControls)return this;var t=this.cornerSize,n=t/2,r=this.getViewportTransform(),i=this.strokeWidth>1?this.strokeWidth:0,s=this.width,o=this.height,u=this.strokeLineCap===\"round\"||this.strokeLineCap===\"square\",a=this.type===\"line\"&&this.width===1,f=this.type===\"line\"&&this.height===1,l=u&&f||this.type!==\"line\",c=u&&a||this.type!==\"line\";a?s=i:f&&(o=i),l&&(s+=i),c&&(o+=i),s*=this.scaleX,o*=this.scaleY;var h=fabric.util.transformPoint(new fabric.Point(s,o),r,!0),p=h.x,d=h.y,v=-(p/2),m=-(d/2),g=this.padding,y=n,b=n-t,w=this.transparentCorners?\"strokeRect\":\"fillRect\";return e.save(),e.lineWidth=1,e.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,e.strokeStyle=e.fillStyle=this.cornerColor,this._drawControl(\"tl\",e,w,v-y-g,m-y-g),this._drawControl(\"tr\",e,w,v+p-y+g,m-y-g),this._drawControl(\"bl\",e,w,v-y-g,m+d+b+g),this._drawControl(\"br\",e,w,v+p+b+g,m+d+b+g),this.get(\"lockUniScaling\")||(this._drawControl(\"mt\",e,w,v+p/2-y,m-y-g),this._drawControl(\"mb\",e,w,v+p/2-y,m+d+b+g),this._drawControl(\"mr\",e,w,v+p+b+g,m+d/2-y),this._drawControl(\"ml\",e,w,v-y-g,m+d/2-y)),this.hasRotatingPoint&&this._drawControl(\"mtr\",e,w,v+p/2-y,m-this.rotatingPointOffset-this.cornerSize/2-g),e.restore(),this},_drawControl:function(e,n,r,i,s){var o=this.cornerSize;this.isControlVisible(e)&&(t()||this.transparentCorners||n.clearRect(i,s,o,o),n[r](i,s,o,o))},isControlVisible:function(e){return this._getControlsVisibility()[e]},setControlVisible:function(e,t){return this._getControlsVisibility()[e]=t,this},setControlsVisibility:function(e){e||(e={});for(var t in e)this.setControlVisible(t,e[t]);return this},_getControlsVisibility:function(){return this._controlsVisibility||(this._controlsVisibility={tl:!0,tr:!0,br:!0,bl:!0,ml:!0,mt:!0,mr:!0,mb:!0,mtr:!0}),this._controlsVisibility}})}(),fabric.util.object.extend(fabric.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(e,t){t=t||{};var n=function(){},r=t.onComplete||n,i=t.onChange||n,s=this;return fabric.util.animate({startValue:e.get(\"left\"),endValue:this.getCenter().left,duration:this.FX_DURATION,onChange:function(t){e.set(\"left\",t),s.renderAll(),i()},onComplete:function(){e.setCoords(),r()}}),this},fxCenterObjectV:function(e,t){t=t||{};var n=function(){},r=t.onComplete||n,i=t.onChange||n,s=this;return fabric.util.animate({startValue:e.get(\"top\"),endValue:this.getCenter().top,duration:this.FX_DURATION,onChange:function(t){e.set(\"top\",t),s.renderAll(),i()},onComplete:function(){e.setCoords(),r()}}),this},fxRemove:function(e,t){t=t||{};var n=function(){},r=t.onComplete||n,i=t.onChange||n,s=this;return fabric.util.animate({startValue:e.get(\"opacity\"),endValue:0,duration:this.FX_DURATION,onStart:function(){e.set(\"active\",!1)},onChange:function(t){e.set(\"opacity\",t),s.renderAll(),i()},onComplete:function(){s.remove(e),r()}}),this}}),fabric.util.object.extend(fabric.Object.prototype,{animate:function(){if(arguments[0]&&typeof arguments[0]==\"object\"){var e=[],t,n;for(t in arguments[0])e.push(t);for(var r=0,i=e.length;r\\n'),e?e(t.join(\"\")):t.join(\"\")},complexity:function(){return 1}}),t.Line.ATTRIBUTE_NAMES=t.SHARED_ATTRIBUTES.concat(\"x1 y1 x2 y2\".split(\" \")),t.Line.fromElement=function(e,r){var i=t.parseAttributes(e,t.Line.ATTRIBUTE_NAMES),s=[i.x1||0,i.y1||0,i.x2||0,i.y2||0];return new t.Line(s,n(i,r))},t.Line.fromObject=function(e){var n=[e.x1,e.y1,e.x2,e.y2];return new t.Line(n,e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";function i(e){return\"radius\"in e&&e.radius>0}var t=e.fabric||(e.fabric={}),n=Math.PI,r=t.util.object.extend;if(t.Circle){t.warn(\"fabric.Circle is already defined.\");return}t.Circle=t.util.createClass(t.Object,{type:\"circle\",radius:0,startAngle:0,endAngle:n*2,initialize:function(e){e=e||{},this.callSuper(\"initialize\",e),this.set(\"radius\",e.radius||0),this.startAngle=e.startAngle||this.startAngle,this.endAngle=e.endAngle||this.endAngle},_set:function(e,t){return this.callSuper(\"_set\",e,t),e===\"radius\"&&this.setRadius(t),this},toObject:function(e){return r(this.callSuper(\"toObject\",e),{radius:this.get(\"radius\"),startAngle:this.startAngle,endAngle:this.endAngle})},toSVG:function(e){var t=this._createBaseSVGMarkup(),r=0,i=0,s=(this.endAngle-this.startAngle)%(2*n);if(s===0)this.group&&this.group.type===\"path-group\"&&(r=this.left+this.radius,i=this.top+this.radius),t.push(\"\\n');else{var o=Math.cos(this.startAngle)*this.radius,u=Math.sin(this.startAngle)*this.radius,a=Math.cos(this.endAngle)*this.radius,f=Math.sin(this.endAngle)*this.radius,l=s>n?\"1\":\"0\";t.push('\\n')}return e?e(t.join(\"\")):t.join(\"\")},_render:function(e,t){e.beginPath(),e.arc(t?this.left+this.radius:0,t?this.top+this.radius:0,this.radius,this.startAngle,this.endAngle,!1),this._renderFill(e),this._renderStroke(e)},getRadiusX:function(){return this.get(\"radius\")*this.get(\"scaleX\")},getRadiusY:function(){return this.get(\"radius\")*this.get(\"scaleY\")},setRadius:function(e){this.radius=e,this.set(\"width\",e*2).set(\"height\",e*2)},complexity:function(){return 1}}),t.Circle.ATTRIBUTE_NAMES=t.SHARED_ATTRIBUTES.concat(\"cx cy r\".split(\" \")),t.Circle.fromElement=function(e,n){n||(n={});var s=t.parseAttributes(e,t.Circle.ATTRIBUTE_NAMES);if(!i(s))throw new Error(\"value of `r` attribute is required and can not be negative\");s.left=s.left||0,s.top=s.top||0;var o=new t.Circle(r(s,n));return o.left-=o.radius,o.top-=o.radius,o},t.Circle.fromObject=function(e){return new t.Circle(e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={});if(t.Triangle){t.warn(\"fabric.Triangle is already defined\");return}t.Triangle=t.util.createClass(t.Object,{type:\"triangle\",initialize:function(e){e=e||{},this.callSuper(\"initialize\",e),this.set(\"width\",e.width||100).set(\"height\",e.height||100)},_render:function(e){var t=this.width/2,n=this.height/2;e.beginPath(),e.moveTo(-t,n),e.lineTo(0,-n),e.lineTo(t,n),e.closePath(),this._renderFill(e),this._renderStroke(e)},_renderDashedStroke:function(e){var n=this.width/2,r=this.height/2;e.beginPath(),t.util.drawDashedLine(e,-n,r,0,-r,this.strokeDashArray),t.util.drawDashedLine(e,0,-r,n,r,this.strokeDashArray),t.util.drawDashedLine(e,n,r,-n,r,this.strokeDashArray),e.closePath()},toSVG:function(e){var t=this._createBaseSVGMarkup(),n=this.width/2,r=this.height/2,i=[-n+\" \"+r,\"0 \"+ -r,n+\" \"+r].join(\",\");return t.push(\"'),e?e(t.join(\"\")):t.join(\"\")},complexity:function(){return 1}}),t.Triangle.fromObject=function(e){return new t.Triangle(e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=Math.PI*2,r=t.util.object.extend;if(t.Ellipse){t.warn(\"fabric.Ellipse is already defined.\");return}t.Ellipse=t.util.createClass(t.Object,{type:\"ellipse\",rx:0,ry:0,initialize:function(e){e=e||{},this.callSuper(\"initialize\",e),this.set(\"rx\",e.rx||0),this.set(\"ry\",e.ry||0)},_set:function(e,t){this.callSuper(\"_set\",e,t);switch(e){case\"rx\":this.rx=t,this.set(\"width\",t*2);break;case\"ry\":this.ry=t,this.set(\"height\",t*2)}return this},getRx:function(){return this.get(\"rx\")*this.get(\"scaleX\")},getRy:function(){return this.get(\"ry\")*this.get(\"scaleY\")},toObject:function(e){return r(this.callSuper(\"toObject\",e),{rx:this.get(\"rx\"),ry:this.get(\"ry\")})},toSVG:function(e){var t=this._createBaseSVGMarkup(),n=0,r=0;return this.group&&this.group.type===\"path-group\"&&(n=this.left+this.rx,r=this.top+this.ry),t.push(\"\\n'),e?e(t.join(\"\")):t.join(\"\")},_render:function(e,t){e.beginPath(),e.save(),e.transform(1,0,0,this.ry/this.rx,0,0),e.arc(t?this.left+this.rx:0,t?(this.top+this.ry)*this.rx/this.ry:0,this.rx,0,n,!1),e.restore(),this._renderFill(e),this._renderStroke(e)},complexity:function(){return 1}}),t.Ellipse.ATTRIBUTE_NAMES=t.SHARED_ATTRIBUTES.concat(\"cx cy rx ry\".split(\" \")),t.Ellipse.fromElement=function(e,n){n||(n={});var i=t.parseAttributes(e,t.Ellipse.ATTRIBUTE_NAMES);i.left=i.left||0,i.top=i.top||0;var s=new t.Ellipse(r(i,n));return s.top-=s.ry,s.left-=s.rx,s},t.Ellipse.fromObject=function(e){return new t.Ellipse(e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=t.util.object.extend;if(t.Rect){console.warn(\"fabric.Rect is already defined\");return}var r=t.Object.prototype.stateProperties.concat();r.push(\"rx\",\"ry\",\"x\",\"y\"),t.Rect=t.util.createClass(t.Object,{stateProperties:r,type:\"rect\",rx:0,ry:0,strokeDashArray:null,initialize:function(e){e=e||{},this.callSuper(\"initialize\",e),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(e,t){if(this.width===1&&this.height===1){e.fillRect(0,0,1,1);return}var n=this.rx?Math.min(this.rx,this.width/2):0,r=this.ry?Math.min(this.ry,this.height/2):0,i=this.width,s=this.height,o=t?this.left:-this.width/2,u=t?this.top:-this.height/2,a=n!==0||r!==0,f=.4477152502;e.beginPath(),e.moveTo(o+n,u),e.lineTo(o+i-n,u),a&&e.bezierCurveTo(o+i-f*n,u,o+i,u+f*r,o+i,u+r),e.lineTo(o+i,u+s-r),a&&e.bezierCurveTo(o+i,u+s-f*r,o+i-f*n,u+s,o+i-n,u+s),e.lineTo(o+n,u+s),a&&e.bezierCurveTo(o+f*n,u+s,o,u+s-f*r,o,u+s-r),e.lineTo(o,u+r),a&&e.bezierCurveTo(o,u+f*r,o+f*n,u,o+n,u),e.closePath(),this._renderFill(e),this._renderStroke(e)},_renderDashedStroke:function(e){var n=-this.width/2,r=-this.height/2,i=this.width,s=this.height;e.beginPath(),t.util.drawDashedLine(e,n,r,n+i,r,this.strokeDashArray),t.util.drawDashedLine(e,n+i,r,n+i,r+s,this.strokeDashArray),t.util.drawDashedLine(e,n+i,r+s,n,r+s,this.strokeDashArray),t.util.drawDashedLine(e,n,r+s,n,r,this.strokeDashArray),e.closePath()},toObject:function(e){var t=n(this.callSuper(\"toObject\",e),{rx:this.get(\"rx\")||0,ry:this.get(\"ry\")||0});return this.includeDefaultValues||this._removeDefaultValues(t),t},toSVG:function(e){var t=this._createBaseSVGMarkup(),n=this.left,r=this.top;if(!this.group||this.group.type!==\"path-group\")n=-this.width/2,r=-this.height/2;return t.push(\"\\n'),e?e(t.join(\"\")):t.join(\"\")},complexity:function(){return 1}}),t.Rect.ATTRIBUTE_NAMES=t.SHARED_ATTRIBUTES.concat(\"x y rx ry width height\".split(\" \")),t.Rect.fromElement=function(e,r){if(!e)return null;r=r||{};var i=t.parseAttributes(e,t.Rect.ATTRIBUTE_NAMES);return i.left=i.left||0,i.top=i.top||0,new t.Rect(n(r?t.util.object.clone(r):{},i))},t.Rect.fromObject=function(e){return new t.Rect(e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={});if(t.Polyline){t.warn(\"fabric.Polyline is already defined\");return}t.Polyline=t.util.createClass(t.Object,{type:\"polyline\",points:null,minX:0,minY:0,initialize:function(e,n){return t.Polygon.prototype.initialize.call(this,e,n)},_calcDimensions:function(){return t.Polygon.prototype._calcDimensions.call(this)},_applyPointOffset:function(){return t.Polygon.prototype._applyPointOffset.call(this)},toObject:function(e){return t.Polygon.prototype.toObject.call(this,e)},toSVG:function(e){return t.Polygon.prototype.toSVG.call(this,e)},_render:function(e){t.Polygon.prototype.commonRender.call(this,e),this._renderFill(e),this._renderStroke(e)},_renderDashedStroke:function(e){var n,r;e.beginPath();for(var i=0,s=this.points.length;i\\n'),e?e(n.join(\"\")):n.join(\"\")},_render:function(e){this.commonRender(e),this._renderFill(e);if(this.stroke||this.strokeDashArray)e.closePath(),this._renderStroke(e)},commonRender:function(e){var t;e.beginPath(),this._applyPointOffset&&((!this.group||this.group.type!==\"path-group\")&&this._applyPointOffset(),this._applyPointOffset=null),e.moveTo(this.points[0].x,this.points[0].y);for(var n=0,r=this.points.length;n\"},toObject:function(e){var t=i(this.callSuper(\"toObject\",e),{path:this.path.map(function(e){return e.slice()}),pathOffset:this.pathOffset});return this.sourcePath&&(t.sourcePath=this.sourcePath),this.transformMatrix&&(t.transformMatrix=this.transformMatrix),t},toDatalessObject:function(e){var t=this.toObject(e);return this.sourcePath&&(t.path=this.sourcePath),delete t.sourcePath,t},toSVG:function(e){var t=[],n=this._createBaseSVGMarkup(),r=\"\";for(var i=0,s=this.path.length;i\\n\"),e?e(n.join(\"\")):n.join(\"\")},complexity:function(){return this.path.length},_parsePath:function(){var e=[],t=[],n,r,i=/([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:e[-+]?\\d+)?)/ig,s,o;for(var f=0,l,c=this.path.length;fv)for(var g=1,y=l.length;g\\n\"];for(var i=0,s=t.length;i\\n\"),e?e(r.join(\"\")):r.join(\"\")},toString:function(){return\"#\"},isSameColor:function(){var e=(this.getObjects()[0].get(\"fill\")||\"\").toLowerCase();return this.getObjects().every(function(t){return(t.get(\"fill\")||\"\").toLowerCase()===e})},complexity:function(){return this.paths.reduce(function(e,t){return e+(t&&t.complexity?t.complexity():0)},0)},getObjects:function(){return this.paths}}),t.PathGroup.fromObject=function(e,n){typeof e.paths==\"string\"?t.loadSVGFromURL(e.paths,function(r){var i=e.paths;delete e.paths;var s=t.util.groupSVGElements(r,e,i);n(s)}):t.util.enlivenObjects(e.paths,function(r){delete e.paths,n(new t.PathGroup(r,e))})},t.PathGroup.async=!0}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=t.util.object.extend,r=t.util.array.min,i=t.util.array.max,s=t.util.array.invoke;if(t.Group)return;var o={lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0};t.Group=t.util.createClass(t.Object,t.Collection,{type:\"group\",initialize:function(e,t){t=t||{},this._objects=e||[];for(var r=this._objects.length;r--;)this._objects[r].group=this;this.originalState={},this.callSuper(\"initialize\"),this._calcBounds(),this._updateObjectsCoords(),t&&n(this,t),this.setCoords(),this.saveCoords()},_updateObjectsCoords:function(){this.forEachObject(this._updateObjectCoords,this)},_updateObjectCoords:function(e){var t=e.getLeft(),n=e.getTop();e.set({originalLeft:t,originalTop:n,left:t-this.left,top:n-this.top}),e.setCoords(),e.__origHasControls=e.hasControls,e.hasControls=!1},toString:function(){return\"#\"},addWithUpdate:function(e){return this._restoreObjectsState(),e&&(this._objects.push(e),e.group=this),this.forEachObject(this._setObjectActive,this),this._calcBounds(),this._updateObjectsCoords(),this},_setObjectActive:function(e){e.set(\"active\",!0),e.group=this},removeWithUpdate:function(e){return this._moveFlippedObject(e),this._restoreObjectsState(),this.forEachObject(this._setObjectActive,this),this.remove(e),this._calcBounds(),this._updateObjectsCoords(),this},_onObjectAdded:function(e){e.group=this},_onObjectRemoved:function(e){delete e.group,e.set(\"active\",!1)},delegatedProperties:{fill:!0,opacity:!0,fontFamily:!0,fontWeight:!0,fontSize:!0,fontStyle:!0,lineHeight:!0,textDecoration:!0,textAlign:!0,backgroundColor:!0},_set:function(e,t){if(e in this.delegatedProperties){var n=this._objects.length;this[e]=t;while(n--)this._objects[n].set(e,t)}else this[e]=t},toObject:function(e){return n(this.callSuper(\"toObject\",e),{objects:s(this._objects,\"toObject\",e)})},render:function(e){if(!this.visible)return;e.save(),this.clipTo&&t.util.clipContext(this,e);for(var n=0,r=this._objects.length;n\\n'];for(var n=0,r=this._objects.length;n\\n\"),e?e(t.join(\"\")):t.join(\"\")},get:function(e){if(e in o){if(this[e])return this[e];for(var t=0,n=this._objects.length;t\\n','\\n\");if(this.stroke||this.strokeDashArray){var i=this.fill;this.fill=null,t.push(\"\\n'),this.fill=i}return t.push(\"\\n\"),e?e(t.join(\"\")):t.join(\"\")},getSrc:function(){if(this.getElement())return this.getElement().src||this.getElement()._src},toString:function(){return'#'},clone:function(e,t){this.constructor.fromObject(this.toObject(t),e)},applyFilters:function(e){if(!this._originalElement)return;if(this.filters.length===0){this._element=this._originalElement,e&&e();return}var t=this._originalElement,n=fabric.util.createCanvasElement(),r=fabric.util.createImage(),i=this;return n.width=t.width,n.height=t.height,n.getContext(\"2d\").drawImage(t,0,0,t.width,t.height),this.filters.forEach(function(e){e&&e.applyTo(n)}),r.width=t.width,r.height=t.height,fabric.isLikelyNode?(r.src=n.toBuffer(undefined,fabric.Image.pngCompression),i._element=r,e&&e()):(r.onload=function(){i._element=r,e&&e(),r.onload=n=t=null},r.src=n.toDataURL(\"image/png\")),this},_render:function(e,t){this._element&&e.drawImage(this._element,t?this.left:-this.width/2,t?this.top:-this.height/2,this.width,this.height),this._renderStroke(e)},_resetWidthHeight:function(){var e=this.getElement();this.set(\"width\",e.width),this.set(\"height\",e.height)},_initElement:function(e){this.setElement(fabric.util.getById(e)),fabric.util.addClass(this.getElement(),fabric.Image.CSS_CANVAS)},_initConfig:function(e){e||(e={}),this.setOptions(e),this._setWidthHeight(e),this._element&&this.crossOrigin&&(this._element.crossOrigin=this.crossOrigin)},_initFilters:function(e,t){e.filters&&e.filters.length?fabric.util.enlivenObjects(e.filters,function(e){t&&t(e)},\"fabric.Image.filters\"):t&&t()},_setWidthHeight:function(e){this.width=\"width\"in e?e.width:this.getElement()?this.getElement().width||0:0,this.height=\"height\"in e?e.height:this.getElement()?this.getElement().height||0:0},complexity:function(){return 1}}),fabric.Image.CSS_CANVAS=\"canvas-img\",fabric.Image.prototype.getSvgSrc=fabric.Image.prototype.getSrc,fabric.Image.fromObject=function(e,t){fabric.util.loadImage(e.src,function(n){fabric.Image.prototype._initFilters.call(e,e,function(r){e.filters=r||[];var i=new fabric.Image(n,e);t&&t(i)})},null,e.crossOrigin)},fabric.Image.fromURL=function(e,t,n){fabric.util.loadImage(e,function(e){t(new fabric.Image(e,n))},null,n&&n.crossOrigin)},fabric.Image.ATTRIBUTE_NAMES=fabric.SHARED_ATTRIBUTES.concat(\"x y width height xlink:href\".split(\" \")),fabric.Image.fromElement=function(e,n,r){var i=fabric.parseAttributes(e,fabric.Image.ATTRIBUTE_NAMES);fabric.Image.fromURL(i[\"xlink:href\"],n,t(r?fabric.util.object.clone(r):{},i))},fabric.Image.async=!0,fabric.Image.pngCompression=1}(typeof exports!=\"undefined\"?exports:this),fabric.util.object.extend(fabric.Object.prototype,{_getAngleValueForStraighten:function(){var e=this.getAngle()%360;return e>0?Math.round((e-1)/90)*90:Math.round(e/90)*90},straighten:function(){return this.setAngle(this._getAngleValueForStraighten()),this},fxStraighten:function(e){e=e||{};var t=function(){},n=e.onComplete||t,r=e.onChange||t,i=this;return fabric.util.animate({startValue:this.get(\"angle\"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(e){i.setAngle(e),r()},onComplete:function(){i.setCoords(),n()},onStart:function(){i.set(\"active\",!1)}}),this}}),fabric.util.object.extend(fabric.StaticCanvas.prototype,{straightenObject:function(e){return e.straighten(),this.renderAll(),this},fxStraightenObject:function(e){return e.fxStraighten({onChange:this.renderAll.bind(this)}),this}}),fabric.Image.filters=fabric.Image.filters||{},fabric.Image.filters.BaseFilter=fabric.util.createClass({type:\"BaseFilter\",toObject:function(){return{type:this.type}},toJSON:function(){return this.toObject()}}),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=t.util.object.extend;t.Image.filters.Brightness=t.util.createClass(t.Image.filters.BaseFilter,{type:\"Brightness\",initialize:function(e){e=e||{},this.brightness=e.brightness||0},applyTo:function(e){var t=e.getContext(\"2d\"),n=t.getImageData(0,0,e.width,e.height),r=n.data,i=this.brightness;for(var s=0,o=r.length\n;sa||C<0||C>u)continue;var k=(N*u+C)*4,L=t[x*i+T];b+=o[k]*L,w+=o[k+1]*L,E+=o[k+2]*L,S+=o[k+3]*L}h[y]=b,h[y+1]=w,h[y+2]=E,h[y+3]=S+p*(255-S)}n.putImageData(c,0,0)},toObject:function(){return n(this.callSuper(\"toObject\"),{opaque:this.opaque,matrix:this.matrix})}}),t.Image.filters.Convolute.fromObject=function(e){return new t.Image.filters.Convolute(e)}}(typeof exports!=\"undefined\"?exports:this),function(e){\"use strict\";var t=e.fabric||(e.fabric={}),n=t.util.object.extend;t.Image.filters.GradientTransparency=t.util.createClass(t.Image.filters.BaseFilter,{type:\"GradientTransparency\",initialize:function(e){e=e||{},this.threshold=e.threshold||100},applyTo:function(e){var t=e.getContext(\"2d\"),n=t.getImageData(0,0,e.width,e.height),r=n.data,i=this.threshold,s=r.length;for(var o=0,u=r.length;o-1?e.channel:0},applyTo:function(e){if(!this.mask)return;var n=e.getContext(\"2d\"),r=n.getImageData(0,0,e.width,e.height),i=r.data,s=this.mask.getElement(),o=t.util.createCanvasElement(),u=this.channel,a,f=r.width*r.height*4;o.width=s.width,o.height=s.height,o.getContext(\"2d\").drawImage(s,0,0,s.width,s.height);var l=o.getContext(\"2d\").getImageData(0,0,s.width,s.height),c=l.data;for(a=0;ao&&f>o&&l>o&&u(a-f)'},_render:function(e){typeof Cufon==\"undefined\"||this.useNative===!0?this._renderViaNative(e):this._renderViaCufon(e)},_renderViaNative:function(e){var n=this.text.split(this._reNewline);this._setTextStyles(e),this.width=this._getTextWidth(e,n),this.height=this._getTextHeight(e,n),this.clipTo&&t.util.clipContext(this,e),this._renderTextBackground(e,n),this._translateForTextAlign(e),this._renderText(e,n),this.textAlign!==\"left\"&&this.textAlign!==\"justify\"&&e.restore(),this._renderTextDecoration(e,n),this.clipTo&&e.restore(),this._setBoundaries(e,n),this._totalLineHeight=0},_renderText:function(e,t){e.save(),this._setShadow(e),this._setupCompositeOperation(e),this._renderTextFill(e,t),this._renderTextStroke(e,t),this._restoreCompositeOperation(e),this._removeShadow(e),e.restore()},_translateForTextAlign:function(e){this.textAlign!==\"left\"&&this.textAlign!==\"justify\"&&(e.save(),e.translate(this.textAlign===\"center\"?this.width/2:this.width,0))},_setBoundaries:function(e,t){this._boundaries=[];for(var n=0,r=t.length;nn&&(n=s)}return n},_renderChars:function(e,t,n,r,i){t[e](n,r,i)},_renderTextLine:function(e,t,n,r,i,s){i-=this.fontSize/4;if(this.textAlign!==\"justify\"){this._renderChars(e,t,n,r,i,s);return}var o=t.measureText(n).width,u=this.width;if(u>o){var a=n.split(/\\s+/),f=t.measureText(n.replace(/\\s+/g,\"\")).width,l=u-f,c=a.length-1,h=l/c,p=0;for(var d=0,v=a.length;d-1&&i(this.fontSize*this.lineHeight),this.textDecoration.indexOf(\"line-through\")>-1&&i(this.fontSize*this.lineHeight-this.fontSize/2),this.textDecoration.indexOf(\"overline\")>-1&&i(this.fontSize*this.lineHeight-this.fontSize)},_getFontDeclaration:function(){return[t.isLikelyNode?this.fontWeight:this.fontStyle,t.isLikelyNode?this.fontStyle:this.fontWeight,this.fontSize+\"px\",t.isLikelyNode?'\"'+this.fontFamily+'\"':this.fontFamily].join(\" \")},render:function(e,t){if(!this.visible)return;e.save(),t||this.transform(e);var n=this.group&&this.group.type===\"path-group\";n&&e.translate(-this.group.width/2,-this.group.height/2),this.transformMatrix&&e.transform.apply(e,this.transformMatrix),n&&e.translate(this.left,this.top),this._render(e),e.restore()},toObject:function(e){var t=n(this.callSuper(\"toObject\",e),{text:this.text,fontSize:this.fontSize,fontWeight:this.fontWeight,fontFamily:this.fontFamily,fontStyle:this.fontStyle,lineHeight:this.lineHeight,textDecoration:this.textDecoration,textAlign:this.textAlign,path:this.path,textBackgroundColor:this.textBackgroundColor,useNative:this.useNative});return this.includeDefaultValues||this._removeDefaultValues(t),t},toSVG:function(e){var t=[],n=this.text.split(this._reNewline),r=this._getSVGLeftTopOffsets(n),i=this._getSVGTextAndBg(r.lineTop,r.textLeft,n),s=this._getSVGShadows(r.lineTop,n);return r.textTop+=this._fontAscent?this._fontAscent/5*this.lineHeight:0,this._wrapSVGTextAndBg(t,i,s,r),e?e(t.join(\"\")):t.join(\"\")},_getSVGLeftTopOffsets:function(e){var t=this.useNative?this.fontSize*this.lineHeight:-this._fontAscent-this._fontAscent/5*this.lineHeight,n=-(this.width/2),r=this.useNative?this.fontSize-1:this.height/2-e.length*this.fontSize-this._totalLineHeight;return{textLeft:n+(this.group&&this.group.type===\"path-group\"?this.left:0),textTop:r+(this.group&&this.group.type===\"path-group\"?this.top:0),lineTop:t}},_wrapSVGTextAndBg:function(e,t,n,r){e.push('\\n',t.textBgRects.join(\"\"),\"',n.join(\"\"),t.textSpans.join(\"\"),\"\\n\",\"\\n\")},_getSVGShadows:function(e,n){var r=[],s,o,u=1;if(!this.shadow||!this._boundaries)return r;for(s=0,o=n.length;s\",t.util.string.escapeXml(n[s]),\"\"),u=1}else u++;return r},_getSVGTextAndBg:function(e,t,n){var r=[],i=[],s=1;this._setSVGBg(i);for(var o=0,u=n.length;o\",t.util.string.escapeXml(e),\"\")},_setSVGTextLineBg:function(e,t,n,r){e.push(\"\\n')},_setSVGBg:function(e){this.backgroundColor&&this._boundaries&&e.push(\"')},_getFillAttributes:function(e){var n=e&&typeof e==\"string\"?new t.Color(e):\"\";return!n||!n.getSource()||n.getAlpha()===1?'fill=\"'+e+'\"':'opacity=\"'+n.getAlpha()+'\" fill=\"'+n.setAlpha(1).toRgb()+'\"'},_set:function(e,t){e===\"fontFamily\"&&this.path&&(this.path=this.path.replace(/(.*?)([^\\/]*)(\\.font\\.js)/,\"$1\"+t+\"$3\")),this.callSuper(\"_set\",e,t),e in this._dimensionAffectingProps&&(this._initDimensions(),this.setCoords())},complexity:function(){return 1}}),t.Text.ATTRIBUTE_NAMES=t.SHARED_ATTRIBUTES.concat(\"x y dx dy font-family font-style font-weight font-size text-decoration text-anchor\".split(\" \")),t.Text.DEFAULT_SVG_FONT_SIZE=16,t.Text.fromElement=function(e,n){if(!e)return null;var r=t.parseAttributes(e,t.Text.ATTRIBUTE_NAMES);n=t.util.object.extend(n?t.util.object.clone(n):{},r),\"dx\"in r&&(n.left+=r.dx),\"dy\"in r&&(n.top+=r.dy),\"fontSize\"in n||(n.fontSize=t.Text.DEFAULT_SVG_FONT_SIZE),n.originX||(n.originX=\"left\");var i=new t.Text(e.textContent,n),s=0;return i.originX===\"left\"&&(s=i.getWidth()/2),i.originX===\"right\"&&(s=-i.getWidth()/2),i.set({left:i.getLeft()+s,top:i.getTop()-i.getHeight()/2}),i},t.Text.fromObject=function(e){return new t.Text(e.text,r(e))},t.util.createAccessors(t.Text)}(typeof exports!=\"undefined\"?exports:this),function(){var e=fabric.util.object.clone;fabric.IText=fabric.util.createClass(fabric.Text,fabric.Observable,{type:\"i-text\",selectionStart:0,selectionEnd:0,selectionColor:\"rgba(17,119,255,0.3)\",isEditing:!1,editable:!0,editingBorderColor:\"rgba(102,153,255,0.25)\",cursorWidth:2,cursorColor:\"#333\",cursorDelay:1e3,cursorDuration:600,styles:null,caching:!0,_skipFillStrokeCheck:!0,_reSpace:/\\s|\\n/,_fontSizeFraction:4,_currentCursorOpacity:0,_selectionDirection:null,_abortCursorAnimation:!1,_charWidthsCache:{},initialize:function(e,t){this.styles=t?t.styles||{}:{},this.callSuper(\"initialize\",e,t),this.initBehavior(),fabric.IText.instances.push(this),this.__lineWidths={},this.__lineHeights={},this.__lineOffsets={}},isEmptyStyles:function(){if(!this.styles)return!0;var e=this.styles;for(var t in e)for(var n in e[t])for(var r in e[t][n])return!1;return!0},setSelectionStart:function(e){this.selectionStart!==e&&(this.fire(\"selection:changed\"),this.canvas&&this.canvas.fire(\"text:selection:changed\",{target:this})),this.selectionStart=e,this.hiddenTextarea&&(this.hiddenTextarea.selectionStart=e)},setSelectionEnd:function(e){this.selectionEnd!==e&&(this.fire(\"selection:changed\"),this.canvas&&this.canvas.fire(\"text:selection:changed\",{target:this})),this.selectionEnd=e,this.hiddenTextarea&&(this.hiddenTextarea.selectionEnd=e)},getSelectionStyles:function(e,t){if(arguments.length===2){var n=[];for(var r=e;r=r.charIndex&&(a!==o||hs&&a-1&&this._renderCharDecorationAtOffset(e,n,r+this.fontSize/this._fontSizeFraction,i,0,this.fontSize/20),u.indexOf(\"line-through\")>-1&&this._renderCharDecorationAtOffset(e,n,r+this.fontSize/this._fontSizeFraction,i,o/2,a/20),u.indexOf(\"overline\")>-1&&this._renderCharDecorationAtOffset(e,n,r,i,s-this.fontSize/this._fontSizeFraction,this.fontSize/20)},_renderCharDecorationAtOffset:function(e,t,n,r,i,s){e.fillRect(t,n-i,r,s)},_renderTextLine:function(e,t,n,r,i,s){i+=this.fontSize/4,this.callSuper(\"_renderTextLine\",e,t,n,r,i,s)},_renderTextDecoration:function(e,t){if(this.isEmptyStyles())return this.callSuper(\"_renderTextDecoration\",e,t)},_renderTextLinesBackground:function(e,t){if(!this.textBackgroundColor&&!this.styles)return;e.save(),this.textBackgroundColor&&(e.fillStyle=this.textBackgroundColor);var n=0,r=this.fontSize/this._fontSizeFraction;for(var i=0,s=t.length;in&&(n=s)}return n},_getHeightOfLine:function(e,t,n){n=n||this.text.split(this._reNewline);var r=this._getHeightOfChar(e,n[t][0],t,0),i=n[t],s=i.split(\"\");for(var o=1,u=s.length;or&&(r=a)}return r*this.lineHeight},_getTextHeight:function(e,t){var n=0;for(var r=0,i=t.length;r-1)t++,n--;return e-t},findWordBoundaryRight:function(e){var t=0,n=e;if(this._reSpace.test(this.text.charAt(n)))while(this._reSpace.test(this.text.charAt(n)))t++,n++;while(/\\S/.test(this.text.charAt(n))&&n-1)t++,n--;return e-t},findLineBoundaryRight:function(e){var t=0,n=e;while(!/\\n/.test(this.text.charAt(n))&&n0&&nr;s?this.removeStyleObject(s,n+1):this.removeStyleObject(this.get2DCursorLocation(n).charIndex===0,n)}this.text=this.text.slice(0,e)+this.text.slice(t)},insertChars:function(e){var t=this.text.slice(this.selectionStart,this.selectionStart+1)===\"\\n\";this.text=this.text.slice(0,this.selectionStart)+e+this.text.slice(this.selectionEnd),this.selectionStart===this.selectionEnd&&this.insertStyleObjects(e,t,this.copiedStyles),this.selectionStart+=e.length,this.selectionEnd=this.selectionStart,this.canvas&&this.canvas.renderAll().renderAll(),this.setCoords(),this.fire(\"changed\"),this.canvas&&this.canvas.fire(\"text:changed\",{target:this})},insertNewlineStyleObject:function(t,n,r){this.shiftLineStyles(t,1),this.styles[t+1]||(this.styles[t+1]={});var i=this.styles[t][n-1],s={};if(r)s[0]=e(i),this.styles[t+1]=s;else{for(var o in this.styles[t])parseInt(o,10)>=n&&(s[parseInt(o,10)-n]=this.styles[t][o],delete this.styles[t][o]);this.styles[t+1]=s}},insertCharStyleObject:function(t,n,r){var i=this.styles[t],s=e(i);n===0&&!r&&(n=1);for(var o in s){var u=parseInt(o,10);u>=n&&(i[u+1]=s[u])}this.styles[t][n]=r||e(i[n-1])},insertStyleObjects:function(e,t,n){if(this.isEmptyStyles())return;var r=this.get2DCursorLocation(),i=r.lineIndex,s=r.charIndex;this.styles[i]||(this.styles[i]={}),e===\"\\n\"?this.insertNewlineStyleObject(i,s,t):n?this._insertStyles(n):this.insertCharStyleObject(i,s)},_insertStyles:function(e){for(var t=0,n=e.length;tt&&(this.styles[s+n]=r[s])}},removeStyleObject:function(t,n){var r=this.get2DCursorLocation(n),i=r.lineIndex,s=r.charIndex;if(t){var o=this.text.split(this._reNewline),u=o[i-1],a=u?u.length:0;this.styles[i-1]||(this.styles[i-1]={});for(s in this.styles[i])this.styles[i-1][parseInt(s,10)+a]=this.styles[i][s];this.shiftLineStyles(i,-1)}else{var f=this.styles[i];if(f){var l=this.selectionStart===this.selectionEnd?-1:0;delete f[s+l]}var c=e(f);for(var h in c){var p=parseInt(h,10);p>=s&&p!==0&&(f[p-1]=c[p],delete f[p])}}},insertNewline:function(){this.insertChars(\"\\n\")}})}(),fabric.util.object.extend(fabric.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+(new Date),this.__lastLastClickTime=+(new Date),this.__lastPointer={},this.on(\"mousedown\",this.onMouseDown.bind(this))},onMouseDown:function(e){this.__newClickTime=+(new Date);var t=this.canvas.getPointer(e.e);this.isTripleClick(t)?(this.fire(\"tripleclick\",e),this._stopEvent(e.e)):this.isDoubleClick(t)&&(this.fire(\"dblclick\",e),this._stopEvent(e.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=t,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected},isDoubleClick:function(e){return this.__newClickTime-this.__lastClickTime<500&&this.__lastPointer.x===e.x&&this.__lastPointer.y===e.y&&this.__lastIsEditing},isTripleClick:function(e){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===e.x&&this.__lastPointer.y===e.y},_stopEvent:function(e){e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation()},initCursorSelectionHandlers:function(){this.initSelectedHandler(),this.initMousedownHandler(),this.initMousemoveHandler(),this.initMouseupHandler(),this.initClicks()},initClicks:function(){this.on(\"dblclick\",function(e){this.selectWord(this.getSelectionStartFromPointer(e.e))}),this.on(\"tripleclick\",function(e){this.selectLine(this.getSelectionStartFromPointer(e.e))})},initMousedownHandler:function(){this.on(\"mousedown\",function(e){var t=this.canvas.getPointer(e.e);this.__mousedownX=t.x,this.__mousedownY=t.y,this.__isMousedown=!0,this.hiddenTextarea&&this.canvas&&this.canvas.wrapperEl.appendChild(this.hiddenTextarea),this.selected&&this.setCursorByClick(e.e),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.initDelayedCursor(!0))})},initMousemoveHandler:function(){this.on(\"mousemove\",function(e){if(!this.__isMousedown||!this.isEditing)return;var t=this.getSelectionStartFromPointer(e.e);t>=this.__selectionStartOnMouseDown?(this.setSelectionStart(this.__selectionStartOnMouseDown),this.setSelectionEnd(t)):(this.setSelectionStart(t),this.setSelectionEnd(this.__selectionStartOnMouseDown))})},_isObjectMoved:function(e){var t=this.canvas.getPointer(e);return this.__mousedownX!==t.x||this.__mousedownY!==t.y},initMouseupHandler:function(){this.on(\"mouseup\",function(e){this.__isMousedown=!1;if(this._isObjectMoved(e.e))return;this.__lastSelected&&(this.enterEditing(),this.initDelayedCursor(!0)),this.selected=!0})},setCursorByClick:function(e){var t=this.getSelectionStartFromPointer(e);e.shiftKey?ts?0:1,a=r+u;return this.flipX&&(a=i-a),a>this.text.length&&(a=this.text.length),a}}),fabric.util.object.extend(fabric.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=fabric.document.createElement(\"textarea\"),this.hiddenTextarea.setAttribute(\"autocapitalize\",\"off\"),this.hiddenTextarea.style.cssText=\"position: absolute; top: 0; left: -9999px\",fabric.document.body.appendChild(this.hiddenTextarea),fabric.util.addListener(this.hiddenTextarea,\"keydown\",this.onKeyDown.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"keypress\",this.onKeyPress.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"copy\",this.copy.bind(this)),fabric.util.addListener(this.hiddenTextarea,\"paste\",this.paste.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(fabric.util.addListener(this.canvas.upperCanvasEl,\"click\",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},_keysMap:{8:\"removeChars\",9:\"exitEditing\",27:\"exitEditing\",13:\"insertNewline\",33:\"moveCursorUp\",34:\"moveCursorDown\",35:\"moveCursorRight\",36:\"moveCursorLeft\",37:\"moveCursorLeft\",38:\"moveCursorUp\",39:\"moveCursorRight\",40:\"moveCursorDown\",46:\"forwardDelete\"},_ctrlKeysMap:{65:\"selectAll\",88:\"cut\"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(e){if(!this.isEditing)return;if(e.keyCode in this._keysMap)this[this._keysMap[e.keyCode]](e);else{if(!(e.keyCode in this._ctrlKeysMap&&(e.ctrlKey||e.metaKey)))return;this[this._ctrlKeysMap[e.keyCode]](e)}e.stopImmediatePropagation(),e.preventDefault(),this.canvas&&this.canvas.renderAll()},forwardDelete:function(e){this.selectionStart===this.selectionEnd&&this.moveCursorRight(e),this.removeChars(e)},copy:function(e){var t=this.getSelectedText(),n=this._getClipboardData(e);n&&n.setData(\"text\",t),this.copiedText=t,this.copiedStyles=this.getSelectionStyles(this.selectionStart,this.selectionEnd)},paste:function(e){var t=null,n=this._getClipboardData(e);n?t=n.getData(\"text\"):t=this.copiedText,t&&this.insertChars(t)},cut:function(e){if(this.selectionStart===this.selectionEnd)return;this.copy(),this.removeChars(e)},_getClipboardData:function(e){return e&&(e.clipboardData||fabric.window.clipboardData)},onKeyPress:function(e){if(!this.isEditing||e.metaKey||e.ctrlKey)return;e.which!==0&&this.insertChars(String.fromCharCode(e.which)),e.stopPropagation()},getDownCursorOffset:function(e,t){var n=t?this.selectionEnd:this.selectionStart,r=this.text.split(this._reNewline),i,s,o=this.text.slice(0,n),u=this.text.slice(n),a=o.slice(o.lastIndexOf(\"\\n\")+1),f=u.match(/(.*)\\n?/)[1],l=(u.match(/.*\\n(.*)\\n?/)||{})[1]||\"\",c=this.get2DCursorLocation(n);if(c.lineIndex===r.length-1||e.metaKey||e.keyCode===34)return this.text.length-n;var h=this._getWidthOfLine(this.ctx,c.lineIndex,r);s=this._getLineLeftOffset(h);var p=s,d=c.lineIndex;for(var v=0,m=a.length;vn){f=!0;var d=u-p,v=u,m=Math.abs(d-n),g=Math.abs(v-n);a=gthis.text.length&&(this.selectionStart=this.text.length),this.selectionEnd=this.selectionStart},swapSelectionPoints:function(){var e=this.selectionEnd;this.selectionEnd=this.selectionStart,this.selectionStart=e},moveCursorDownWithShift:function(e){this.selectionEnd===this.selectionStart&&(this._selectionDirection=\"right\");var t=this._selectionDirection===\"right\"?\"selectionEnd\":\"selectionStart\";this[t]+=e,this.selectionEndthis.text.length&&(this.selectionEnd=this.text.length)},getUpCursorOffset:function(e,t){var n=t?this.selectionEnd:this.selectionStart,r=this.get2DCursorLocation(n);if(r.lineIndex===0||e.metaKey||e.keyCode===33)return n;var i=this.text.slice(0,n),s=i.slice(i.lastIndexOf(\"\\n\")+1),o=(i.match(/\\n?(.*)\\n.*$/)||{})[1]||\"\",u=this.text.split(this._reNewline),a,f=this._getWidthOfLine(this.ctx,r.lineIndex,u),l=this._getLineLeftOffset(f),c=l,h=r.lineIndex;for(var p=0,d=s.length;pn){f=!0;var d=u-p,v=u,m=Math.abs(d-n),g=Math.abs(v-n);a=g=this.text.length&&this.selectionEnd>=this.text.length)return;this.abortCursorAnimation(),this._currentCursorOpacity=1,e.shiftKey?this.moveCursorRightWithShift(e):this.moveCursorRightWithoutShift(e),this.initDelayedCursor()},moveCursorRightWithShift:function(e){this._selectionDirection===\"left\"&&this.selectionStart!==this.selectionEnd?this._moveRight(e,\"selectionStart\"):(this._selectionDirection=\"right\",this._moveRight(e,\"selectionEnd\"),this.text.charAt(this.selectionEnd-1)===\"\\n\"&&this.selectionEnd++,this.selectionEnd>this.text.length&&(this.selectionEnd=this.text.length))},moveCursorRightWithoutShift:function(e){this._selectionDirection=\"right\",this.selectionStart===this.selectionEnd?(this._moveRight(e,\"selectionStart\"),this.selectionEnd=this.selectionStart):(this.selectionEnd+=this.getNumNewLinesInSelectedText(),this.selectionEnd>this.text.length&&(this.selectionEnd=this.text.length),this.selectionStart=this.selectionEnd)},removeChars:function(e){this.selectionStart===this.selectionEnd?this._removeCharsNearCursor(e):this._removeCharsFromTo(this.selectionStart,this.selectionEnd),this.selectionEnd=this.selectionStart,this._removeExtraneousStyles(),this.canvas&&this.canvas.renderAll().renderAll(),this.setCoords(),this.fire(\"changed\"),this.canvas&&this.canvas.fire(\"text:changed\",{target:this})},_removeCharsNearCursor:function(e){if(this.selectionStart!==0)if(e.metaKey){var t=this.findLineBoundaryLeft(this.selectionStart);this._removeCharsFromTo(t,this.selectionStart),this.selectionStart=t}else if(e.altKey){var n=this.findWordBoundaryLeft(this.selectionStart);this._removeCharsFromTo(n,this.selectionStart),this.selectionStart=n}else{var r=this.text.slice(this.selectionStart-1,this.selectionStart)===\"\\n\";this.removeStyleObject(r),this.selectionStart--,this.text=this.text.slice(0,this.selectionStart)+this.text.slice(this.selectionStart+1)}}}),fabric.util.object.extend(fabric.IText.prototype,{_setSVGTextLineText:function(e,t,n,r,i,s){this.styles[t]?this._setSVGTextLineChars(e,t,n,r,i,s):this.callSuper(\"_setSVGTextLineText\",e,t,n,r,i)},_setSVGTextLineChars:function(e,t,n,r,i,s){var o=t===0||this.useNative?\"y\":\"dy\",u=e.split(\"\"),a=0,f=this._getSVGLineLeftOffset(t),l=this._getSVGLineTopOffset(t),c=this._getHeightOfLine(this.ctx,t);for(var h=0,p=u.length;h'].join(\"\")},_createTextCharSpan:function(e,t,n,r,i,s){var o=this.getSvgStyles.call(fabric.util.object.extend({visible:!0,fill:this.fill,stroke:this.stroke,type:\"text\"},t));return['',fabric.util.string.escapeXml(e),\"\"].join(\"\")}}),function(){function request(e,t,n){var r=URL.parse(e);r.port||(r.port=r.protocol.indexOf(\"https:\")===0?443:80);var i=r.port===443?HTTPS:HTTP,s=i.request({hostname:r.hostname,port:r.port,path:r.path,method:\"GET\"},function(e){var r=\"\";t&&e.setEncoding(t),e.on(\"end\",function(){n(r)}),e.on(\"data\",function(t){e.statusCode===200&&(r+=t)})});s.on(\"error\",function(e){e.errno===process.ECONNREFUSED?fabric.log(\"ECONNREFUSED: connection refused to \"+r.hostname+\":\"+r.port):fabric.log(e.message)}),s.end()}function requestFs(e,t){var n=require(\"fs\");n.readFile(e,function(e,n){if(e)throw fabric.log(e),e;t(n)})}if(typeof document!=\"undefined\"&&typeof window!=\"undefined\")return;var DOMParser=require(\"xmldom\").DOMParser,URL=require(\"url\"),HTTP=require(\"http\"),HTTPS=require(\"https\"),Canvas=require(\"canvas\"),Image=require(\"canvas\").Image;fabric.util.loadImage=function(e,t,n){function r(r){i.src=new Buffer(r,\"binary\"),i._src=e,t&&t.call(n,i)}var i=new Image;e&&(e instanceof Buffer||e.indexOf(\"data\")===0)?(i.src=i._src=e,t&&t.call(n,i)):e&&e.indexOf(\"http\")!==0?requestFs(e,r):e?request(e,\"binary\",r):t&&t.call(n,e)},fabric.loadSVGFromURL=function(e,t,n){e=e.replace(/^\\n\\s*/,\"\").replace(/\\?.*$/,\"\").trim(),e.indexOf(\"http\")!==0?requestFs(e,function(e){fabric.loadSVGFromString(e.toString(),t,n)}):request(e,\"\",function(e){fabric.loadSVGFromString(e,t,n)})},fabric.loadSVGFromString=function(e,t,n){var r=(new DOMParser).parseFromString(e);fabric.parseSVGDocument(r.documentElement,function(e,n){t&&t(e,n)},n)},fabric.util.getScript=function(url,callback){request(url,\"\",function(body){eval(body),callback&&callback()})},fabric.Image.fromObject=function(e,t){fabric.util.loadImage(e.src,function(n){var r=new fabric.Image(n);r._initConfig(e),r._initFilters(e,function(e){r.filters=e||[],t&&t(r)})})},fabric.createCanvasForNode=function(e,t,n,r){r=r||n;var i=fabric.document.createElement(\"canvas\"),s=new Canvas(e||600,t||600,r);i.style={},i.width=s.width,i.height=s.height;var o=fabric.Canvas||fabric.StaticCanvas,u=new o(i,n);return u.contextContainer=s.getContext(\"2d\"),u.nodeCanvas=s,u.Font=Canvas.Font,u},fabric.StaticCanvas.prototype.createPNGStream=function(){return this.nodeCanvas.createPNGStream()},fabric.StaticCanvas.prototype.createJPEGStream=function(e){return this.nodeCanvas.createJPEGStream(e)};var origSetWidth=fabric.StaticCanvas.prototype.setWidth;fabric.StaticCanvas.prototype.setWidth=function(e,t){return origSetWidth.call(this,e,t),this.nodeCanvas.width=e,this},fabric.Canvas&&(fabric.Canvas.prototype.setWidth=fabric.StaticCanvas.prototype.setWidth);var origSetHeight=fabric.StaticCanvas.prototype.setHeight;fabric.StaticCanvas.prototype.setHeight=function(e,t){return origSetHeight.call(this,e,t),this.nodeCanvas.height=e,this},fabric.Canvas&&(fabric.Canvas.prototype.setHeight=fabric.StaticCanvas.prototype.setHeight)}();" }, { "path": "src/libs/flashdetect/flashdetect.js", "content": "/*\n Copyright (c) Copyright (c) 2007, Carl S. Yestrau All rights reserved.\n Code licensed under the BSD License: http://www.featureblend.com/license.txt\n Version: 1.0.4\n */\nvar FlashDetect = new function(){\n var self = this;\n self.installed = false;\n self.raw = \"\";\n self.major = -1;\n self.minor = -1;\n self.revision = -1;\n self.revisionStr = \"\";\n var activeXDetectRules = [\n {\n \"name\":\"ShockwaveFlash.ShockwaveFlash.7\",\n \"version\":function(obj){\n return getActiveXVersion(obj);\n }\n },\n {\n \"name\":\"ShockwaveFlash.ShockwaveFlash.6\",\n \"version\":function(obj){\n var version = \"6,0,21\";\n try{\n obj.AllowScriptAccess = \"always\";\n version = getActiveXVersion(obj);\n }catch(err){}\n return version;\n }\n },\n {\n \"name\":\"ShockwaveFlash.ShockwaveFlash\",\n \"version\":function(obj){\n return getActiveXVersion(obj);\n }\n }\n ];\n /**\n * Extract the ActiveX version of the plugin.\n *\n * @param {Object} The flash ActiveX object.\n * @type String\n */\n var getActiveXVersion = function(activeXObj){\n var version = -1;\n try{\n version = activeXObj.GetVariable(\"$version\");\n }catch(err){}\n return version;\n };\n /**\n * Try and retrieve an ActiveX object having a specified name.\n *\n * @param {String} name The ActiveX object name lookup.\n * @return One of ActiveX object or a simple object having an attribute of activeXError with a value of true.\n * @type Object\n */\n var getActiveXObject = function(name){\n var obj = -1;\n try{\n obj = new ActiveXObject(name);\n }catch(err){\n obj = {activeXError:true};\n }\n return obj;\n };\n /**\n * Parse an ActiveX $version string into an object.\n *\n * @param {String} str The ActiveX Object GetVariable($version) return value.\n * @return An object having raw, major, minor, revision and revisionStr attributes.\n * @type Object\n */\n var parseActiveXVersion = function(str){\n var versionArray = str.split(\",\");//replace with regex\n return {\n \"raw\":str,\n \"major\":parseInt(versionArray[0].split(\" \")[1], 10),\n \"minor\":parseInt(versionArray[1], 10),\n \"revision\":parseInt(versionArray[2], 10),\n \"revisionStr\":versionArray[2]\n };\n };\n /**\n * Parse a standard enabledPlugin.description into an object.\n *\n * @param {String} str The enabledPlugin.description value.\n * @return An object having raw, major, minor, revision and revisionStr attributes.\n * @type Object\n */\n var parseStandardVersion = function(str){\n var descParts = str.split(/ +/);\n var majorMinor = descParts[2].split(/\\./);\n var revisionStr = descParts[3];\n return {\n \"raw\":str,\n \"major\":parseInt(majorMinor[0], 10),\n \"minor\":parseInt(majorMinor[1], 10),\n \"revisionStr\":revisionStr,\n \"revision\":parseRevisionStrToInt(revisionStr)\n };\n };\n /**\n * Parse the plugin revision string into an integer.\n *\n * @param {String} The revision in string format.\n * @type Number\n */\n var parseRevisionStrToInt = function(str){\n return parseInt(str.replace(/[a-zA-Z]/g, \"\"), 10) || self.revision;\n };\n /**\n * Is the major version greater than or equal to a specified version.\n *\n * @param {Number} version The minimum required major version.\n * @type Boolean\n */\n self.majorAtLeast = function(version){\n return self.major >= version;\n };\n /**\n * Is the minor version greater than or equal to a specified version.\n *\n * @param {Number} version The minimum required minor version.\n * @type Boolean\n */\n self.minorAtLeast = function(version){\n return self.minor >= version;\n };\n /**\n * Is the revision version greater than or equal to a specified version.\n *\n * @param {Number} version The minimum required revision version.\n * @type Boolean\n */\n self.revisionAtLeast = function(version){\n return self.revision >= version;\n };\n /**\n * Is the version greater than or equal to a specified major, minor and revision.\n *\n * @param {Number} major The minimum required major version.\n * @param {Number} (Optional) minor The minimum required minor version.\n * @param {Number} (Optional) revision The minimum required revision version.\n * @type Boolean\n */\n self.versionAtLeast = function(major){\n var properties = [self.major, self.minor, self.revision];\n var len = Math.min(properties.length, arguments.length);\n for(i=0; i=arguments[i]){\n if(i+10){\n var type = 'application/x-shockwave-flash';\n var mimeTypes = navigator.mimeTypes;\n if(mimeTypes && mimeTypes[type] && mimeTypes[type].enabledPlugin && mimeTypes[type].enabledPlugin.description){\n var version = mimeTypes[type].enabledPlugin.description;\n var versionObj = parseStandardVersion(version);\n self.raw = versionObj.raw;\n self.major = versionObj.major;\n self.minor = versionObj.minor;\n self.revisionStr = versionObj.revisionStr;\n self.revision = versionObj.revision;\n self.installed = true;\n }\n }else if(navigator.appVersion.indexOf(\"Mac\")==-1 && window.execScript){\n var version = -1;\n for(var i=0; i charMin && pressedKey <= 90) || pressedKey == 32) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tvar cal = $(this).parent().parent();\n\t\t\t\tif (cal.data('colorpicker').livePreview === true) {\n\t\t\t\t\tchange.apply(this);\n\t\t\t\t}\n\t\t\t},\n\t\t\tchange = function (ev) {\n\t\t\t\tvar cal = $(this).parent().parent(), col;\n\t\t\t\tif (this.parentNode.className.indexOf('_hex') > 0) {\n\t\t\t\t\tcal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));\n\t\t\t\t} else if (this.parentNode.className.indexOf('_hsb') > 0) {\n\t\t\t\t\tcal.data('colorpicker').color = col = fixHSB({\n\t\t\t\t\t\th: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),\n\t\t\t\t\t\ts: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),\n\t\t\t\t\t\tb: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tcal.data('colorpicker').color = col = RGBToHSB(fixRGB({\n\t\t\t\t\t\tr: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),\n\t\t\t\t\t\tg: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),\n\t\t\t\t\t\tb: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)\n\t\t\t\t\t}));\n\t\t\t\t}\n\t\t\t\tif (ev) {\n\t\t\t\t\tfillRGBFields(col, cal.get(0));\n\t\t\t\t\tfillHexFields(col, cal.get(0));\n\t\t\t\t\tfillHSBFields(col, cal.get(0));\n\t\t\t\t}\n\t\t\t\tsetSelector(col, cal.get(0));\n\t\t\t\tsetHue(col, cal.get(0));\n\t\t\t\tsetNewColor(col, cal.get(0));\n\t\t\t\tcal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);\n\t\t\t},\n\t\t\tblur = function (ev) {\n\t\t\t\tvar cal = $(this).parent().parent();\n\t\t\t\tcal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');\n\t\t\t},\n\t\t\tfocus = function () {\n\t\t\t\tcharMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;\n\t\t\t\t$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');\n\t\t\t\t$(this).parent().addClass('colorpicker_focus');\n\t\t\t},\n\t\t\tdownIncrement = function (ev) {\n\t\t\t\tvar field = $(this).parent().find('input').focus();\n\t\t\t\tvar current = {\n\t\t\t\t\tel: $(this).parent().addClass('colorpicker_slider'),\n\t\t\t\t\tmax: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),\n\t\t\t\t\ty: ev.pageY,\n\t\t\t\t\tfield: field,\n\t\t\t\t\tval: parseInt(field.val(), 10),\n\t\t\t\t\tpreview: $(this).parent().parent().data('colorpicker').livePreview\t\t\t\t\t\n\t\t\t\t};\n\t\t\t\t$(document).bind('mouseup', current, upIncrement);\n\t\t\t\t$(document).bind('mousemove', current, moveIncrement);\n\t\t\t},\n\t\t\tmoveIncrement = function (ev) {\n\t\t\t\tev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));\n\t\t\t\tif (ev.data.preview) {\n\t\t\t\t\tchange.apply(ev.data.field.get(0), [true]);\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tupIncrement = function (ev) {\n\t\t\t\tchange.apply(ev.data.field.get(0), [true]);\n\t\t\t\tev.data.el.removeClass('colorpicker_slider').find('input').focus();\n\t\t\t\t$(document).unbind('mouseup', upIncrement);\n\t\t\t\t$(document).unbind('mousemove', moveIncrement);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tdownHue = function (ev) {\n\t\t\t\tvar current = {\n\t\t\t\t\tcal: $(this).parent(),\n\t\t\t\t\ty: $(this).offset().top\n\t\t\t\t};\n\t\t\t\tcurrent.preview = current.cal.data('colorpicker').livePreview;\n\t\t\t\t$(document).bind('mouseup', current, upHue);\n\t\t\t\t$(document).bind('mousemove', current, moveHue);\n\t\t\t},\n\t\t\tmoveHue = function (ev) {\n\t\t\t\tchange.apply(\n\t\t\t\t\tev.data.cal.data('colorpicker')\n\t\t\t\t\t\t.fields\n\t\t\t\t\t\t.eq(4)\n\t\t\t\t\t\t.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))\n\t\t\t\t\t\t.get(0),\n\t\t\t\t\t[ev.data.preview]\n\t\t\t\t);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tupHue = function (ev) {\n\t\t\t\tfillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\n\t\t\t\tfillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\n\t\t\t\t$(document).unbind('mouseup', upHue);\n\t\t\t\t$(document).unbind('mousemove', moveHue);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tdownSelector = function (ev) {\n\t\t\t\tvar current = {\n\t\t\t\t\tcal: $(this).parent(),\n\t\t\t\t\tpos: $(this).offset()\n\t\t\t\t};\n\t\t\t\tcurrent.preview = current.cal.data('colorpicker').livePreview;\n\t\t\t\t$(document).bind('mouseup', current, upSelector);\n\t\t\t\t$(document).bind('mousemove', current, moveSelector);\n\t\t\t},\n\t\t\tmoveSelector = function (ev) {\n\t\t\t\tchange.apply(\n\t\t\t\t\tev.data.cal.data('colorpicker')\n\t\t\t\t\t\t.fields\n\t\t\t\t\t\t.eq(6)\n\t\t\t\t\t\t.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))\n\t\t\t\t\t\t.end()\n\t\t\t\t\t\t.eq(5)\n\t\t\t\t\t\t.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))\n\t\t\t\t\t\t.get(0),\n\t\t\t\t\t[ev.data.preview]\n\t\t\t\t);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tupSelector = function (ev) {\n\t\t\t\tfillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\n\t\t\t\tfillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\n\t\t\t\t$(document).unbind('mouseup', upSelector);\n\t\t\t\t$(document).unbind('mousemove', moveSelector);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tenterSubmit = function (ev) {\n\t\t\t\t$(this).addClass('colorpicker_focus');\n\t\t\t},\n\t\t\tleaveSubmit = function (ev) {\n\t\t\t\t$(this).removeClass('colorpicker_focus');\n\t\t\t},\n\t\t\tclickSubmit = function (ev) {\n\t\t\t\tvar cal = $(this).parent();\n\t\t\t\tvar col = cal.data('colorpicker').color;\n\t\t\t\tcal.data('colorpicker').origColor = col;\n\t\t\t\tsetCurrentColor(col, cal.get(0));\n\t\t\t\tcal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);\n\t\t\t},\n\t\t\tshow = function (ev) {\n\t\t\t\tvar cal = $('#' + $(this).data('colorpickerId'));\n\t\t\t\tcal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);\n\t\t\t\tvar pos = $(this).offset();\n\t\t\t\tvar viewPort = getViewport();\n\t\t\t\tvar top = pos.top + this.offsetHeight;\n\t\t\t\tvar left = pos.left;\n\t\t\t\tif (top + 176 > viewPort.t + viewPort.h) {\n\t\t\t\t\ttop -= this.offsetHeight + 176;\n\t\t\t\t}\n\t\t\t\tif (left + 356 > viewPort.l + viewPort.w) {\n\t\t\t\t\tleft -= 356;\n\t\t\t\t}\n\t\t\t\tcal.css({left: left + 'px', top: top + 'px'});\n\t\t\t\tif (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {\n\t\t\t\t\tcal.show();\n\t\t\t\t}\n\t\t\t\t$(document).bind('mousedown', {cal: cal}, hide);\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\thide = function (ev) {\n\t\t\t\tif (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {\n\t\t\t\t\tif (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {\n\t\t\t\t\t\tev.data.cal.hide();\n\t\t\t\t\t}\n\t\t\t\t\t$(document).unbind('mousedown', hide);\n\t\t\t\t}\n\t\t\t},\n\t\t\tisChildOf = function(parentEl, el, container) {\n\t\t\t\tif (parentEl == el) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\tif (parentEl.contains) {\n\t\t\t\t\treturn parentEl.contains(el);\n\t\t\t\t}\n\t\t\t\tif ( parentEl.compareDocumentPosition ) {\n\t\t\t\t\treturn !!(parentEl.compareDocumentPosition(el) & 16);\n\t\t\t\t}\n\t\t\t\tvar prEl = el.parentNode;\n\t\t\t\twhile(prEl && prEl != container) {\n\t\t\t\t\tif (prEl == parentEl)\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tprEl = prEl.parentNode;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t\tgetViewport = function () {\n\t\t\t\tvar m = document.compatMode == 'CSS1Compat';\n\t\t\t\treturn {\n\t\t\t\t\tl : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),\n\t\t\t\t\tt : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),\n\t\t\t\t\tw : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),\n\t\t\t\t\th : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)\n\t\t\t\t};\n\t\t\t},\n\t\t\tfixHSB = function (hsb) {\n\t\t\t\treturn {\n\t\t\t\t\th: Math.min(360, Math.max(0, hsb.h)),\n\t\t\t\t\ts: Math.min(100, Math.max(0, hsb.s)),\n\t\t\t\t\tb: Math.min(100, Math.max(0, hsb.b))\n\t\t\t\t};\n\t\t\t}, \n\t\t\tfixRGB = function (rgb) {\n\t\t\t\treturn {\n\t\t\t\t\tr: Math.min(255, Math.max(0, rgb.r)),\n\t\t\t\t\tg: Math.min(255, Math.max(0, rgb.g)),\n\t\t\t\t\tb: Math.min(255, Math.max(0, rgb.b))\n\t\t\t\t};\n\t\t\t},\n\t\t\tfixHex = function (hex) {\n\t\t\t\tvar len = 6 - hex.length;\n\t\t\t\tif (len > 0) {\n\t\t\t\t\tvar o = [];\n\t\t\t\t\tfor (var i=0; i -1) ? hex.substring(1) : hex), 16);\n\t\t\t\treturn {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};\n\t\t\t},\n\t\t\tHexToHSB = function (hex) {\n\t\t\t\treturn RGBToHSB(HexToRGB(hex));\n\t\t\t},\n\t\t\tRGBToHSB = function (rgb) {\n\t\t\t\tvar hsb = {\n\t\t\t\t\th: 0,\n\t\t\t\t\ts: 0,\n\t\t\t\t\tb: 0\n\t\t\t\t};\n\t\t\t\tvar min = Math.min(rgb.r, rgb.g, rgb.b);\n\t\t\t\tvar max = Math.max(rgb.r, rgb.g, rgb.b);\n\t\t\t\tvar delta = max - min;\n\t\t\t\thsb.b = max;\n\t\t\t\tif (max != 0) {\n\t\t\t\t\t\n\t\t\t\t}\n\t\t\t\thsb.s = max != 0 ? 255 * delta / max : 0;\n\t\t\t\tif (hsb.s != 0) {\n\t\t\t\t\tif (rgb.r == max) {\n\t\t\t\t\t\thsb.h = (rgb.g - rgb.b) / delta;\n\t\t\t\t\t} else if (rgb.g == max) {\n\t\t\t\t\t\thsb.h = 2 + (rgb.b - rgb.r) / delta;\n\t\t\t\t\t} else {\n\t\t\t\t\t\thsb.h = 4 + (rgb.r - rgb.g) / delta;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\thsb.h = -1;\n\t\t\t\t}\n\t\t\t\thsb.h *= 60;\n\t\t\t\tif (hsb.h < 0) {\n\t\t\t\t\thsb.h += 360;\n\t\t\t\t}\n\t\t\t\thsb.s *= 100/255;\n\t\t\t\thsb.b *= 100/255;\n\t\t\t\treturn hsb;\n\t\t\t},\n\t\t\tHSBToRGB = function (hsb) {\n\t\t\t\tvar rgb = {};\n\t\t\t\tvar h = Math.round(hsb.h);\n\t\t\t\tvar s = Math.round(hsb.s*255/100);\n\t\t\t\tvar v = Math.round(hsb.b*255/100);\n\t\t\t\tif(s == 0) {\n\t\t\t\t\trgb.r = rgb.g = rgb.b = v;\n\t\t\t\t} else {\n\t\t\t\t\tvar t1 = v;\n\t\t\t\t\tvar t2 = (255-s)*v/255;\n\t\t\t\t\tvar t3 = (t1-t2)*(h%60)/60;\n\t\t\t\t\tif(h==360) h = 0;\n\t\t\t\t\tif(h<60) {rgb.r=t1;\trgb.b=t2; rgb.g=t2+t3}\n\t\t\t\t\telse if(h<120) {rgb.g=t1; rgb.b=t2;\trgb.r=t1-t3}\n\t\t\t\t\telse if(h<180) {rgb.g=t1; rgb.r=t2;\trgb.b=t2+t3}\n\t\t\t\t\telse if(h<240) {rgb.b=t1; rgb.r=t2;\trgb.g=t1-t3}\n\t\t\t\t\telse if(h<300) {rgb.b=t1; rgb.g=t2;\trgb.r=t2+t3}\n\t\t\t\t\telse if(h<360) {rgb.r=t1; rgb.g=t2;\trgb.b=t1-t3}\n\t\t\t\t\telse {rgb.r=0; rgb.g=0;\trgb.b=0}\n\t\t\t\t}\n\t\t\t\treturn {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};\n\t\t\t},\n\t\t\tRGBToHex = function (rgb) {\n\t\t\t\tvar hex = [\n\t\t\t\t\trgb.r.toString(16),\n\t\t\t\t\trgb.g.toString(16),\n\t\t\t\t\trgb.b.toString(16)\n\t\t\t\t];\n\t\t\t\t$.each(hex, function (nr, val) {\n\t\t\t\t\tif (val.length == 1) {\n\t\t\t\t\t\thex[nr] = '0' + val;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\treturn hex.join('');\n\t\t\t},\n\t\t\tHSBToHex = function (hsb) {\n\t\t\t\treturn RGBToHex(HSBToRGB(hsb));\n\t\t\t},\n\t\t\trestoreOriginal = function () {\n\t\t\t\tvar cal = $(this).parent();\n\t\t\t\tvar col = cal.data('colorpicker').origColor;\n\t\t\t\tcal.data('colorpicker').color = col;\n\t\t\t\tfillRGBFields(col, cal.get(0));\n\t\t\t\tfillHexFields(col, cal.get(0));\n\t\t\t\tfillHSBFields(col, cal.get(0));\n\t\t\t\tsetSelector(col, cal.get(0));\n\t\t\t\tsetHue(col, cal.get(0));\n\t\t\t\tsetNewColor(col, cal.get(0));\n\t\t\t};\n\t\treturn {\n\t\t\tinit: function (opt) {\n\t\t\t\topt = $.extend({}, defaults, opt||{});\n\t\t\t\tif (typeof opt.color == 'string') {\n\t\t\t\t\topt.color = HexToHSB(opt.color);\n\t\t\t\t} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {\n\t\t\t\t\topt.color = RGBToHSB(opt.color);\n\t\t\t\t} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {\n\t\t\t\t\topt.color = fixHSB(opt.color);\n\t\t\t\t} else {\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t\treturn this.each(function () {\n\t\t\t\t\tif (!$(this).data('colorpickerId')) {\n\t\t\t\t\t\tvar options = $.extend({}, opt);\n\t\t\t\t\t\toptions.origColor = opt.color;\n\t\t\t\t\t\tvar id = 'collorpicker_' + parseInt(Math.random() * 1000);\n\t\t\t\t\t\t$(this).data('colorpickerId', id);\n\t\t\t\t\t\tvar cal = $(tpl).attr('id', id);\n\t\t\t\t\t\tif (options.flat) {\n\t\t\t\t\t\t\tcal.appendTo(this).show();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tcal.appendTo(document.body);\n\t\t\t\t\t\t}\n\t\t\t\t\t\toptions.fields = cal\n\t\t\t\t\t\t\t\t\t\t\t.find('input')\n\t\t\t\t\t\t\t\t\t\t\t\t.bind('keyup', keyDown)\n\t\t\t\t\t\t\t\t\t\t\t\t.bind('change', change)\n\t\t\t\t\t\t\t\t\t\t\t\t.bind('blur', blur)\n\t\t\t\t\t\t\t\t\t\t\t\t.bind('focus', focus);\n\t\t\t\t\t\tcal\n\t\t\t\t\t\t\t.find('span').bind('mousedown', downIncrement).end()\n\t\t\t\t\t\t\t.find('>div.colorpicker_current_color').bind('click', restoreOriginal);\n\t\t\t\t\t\toptions.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);\n\t\t\t\t\t\toptions.selectorIndic = options.selector.find('div div');\n\t\t\t\t\t\toptions.el = this;\n\t\t\t\t\t\toptions.hue = cal.find('div.colorpicker_hue div');\n\t\t\t\t\t\tcal.find('div.colorpicker_hue').bind('mousedown', downHue);\n\t\t\t\t\t\toptions.newColor = cal.find('div.colorpicker_new_color');\n\t\t\t\t\t\toptions.currentColor = cal.find('div.colorpicker_current_color');\n\t\t\t\t\t\tcal.data('colorpicker', options);\n\t\t\t\t\t\tcal.find('div.colorpicker_submit')\n\t\t\t\t\t\t\t.bind('mouseenter', enterSubmit)\n\t\t\t\t\t\t\t.bind('mouseleave', leaveSubmit)\n\t\t\t\t\t\t\t.bind('click', clickSubmit);\n\t\t\t\t\t\tfillRGBFields(options.color, cal.get(0));\n\t\t\t\t\t\tfillHSBFields(options.color, cal.get(0));\n\t\t\t\t\t\tfillHexFields(options.color, cal.get(0));\n\t\t\t\t\t\tsetHue(options.color, cal.get(0));\n\t\t\t\t\t\tsetSelector(options.color, cal.get(0));\n\t\t\t\t\t\tsetCurrentColor(options.color, cal.get(0));\n\t\t\t\t\t\tsetNewColor(options.color, cal.get(0));\n\t\t\t\t\t\tif (options.flat) {\n\t\t\t\t\t\t\tcal.css({\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tdisplay: 'block'\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t$(this).bind(options.eventName, show);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t},\n\t\t\tshowPicker: function() {\n\t\t\t\treturn this.each( function () {\n\t\t\t\t\tif ($(this).data('colorpickerId')) {\n\t\t\t\t\t\tshow.apply(this);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t},\n\t\t\thidePicker: function() {\n\t\t\t\treturn this.each( function () {\n\t\t\t\t\tif ($(this).data('colorpickerId')) {\n\t\t\t\t\t\t$('#' + $(this).data('colorpickerId')).hide();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t},\n\t\t\tsetColor: function(col) {\n\t\t\t\tif (typeof col == 'string') {\n\t\t\t\t\tcol = HexToHSB(col);\n\t\t\t\t} else if (col.r != undefined && col.g != undefined && col.b != undefined) {\n\t\t\t\t\tcol = RGBToHSB(col);\n\t\t\t\t} else if (col.h != undefined && col.s != undefined && col.b != undefined) {\n\t\t\t\t\tcol = fixHSB(col);\n\t\t\t\t} else {\n\t\t\t\t\treturn this;\n\t\t\t\t}\n\t\t\t\treturn this.each(function(){\n\t\t\t\t\tif ($(this).data('colorpickerId')) {\n\t\t\t\t\t\tvar cal = $('#' + $(this).data('colorpickerId'));\n\t\t\t\t\t\tcal.data('colorpicker').color = col;\n\t\t\t\t\t\tcal.data('colorpicker').origColor = col;\n\t\t\t\t\t\tfillRGBFields(col, cal.get(0));\n\t\t\t\t\t\tfillHSBFields(col, cal.get(0));\n\t\t\t\t\t\tfillHexFields(col, cal.get(0));\n\t\t\t\t\t\tsetHue(col, cal.get(0));\n\t\t\t\t\t\tsetSelector(col, cal.get(0));\n\t\t\t\t\t\tsetCurrentColor(col, cal.get(0));\n\t\t\t\t\t\tsetNewColor(col, cal.get(0));\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\t}();\n\t$.fn.extend({\n\t\tColorPicker: ColorPicker.init,\n\t\tColorPickerHide: ColorPicker.hidePicker,\n\t\tColorPickerShow: ColorPicker.showPicker,\n\t\tColorPickerSetColor: ColorPicker.setColor\n\t});\n})(jQuery)" }, { "path": "src/libs/gradient/jquery.gradientpicker.js", "content": "/**\n @author Matt Crinklaw-Vogt (tantaman)\n https://github.com/tantaman/jquery-gradient-picker\n */\n\n(function ($) {\n if (!$.event.special.destroyed) {\n $.event.special.destroyed = {\n remove: function (o) {\n if (o.handler) {\n o.handler();\n }\n }\n }\n }\n\n function ctrlPtComparator(l, r) {\n return l.position - r.position;\n }\n\n function bind(fn, ctx) {\n if (typeof fn.bind === \"function\") {\n return fn.bind(ctx);\n } else {\n return function () {\n fn.apply(ctx, arguments);\n }\n }\n }\n\n var browserPrefix = \"\";\n var agent = window.navigator.userAgent;\n if (agent.indexOf('WebKit') >= 0)\n browserPrefix = \"-webkit-\"\n else if (agent.indexOf('Mozilla') >= 0)\n browserPrefix = \"-moz-\"\n else if (agent.indexOf('Microsoft') >= 0)\n browserPrefix = \"-ms-\"\n else\n browserPrefix = \"\"\n\n function GradientSelection($el, opts) {\n this.$el = $el;\n this.$el.css(\"position\", \"relative\");\n this.opts = opts;\n\n var $preview = $(\"\");\n this.$el.append($preview);\n var canvas = $preview[0];\n $preview.css({\n width: $preview.parent().width(),\n height: $preview.parent().height()\n });\n // canvas.width = canvas.clientWidth;\n // canvas.height = canvas.clientHeight;\n this.g2d = canvas.getContext(\"2d\");\n\n var $ctrlPtContainer = $(\"
        \");\n this.$el.append($ctrlPtContainer)\n this.$ctrlPtContainer = $ctrlPtContainer;\n\n this.updatePreview = bind(this.updatePreview, this);\n this.controlPoints = [];\n this.ctrlPtConfig = new ControlPtConfig(this.$el, opts);\n for (var i = 0; i < opts.controlPoints.length; ++i) {\n var ctrlPt = this.createCtrlPt(opts.controlPoints[i]);\n this.controlPoints.push(ctrlPt);\n }\n\n this.docClicked = bind(this.docClicked, this);\n this.destroyed = bind(this.destroyed, this);\n $(document).bind(\"click\", this.docClicked);\n this.$el.bind(\"destroyed\", this.destroyed);\n this.previewClicked = bind(this.previewClicked, this);\n $preview.click(this.previewClicked);\n\n this.updatePreview();\n }\n\n GradientSelection.prototype = {\n docClicked: function () {\n this.ctrlPtConfig.hide();\n },\n\n createCtrlPt: function (ctrlPtSetup) {\n return new ControlPoint(this.$ctrlPtContainer, ctrlPtSetup, this.opts.orientation, this, this.ctrlPtConfig)\n },\n\n destroyed: function () {\n $(document).unbind(\"click\", this.docClicked);\n },\n\n updateOptions: function (opts) {\n $.extend(this.opts, opts);\n this.updatePreview();\n },\n\n colorToHex: function (color) {\n if (color.match('#')) {\n return color;\n }\n if (color.match('rgb')) {\n return '#' + this.rgbToHex(color);\n }\n return '#' + color;\n },\n\n rgbToHex: function (rgb) {\n function componentFromStr(numStr, percent) {\n var num = Math.max(0, parseInt(numStr, 10));\n return percent ?\n Math.floor(255 * Math.min(100, num) / 100) : Math.min(255, num);\n }\n\n var rgbRegex = /^rgb\\(\\s*(-?\\d+)(%?)\\s*,\\s*(-?\\d+)(%?)\\s*,\\s*(-?\\d+)(%?)\\s*\\)$/;\n var result, r, g, b, hex = \"\";\n if ((result = rgbRegex.exec(rgb))) {\n r = componentFromStr(result[1], result[2]);\n g = componentFromStr(result[3], result[4]);\n b = componentFromStr(result[5], result[6]);\n hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);\n }\n return hex;\n },\n\n updatePreview: function (quiet) {\n var result = [];\n this.controlPoints.sort(ctrlPtComparator);\n if (this.opts.orientation == \"horizontal\") {\n var grad = this.g2d.createLinearGradient(0, 0, this.g2d.canvas.width, 0);\n for (var i = 0; i < this.controlPoints.length; ++i) {\n var pt = this.controlPoints[i];\n pt.color = this.colorToHex(pt.color);\n grad.addColorStop(pt.position, pt.color);\n result.push({\n position: pt.position,\n color: pt.color\n });\n }\n }\n\n this.g2d.fillStyle = grad;\n this.g2d.fillRect(0, 0, this.g2d.canvas.width, this.g2d.canvas.height);\n\n if (this.opts.generateStyles)\n var styles = this._generatePreviewStyles();\n\n if (quiet)\n return;\n this.opts.change(result, styles);\n // this.opts.closed(result, styles);\n return {\n result: result,\n styles: styles\n }\n },\n\n removeControlPoint: function (ctrlPt) {\n var cpidx = this.controlPoints.indexOf(ctrlPt);\n\n if (cpidx != -1) {\n this.controlPoints.splice(cpidx, 1);\n ctrlPt.$el.remove();\n }\n },\n\n clear: function () {\n var context = this.g2d.canvas.getContext('2d');\n context.clearRect(0, 0, this.g2d.canvas.width,this.g2d.canvas.height);\n },\n\n /** webNeat modifications starts here */\n addPoint: function (percent, colorStr, quiet) {\n colorStr = this.colorToHex(colorStr);\n var cp = this.createCtrlPt({\n position: percent,\n color: colorStr\n });\n\n this.controlPoints.push(cp);\n this.controlPoints.sort(ctrlPtComparator);\n this.updatePreview(quiet);\n },\n\n // removeAllPointsAAAA: function () {\n // this.controlPoints.forEach(function (point) {\n // point.$el.remove();\n // });\n // this.controlPoints = [];\n // this.addPoint(0,'#fff');\n // this.addPoint(1,'#fff');\n // this.updatePreview();\n // this.controlPoints.forEach(function (point) {\n // point.$el.remove();\n // });\n // },\n\n removeAllPoints: function () {\n this.controlPoints.forEach(function (point) {\n point.$el.remove();\n ;\n });\n this.controlPoints = [];\n // this.addPoint(0,'#fff');\n // this.addPoint(1,'#fff');\n\n this.updatePreview();\n },\n\n\n changeFillDirection: function (fd) {\n this.opts.fillDirection = fd;\n this.updatePreview();\n },\n /** webNeat modifications ends here */\n\n previewClicked: function (e) {\n var offset = $(e.target).offset();\n var x = e.pageX - offset.left;\n var y = e.pageY - offset.top;\n\n var imgData = this.g2d.getImageData(x, y, 1, 1);\n var colorStr = \"rgb(\" + imgData.data[0] + \",\" + imgData.data[1] + \",\" + imgData.data[2] + \")\";\n\n var cp = this.createCtrlPt({\n position: x / this.g2d.canvas.width,\n color: colorStr\n });\n\n this.controlPoints.push(cp);\n this.controlPoints.sort(ctrlPtComparator);\n },\n\n getChanges: function () {\n this.updatePreview();\n },\n\n _generatePreviewStyles: function () {\n //linear-gradient(top, rgb(217,230,163) 86%, rgb(227,249,159) 9%)\n var str = this.opts.type + \"-gradient(\" + ((this.opts.type == \"linear\") ? (this.opts.fillDirection + \", \") : \"\");\n var first = true;\n for (var i = 0; i < this.controlPoints.length; ++i) {\n var pt = this.controlPoints[i];\n if (!first) {\n str += \", \";\n } else {\n first = false;\n }\n str += pt.color + \" \" + ((pt.position * 100) | 0) + \"%\";\n }\n\n str = str + \")\"\n var styles = [str, browserPrefix + str];\n return styles;\n }\n };\n\n function hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null;\n }\n\n function ControlPoint($parentEl, initialState, orientation, listener, ctrlPtConfig) {\n this.$el = $(\"
        \");\n $parentEl.append(this.$el);\n this.$parentEl = $parentEl;\n this.configView = ctrlPtConfig;\n\n if (typeof initialState === \"string\") {\n initialState = initialState.split(\" \");\n this.position = parseFloat(initialState[1]) / 100;\n this.color = initialState[0];\n } else {\n this.position = initialState.position;\n this.color = initialState.color;\n }\n\n this.listener = listener;\n this.outerWidth = this.$el.outerWidth();\n\n this.$el.css(\"background-color\", '#' + this.color);\n\n /* if (this.color.match('rgb')){\n console.log('rgb color ' + this.color);\n this.$el.css(\"background-color\", this.color);\n } else {\n var rgbc = hexToRgb(this.color);\n var rgbv = 'rgb(' + rgbc.r + ',' + rgbc.g + ',' + rgbc.b + ')';\n this.$el.css(\"background-color\", rgbv);\n } */\n\n\n if (orientation == \"horizontal\") {\n var pxLeft = ($parentEl.width() - this.$el.outerWidth()) * (this.position);\n this.$el.css(\"left\", pxLeft);\n } else {\n var pxTop = ($parentEl.height() - this.$el.outerHeight()) * (this.position);\n this.$el.css(\"top\", pxTop);\n }\n\n this.drag = bind(this.drag, this);\n this.stop = bind(this.stop, this);\n this.clicked = bind(this.clicked, this);\n this.colorChanged = bind(this.colorChanged, this);\n this.colorClosed = bind(this.colorClosed, this);\n this.$el.draggable({\n axis: (orientation == \"horizontal\") ? \"x\" : \"y\",\n drag: this.drag,\n stop: this.stop,\n containment: $parentEl\n });\n this.$el.css(\"position\", 'absolute');\n this.$el.click(this.clicked);\n }\n\n ControlPoint.prototype = {\n drag: function (e, ui) {\n // convert position to a %\n var left = ui.position.left;\n this.position = (left / (this.$parentEl.width() - this.outerWidth));\n this.listener.updatePreview();\n },\n\n stop: function (e, ui) {\n this.listener.updatePreview();\n this.configView.show(this.$el.position(), this.color, this);\n this.colorClosed();\n },\n\n clicked: function (e) {\n this.configView.show(this.$el.position(), this.color, this);\n console.log(this.color);\n e.stopPropagation();\n return false;\n },\n\n colorClosed: function () {\n this.listener.ctrlPtConfig.opts.closed();\n },\n\n colorChanged: function (c) {\n this.color = c;\n // log(c);\n this.$el.css(\"background-color\", this.color);\n this.listener.updatePreview();\n },\n\n removeClicked: function () {\n this.listener.removeControlPoint(this);\n this.listener.updatePreview();\n }\n };\n\n function ControlPtConfig($parent, opts) {\n //color-chooser\n this.$el = $('
        ');\n $parent.append(this.$el);\n var $cpicker = $('
        ');\n this.$el.append($cpicker);\n var $rmEl = $(\"
        \");\n this.$el.append($rmEl);\n\n this.colorChanged = bind(this.colorChanged, this);\n this.colorClosed = bind(this.colorClosed, this);\n this.removeClicked = bind(this.removeClicked, this);\n $cpicker.ColorPicker({\n onChange: this.colorChanged,\n onHide: this.colorClosed\n });\n this.$cpicker = $cpicker;\n this.opts = opts;\n this.visible = false;\n\n $rmEl.click(this.removeClicked);\n }\n\n ControlPtConfig.prototype = {\n show: function (position, color, listener) {\n this.visible = true;\n this.listener = listener;\n this.$el.css(\"visibility\", \"visible\");\n this.$cpicker.ColorPickerSetColor(color);\n this.$cpicker.css(\"background-color\", '#' + color);\n if (this.opts.orientation === \"horizontal\") {\n this.$el.css(\"left\", position.left);\n } else {\n this.$el.css(\"top\", position.top);\n }\n //else {\n //\tthis.visible = false;\n //this.$el.css(\"visibility\", \"hidden\");\n //}\n },\n\n hide: function () {\n if (this.visible) {\n this.$el.css(\"visibility\", \"hidden\");\n this.visible = false;\n }\n },\n\n /*colorClosed: function(hsb, hex, rgb) {\n if (this.opts.closed){\n var changes = this.listener.listener.updatePreview(false);\n this.opts.closed(changes.result, changes.styles)\n }\n },*/\n\n colorClosed: function (hsb, hex, rgb) {\n if (this.opts.closed) {\n this.opts.closed();\n }\n },\n colorChanged: function (hsb, hex, rgb) {\n hex = \"#\" + hex;\n this.listener.colorChanged(hex);\n this.$cpicker.css(\"background-color\", hex)\n },\n\n removeClicked: function () {\n this.listener.removeClicked();\n this.hide();\n }\n };\n\n var methods = {\n init: function (opts) {\n opts = $.extend({\n //controlPoints: [\"#FFF 0%\", \"#000 100%\"],\n controlPoints: [],\n orientation: \"horizontal\",\n type: \"linear\",\n fillDirection: \"left\",\n generateStyles: true,\n change: function () {\n }\n }, opts);\n\n this.each(function () {\n var $this = $(this);\n var gradSel = new GradientSelection($this, opts);\n $this.data(\"gradientPicker-sel\", gradSel);\n });\n },\n\n update: function (opts) {\n this.each(function () {\n var $this = $(this);\n var gradSel = $this.data(\"gradientPicker-sel\");\n if (gradSel != null) {\n gradSel.updateOptions(opts);\n }\n });\n }\n };\n\n $.fn.gradientPicker = function (method, opts) {\n if (typeof method === \"string\" && method !== \"init\") {\n methods[method].call(this, opts);\n } else {\n opts = method;\n methods.init.call(this, opts);\n }\n };\n})(jQuery);" }, { "path": "src/libs/jquery-ui.js", "content": "/*! jQuery UI - v1.10.1 - 2013-02-15\n* http://jqueryui.com\n* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.sortable.js, jquery.ui.effect.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.position.js, jquery.ui.progressbar.js, jquery.ui.slider.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js\n* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */\n\n(function( $, undefined ) {\n\nvar uuid = 0,\n\truniqueId = /^ui-id-\\d+$/;\n\n// prevent duplicate loading\n// this is only a problem because we proxy existing functions\n// and we don't want to double proxy them\n$.ui = $.ui || {};\nif ( $.ui.version ) {\n\treturn;\n}\n\n$.extend( $.ui, {\n\tversion: \"1.10.1\",\n\n\tkeyCode: {\n\t\tBACKSPACE: 8,\n\t\tCOMMA: 188,\n\t\tDELETE: 46,\n\t\tDOWN: 40,\n\t\tEND: 35,\n\t\tENTER: 13,\n\t\tESCAPE: 27,\n\t\tHOME: 36,\n\t\tLEFT: 37,\n\t\tNUMPAD_ADD: 107,\n\t\tNUMPAD_DECIMAL: 110,\n\t\tNUMPAD_DIVIDE: 111,\n\t\tNUMPAD_ENTER: 108,\n\t\tNUMPAD_MULTIPLY: 106,\n\t\tNUMPAD_SUBTRACT: 109,\n\t\tPAGE_DOWN: 34,\n\t\tPAGE_UP: 33,\n\t\tPERIOD: 190,\n\t\tRIGHT: 39,\n\t\tSPACE: 32,\n\t\tTAB: 9,\n\t\tUP: 38\n\t}\n});\n\n// plugins\n$.fn.extend({\n\t_focus: $.fn.focus,\n\tfocus: function( delay, fn ) {\n\t\treturn typeof delay === \"number\" ?\n\t\t\tthis.each(function() {\n\t\t\t\tvar elem = this;\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t$( elem ).focus();\n\t\t\t\t\tif ( fn ) {\n\t\t\t\t\t\tfn.call( elem );\n\t\t\t\t\t}\n\t\t\t\t}, delay );\n\t\t\t}) :\n\t\t\tthis._focus.apply( this, arguments );\n\t},\n\n\tscrollParent: function() {\n\t\tvar scrollParent;\n\t\tif (($.ui.ie && (/(static|relative)/).test(this.css(\"position\"))) || (/absolute/).test(this.css(\"position\"))) {\n\t\t\tscrollParent = this.parents().filter(function() {\n\t\t\t\treturn (/(relative|absolute|fixed)/).test($.css(this,\"position\")) && (/(auto|scroll)/).test($.css(this,\"overflow\")+$.css(this,\"overflow-y\")+$.css(this,\"overflow-x\"));\n\t\t\t}).eq(0);\n\t\t} else {\n\t\t\tscrollParent = this.parents().filter(function() {\n\t\t\t\treturn (/(auto|scroll)/).test($.css(this,\"overflow\")+$.css(this,\"overflow-y\")+$.css(this,\"overflow-x\"));\n\t\t\t}).eq(0);\n\t\t}\n\n\t\treturn (/fixed/).test(this.css(\"position\")) || !scrollParent.length ? $(document) : scrollParent;\n\t},\n\n\tzIndex: function( zIndex ) {\n\t\tif ( zIndex !== undefined ) {\n\t\t\treturn this.css( \"zIndex\", zIndex );\n\t\t}\n\n\t\tif ( this.length ) {\n\t\t\tvar elem = $( this[ 0 ] ), position, value;\n\t\t\twhile ( elem.length && elem[ 0 ] !== document ) {\n\t\t\t\t// Ignore z-index if position is set to a value where z-index is ignored by the browser\n\t\t\t\t// This makes behavior of this function consistent across browsers\n\t\t\t\t// WebKit always returns auto if the element is positioned\n\t\t\t\tposition = elem.css( \"position\" );\n\t\t\t\tif ( position === \"absolute\" || position === \"relative\" || position === \"fixed\" ) {\n\t\t\t\t\t// IE returns 0 when zIndex is not specified\n\t\t\t\t\t// other browsers return a string\n\t\t\t\t\t// we ignore the case of nested elements with an explicit value of 0\n\t\t\t\t\t//
        \n\t\t\t\t\tvalue = parseInt( elem.css( \"zIndex\" ), 10 );\n\t\t\t\t\tif ( !isNaN( value ) && value !== 0 ) {\n\t\t\t\t\t\treturn value;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\telem = elem.parent();\n\t\t\t}\n\t\t}\n\n\t\treturn 0;\n\t},\n\n\tuniqueId: function() {\n\t\treturn this.each(function() {\n\t\t\tif ( !this.id ) {\n\t\t\t\tthis.id = \"ui-id-\" + (++uuid);\n\t\t\t}\n\t\t});\n\t},\n\n\tremoveUniqueId: function() {\n\t\treturn this.each(function() {\n\t\t\tif ( runiqueId.test( this.id ) ) {\n\t\t\t\t$( this ).removeAttr( \"id\" );\n\t\t\t}\n\t\t});\n\t}\n});\n\n// selectors\nfunction focusable( element, isTabIndexNotNaN ) {\n\tvar map, mapName, img,\n\t\tnodeName = element.nodeName.toLowerCase();\n\tif ( \"area\" === nodeName ) {\n\t\tmap = element.parentNode;\n\t\tmapName = map.name;\n\t\tif ( !element.href || !mapName || map.nodeName.toLowerCase() !== \"map\" ) {\n\t\t\treturn false;\n\t\t}\n\t\timg = $( \"img[usemap=#\" + mapName + \"]\" )[0];\n\t\treturn !!img && visible( img );\n\t}\n\treturn ( /input|select|textarea|button|object/.test( nodeName ) ?\n\t\t!element.disabled :\n\t\t\"a\" === nodeName ?\n\t\t\telement.href || isTabIndexNotNaN :\n\t\t\tisTabIndexNotNaN) &&\n\t\t// the element and all of its ancestors must be visible\n\t\tvisible( element );\n}\n\nfunction visible( element ) {\n\treturn $.expr.filters.visible( element ) &&\n\t\t!$( element ).parents().addBack().filter(function() {\n\t\t\treturn $.css( this, \"visibility\" ) === \"hidden\";\n\t\t}).length;\n}\n\n$.extend( $.expr[ \":\" ], {\n\tdata: $.expr.createPseudo ?\n\t\t$.expr.createPseudo(function( dataName ) {\n\t\t\treturn function( elem ) {\n\t\t\t\treturn !!$.data( elem, dataName );\n\t\t\t};\n\t\t}) :\n\t\t// support: jQuery <1.8\n\t\tfunction( elem, i, match ) {\n\t\t\treturn !!$.data( elem, match[ 3 ] );\n\t\t},\n\n\tfocusable: function( element ) {\n\t\treturn focusable( element, !isNaN( $.attr( element, \"tabindex\" ) ) );\n\t},\n\n\ttabbable: function( element ) {\n\t\tvar tabIndex = $.attr( element, \"tabindex\" ),\n\t\t\tisTabIndexNaN = isNaN( tabIndex );\n\t\treturn ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN );\n\t}\n});\n\n// support: jQuery <1.8\nif ( !$( \"\" ).outerWidth( 1 ).jquery ) {\n\t$.each( [ \"Width\", \"Height\" ], function( i, name ) {\n\t\tvar side = name === \"Width\" ? [ \"Left\", \"Right\" ] : [ \"Top\", \"Bottom\" ],\n\t\t\ttype = name.toLowerCase(),\n\t\t\torig = {\n\t\t\t\tinnerWidth: $.fn.innerWidth,\n\t\t\t\tinnerHeight: $.fn.innerHeight,\n\t\t\t\touterWidth: $.fn.outerWidth,\n\t\t\t\touterHeight: $.fn.outerHeight\n\t\t\t};\n\n\t\tfunction reduce( elem, size, border, margin ) {\n\t\t\t$.each( side, function() {\n\t\t\t\tsize -= parseFloat( $.css( elem, \"padding\" + this ) ) || 0;\n\t\t\t\tif ( border ) {\n\t\t\t\t\tsize -= parseFloat( $.css( elem, \"border\" + this + \"Width\" ) ) || 0;\n\t\t\t\t}\n\t\t\t\tif ( margin ) {\n\t\t\t\t\tsize -= parseFloat( $.css( elem, \"margin\" + this ) ) || 0;\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn size;\n\t\t}\n\n\t\t$.fn[ \"inner\" + name ] = function( size ) {\n\t\t\tif ( size === undefined ) {\n\t\t\t\treturn orig[ \"inner\" + name ].call( this );\n\t\t\t}\n\n\t\t\treturn this.each(function() {\n\t\t\t\t$( this ).css( type, reduce( this, size ) + \"px\" );\n\t\t\t});\n\t\t};\n\n\t\t$.fn[ \"outer\" + name] = function( size, margin ) {\n\t\t\tif ( typeof size !== \"number\" ) {\n\t\t\t\treturn orig[ \"outer\" + name ].call( this, size );\n\t\t\t}\n\n\t\t\treturn this.each(function() {\n\t\t\t\t$( this).css( type, reduce( this, size, true, margin ) + \"px\" );\n\t\t\t});\n\t\t};\n\t});\n}\n\n// support: jQuery <1.8\nif ( !$.fn.addBack ) {\n\t$.fn.addBack = function( selector ) {\n\t\treturn this.add( selector == null ?\n\t\t\tthis.prevObject : this.prevObject.filter( selector )\n\t\t);\n\t};\n}\n\n// support: jQuery 1.6.1, 1.6.2 (http://bugs.jquery.com/ticket/9413)\nif ( $( \"\" ).data( \"a-b\", \"a\" ).removeData( \"a-b\" ).data( \"a-b\" ) ) {\n\t$.fn.removeData = (function( removeData ) {\n\t\treturn function( key ) {\n\t\t\tif ( arguments.length ) {\n\t\t\t\treturn removeData.call( this, $.camelCase( key ) );\n\t\t\t} else {\n\t\t\t\treturn removeData.call( this );\n\t\t\t}\n\t\t};\n\t})( $.fn.removeData );\n}\n\n\n\n\n\n// deprecated\n$.ui.ie = !!/msie [\\w.]+/.exec( navigator.userAgent.toLowerCase() );\n\n$.support.selectstart = \"onselectstart\" in document.createElement( \"div\" );\n$.fn.extend({\n\tdisableSelection: function() {\n\t\treturn this.bind( ( $.support.selectstart ? \"selectstart\" : \"mousedown\" ) +\n\t\t\t\".ui-disableSelection\", function( event ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t});\n\t},\n\n\tenableSelection: function() {\n\t\treturn this.unbind( \".ui-disableSelection\" );\n\t}\n});\n\n$.extend( $.ui, {\n\t// $.ui.plugin is deprecated. Use the proxy pattern instead.\n\tplugin: {\n\t\tadd: function( module, option, set ) {\n\t\t\tvar i,\n\t\t\t\tproto = $.ui[ module ].prototype;\n\t\t\tfor ( i in set ) {\n\t\t\t\tproto.plugins[ i ] = proto.plugins[ i ] || [];\n\t\t\t\tproto.plugins[ i ].push( [ option, set[ i ] ] );\n\t\t\t}\n\t\t},\n\t\tcall: function( instance, name, args ) {\n\t\t\tvar i,\n\t\t\t\tset = instance.plugins[ name ];\n\t\t\tif ( !set || !instance.element[ 0 ].parentNode || instance.element[ 0 ].parentNode.nodeType === 11 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfor ( i = 0; i < set.length; i++ ) {\n\t\t\t\tif ( instance.options[ set[ i ][ 0 ] ] ) {\n\t\t\t\t\tset[ i ][ 1 ].apply( instance.element, args );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\n\t// only used by resizable\n\thasScroll: function( el, a ) {\n\n\t\t//If overflow is hidden, the element might have extra content, but the user wants to hide it\n\t\tif ( $( el ).css( \"overflow\" ) === \"hidden\") {\n\t\t\treturn false;\n\t\t}\n\n\t\tvar scroll = ( a && a === \"left\" ) ? \"scrollLeft\" : \"scrollTop\",\n\t\t\thas = false;\n\n\t\tif ( el[ scroll ] > 0 ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// TODO: determine which cases actually cause this to happen\n\t\t// if the element doesn't have the scroll set, see if it's possible to\n\t\t// set the scroll\n\t\tel[ scroll ] = 1;\n\t\thas = ( el[ scroll ] > 0 );\n\t\tel[ scroll ] = 0;\n\t\treturn has;\n\t}\n});\n\n})( jQuery );\n\n(function( $, undefined ) {\n\nvar uuid = 0,\n\tslice = Array.prototype.slice,\n\t_cleanData = $.cleanData;\n$.cleanData = function( elems ) {\n\tfor ( var i = 0, elem; (elem = elems[i]) != null; i++ ) {\n\t\ttry {\n\t\t\t$( elem ).triggerHandler( \"remove\" );\n\t\t// http://bugs.jquery.com/ticket/8235\n\t\t} catch( e ) {}\n\t}\n\t_cleanData( elems );\n};\n\n$.widget = function( name, base, prototype ) {\n\tvar fullName, existingConstructor, constructor, basePrototype,\n\t\t// proxiedPrototype allows the provided prototype to remain unmodified\n\t\t// so that it can be used as a mixin for multiple widgets (#8876)\n\t\tproxiedPrototype = {},\n\t\tnamespace = name.split( \".\" )[ 0 ];\n\n\tname = name.split( \".\" )[ 1 ];\n\tfullName = namespace + \"-\" + name;\n\n\tif ( !prototype ) {\n\t\tprototype = base;\n\t\tbase = $.Widget;\n\t}\n\n\t// create selector for plugin\n\t$.expr[ \":\" ][ fullName.toLowerCase() ] = function( elem ) {\n\t\treturn !!$.data( elem, fullName );\n\t};\n\n\t$[ namespace ] = $[ namespace ] || {};\n\texistingConstructor = $[ namespace ][ name ];\n\tconstructor = $[ namespace ][ name ] = function( options, element ) {\n\t\t// allow instantiation without \"new\" keyword\n\t\tif ( !this._createWidget ) {\n\t\t\treturn new constructor( options, element );\n\t\t}\n\n\t\t// allow instantiation without initializing for simple inheritance\n\t\t// must use \"new\" keyword (the code above always passes args)\n\t\tif ( arguments.length ) {\n\t\t\tthis._createWidget( options, element );\n\t\t}\n\t};\n\t// extend with the existing constructor to carry over any static properties\n\t$.extend( constructor, existingConstructor, {\n\t\tversion: prototype.version,\n\t\t// copy the object used to create the prototype in case we need to\n\t\t// redefine the widget later\n\t\t_proto: $.extend( {}, prototype ),\n\t\t// track widgets that inherit from this widget in case this widget is\n\t\t// redefined after a widget inherits from it\n\t\t_childConstructors: []\n\t});\n\n\tbasePrototype = new base();\n\t// we need to make the options hash a property directly on the new instance\n\t// otherwise we'll modify the options hash on the prototype that we're\n\t// inheriting from\n\tbasePrototype.options = $.widget.extend( {}, basePrototype.options );\n\t$.each( prototype, function( prop, value ) {\n\t\tif ( !$.isFunction( value ) ) {\n\t\t\tproxiedPrototype[ prop ] = value;\n\t\t\treturn;\n\t\t}\n\t\tproxiedPrototype[ prop ] = (function() {\n\t\t\tvar _super = function() {\n\t\t\t\t\treturn base.prototype[ prop ].apply( this, arguments );\n\t\t\t\t},\n\t\t\t\t_superApply = function( args ) {\n\t\t\t\t\treturn base.prototype[ prop ].apply( this, args );\n\t\t\t\t};\n\t\t\treturn function() {\n\t\t\t\tvar __super = this._super,\n\t\t\t\t\t__superApply = this._superApply,\n\t\t\t\t\treturnValue;\n\n\t\t\t\tthis._super = _super;\n\t\t\t\tthis._superApply = _superApply;\n\n\t\t\t\treturnValue = value.apply( this, arguments );\n\n\t\t\t\tthis._super = __super;\n\t\t\t\tthis._superApply = __superApply;\n\n\t\t\t\treturn returnValue;\n\t\t\t};\n\t\t})();\n\t});\n\tconstructor.prototype = $.widget.extend( basePrototype, {\n\t\t// TODO: remove support for widgetEventPrefix\n\t\t// always use the name + a colon as the prefix, e.g., draggable:start\n\t\t// don't prefix for widgets that aren't DOM-based\n\t\twidgetEventPrefix: existingConstructor ? basePrototype.widgetEventPrefix : name\n\t}, proxiedPrototype, {\n\t\tconstructor: constructor,\n\t\tnamespace: namespace,\n\t\twidgetName: name,\n\t\twidgetFullName: fullName\n\t});\n\n\t// If this widget is being redefined then we need to find all widgets that\n\t// are inheriting from it and redefine all of them so that they inherit from\n\t// the new version of this widget. We're essentially trying to replace one\n\t// level in the prototype chain.\n\tif ( existingConstructor ) {\n\t\t$.each( existingConstructor._childConstructors, function( i, child ) {\n\t\t\tvar childPrototype = child.prototype;\n\n\t\t\t// redefine the child widget using the same prototype that was\n\t\t\t// originally used, but inherit from the new version of the base\n\t\t\t$.widget( childPrototype.namespace + \".\" + childPrototype.widgetName, constructor, child._proto );\n\t\t});\n\t\t// remove the list of existing child constructors from the old constructor\n\t\t// so the old child constructors can be garbage collected\n\t\tdelete existingConstructor._childConstructors;\n\t} else {\n\t\tbase._childConstructors.push( constructor );\n\t}\n\n\t$.widget.bridge( name, constructor );\n};\n\n$.widget.extend = function( target ) {\n\tvar input = slice.call( arguments, 1 ),\n\t\tinputIndex = 0,\n\t\tinputLength = input.length,\n\t\tkey,\n\t\tvalue;\n\tfor ( ; inputIndex < inputLength; inputIndex++ ) {\n\t\tfor ( key in input[ inputIndex ] ) {\n\t\t\tvalue = input[ inputIndex ][ key ];\n\t\t\tif ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {\n\t\t\t\t// Clone objects\n\t\t\t\tif ( $.isPlainObject( value ) ) {\n\t\t\t\t\ttarget[ key ] = $.isPlainObject( target[ key ] ) ?\n\t\t\t\t\t\t$.widget.extend( {}, target[ key ], value ) :\n\t\t\t\t\t\t// Don't extend strings, arrays, etc. with objects\n\t\t\t\t\t\t$.widget.extend( {}, value );\n\t\t\t\t// Copy everything else by reference\n\t\t\t\t} else {\n\t\t\t\t\ttarget[ key ] = value;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\treturn target;\n};\n\n$.widget.bridge = function( name, object ) {\n\tvar fullName = object.prototype.widgetFullName || name;\n\t$.fn[ name ] = function( options ) {\n\t\tvar isMethodCall = typeof options === \"string\",\n\t\t\targs = slice.call( arguments, 1 ),\n\t\t\treturnValue = this;\n\n\t\t// allow multiple hashes to be passed on init\n\t\toptions = !isMethodCall && args.length ?\n\t\t\t$.widget.extend.apply( null, [ options ].concat(args) ) :\n\t\t\toptions;\n\n\t\tif ( isMethodCall ) {\n\t\t\tthis.each(function() {\n\t\t\t\tvar methodValue,\n\t\t\t\t\tinstance = $.data( this, fullName );\n\t\t\t\tif ( !instance ) {\n\t\t\t\t\treturn $.error( \"cannot call methods on \" + name + \" prior to initialization; \" +\n\t\t\t\t\t\t\"attempted to call method '\" + options + \"'\" );\n\t\t\t\t}\n\t\t\t\tif ( !$.isFunction( instance[options] ) || options.charAt( 0 ) === \"_\" ) {\n\t\t\t\t\treturn $.error( \"no such method '\" + options + \"' for \" + name + \" widget instance\" );\n\t\t\t\t}\n\t\t\t\tmethodValue = instance[ options ].apply( instance, args );\n\t\t\t\tif ( methodValue !== instance && methodValue !== undefined ) {\n\t\t\t\t\treturnValue = methodValue && methodValue.jquery ?\n\t\t\t\t\t\treturnValue.pushStack( methodValue.get() ) :\n\t\t\t\t\t\tmethodValue;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t});\n\t\t} else {\n\t\t\tthis.each(function() {\n\t\t\t\tvar instance = $.data( this, fullName );\n\t\t\t\tif ( instance ) {\n\t\t\t\t\tinstance.option( options || {} )._init();\n\t\t\t\t} else {\n\t\t\t\t\t$.data( this, fullName, new object( options, this ) );\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\n\t\treturn returnValue;\n\t};\n};\n\n$.Widget = function( /* options, element */ ) {};\n$.Widget._childConstructors = [];\n\n$.Widget.prototype = {\n\twidgetName: \"widget\",\n\twidgetEventPrefix: \"\",\n\tdefaultElement: \"
        \",\n\toptions: {\n\t\tdisabled: false,\n\n\t\t// callbacks\n\t\tcreate: null\n\t},\n\t_createWidget: function( options, element ) {\n\t\telement = $( element || this.defaultElement || this )[ 0 ];\n\t\tthis.element = $( element );\n\t\tthis.uuid = uuid++;\n\t\tthis.eventNamespace = \".\" + this.widgetName + this.uuid;\n\t\tthis.options = $.widget.extend( {},\n\t\t\tthis.options,\n\t\t\tthis._getCreateOptions(),\n\t\t\toptions );\n\n\t\tthis.bindings = $();\n\t\tthis.hoverable = $();\n\t\tthis.focusable = $();\n\n\t\tif ( element !== this ) {\n\t\t\t$.data( element, this.widgetFullName, this );\n\t\t\tthis._on( true, this.element, {\n\t\t\t\tremove: function( event ) {\n\t\t\t\t\tif ( event.target === element ) {\n\t\t\t\t\t\tthis.destroy();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.document = $( element.style ?\n\t\t\t\t// element within the document\n\t\t\t\telement.ownerDocument :\n\t\t\t\t// element is window or document\n\t\t\t\telement.document || element );\n\t\t\tthis.window = $( this.document[0].defaultView || this.document[0].parentWindow );\n\t\t}\n\n\t\tthis._create();\n\t\tthis._trigger( \"create\", null, this._getCreateEventData() );\n\t\tthis._init();\n\t},\n\t_getCreateOptions: $.noop,\n\t_getCreateEventData: $.noop,\n\t_create: $.noop,\n\t_init: $.noop,\n\n\tdestroy: function() {\n\t\tthis._destroy();\n\t\t// we can probably remove the unbind calls in 2.0\n\t\t// all event bindings should go through this._on()\n\t\tthis.element\n\t\t\t.unbind( this.eventNamespace )\n\t\t\t// 1.9 BC for #7810\n\t\t\t// TODO remove dual storage\n\t\t\t.removeData( this.widgetName )\n\t\t\t.removeData( this.widgetFullName )\n\t\t\t// support: jquery <1.6.3\n\t\t\t// http://bugs.jquery.com/ticket/9413\n\t\t\t.removeData( $.camelCase( this.widgetFullName ) );\n\t\tthis.widget()\n\t\t\t.unbind( this.eventNamespace )\n\t\t\t.removeAttr( \"aria-disabled\" )\n\t\t\t.removeClass(\n\t\t\t\tthis.widgetFullName + \"-disabled \" +\n\t\t\t\t\"ui-state-disabled\" );\n\n\t\t// clean up events and states\n\t\tthis.bindings.unbind( this.eventNamespace );\n\t\tthis.hoverable.removeClass( \"ui-state-hover\" );\n\t\tthis.focusable.removeClass( \"ui-state-focus\" );\n\t},\n\t_destroy: $.noop,\n\n\twidget: function() {\n\t\treturn this.element;\n\t},\n\n\toption: function( key, value ) {\n\t\tvar options = key,\n\t\t\tparts,\n\t\t\tcurOption,\n\t\t\ti;\n\n\t\tif ( arguments.length === 0 ) {\n\t\t\t// don't return a reference to the internal hash\n\t\t\treturn $.widget.extend( {}, this.options );\n\t\t}\n\n\t\tif ( typeof key === \"string\" ) {\n\t\t\t// handle nested keys, e.g., \"foo.bar\" => { foo: { bar: ___ } }\n\t\t\toptions = {};\n\t\t\tparts = key.split( \".\" );\n\t\t\tkey = parts.shift();\n\t\t\tif ( parts.length ) {\n\t\t\t\tcurOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );\n\t\t\t\tfor ( i = 0; i < parts.length - 1; i++ ) {\n\t\t\t\t\tcurOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};\n\t\t\t\t\tcurOption = curOption[ parts[ i ] ];\n\t\t\t\t}\n\t\t\t\tkey = parts.pop();\n\t\t\t\tif ( value === undefined ) {\n\t\t\t\t\treturn curOption[ key ] === undefined ? null : curOption[ key ];\n\t\t\t\t}\n\t\t\t\tcurOption[ key ] = value;\n\t\t\t} else {\n\t\t\t\tif ( value === undefined ) {\n\t\t\t\t\treturn this.options[ key ] === undefined ? null : this.options[ key ];\n\t\t\t\t}\n\t\t\t\toptions[ key ] = value;\n\t\t\t}\n\t\t}\n\n\t\tthis._setOptions( options );\n\n\t\treturn this;\n\t},\n\t_setOptions: function( options ) {\n\t\tvar key;\n\n\t\tfor ( key in options ) {\n\t\t\tthis._setOption( key, options[ key ] );\n\t\t}\n\n\t\treturn this;\n\t},\n\t_setOption: function( key, value ) {\n\t\tthis.options[ key ] = value;\n\n\t\tif ( key === \"disabled\" ) {\n\t\t\tthis.widget()\n\t\t\t\t.toggleClass( this.widgetFullName + \"-disabled ui-state-disabled\", !!value )\n\t\t\t\t.attr( \"aria-disabled\", value );\n\t\t\tthis.hoverable.removeClass( \"ui-state-hover\" );\n\t\t\tthis.focusable.removeClass( \"ui-state-focus\" );\n\t\t}\n\n\t\treturn this;\n\t},\n\n\tenable: function() {\n\t\treturn this._setOption( \"disabled\", false );\n\t},\n\tdisable: function() {\n\t\treturn this._setOption( \"disabled\", true );\n\t},\n\n\t_on: function( suppressDisabledCheck, element, handlers ) {\n\t\tvar delegateElement,\n\t\t\tinstance = this;\n\n\t\t// no suppressDisabledCheck flag, shuffle arguments\n\t\tif ( typeof suppressDisabledCheck !== \"boolean\" ) {\n\t\t\thandlers = element;\n\t\t\telement = suppressDisabledCheck;\n\t\t\tsuppressDisabledCheck = false;\n\t\t}\n\n\t\t// no element argument, shuffle and use this.element\n\t\tif ( !handlers ) {\n\t\t\thandlers = element;\n\t\t\telement = this.element;\n\t\t\tdelegateElement = this.widget();\n\t\t} else {\n\t\t\t// accept selectors, DOM elements\n\t\t\telement = delegateElement = $( element );\n\t\t\tthis.bindings = this.bindings.add( element );\n\t\t}\n\n\t\t$.each( handlers, function( event, handler ) {\n\t\t\tfunction handlerProxy() {\n\t\t\t\t// allow widgets to customize the disabled handling\n\t\t\t\t// - disabled as an array instead of boolean\n\t\t\t\t// - disabled class as method for disabling individual parts\n\t\t\t\tif ( !suppressDisabledCheck &&\n\t\t\t\t\t\t( instance.options.disabled === true ||\n\t\t\t\t\t\t\t$( this ).hasClass( \"ui-state-disabled\" ) ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\treturn ( typeof handler === \"string\" ? instance[ handler ] : handler )\n\t\t\t\t\t.apply( instance, arguments );\n\t\t\t}\n\n\t\t\t// copy the guid so direct unbinding works\n\t\t\tif ( typeof handler !== \"string\" ) {\n\t\t\t\thandlerProxy.guid = handler.guid =\n\t\t\t\t\thandler.guid || handlerProxy.guid || $.guid++;\n\t\t\t}\n\n\t\t\tvar match = event.match( /^(\\w+)\\s*(.*)$/ ),\n\t\t\t\teventName = match[1] + instance.eventNamespace,\n\t\t\t\tselector = match[2];\n\t\t\tif ( selector ) {\n\t\t\t\tdelegateElement.delegate( selector, eventName, handlerProxy );\n\t\t\t} else {\n\t\t\t\telement.bind( eventName, handlerProxy );\n\t\t\t}\n\t\t});\n\t},\n\n\t_off: function( element, eventName ) {\n\t\teventName = (eventName || \"\").split( \" \" ).join( this.eventNamespace + \" \" ) + this.eventNamespace;\n\t\telement.unbind( eventName ).undelegate( eventName );\n\t},\n\n\t_delay: function( handler, delay ) {\n\t\tfunction handlerProxy() {\n\t\t\treturn ( typeof handler === \"string\" ? instance[ handler ] : handler )\n\t\t\t\t.apply( instance, arguments );\n\t\t}\n\t\tvar instance = this;\n\t\treturn setTimeout( handlerProxy, delay || 0 );\n\t},\n\n\t_hoverable: function( element ) {\n\t\tthis.hoverable = this.hoverable.add( element );\n\t\tthis._on( element, {\n\t\t\tmouseenter: function( event ) {\n\t\t\t\t$( event.currentTarget ).addClass( \"ui-state-hover\" );\n\t\t\t},\n\t\t\tmouseleave: function( event ) {\n\t\t\t\t$( event.currentTarget ).removeClass( \"ui-state-hover\" );\n\t\t\t}\n\t\t});\n\t},\n\n\t_focusable: function( element ) {\n\t\tthis.focusable = this.focusable.add( element );\n\t\tthis._on( element, {\n\t\t\tfocusin: function( event ) {\n\t\t\t\t$( event.currentTarget ).addClass( \"ui-state-focus\" );\n\t\t\t},\n\t\t\tfocusout: function( event ) {\n\t\t\t\t$( event.currentTarget ).removeClass( \"ui-state-focus\" );\n\t\t\t}\n\t\t});\n\t},\n\n\t_trigger: function( type, event, data ) {\n\t\tvar prop, orig,\n\t\t\tcallback = this.options[ type ];\n\n\t\tdata = data || {};\n\t\tevent = $.Event( event );\n\t\tevent.type = ( type === this.widgetEventPrefix ?\n\t\t\ttype :\n\t\t\tthis.widgetEventPrefix + type ).toLowerCase();\n\t\t// the original event may come from any element\n\t\t// so we need to reset the target on the new event\n\t\tevent.target = this.element[ 0 ];\n\n\t\t// copy original event properties over to the new event\n\t\torig = event.originalEvent;\n\t\tif ( orig ) {\n\t\t\tfor ( prop in orig ) {\n\t\t\t\tif ( !( prop in event ) ) {\n\t\t\t\t\tevent[ prop ] = orig[ prop ];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis.element.trigger( event, data );\n\t\treturn !( $.isFunction( callback ) &&\n\t\t\tcallback.apply( this.element[0], [ event ].concat( data ) ) === false ||\n\t\t\tevent.isDefaultPrevented() );\n\t}\n};\n\n$.each( { show: \"fadeIn\", hide: \"fadeOut\" }, function( method, defaultEffect ) {\n\t$.Widget.prototype[ \"_\" + method ] = function( element, options, callback ) {\n\t\tif ( typeof options === \"string\" ) {\n\t\t\toptions = { effect: options };\n\t\t}\n\t\tvar hasOptions,\n\t\t\teffectName = !options ?\n\t\t\t\tmethod :\n\t\t\t\toptions === true || typeof options === \"number\" ?\n\t\t\t\t\tdefaultEffect :\n\t\t\t\t\toptions.effect || defaultEffect;\n\t\toptions = options || {};\n\t\tif ( typeof options === \"number\" ) {\n\t\t\toptions = { duration: options };\n\t\t}\n\t\thasOptions = !$.isEmptyObject( options );\n\t\toptions.complete = callback;\n\t\tif ( options.delay ) {\n\t\t\telement.delay( options.delay );\n\t\t}\n\t\tif ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {\n\t\t\telement[ method ]( options );\n\t\t} else if ( effectName !== method && element[ effectName ] ) {\n\t\t\telement[ effectName ]( options.duration, options.easing, callback );\n\t\t} else {\n\t\t\telement.queue(function( next ) {\n\t\t\t\t$( this )[ method ]();\n\t\t\t\tif ( callback ) {\n\t\t\t\t\tcallback.call( element[ 0 ] );\n\t\t\t\t}\n\t\t\t\tnext();\n\t\t\t});\n\t\t}\n\t};\n});\n\n})( jQuery );\n\n(function( $, undefined ) {\n\nvar mouseHandled = false;\n$( document ).mouseup( function() {\n\tmouseHandled = false;\n});\n\n$.widget(\"ui.mouse\", {\n\tversion: \"1.10.1\",\n\toptions: {\n\t\tcancel: \"input,textarea,button,select,option\",\n\t\tdistance: 1,\n\t\tdelay: 0\n\t},\n\t_mouseInit: function() {\n\t\tvar that = this;\n\n\t\tthis.element\n\t\t\t.bind(\"mousedown.\"+this.widgetName, function(event) {\n\t\t\t\treturn that._mouseDown(event);\n\t\t\t})\n\t\t\t.bind(\"click.\"+this.widgetName, function(event) {\n\t\t\t\tif (true === $.data(event.target, that.widgetName + \".preventClickEvent\")) {\n\t\t\t\t\t$.removeData(event.target, that.widgetName + \".preventClickEvent\");\n\t\t\t\t\tevent.stopImmediatePropagation();\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t});\n\n\t\tthis.started = false;\n\t},\n\n\t// TODO: make sure destroying one instance of mouse doesn't mess with\n\t// other instances of mouse\n\t_mouseDestroy: function() {\n\t\tthis.element.unbind(\".\"+this.widgetName);\n\t\tif ( this._mouseMoveDelegate ) {\n\t\t\t$(document)\n\t\t\t\t.unbind(\"mousemove.\"+this.widgetName, this._mouseMoveDelegate)\n\t\t\t\t.unbind(\"mouseup.\"+this.widgetName, this._mouseUpDelegate);\n\t\t}\n\t},\n\n\t_mouseDown: function(event) {\n\t\t// don't let more than one widget handle mouseStart\n\t\tif( mouseHandled ) { return; }\n\n\t\t// we may have missed mouseup (out of window)\n\t\t(this._mouseStarted && this._mouseUp(event));\n\n\t\tthis._mouseDownEvent = event;\n\n\t\tvar that = this,\n\t\t\tbtnIsLeft = (event.which === 1),\n\t\t\t// event.target.nodeName works around a bug in IE 8 with\n\t\t\t// disabled inputs (#7620)\n\t\t\telIsCancel = (typeof this.options.cancel === \"string\" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);\n\t\tif (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {\n\t\t\treturn true;\n\t\t}\n\n\t\tthis.mouseDelayMet = !this.options.delay;\n\t\tif (!this.mouseDelayMet) {\n\t\t\tthis._mouseDelayTimer = setTimeout(function() {\n\t\t\t\tthat.mouseDelayMet = true;\n\t\t\t}, this.options.delay);\n\t\t}\n\n\t\tif (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {\n\t\t\tthis._mouseStarted = (this._mouseStart(event) !== false);\n\t\t\tif (!this._mouseStarted) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\n\t\t// Click event may never have fired (Gecko & Opera)\n\t\tif (true === $.data(event.target, this.widgetName + \".preventClickEvent\")) {\n\t\t\t$.removeData(event.target, this.widgetName + \".preventClickEvent\");\n\t\t}\n\n\t\t// these delegates are required to keep context\n\t\tthis._mouseMoveDelegate = function(event) {\n\t\t\treturn that._mouseMove(event);\n\t\t};\n\t\tthis._mouseUpDelegate = function(event) {\n\t\t\treturn that._mouseUp(event);\n\t\t};\n\t\t$(document)\n\t\t\t.bind(\"mousemove.\"+this.widgetName, this._mouseMoveDelegate)\n\t\t\t.bind(\"mouseup.\"+this.widgetName, this._mouseUpDelegate);\n\n\t\tevent.preventDefault();\n\n\t\tmouseHandled = true;\n\t\treturn true;\n\t},\n\n\t_mouseMove: function(event) {\n\t\t// IE mouseup check - mouseup happened when mouse was out of window\n\t\tif ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {\n\t\t\treturn this._mouseUp(event);\n\t\t}\n\n\t\tif (this._mouseStarted) {\n\t\t\tthis._mouseDrag(event);\n\t\t\treturn event.preventDefault();\n\t\t}\n\n\t\tif (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {\n\t\t\tthis._mouseStarted =\n\t\t\t\t(this._mouseStart(this._mouseDownEvent, event) !== false);\n\t\t\t(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));\n\t\t}\n\n\t\treturn !this._mouseStarted;\n\t},\n\n\t_mouseUp: function(event) {\n\t\t$(document)\n\t\t\t.unbind(\"mousemove.\"+this.widgetName, this._mouseMoveDelegate)\n\t\t\t.unbind(\"mouseup.\"+this.widgetName, this._mouseUpDelegate);\n\n\t\tif (this._mouseStarted) {\n\t\t\tthis._mouseStarted = false;\n\n\t\t\tif (event.target === this._mouseDownEvent.target) {\n\t\t\t\t$.data(event.target, this.widgetName + \".preventClickEvent\", true);\n\t\t\t}\n\n\t\t\tthis._mouseStop(event);\n\t\t}\n\n\t\treturn false;\n\t},\n\n\t_mouseDistanceMet: function(event) {\n\t\treturn (Math.max(\n\t\t\t\tMath.abs(this._mouseDownEvent.pageX - event.pageX),\n\t\t\t\tMath.abs(this._mouseDownEvent.pageY - event.pageY)\n\t\t\t) >= this.options.distance\n\t\t);\n\t},\n\n\t_mouseDelayMet: function(/* event */) {\n\t\treturn this.mouseDelayMet;\n\t},\n\n\t// These are placeholder methods, to be overriden by extending plugin\n\t_mouseStart: function(/* event */) {},\n\t_mouseDrag: function(/* event */) {},\n\t_mouseStop: function(/* event */) {},\n\t_mouseCapture: function(/* event */) { return true; }\n});\n\n})(jQuery);\n\n(function( $, undefined ) {\n\n$.widget(\"ui.draggable\", $.ui.mouse, {\n\tversion: \"1.10.1\",\n\twidgetEventPrefix: \"drag\",\n\toptions: {\n\t\taddClasses: true,\n\t\tappendTo: \"parent\",\n\t\taxis: false,\n\t\tconnectToSortable: false,\n\t\tcontainment: false,\n\t\tcursor: \"auto\",\n\t\tcursorAt: false,\n\t\tgrid: false,\n\t\thandle: false,\n\t\thelper: \"original\",\n\t\tiframeFix: false,\n\t\topacity: false,\n\t\trefreshPositions: false,\n\t\trevert: false,\n\t\trevertDuration: 500,\n\t\tscope: \"default\",\n\t\tscroll: true,\n\t\tscrollSensitivity: 20,\n\t\tscrollSpeed: 20,\n\t\tsnap: false,\n\t\tsnapMode: \"both\",\n\t\tsnapTolerance: 20,\n\t\tstack: false,\n\t\tzIndex: false,\n\n\t\t// callbacks\n\t\tdrag: null,\n\t\tstart: null,\n\t\tstop: null\n\t},\n\t_create: function() {\n\n\t\tif (this.options.helper === \"original\" && !(/^(?:r|a|f)/).test(this.element.css(\"position\"))) {\n\t\t\tthis.element[0].style.position = \"relative\";\n\t\t}\n\t\tif (this.options.addClasses){\n\t\t\tthis.element.addClass(\"ui-draggable\");\n\t\t}\n\t\tif (this.options.disabled){\n\t\t\tthis.element.addClass(\"ui-draggable-disabled\");\n\t\t}\n\n\t\tthis._mouseInit();\n\n\t},\n\n\t_destroy: function() {\n\t\tthis.element.removeClass( \"ui-draggable ui-draggable-dragging ui-draggable-disabled\" );\n\t\tthis._mouseDestroy();\n\t},\n\n\t_mouseCapture: function(event) {\n\n\t\tvar o = this.options;\n\n\t\t// among others, prevent a drag on a resizable-handle\n\t\tif (this.helper || o.disabled || $(event.target).closest(\".ui-resizable-handle\").length > 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\t//Quit if we're not on a valid handle\n\t\tthis.handle = this._getHandle(event);\n\t\tif (!this.handle) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$(o.iframeFix === true ? \"iframe\" : o.iframeFix).each(function() {\n\t\t\t$(\"
        \")\n\t\t\t.css({\n\t\t\t\twidth: this.offsetWidth+\"px\", height: this.offsetHeight+\"px\",\n\t\t\t\tposition: \"absolute\", opacity: \"0.001\", zIndex: 1000\n\t\t\t})\n\t\t\t.css($(this).offset())\n\t\t\t.appendTo(\"body\");\n\t\t});\n\n\t\treturn true;\n\n\t},\n\n\t_mouseStart: function(event) {\n\n\t\tvar o = this.options;\n\n\t\t//Create and append the visible helper\n\t\tthis.helper = this._createHelper(event);\n\n\t\tthis.helper.addClass(\"ui-draggable-dragging\");\n\n\t\t//Cache the helper size\n\t\tthis._cacheHelperProportions();\n\n\t\t//If ddmanager is used for droppables, set the global draggable\n\t\tif($.ui.ddmanager) {\n\t\t\t$.ui.ddmanager.current = this;\n\t\t}\n\n\t\t/*\n\t\t * - Position generation -\n\t\t * This block generates everything position related - it's the core of draggables.\n\t\t */\n\n\t\t//Cache the margins of the original element\n\t\tthis._cacheMargins();\n\n\t\t//Store the helper's css position\n\t\tthis.cssPosition = this.helper.css(\"position\");\n\t\tthis.scrollParent = this.helper.scrollParent();\n\n\t\t//The element's absolute position on the page minus margins\n\t\tthis.offset = this.positionAbs = this.element.offset();\n\t\tthis.offset = {\n\t\t\ttop: this.offset.top - this.margins.top,\n\t\t\tleft: this.offset.left - this.margins.left\n\t\t};\n\n\t\t$.extend(this.offset, {\n\t\t\tclick: { //Where the click happened, relative to the element\n\t\t\t\tleft: event.pageX - this.offset.left,\n\t\t\t\ttop: event.pageY - this.offset.top\n\t\t\t},\n\t\t\tparent: this._getParentOffset(),\n\t\t\trelative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper\n\t\t});\n\n\t\t//Generate the original position\n\t\tthis.originalPosition = this.position = this._generatePosition(event);\n\t\tthis.originalPageX = event.pageX;\n\t\tthis.originalPageY = event.pageY;\n\n\t\t//Adjust the mouse offset relative to the helper if \"cursorAt\" is supplied\n\t\t(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));\n\n\t\t//Set a containment if given in the options\n\t\tif(o.containment) {\n\t\t\tthis._setContainment();\n\t\t}\n\n\t\t//Trigger event + callbacks\n\t\tif(this._trigger(\"start\", event) === false) {\n\t\t\tthis._clear();\n\t\t\treturn false;\n\t\t}\n\n\t\t//Recache the helper size\n\t\tthis._cacheHelperProportions();\n\n\t\t//Prepare the droppable offsets\n\t\tif ($.ui.ddmanager && !o.dropBehaviour) {\n\t\t\t$.ui.ddmanager.prepareOffsets(this, event);\n\t\t}\n\n\n\t\tthis._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position\n\n\t\t//If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003)\n\t\tif ( $.ui.ddmanager ) {\n\t\t\t$.ui.ddmanager.dragStart(this, event);\n\t\t}\n\n\t\treturn true;\n\t},\n\n\t_mouseDrag: function(event, noPropagation) {\n\n\t\t//Compute the helpers position\n\t\tthis.position = this._generatePosition(event);\n\t\tthis.positionAbs = this._convertPositionTo(\"absolute\");\n\n\t\t//Call plugins and callbacks and use the resulting position if something is returned\n\t\tif (!noPropagation) {\n\t\t\tvar ui = this._uiHash();\n\t\t\tif(this._trigger(\"drag\", event, ui) === false) {\n\t\t\t\tthis._mouseUp({});\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tthis.position = ui.position;\n\t\t}\n\n\t\tif(!this.options.axis || this.options.axis !== \"y\") {\n\t\t\tthis.helper[0].style.left = this.position.left+\"px\";\n\t\t}\n\t\tif(!this.options.axis || this.options.axis !== \"x\") {\n\t\t\tthis.helper[0].style.top = this.position.top+\"px\";\n\t\t}\n\t\tif($.ui.ddmanager) {\n\t\t\t$.ui.ddmanager.drag(this, event);\n\t\t}\n\n\t\treturn false;\n\t},\n\n\t_mouseStop: function(event) {\n\n\t\t//If we are using droppables, inform the manager about the drop\n\t\tvar element,\n\t\t\tthat = this,\n\t\t\telementInDom = false,\n\t\t\tdropped = false;\n\t\tif ($.ui.ddmanager && !this.options.dropBehaviour) {\n\t\t\tdropped = $.ui.ddmanager.drop(this, event);\n\t\t}\n\n\t\t//if a drop comes from outside (a sortable)\n\t\tif(this.dropped) {\n\t\t\tdropped = this.dropped;\n\t\t\tthis.dropped = false;\n\t\t}\n\n\t\t//if the original element is no longer in the DOM don't bother to continue (see #8269)\n\t\telement = this.element[0];\n\t\twhile ( element && (element = element.parentNode) ) {\n\t\t\tif (element === document ) {\n\t\t\t\telementInDom = true;\n\t\t\t}\n\t\t}\n\t\tif ( !elementInDom && this.options.helper === \"original\" ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif((this.options.revert === \"invalid\" && !dropped) || (this.options.revert === \"valid\" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {\n\t\t\t$(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {\n\t\t\t\tif(that._trigger(\"stop\", event) !== false) {\n\t\t\t\t\tthat._clear();\n\t\t\t\t}\n\t\t\t});\n\t\t} else {\n\t\t\tif(this._trigger(\"stop\", event) !== false) {\n\t\t\t\tthis._clear();\n\t\t\t}\n\t\t}\n\n\t\treturn false;\n\t},\n\n\t_mouseUp: function(event) {\n\t\t//Remove frame helpers\n\t\t$(\"div.ui-draggable-iframeFix\").each(function() {\n\t\t\tthis.parentNode.removeChild(this);\n\t\t});\n\n\t\t//If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)\n\t\tif( $.ui.ddmanager ) {\n\t\t\t$.ui.ddmanager.dragStop(this, event);\n\t\t}\n\n\t\treturn $.ui.mouse.prototype._mouseUp.call(this, event);\n\t},\n\n\tcancel: function() {\n\n\t\tif(this.helper.is(\".ui-draggable-dragging\")) {\n\t\t\tthis._mouseUp({});\n\t\t} else {\n\t\t\tthis._clear();\n\t\t}\n\n\t\treturn this;\n\n\t},\n\n\t_getHandle: function(event) {\n\n\t\tvar handle = !this.options.handle || !$(this.options.handle, this.element).length ? true : false;\n\t\t$(this.options.handle, this.element)\n\t\t\t.find(\"*\")\n\t\t\t.addBack()\n\t\t\t.each(function() {\n\t\t\t\tif(this === event.target) {\n\t\t\t\t\thandle = true;\n\t\t\t\t}\n\t\t\t});\n\n\t\treturn handle;\n\n\t},\n\n\t_createHelper: function(event) {\n\n\t\tvar o = this.options,\n\t\t\thelper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event])) : (o.helper === \"clone\" ? this.element.clone().removeAttr(\"id\") : this.element);\n\n\t\tif(!helper.parents(\"body\").length) {\n\t\t\thelper.appendTo((o.appendTo === \"parent\" ? this.element[0].parentNode : o.appendTo));\n\t\t}\n\n\t\tif(helper[0] !== this.element[0] && !(/(fixed|absolute)/).test(helper.css(\"position\"))) {\n\t\t\thelper.css(\"position\", \"absolute\");\n\t\t}\n\n\t\treturn helper;\n\n\t},\n\n\t_adjustOffsetFromHelper: function(obj) {\n\t\tif (typeof obj === \"string\") {\n\t\t\tobj = obj.split(\" \");\n\t\t}\n\t\tif ($.isArray(obj)) {\n\t\t\tobj = {left: +obj[0], top: +obj[1] || 0};\n\t\t}\n\t\tif (\"left\" in obj) {\n\t\t\tthis.offset.click.left = obj.left + this.margins.left;\n\t\t}\n\t\tif (\"right\" in obj) {\n\t\t\tthis.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;\n\t\t}\n\t\tif (\"top\" in obj) {\n\t\t\tthis.offset.click.top = obj.top + this.margins.top;\n\t\t}\n\t\tif (\"bottom\" in obj) {\n\t\t\tthis.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;\n\t\t}\n\t},\n\n\t_getParentOffset: function() {\n\n\t\t//Get the offsetParent and cache its position\n\t\tthis.offsetParent = this.helper.offsetParent();\n\t\tvar po = this.offsetParent.offset();\n\n\t\t// This is a special case where we need to modify a offset calculated on start, since the following happened:\n\t\t// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent\n\t\t// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that\n\t\t// the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag\n\t\tif(this.cssPosition === \"absolute\" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {\n\t\t\tpo.left += this.scrollParent.scrollLeft();\n\t\t\tpo.top += this.scrollParent.scrollTop();\n\t\t}\n\n\t\t//This needs to be actually done for all browsers, since pageX/pageY includes this information\n\t\t//Ugly IE fix\n\t\tif((this.offsetParent[0] === document.body) ||\n\t\t\t(this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === \"html\" && $.ui.ie)) {\n\t\t\tpo = { top: 0, left: 0 };\n\t\t}\n\n\t\treturn {\n\t\t\ttop: po.top + (parseInt(this.offsetParent.css(\"borderTopWidth\"),10) || 0),\n\t\t\tleft: po.left + (parseInt(this.offsetParent.css(\"borderLeftWidth\"),10) || 0)\n\t\t};\n\n\t},\n\n\t_getRelativeOffset: function() {\n\n\t\tif(this.cssPosition === \"relative\") {\n\t\t\tvar p = this.element.position();\n\t\t\treturn {\n\t\t\t\ttop: p.top - (parseInt(this.helper.css(\"top\"),10) || 0) + this.scrollParent.scrollTop(),\n\t\t\t\tleft: p.left - (parseInt(this.helper.css(\"left\"),10) || 0) + this.scrollParent.scrollLeft()\n\t\t\t};\n\t\t} else {\n\t\t\treturn { top: 0, left: 0 };\n\t\t}\n\n\t},\n\n\t_cacheMargins: function() {\n\t\tthis.margins = {\n\t\t\tleft: (parseInt(this.element.css(\"marginLeft\"),10) || 0),\n\t\t\ttop: (parseInt(this.element.css(\"marginTop\"),10) || 0),\n\t\t\tright: (parseInt(this.element.css(\"marginRight\"),10) || 0),\n\t\t\tbottom: (parseInt(this.element.css(\"marginBottom\"),10) || 0)\n\t\t};\n\t},\n\n\t_cacheHelperProportions: function() {\n\t\tthis.helperProportions = {\n\t\t\twidth: this.helper.outerWidth(),\n\t\t\theight: this.helper.outerHeight()\n\t\t};\n\t},\n\n\t_setContainment: function() {\n\n\t\tvar over, c, ce,\n\t\t\to = this.options;\n\n\t\tif(o.containment === \"parent\") {\n\t\t\to.containment = this.helper[0].parentNode;\n\t\t}\n\t\tif(o.containment === \"document\" || o.containment === \"window\") {\n\t\t\tthis.containment = [\n\t\t\t\to.containment === \"document\" ? 0 : $(window).scrollLeft() - this.offset.relative.left - this.offset.parent.left,\n\t\t\t\to.containment === \"document\" ? 0 : $(window).scrollTop() - this.offset.relative.top - this.offset.parent.top,\n\t\t\t\t(o.containment === \"document\" ? 0 : $(window).scrollLeft()) + $(o.containment === \"document\" ? document : window).width() - this.helperProportions.width - this.margins.left,\n\t\t\t\t(o.containment === \"document\" ? 0 : $(window).scrollTop()) + ($(o.containment === \"document\" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top\n\t\t\t];\n\t\t}\n\n\t\tif(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor !== Array) {\n\t\t\tc = $(o.containment);\n\t\t\tce = c[0];\n\n\t\t\tif(!ce) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tover = ($(ce).css(\"overflow\") !== \"hidden\");\n\n\t\t\tthis.containment = [\n\t\t\t\t(parseInt($(ce).css(\"borderLeftWidth\"),10) || 0) + (parseInt($(ce).css(\"paddingLeft\"),10) || 0),\n\t\t\t\t(parseInt($(ce).css(\"borderTopWidth\"),10) || 0) + (parseInt($(ce).css(\"paddingTop\"),10) || 0),\n\t\t\t\t(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css(\"borderLeftWidth\"),10) || 0) - (parseInt($(ce).css(\"paddingRight\"),10) || 0) - this.helperProportions.width - this.margins.left - this.margins.right,\n\t\t\t\t(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css(\"borderTopWidth\"),10) || 0) - (parseInt($(ce).css(\"paddingBottom\"),10) || 0) - this.helperProportions.height - this.margins.top - this.margins.bottom\n\t\t\t];\n\t\t\tthis.relative_container = c;\n\n\t\t} else if(o.containment.constructor === Array) {\n\t\t\tthis.containment = o.containment;\n\t\t}\n\n\t},\n\n\t_convertPositionTo: function(d, pos) {\n\n\t\tif(!pos) {\n\t\t\tpos = this.position;\n\t\t}\n\n\t\tvar mod = d === \"absolute\" ? 1 : -1,\n\t\t\tscroll = this.cssPosition === \"absolute\" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);\n\n\t\treturn {\n\t\t\ttop: (\n\t\t\t\tpos.top\t+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.relative.top * mod +\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.top * mod -\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)\n\t\t\t),\n\t\t\tleft: (\n\t\t\t\tpos.left +\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.relative.left * mod +\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.left * mod\t-\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)\n\t\t\t)\n\t\t};\n\n\t},\n\n\t_generatePosition: function(event) {\n\n\t\tvar containment, co, top, left,\n\t\t\to = this.options,\n\t\t\tscroll = this.cssPosition === \"absolute\" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent,\n\t\t\tscrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName),\n\t\t\tpageX = event.pageX,\n\t\t\tpageY = event.pageY;\n\n\t\t/*\n\t\t * - Position constraining -\n\t\t * Constrain the position to a mix of grid, containment.\n\t\t */\n\n\t\tif(this.originalPosition) { //If we are not dragging yet, we won't check for options\n\t\t\tif(this.containment) {\n\t\t\tif (this.relative_container){\n\t\t\t\tco = this.relative_container.offset();\n\t\t\t\tcontainment = [ this.containment[0] + co.left,\n\t\t\t\t\tthis.containment[1] + co.top,\n\t\t\t\t\tthis.containment[2] + co.left,\n\t\t\t\t\tthis.containment[3] + co.top ];\n\t\t\t}\n\t\t\telse {\n\t\t\t\tcontainment = this.containment;\n\t\t\t}\n\n\t\t\t\tif(event.pageX - this.offset.click.left < containment[0]) {\n\t\t\t\t\tpageX = containment[0] + this.offset.click.left;\n\t\t\t\t}\n\t\t\t\tif(event.pageY - this.offset.click.top < containment[1]) {\n\t\t\t\t\tpageY = containment[1] + this.offset.click.top;\n\t\t\t\t}\n\t\t\t\tif(event.pageX - this.offset.click.left > containment[2]) {\n\t\t\t\t\tpageX = containment[2] + this.offset.click.left;\n\t\t\t\t}\n\t\t\t\tif(event.pageY - this.offset.click.top > containment[3]) {\n\t\t\t\t\tpageY = containment[3] + this.offset.click.top;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(o.grid) {\n\t\t\t\t//Check for grid elements set to 0 to prevent divide by 0 error causing invalid argument errors in IE (see ticket #6950)\n\t\t\t\ttop = o.grid[1] ? this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1] : this.originalPageY;\n\t\t\t\tpageY = containment ? ((top - this.offset.click.top >= containment[1] || top - this.offset.click.top > containment[3]) ? top : ((top - this.offset.click.top >= containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;\n\n\t\t\t\tleft = o.grid[0] ? this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0] : this.originalPageX;\n\t\t\t\tpageX = containment ? ((left - this.offset.click.left >= containment[0] || left - this.offset.click.left > containment[2]) ? left : ((left - this.offset.click.left >= containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;\n\t\t\t}\n\n\t\t}\n\n\t\treturn {\n\t\t\ttop: (\n\t\t\t\tpageY -\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.click.top\t-\t\t\t\t\t\t\t\t\t\t\t\t// Click offset (relative to the element)\n\t\t\t\tthis.offset.relative.top -\t\t\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.top +\t\t\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))\n\t\t\t),\n\t\t\tleft: (\n\t\t\t\tpageX -\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.click.left -\t\t\t\t\t\t\t\t\t\t\t\t// Click offset (relative to the element)\n\t\t\t\tthis.offset.relative.left -\t\t\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.left +\t\t\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))\n\t\t\t)\n\t\t};\n\n\t},\n\n\t_clear: function() {\n\t\tthis.helper.removeClass(\"ui-draggable-dragging\");\n\t\tif(this.helper[0] !== this.element[0] && !this.cancelHelperRemoval) {\n\t\t\tthis.helper.remove();\n\t\t}\n\t\tthis.helper = null;\n\t\tthis.cancelHelperRemoval = false;\n\t},\n\n\t// From now on bulk stuff - mainly helpers\n\n\t_trigger: function(type, event, ui) {\n\t\tui = ui || this._uiHash();\n\t\t$.ui.plugin.call(this, type, [event, ui]);\n\t\t//The absolute position has to be recalculated after plugins\n\t\tif(type === \"drag\") {\n\t\t\tthis.positionAbs = this._convertPositionTo(\"absolute\");\n\t\t}\n\t\treturn $.Widget.prototype._trigger.call(this, type, event, ui);\n\t},\n\n\tplugins: {},\n\n\t_uiHash: function() {\n\t\treturn {\n\t\t\thelper: this.helper,\n\t\t\tposition: this.position,\n\t\t\toriginalPosition: this.originalPosition,\n\t\t\toffset: this.positionAbs\n\t\t};\n\t}\n\n});\n\n$.ui.plugin.add(\"draggable\", \"connectToSortable\", {\n\tstart: function(event, ui) {\n\n\t\tvar inst = $(this).data(\"ui-draggable\"), o = inst.options,\n\t\t\tuiSortable = $.extend({}, ui, { item: inst.element });\n\t\tinst.sortables = [];\n\t\t$(o.connectToSortable).each(function() {\n\t\t\tvar sortable = $.data(this, \"ui-sortable\");\n\t\t\tif (sortable && !sortable.options.disabled) {\n\t\t\t\tinst.sortables.push({\n\t\t\t\t\tinstance: sortable,\n\t\t\t\t\tshouldRevert: sortable.options.revert\n\t\t\t\t});\n\t\t\t\tsortable.refreshPositions();\t// Call the sortable's refreshPositions at drag start to refresh the containerCache since the sortable container cache is used in drag and needs to be up to date (this will ensure it's initialised as well as being kept in step with any changes that might have happened on the page).\n\t\t\t\tsortable._trigger(\"activate\", event, uiSortable);\n\t\t\t}\n\t\t});\n\n\t},\n\tstop: function(event, ui) {\n\n\t\t//If we are still over the sortable, we fake the stop event of the sortable, but also remove helper\n\t\tvar inst = $(this).data(\"ui-draggable\"),\n\t\t\tuiSortable = $.extend({}, ui, { item: inst.element });\n\n\t\t$.each(inst.sortables, function() {\n\t\t\tif(this.instance.isOver) {\n\n\t\t\t\tthis.instance.isOver = 0;\n\n\t\t\t\tinst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance\n\t\t\t\tthis.instance.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)\n\n\t\t\t\t//The sortable revert is supported, and we have to set a temporary dropped variable on the draggable to support revert: \"valid/invalid\"\n\t\t\t\tif(this.shouldRevert) {\n\t\t\t\t\tthis.instance.options.revert = true;\n\t\t\t\t}\n\n\t\t\t\t//Trigger the stop of the sortable\n\t\t\t\tthis.instance._mouseStop(event);\n\n\t\t\t\tthis.instance.options.helper = this.instance.options._helper;\n\n\t\t\t\t//If the helper has been the original item, restore properties in the sortable\n\t\t\t\tif(inst.options.helper === \"original\") {\n\t\t\t\t\tthis.instance.currentItem.css({ top: \"auto\", left: \"auto\" });\n\t\t\t\t}\n\n\t\t\t} else {\n\t\t\t\tthis.instance.cancelHelperRemoval = false; //Remove the helper in the sortable instance\n\t\t\t\tthis.instance._trigger(\"deactivate\", event, uiSortable);\n\t\t\t}\n\n\t\t});\n\n\t},\n\tdrag: function(event, ui) {\n\n\t\tvar inst = $(this).data(\"ui-draggable\"), that = this;\n\n\t\t$.each(inst.sortables, function() {\n\n\t\t\tvar innermostIntersecting = false,\n\t\t\t\tthisSortable = this;\n\n\t\t\t//Copy over some variables to allow calling the sortable's native _intersectsWith\n\t\t\tthis.instance.positionAbs = inst.positionAbs;\n\t\t\tthis.instance.helperProportions = inst.helperProportions;\n\t\t\tthis.instance.offset.click = inst.offset.click;\n\n\t\t\tif(this.instance._intersectsWith(this.instance.containerCache)) {\n\t\t\t\tinnermostIntersecting = true;\n\t\t\t\t$.each(inst.sortables, function () {\n\t\t\t\t\tthis.instance.positionAbs = inst.positionAbs;\n\t\t\t\t\tthis.instance.helperProportions = inst.helperProportions;\n\t\t\t\t\tthis.instance.offset.click = inst.offset.click;\n\t\t\t\t\tif (this !== thisSortable &&\n\t\t\t\t\t\tthis.instance._intersectsWith(this.instance.containerCache) &&\n\t\t\t\t\t\t$.contains(thisSortable.instance.element[0], this.instance.element[0])\n\t\t\t\t\t) {\n\t\t\t\t\t\tinnermostIntersecting = false;\n\t\t\t\t\t}\n\t\t\t\t\treturn innermostIntersecting;\n\t\t\t\t});\n\t\t\t}\n\n\n\t\t\tif(innermostIntersecting) {\n\t\t\t\t//If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once\n\t\t\t\tif(!this.instance.isOver) {\n\n\t\t\t\t\tthis.instance.isOver = 1;\n\t\t\t\t\t//Now we fake the start of dragging for the sortable instance,\n\t\t\t\t\t//by cloning the list group item, appending it to the sortable and using it as inst.currentItem\n\t\t\t\t\t//We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)\n\t\t\t\t\tthis.instance.currentItem = $(that).clone().removeAttr(\"id\").appendTo(this.instance.element).data(\"ui-sortable-item\", true);\n\t\t\t\t\tthis.instance.options._helper = this.instance.options.helper; //Store helper option to later restore it\n\t\t\t\t\tthis.instance.options.helper = function() { return ui.helper[0]; };\n\n\t\t\t\t\tevent.target = this.instance.currentItem[0];\n\t\t\t\t\tthis.instance._mouseCapture(event, true);\n\t\t\t\t\tthis.instance._mouseStart(event, true, true);\n\n\t\t\t\t\t//Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes\n\t\t\t\t\tthis.instance.offset.click.top = inst.offset.click.top;\n\t\t\t\t\tthis.instance.offset.click.left = inst.offset.click.left;\n\t\t\t\t\tthis.instance.offset.parent.left -= inst.offset.parent.left - this.instance.offset.parent.left;\n\t\t\t\t\tthis.instance.offset.parent.top -= inst.offset.parent.top - this.instance.offset.parent.top;\n\n\t\t\t\t\tinst._trigger(\"toSortable\", event);\n\t\t\t\t\tinst.dropped = this.instance.element; //draggable revert needs that\n\t\t\t\t\t//hack so receive/update callbacks work (mostly)\n\t\t\t\t\tinst.currentItem = inst.element;\n\t\t\t\t\tthis.instance.fromOutside = inst;\n\n\t\t\t\t}\n\n\t\t\t\t//Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable\n\t\t\t\tif(this.instance.currentItem) {\n\t\t\t\t\tthis.instance._mouseDrag(event);\n\t\t\t\t}\n\n\t\t\t} else {\n\n\t\t\t\t//If it doesn't intersect with the sortable, and it intersected before,\n\t\t\t\t//we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval\n\t\t\t\tif(this.instance.isOver) {\n\n\t\t\t\t\tthis.instance.isOver = 0;\n\t\t\t\t\tthis.instance.cancelHelperRemoval = true;\n\n\t\t\t\t\t//Prevent reverting on this forced stop\n\t\t\t\t\tthis.instance.options.revert = false;\n\n\t\t\t\t\t// The out event needs to be triggered independently\n\t\t\t\t\tthis.instance._trigger(\"out\", event, this.instance._uiHash(this.instance));\n\n\t\t\t\t\tthis.instance._mouseStop(event, true);\n\t\t\t\t\tthis.instance.options.helper = this.instance.options._helper;\n\n\t\t\t\t\t//Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size\n\t\t\t\t\tthis.instance.currentItem.remove();\n\t\t\t\t\tif(this.instance.placeholder) {\n\t\t\t\t\t\tthis.instance.placeholder.remove();\n\t\t\t\t\t}\n\n\t\t\t\t\tinst._trigger(\"fromSortable\", event);\n\t\t\t\t\tinst.dropped = false; //draggable revert needs that\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t});\n\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"cursor\", {\n\tstart: function() {\n\t\tvar t = $(\"body\"), o = $(this).data(\"ui-draggable\").options;\n\t\tif (t.css(\"cursor\")) {\n\t\t\to._cursor = t.css(\"cursor\");\n\t\t}\n\t\tt.css(\"cursor\", o.cursor);\n\t},\n\tstop: function() {\n\t\tvar o = $(this).data(\"ui-draggable\").options;\n\t\tif (o._cursor) {\n\t\t\t$(\"body\").css(\"cursor\", o._cursor);\n\t\t}\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"opacity\", {\n\tstart: function(event, ui) {\n\t\tvar t = $(ui.helper), o = $(this).data(\"ui-draggable\").options;\n\t\tif(t.css(\"opacity\")) {\n\t\t\to._opacity = t.css(\"opacity\");\n\t\t}\n\t\tt.css(\"opacity\", o.opacity);\n\t},\n\tstop: function(event, ui) {\n\t\tvar o = $(this).data(\"ui-draggable\").options;\n\t\tif(o._opacity) {\n\t\t\t$(ui.helper).css(\"opacity\", o._opacity);\n\t\t}\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"scroll\", {\n\tstart: function() {\n\t\tvar i = $(this).data(\"ui-draggable\");\n\t\tif(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== \"HTML\") {\n\t\t\ti.overflowOffset = i.scrollParent.offset();\n\t\t}\n\t},\n\tdrag: function( event ) {\n\n\t\tvar i = $(this).data(\"ui-draggable\"), o = i.options, scrolled = false;\n\n\t\tif(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== \"HTML\") {\n\n\t\t\tif(!o.axis || o.axis !== \"x\") {\n\t\t\t\tif((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {\n\t\t\t\t\ti.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed;\n\t\t\t\t} else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) {\n\t\t\t\t\ti.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(!o.axis || o.axis !== \"y\") {\n\t\t\t\tif((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {\n\t\t\t\t\ti.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed;\n\t\t\t\t} else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) {\n\t\t\t\t\ti.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed;\n\t\t\t\t}\n\t\t\t}\n\n\t\t} else {\n\n\t\t\tif(!o.axis || o.axis !== \"x\") {\n\t\t\t\tif(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);\n\t\t\t\t} else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(!o.axis || o.axis !== \"y\") {\n\t\t\t\tif(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);\n\t\t\t\t} else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\n\t\tif(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {\n\t\t\t$.ui.ddmanager.prepareOffsets(i, event);\n\t\t}\n\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"snap\", {\n\tstart: function() {\n\n\t\tvar i = $(this).data(\"ui-draggable\"),\n\t\t\to = i.options;\n\n\t\ti.snapElements = [];\n\n\t\t$(o.snap.constructor !== String ? ( o.snap.items || \":data(ui-draggable)\" ) : o.snap).each(function() {\n\t\t\tvar $t = $(this),\n\t\t\t\t$o = $t.offset();\n\t\t\tif(this !== i.element[0]) {\n\t\t\t\ti.snapElements.push({\n\t\t\t\t\titem: this,\n\t\t\t\t\twidth: $t.outerWidth(), height: $t.outerHeight(),\n\t\t\t\t\ttop: $o.top, left: $o.left\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t},\n\tdrag: function(event, ui) {\n\n\t\tvar ts, bs, ls, rs, l, r, t, b, i, first,\n\t\t\tinst = $(this).data(\"ui-draggable\"),\n\t\t\to = inst.options,\n\t\t\td = o.snapTolerance,\n\t\t\tx1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,\n\t\t\ty1 = ui.offset.top, y2 = y1 + inst.helperProportions.height;\n\n\t\tfor (i = inst.snapElements.length - 1; i >= 0; i--){\n\n\t\t\tl = inst.snapElements[i].left;\n\t\t\tr = l + inst.snapElements[i].width;\n\t\t\tt = inst.snapElements[i].top;\n\t\t\tb = t + inst.snapElements[i].height;\n\n\t\t\t//Yes, I know, this is insane ;)\n\t\t\tif(!((l-d < x1 && x1 < r+d && t-d < y1 && y1 < b+d) || (l-d < x1 && x1 < r+d && t-d < y2 && y2 < b+d) || (l-d < x2 && x2 < r+d && t-d < y1 && y1 < b+d) || (l-d < x2 && x2 < r+d && t-d < y2 && y2 < b+d))) {\n\t\t\t\tif(inst.snapElements[i].snapping) {\n\t\t\t\t\t(inst.options.snap.release && inst.options.snap.release.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item })));\n\t\t\t\t}\n\t\t\t\tinst.snapElements[i].snapping = false;\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif(o.snapMode !== \"inner\") {\n\t\t\t\tts = Math.abs(t - y2) <= d;\n\t\t\t\tbs = Math.abs(b - y1) <= d;\n\t\t\t\tls = Math.abs(l - x2) <= d;\n\t\t\t\trs = Math.abs(r - x1) <= d;\n\t\t\t\tif(ts) {\n\t\t\t\t\tui.position.top = inst._convertPositionTo(\"relative\", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top;\n\t\t\t\t}\n\t\t\t\tif(bs) {\n\t\t\t\t\tui.position.top = inst._convertPositionTo(\"relative\", { top: b, left: 0 }).top - inst.margins.top;\n\t\t\t\t}\n\t\t\t\tif(ls) {\n\t\t\t\t\tui.position.left = inst._convertPositionTo(\"relative\", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left;\n\t\t\t\t}\n\t\t\t\tif(rs) {\n\t\t\t\t\tui.position.left = inst._convertPositionTo(\"relative\", { top: 0, left: r }).left - inst.margins.left;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfirst = (ts || bs || ls || rs);\n\n\t\t\tif(o.snapMode !== \"outer\") {\n\t\t\t\tts = Math.abs(t - y1) <= d;\n\t\t\t\tbs = Math.abs(b - y2) <= d;\n\t\t\t\tls = Math.abs(l - x1) <= d;\n\t\t\t\trs = Math.abs(r - x2) <= d;\n\t\t\t\tif(ts) {\n\t\t\t\t\tui.position.top = inst._convertPositionTo(\"relative\", { top: t, left: 0 }).top - inst.margins.top;\n\t\t\t\t}\n\t\t\t\tif(bs) {\n\t\t\t\t\tui.position.top = inst._convertPositionTo(\"relative\", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;\n\t\t\t\t}\n\t\t\t\tif(ls) {\n\t\t\t\t\tui.position.left = inst._convertPositionTo(\"relative\", { top: 0, left: l }).left - inst.margins.left;\n\t\t\t\t}\n\t\t\t\tif(rs) {\n\t\t\t\t\tui.position.left = inst._convertPositionTo(\"relative\", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(!inst.snapElements[i].snapping && (ts || bs || ls || rs || first)) {\n\t\t\t\t(inst.options.snap.snap && inst.options.snap.snap.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item })));\n\t\t\t}\n\t\t\tinst.snapElements[i].snapping = (ts || bs || ls || rs || first);\n\n\t\t}\n\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"stack\", {\n\tstart: function() {\n\t\tvar min,\n\t\t\to = this.data(\"ui-draggable\").options,\n\t\t\tgroup = $.makeArray($(o.stack)).sort(function(a,b) {\n\t\t\t\treturn (parseInt($(a).css(\"zIndex\"),10) || 0) - (parseInt($(b).css(\"zIndex\"),10) || 0);\n\t\t\t});\n\n\t\tif (!group.length) { return; }\n\n\t\tmin = parseInt($(group[0]).css(\"zIndex\"), 10) || 0;\n\t\t$(group).each(function(i) {\n\t\t\t$(this).css(\"zIndex\", min + i);\n\t\t});\n\t\tthis.css(\"zIndex\", (min + group.length));\n\t}\n});\n\n$.ui.plugin.add(\"draggable\", \"zIndex\", {\n\tstart: function(event, ui) {\n\t\tvar t = $(ui.helper), o = $(this).data(\"ui-draggable\").options;\n\t\tif(t.css(\"zIndex\")) {\n\t\t\to._zIndex = t.css(\"zIndex\");\n\t\t}\n\t\tt.css(\"zIndex\", o.zIndex);\n\t},\n\tstop: function(event, ui) {\n\t\tvar o = $(this).data(\"ui-draggable\").options;\n\t\tif(o._zIndex) {\n\t\t\t$(ui.helper).css(\"zIndex\", o._zIndex);\n\t\t}\n\t}\n});\n\n})(jQuery);\n\n(function( $, undefined ) {\n\nfunction isOverAxis( x, reference, size ) {\n\treturn ( x > reference ) && ( x < ( reference + size ) );\n}\n\n$.widget(\"ui.droppable\", {\n\tversion: \"1.10.1\",\n\twidgetEventPrefix: \"drop\",\n\toptions: {\n\t\taccept: \"*\",\n\t\tactiveClass: false,\n\t\taddClasses: true,\n\t\tgreedy: false,\n\t\thoverClass: false,\n\t\tscope: \"default\",\n\t\ttolerance: \"intersect\",\n\n\t\t// callbacks\n\t\tactivate: null,\n\t\tdeactivate: null,\n\t\tdrop: null,\n\t\tout: null,\n\t\tover: null\n\t},\n\t_create: function() {\n\n\t\tvar o = this.options,\n\t\t\taccept = o.accept;\n\n\t\tthis.isover = false;\n\t\tthis.isout = true;\n\n\t\tthis.accept = $.isFunction(accept) ? accept : function(d) {\n\t\t\treturn d.is(accept);\n\t\t};\n\n\t\t//Store the droppable's proportions\n\t\tthis.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight };\n\n\t\t// Add the reference and positions to the manager\n\t\t$.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || [];\n\t\t$.ui.ddmanager.droppables[o.scope].push(this);\n\n\t\t(o.addClasses && this.element.addClass(\"ui-droppable\"));\n\n\t},\n\n\t_destroy: function() {\n\t\tvar i = 0,\n\t\t\tdrop = $.ui.ddmanager.droppables[this.options.scope];\n\n\t\tfor ( ; i < drop.length; i++ ) {\n\t\t\tif ( drop[i] === this ) {\n\t\t\t\tdrop.splice(i, 1);\n\t\t\t}\n\t\t}\n\n\t\tthis.element.removeClass(\"ui-droppable ui-droppable-disabled\");\n\t},\n\n\t_setOption: function(key, value) {\n\n\t\tif(key === \"accept\") {\n\t\t\tthis.accept = $.isFunction(value) ? value : function(d) {\n\t\t\t\treturn d.is(value);\n\t\t\t};\n\t\t}\n\t\t$.Widget.prototype._setOption.apply(this, arguments);\n\t},\n\n\t_activate: function(event) {\n\t\tvar draggable = $.ui.ddmanager.current;\n\t\tif(this.options.activeClass) {\n\t\t\tthis.element.addClass(this.options.activeClass);\n\t\t}\n\t\tif(draggable){\n\t\t\tthis._trigger(\"activate\", event, this.ui(draggable));\n\t\t}\n\t},\n\n\t_deactivate: function(event) {\n\t\tvar draggable = $.ui.ddmanager.current;\n\t\tif(this.options.activeClass) {\n\t\t\tthis.element.removeClass(this.options.activeClass);\n\t\t}\n\t\tif(draggable){\n\t\t\tthis._trigger(\"deactivate\", event, this.ui(draggable));\n\t\t}\n\t},\n\n\t_over: function(event) {\n\n\t\tvar draggable = $.ui.ddmanager.current;\n\n\t\t// Bail if draggable and droppable are same element\n\t\tif (!draggable || (draggable.currentItem || draggable.element)[0] === this.element[0]) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {\n\t\t\tif(this.options.hoverClass) {\n\t\t\t\tthis.element.addClass(this.options.hoverClass);\n\t\t\t}\n\t\t\tthis._trigger(\"over\", event, this.ui(draggable));\n\t\t}\n\n\t},\n\n\t_out: function(event) {\n\n\t\tvar draggable = $.ui.ddmanager.current;\n\n\t\t// Bail if draggable and droppable are same element\n\t\tif (!draggable || (draggable.currentItem || draggable.element)[0] === this.element[0]) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {\n\t\t\tif(this.options.hoverClass) {\n\t\t\t\tthis.element.removeClass(this.options.hoverClass);\n\t\t\t}\n\t\t\tthis._trigger(\"out\", event, this.ui(draggable));\n\t\t}\n\n\t},\n\n\t_drop: function(event,custom) {\n\n\t\tvar draggable = custom || $.ui.ddmanager.current,\n\t\t\tchildrenIntersection = false;\n\n\t\t// Bail if draggable and droppable are same element\n\t\tif (!draggable || (draggable.currentItem || draggable.element)[0] === this.element[0]) {\n\t\t\treturn false;\n\t\t}\n\n\t\tthis.element.find(\":data(ui-droppable)\").not(\".ui-draggable-dragging\").each(function() {\n\t\t\tvar inst = $.data(this, \"ui-droppable\");\n\t\t\tif(\n\t\t\t\tinst.options.greedy &&\n\t\t\t\t!inst.options.disabled &&\n\t\t\t\tinst.options.scope === draggable.options.scope &&\n\t\t\t\tinst.accept.call(inst.element[0], (draggable.currentItem || draggable.element)) &&\n\t\t\t\t$.ui.intersect(draggable, $.extend(inst, { offset: inst.element.offset() }), inst.options.tolerance)\n\t\t\t) { childrenIntersection = true; return false; }\n\t\t});\n\t\tif(childrenIntersection) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif(this.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {\n\t\t\tif(this.options.activeClass) {\n\t\t\t\tthis.element.removeClass(this.options.activeClass);\n\t\t\t}\n\t\t\tif(this.options.hoverClass) {\n\t\t\t\tthis.element.removeClass(this.options.hoverClass);\n\t\t\t}\n\t\t\tthis._trigger(\"drop\", event, this.ui(draggable));\n\t\t\treturn this.element;\n\t\t}\n\n\t\treturn false;\n\n\t},\n\n\tui: function(c) {\n\t\treturn {\n\t\t\tdraggable: (c.currentItem || c.element),\n\t\t\thelper: c.helper,\n\t\t\tposition: c.position,\n\t\t\toffset: c.positionAbs\n\t\t};\n\t}\n\n});\n\n$.ui.intersect = function(draggable, droppable, toleranceMode) {\n\n\tif (!droppable.offset) {\n\t\treturn false;\n\t}\n\n\tvar draggableLeft, draggableTop,\n\t\tx1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width,\n\t\ty1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height,\n\t\tl = droppable.offset.left, r = l + droppable.proportions.width,\n\t\tt = droppable.offset.top, b = t + droppable.proportions.height;\n\n\tswitch (toleranceMode) {\n\t\tcase \"fit\":\n\t\t\treturn (l <= x1 && x2 <= r && t <= y1 && y2 <= b);\n\t\tcase \"intersect\":\n\t\t\treturn (l < x1 + (draggable.helperProportions.width / 2) && // Right Half\n\t\t\t\tx2 - (draggable.helperProportions.width / 2) < r && // Left Half\n\t\t\t\tt < y1 + (draggable.helperProportions.height / 2) && // Bottom Half\n\t\t\t\ty2 - (draggable.helperProportions.height / 2) < b ); // Top Half\n\t\tcase \"pointer\":\n\t\t\tdraggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left);\n\t\t\tdraggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top);\n\t\t\treturn isOverAxis( draggableTop, t, droppable.proportions.height ) && isOverAxis( draggableLeft, l, droppable.proportions.width );\n\t\tcase \"touch\":\n\t\t\treturn (\n\t\t\t\t(y1 >= t && y1 <= b) ||\t// Top edge touching\n\t\t\t\t(y2 >= t && y2 <= b) ||\t// Bottom edge touching\n\t\t\t\t(y1 < t && y2 > b)\t\t// Surrounded vertically\n\t\t\t) && (\n\t\t\t\t(x1 >= l && x1 <= r) ||\t// Left edge touching\n\t\t\t\t(x2 >= l && x2 <= r) ||\t// Right edge touching\n\t\t\t\t(x1 < l && x2 > r)\t\t// Surrounded horizontally\n\t\t\t);\n\t\tdefault:\n\t\t\treturn false;\n\t\t}\n\n};\n\n/*\n\tThis manager tracks offsets of draggables and droppables\n*/\n$.ui.ddmanager = {\n\tcurrent: null,\n\tdroppables: { \"default\": [] },\n\tprepareOffsets: function(t, event) {\n\n\t\tvar i, j,\n\t\t\tm = $.ui.ddmanager.droppables[t.options.scope] || [],\n\t\t\ttype = event ? event.type : null, // workaround for #2317\n\t\t\tlist = (t.currentItem || t.element).find(\":data(ui-droppable)\").addBack();\n\n\t\tdroppablesLoop: for (i = 0; i < m.length; i++) {\n\n\t\t\t//No disabled and non-accepted\n\t\t\tif(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Filter out elements in the current dragged item\n\t\t\tfor (j=0; j < list.length; j++) {\n\t\t\t\tif(list[j] === m[i].element[0]) {\n\t\t\t\t\tm[i].proportions.height = 0;\n\t\t\t\t\tcontinue droppablesLoop;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tm[i].visible = m[i].element.css(\"display\") !== \"none\";\n\t\t\tif(!m[i].visible) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t//Activate the droppable if used directly from draggables\n\t\t\tif(type === \"mousedown\") {\n\t\t\t\tm[i]._activate.call(m[i], event);\n\t\t\t}\n\n\t\t\tm[i].offset = m[i].element.offset();\n\t\t\tm[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight };\n\n\t\t}\n\n\t},\n\tdrop: function(draggable, event) {\n\n\t\tvar dropped = false;\n\t\t$.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {\n\n\t\t\tif(!this.options) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (!this.options.disabled && this.visible && $.ui.intersect(draggable, this, this.options.tolerance)) {\n\t\t\t\tdropped = this._drop.call(this, event) || dropped;\n\t\t\t}\n\n\t\t\tif (!this.options.disabled && this.visible && this.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {\n\t\t\t\tthis.isout = true;\n\t\t\t\tthis.isover = false;\n\t\t\t\tthis._deactivate.call(this, event);\n\t\t\t}\n\n\t\t});\n\t\treturn dropped;\n\n\t},\n\tdragStart: function( draggable, event ) {\n\t\t//Listen for scrolling so that if the dragging causes scrolling the position of the droppables can be recalculated (see #5003)\n\t\tdraggable.element.parentsUntil( \"body\" ).bind( \"scroll.droppable\", function() {\n\t\t\tif( !draggable.options.refreshPositions ) {\n\t\t\t\t$.ui.ddmanager.prepareOffsets( draggable, event );\n\t\t\t}\n\t\t});\n\t},\n\tdrag: function(draggable, event) {\n\n\t\t//If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.\n\t\tif(draggable.options.refreshPositions) {\n\t\t\t$.ui.ddmanager.prepareOffsets(draggable, event);\n\t\t}\n\n\t\t//Run through all droppables and check their positions based on specific tolerance options\n\t\t$.each($.ui.ddmanager.droppables[draggable.options.scope] || [], function() {\n\n\t\t\tif(this.options.disabled || this.greedyChild || !this.visible) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvar parentInstance, scope, parent,\n\t\t\t\tintersects = $.ui.intersect(draggable, this, this.options.tolerance),\n\t\t\t\tc = !intersects && this.isover ? \"isout\" : (intersects && !this.isover ? \"isover\" : null);\n\t\t\tif(!c) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (this.options.greedy) {\n\t\t\t\t// find droppable parents with same scope\n\t\t\t\tscope = this.options.scope;\n\t\t\t\tparent = this.element.parents(\":data(ui-droppable)\").filter(function () {\n\t\t\t\t\treturn $.data(this, \"ui-droppable\").options.scope === scope;\n\t\t\t\t});\n\n\t\t\t\tif (parent.length) {\n\t\t\t\t\tparentInstance = $.data(parent[0], \"ui-droppable\");\n\t\t\t\t\tparentInstance.greedyChild = (c === \"isover\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// we just moved into a greedy child\n\t\t\tif (parentInstance && c === \"isover\") {\n\t\t\t\tparentInstance.isover = false;\n\t\t\t\tparentInstance.isout = true;\n\t\t\t\tparentInstance._out.call(parentInstance, event);\n\t\t\t}\n\n\t\t\tthis[c] = true;\n\t\t\tthis[c === \"isout\" ? \"isover\" : \"isout\"] = false;\n\t\t\tthis[c === \"isover\" ? \"_over\" : \"_out\"].call(this, event);\n\n\t\t\t// we just moved out of a greedy child\n\t\t\tif (parentInstance && c === \"isout\") {\n\t\t\t\tparentInstance.isout = false;\n\t\t\t\tparentInstance.isover = true;\n\t\t\t\tparentInstance._over.call(parentInstance, event);\n\t\t\t}\n\t\t});\n\n\t},\n\tdragStop: function( draggable, event ) {\n\t\tdraggable.element.parentsUntil( \"body\" ).unbind( \"scroll.droppable\" );\n\t\t//Call prepareOffsets one final time since IE does not fire return scroll events when overflow was caused by drag (see #5003)\n\t\tif( !draggable.options.refreshPositions ) {\n\t\t\t$.ui.ddmanager.prepareOffsets( draggable, event );\n\t\t}\n\t}\n};\n\n})(jQuery);\n\n(function( $, undefined ) {\n\nfunction num(v) {\n\treturn parseInt(v, 10) || 0;\n}\n\nfunction isNumber(value) {\n\treturn !isNaN(parseInt(value, 10));\n}\n\n$.widget(\"ui.resizable\", $.ui.mouse, {\n\tversion: \"1.10.1\",\n\twidgetEventPrefix: \"resize\",\n\toptions: {\n\t\talsoResize: false,\n\t\tanimate: false,\n\t\tanimateDuration: \"slow\",\n\t\tanimateEasing: \"swing\",\n\t\taspectRatio: false,\n\t\tautoHide: false,\n\t\tcontainment: false,\n\t\tghost: false,\n\t\tgrid: false,\n\t\thandles: \"e,s,se\",\n\t\thelper: false,\n\t\tmaxHeight: null,\n\t\tmaxWidth: null,\n\t\tminHeight: 10,\n\t\tminWidth: 10,\n\t\t// See #7960\n\t\tzIndex: 90,\n\n\t\t// callbacks\n\t\tresize: null,\n\t\tstart: null,\n\t\tstop: null\n\t},\n\t_create: function() {\n\n\t\tvar n, i, handle, axis, hname,\n\t\t\tthat = this,\n\t\t\to = this.options;\n\t\tthis.element.addClass(\"ui-resizable\");\n\n\t\t$.extend(this, {\n\t\t\t_aspectRatio: !!(o.aspectRatio),\n\t\t\taspectRatio: o.aspectRatio,\n\t\t\toriginalElement: this.element,\n\t\t\t_proportionallyResizeElements: [],\n\t\t\t_helper: o.helper || o.ghost || o.animate ? o.helper || \"ui-resizable-helper\" : null\n\t\t});\n\n\t\t//Wrap the element if it cannot hold child nodes\n\t\tif(this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i)) {\n\n\t\t\t//Create a wrapper element and set the wrapper to the new current internal element\n\t\t\tthis.element.wrap(\n\t\t\t\t$(\"
        \").css({\n\t\t\t\t\tposition: this.element.css(\"position\"),\n\t\t\t\t\twidth: this.element.outerWidth(),\n\t\t\t\t\theight: this.element.outerHeight(),\n\t\t\t\t\ttop: this.element.css(\"top\"),\n\t\t\t\t\tleft: this.element.css(\"left\")\n\t\t\t\t})\n\t\t\t);\n\n\t\t\t//Overwrite the original this.element\n\t\t\tthis.element = this.element.parent().data(\n\t\t\t\t\"ui-resizable\", this.element.data(\"ui-resizable\")\n\t\t\t);\n\n\t\t\tthis.elementIsWrapper = true;\n\n\t\t\t//Move margins to the wrapper\n\t\t\tthis.element.css({ marginLeft: this.originalElement.css(\"marginLeft\"), marginTop: this.originalElement.css(\"marginTop\"), marginRight: this.originalElement.css(\"marginRight\"), marginBottom: this.originalElement.css(\"marginBottom\") });\n\t\t\tthis.originalElement.css({ marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0});\n\n\t\t\t//Prevent Safari textarea resize\n\t\t\tthis.originalResizeStyle = this.originalElement.css(\"resize\");\n\t\t\tthis.originalElement.css(\"resize\", \"none\");\n\n\t\t\t//Push the actual element to our proportionallyResize internal array\n\t\t\tthis._proportionallyResizeElements.push(this.originalElement.css({ position: \"static\", zoom: 1, display: \"block\" }));\n\n\t\t\t// avoid IE jump (hard set the margin)\n\t\t\tthis.originalElement.css({ margin: this.originalElement.css(\"margin\") });\n\n\t\t\t// fix handlers offset\n\t\t\tthis._proportionallyResize();\n\n\t\t}\n\n\t\tthis.handles = o.handles || (!$(\".ui-resizable-handle\", this.element).length ? \"e,s,se\" : { n: \".ui-resizable-n\", e: \".ui-resizable-e\", s: \".ui-resizable-s\", w: \".ui-resizable-w\", se: \".ui-resizable-se\", sw: \".ui-resizable-sw\", ne: \".ui-resizable-ne\", nw: \".ui-resizable-nw\" });\n\t\tif(this.handles.constructor === String) {\n\n\t\t\tif ( this.handles === \"all\") {\n\t\t\t\tthis.handles = \"n,e,s,w,se,sw,ne,nw\";\n\t\t\t}\n\n\t\t\tn = this.handles.split(\",\");\n\t\t\tthis.handles = {};\n\n\t\t\tfor(i = 0; i < n.length; i++) {\n\n\t\t\t\thandle = $.trim(n[i]);\n\t\t\t\thname = \"ui-resizable-\"+handle;\n\t\t\t\taxis = $(\"
        \");\n\n\t\t\t\t// Apply zIndex to all handles - see #7960\n\t\t\t\taxis.css({ zIndex: o.zIndex });\n\n\t\t\t\t//TODO : What's going on here?\n\t\t\t\tif (\"se\" === handle) {\n\t\t\t\t\taxis.addClass(\"ui-icon ui-icon-gripsmall-diagonal-se\");\n\t\t\t\t}\n\n\t\t\t\t//Insert into internal handles object and append to element\n\t\t\t\tthis.handles[handle] = \".ui-resizable-\"+handle;\n\t\t\t\tthis.element.append(axis);\n\t\t\t}\n\n\t\t}\n\n\t\tthis._renderAxis = function(target) {\n\n\t\t\tvar i, axis, padPos, padWrapper;\n\n\t\t\ttarget = target || this.element;\n\n\t\t\tfor(i in this.handles) {\n\n\t\t\t\tif(this.handles[i].constructor === String) {\n\t\t\t\t\tthis.handles[i] = $(this.handles[i], this.element).show();\n\t\t\t\t}\n\n\t\t\t\t//Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)\n\t\t\t\tif (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) {\n\n\t\t\t\t\taxis = $(this.handles[i], this.element);\n\n\t\t\t\t\t//Checking the correct pad and border\n\t\t\t\t\tpadWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() : axis.outerWidth();\n\n\t\t\t\t\t//The padding type i have to apply...\n\t\t\t\t\tpadPos = [ \"padding\",\n\t\t\t\t\t\t/ne|nw|n/.test(i) ? \"Top\" :\n\t\t\t\t\t\t/se|sw|s/.test(i) ? \"Bottom\" :\n\t\t\t\t\t\t/^e$/.test(i) ? \"Right\" : \"Left\" ].join(\"\");\n\n\t\t\t\t\ttarget.css(padPos, padWrapper);\n\n\t\t\t\t\tthis._proportionallyResize();\n\n\t\t\t\t}\n\n\t\t\t\t//TODO: What's that good for? There's not anything to be executed left\n\t\t\t\tif(!$(this.handles[i]).length) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\t//TODO: make renderAxis a prototype function\n\t\tthis._renderAxis(this.element);\n\n\t\tthis._handles = $(\".ui-resizable-handle\", this.element)\n\t\t\t.disableSelection();\n\n\t\t//Matching axis name\n\t\tthis._handles.mouseover(function() {\n\t\t\tif (!that.resizing) {\n\t\t\t\tif (this.className) {\n\t\t\t\t\taxis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i);\n\t\t\t\t}\n\t\t\t\t//Axis, default = se\n\t\t\t\tthat.axis = axis && axis[1] ? axis[1] : \"se\";\n\t\t\t}\n\t\t});\n\n\t\t//If we want to auto hide the elements\n\t\tif (o.autoHide) {\n\t\t\tthis._handles.hide();\n\t\t\t$(this.element)\n\t\t\t\t.addClass(\"ui-resizable-autohide\")\n\t\t\t\t.mouseenter(function() {\n\t\t\t\t\tif (o.disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\t$(this).removeClass(\"ui-resizable-autohide\");\n\t\t\t\t\tthat._handles.show();\n\t\t\t\t})\n\t\t\t\t.mouseleave(function(){\n\t\t\t\t\tif (o.disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (!that.resizing) {\n\t\t\t\t\t\t$(this).addClass(\"ui-resizable-autohide\");\n\t\t\t\t\t\tthat._handles.hide();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t}\n\n\t\t//Initialize the mouse interaction\n\t\tthis._mouseInit();\n\n\t},\n\n\t_destroy: function() {\n\n\t\tthis._mouseDestroy();\n\n\t\tvar wrapper,\n\t\t\t_destroy = function(exp) {\n\t\t\t\t$(exp).removeClass(\"ui-resizable ui-resizable-disabled ui-resizable-resizing\")\n\t\t\t\t\t.removeData(\"resizable\").removeData(\"ui-resizable\").unbind(\".resizable\").find(\".ui-resizable-handle\").remove();\n\t\t\t};\n\n\t\t//TODO: Unwrap at same DOM position\n\t\tif (this.elementIsWrapper) {\n\t\t\t_destroy(this.element);\n\t\t\twrapper = this.element;\n\t\t\tthis.originalElement.css({\n\t\t\t\tposition: wrapper.css(\"position\"),\n\t\t\t\twidth: wrapper.outerWidth(),\n\t\t\t\theight: wrapper.outerHeight(),\n\t\t\t\ttop: wrapper.css(\"top\"),\n\t\t\t\tleft: wrapper.css(\"left\")\n\t\t\t}).insertAfter( wrapper );\n\t\t\twrapper.remove();\n\t\t}\n\n\t\tthis.originalElement.css(\"resize\", this.originalResizeStyle);\n\t\t_destroy(this.originalElement);\n\n\t\treturn this;\n\t},\n\n\t_mouseCapture: function(event) {\n\t\tvar i, handle,\n\t\t\tcapture = false;\n\n\t\tfor (i in this.handles) {\n\t\t\thandle = $(this.handles[i])[0];\n\t\t\tif (handle === event.target || $.contains(handle, event.target)) {\n\t\t\t\tcapture = true;\n\t\t\t}\n\t\t}\n\n\t\treturn !this.options.disabled && capture;\n\t},\n\n\t_mouseStart: function(event) {\n\n\t\tvar curleft, curtop, cursor,\n\t\t\to = this.options,\n\t\t\tiniPos = this.element.position(),\n\t\t\tel = this.element;\n\n\t\tthis.resizing = true;\n\n\t\t// bugfix for http://dev.jquery.com/ticket/1749\n\t\tif ( (/absolute/).test( el.css(\"position\") ) ) {\n\t\t\tel.css({ position: \"absolute\", top: el.css(\"top\"), left: el.css(\"left\") });\n\t\t} else if (el.is(\".ui-draggable\")) {\n\t\t\tel.css({ position: \"absolute\", top: iniPos.top, left: iniPos.left });\n\t\t}\n\n\t\tthis._renderProxy();\n\n\t\tcurleft = num(this.helper.css(\"left\"));\n\t\tcurtop = num(this.helper.css(\"top\"));\n\n\t\tif (o.containment) {\n\t\t\tcurleft += $(o.containment).scrollLeft() || 0;\n\t\t\tcurtop += $(o.containment).scrollTop() || 0;\n\t\t}\n\n\t\t//Store needed variables\n\t\tthis.offset = this.helper.offset();\n\t\tthis.position = { left: curleft, top: curtop };\n\t\tthis.size = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };\n\t\tthis.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.width(), height: el.height() };\n\t\tthis.originalPosition = { left: curleft, top: curtop };\n\t\tthis.sizeDiff = { width: el.outerWidth() - el.width(), height: el.outerHeight() - el.height() };\n\t\tthis.originalMousePosition = { left: event.pageX, top: event.pageY };\n\n\t\t//Aspect Ratio\n\t\tthis.aspectRatio = (typeof o.aspectRatio === \"number\") ? o.aspectRatio : ((this.originalSize.width / this.originalSize.height) || 1);\n\n\t\tcursor = $(\".ui-resizable-\" + this.axis).css(\"cursor\");\n\t\t$(\"body\").css(\"cursor\", cursor === \"auto\" ? this.axis + \"-resize\" : cursor);\n\n\t\tel.addClass(\"ui-resizable-resizing\");\n\t\tthis._propagate(\"start\", event);\n\t\treturn true;\n\t},\n\n\t_mouseDrag: function(event) {\n\n\t\t//Increase performance, avoid regex\n\t\tvar data,\n\t\t\tel = this.helper, props = {},\n\t\t\tsmp = this.originalMousePosition,\n\t\t\ta = this.axis,\n\t\t\tprevTop = this.position.top,\n\t\t\tprevLeft = this.position.left,\n\t\t\tprevWidth = this.size.width,\n\t\t\tprevHeight = this.size.height,\n\t\t\tdx = (event.pageX-smp.left)||0,\n\t\t\tdy = (event.pageY-smp.top)||0,\n\t\t\ttrigger = this._change[a];\n\n\t\tif (!trigger) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Calculate the attrs that will be change\n\t\tdata = trigger.apply(this, [event, dx, dy]);\n\n\t\t// Put this in the mouseDrag handler since the user can start pressing shift while resizing\n\t\tthis._updateVirtualBoundaries(event.shiftKey);\n\t\tif (this._aspectRatio || event.shiftKey) {\n\t\t\tdata = this._updateRatio(data, event);\n\t\t}\n\n\t\tdata = this._respectSize(data, event);\n\n\t\tthis._updateCache(data);\n\n\t\t// plugins callbacks need to be called first\n\t\tthis._propagate(\"resize\", event);\n\n\t\tif (this.position.top !== prevTop) {\n\t\t\tprops.top = this.position.top + \"px\";\n\t\t}\n\t\tif (this.position.left !== prevLeft) {\n\t\t\tprops.left = this.position.left + \"px\";\n\t\t}\n\t\tif (this.size.width !== prevWidth) {\n\t\t\tprops.width = this.size.width + \"px\";\n\t\t}\n\t\tif (this.size.height !== prevHeight) {\n\t\t\tprops.height = this.size.height + \"px\";\n\t\t}\n\t\tel.css(props);\n\n\t\tif (!this._helper && this._proportionallyResizeElements.length) {\n\t\t\tthis._proportionallyResize();\n\t\t}\n\n\t\t// Call the user callback if the element was resized\n\t\tif ( ! $.isEmptyObject(props) ) {\n\t\t\tthis._trigger(\"resize\", event, this.ui());\n\t\t}\n\n\t\treturn false;\n\t},\n\n\t_mouseStop: function(event) {\n\n\t\tthis.resizing = false;\n\t\tvar pr, ista, soffseth, soffsetw, s, left, top,\n\t\t\to = this.options, that = this;\n\n\t\tif(this._helper) {\n\n\t\t\tpr = this._proportionallyResizeElements;\n\t\t\tista = pr.length && (/textarea/i).test(pr[0].nodeName);\n\t\t\tsoffseth = ista && $.ui.hasScroll(pr[0], \"left\") /* TODO - jump height */ ? 0 : that.sizeDiff.height;\n\t\t\tsoffsetw = ista ? 0 : that.sizeDiff.width;\n\n\t\t\ts = { width: (that.helper.width() - soffsetw), height: (that.helper.height() - soffseth) };\n\t\t\tleft = (parseInt(that.element.css(\"left\"), 10) + (that.position.left - that.originalPosition.left)) || null;\n\t\t\ttop = (parseInt(that.element.css(\"top\"), 10) + (that.position.top - that.originalPosition.top)) || null;\n\n\t\t\tif (!o.animate) {\n\t\t\t\tthis.element.css($.extend(s, { top: top, left: left }));\n\t\t\t}\n\n\t\t\tthat.helper.height(that.size.height);\n\t\t\tthat.helper.width(that.size.width);\n\n\t\t\tif (this._helper && !o.animate) {\n\t\t\t\tthis._proportionallyResize();\n\t\t\t}\n\t\t}\n\n\t\t$(\"body\").css(\"cursor\", \"auto\");\n\n\t\tthis.element.removeClass(\"ui-resizable-resizing\");\n\n\t\tthis._propagate(\"stop\", event);\n\n\t\tif (this._helper) {\n\t\t\tthis.helper.remove();\n\t\t}\n\n\t\treturn false;\n\n\t},\n\n\t_updateVirtualBoundaries: function(forceAspectRatio) {\n\t\tvar pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b,\n\t\t\to = this.options;\n\n\t\tb = {\n\t\t\tminWidth: isNumber(o.minWidth) ? o.minWidth : 0,\n\t\t\tmaxWidth: isNumber(o.maxWidth) ? o.maxWidth : Infinity,\n\t\t\tminHeight: isNumber(o.minHeight) ? o.minHeight : 0,\n\t\t\tmaxHeight: isNumber(o.maxHeight) ? o.maxHeight : Infinity\n\t\t};\n\n\t\tif(this._aspectRatio || forceAspectRatio) {\n\t\t\t// We want to create an enclosing box whose aspect ration is the requested one\n\t\t\t// First, compute the \"projected\" size for each dimension based on the aspect ratio and other dimension\n\t\t\tpMinWidth = b.minHeight * this.aspectRatio;\n\t\t\tpMinHeight = b.minWidth / this.aspectRatio;\n\t\t\tpMaxWidth = b.maxHeight * this.aspectRatio;\n\t\t\tpMaxHeight = b.maxWidth / this.aspectRatio;\n\n\t\t\tif(pMinWidth > b.minWidth) {\n\t\t\t\tb.minWidth = pMinWidth;\n\t\t\t}\n\t\t\tif(pMinHeight > b.minHeight) {\n\t\t\t\tb.minHeight = pMinHeight;\n\t\t\t}\n\t\t\tif(pMaxWidth < b.maxWidth) {\n\t\t\t\tb.maxWidth = pMaxWidth;\n\t\t\t}\n\t\t\tif(pMaxHeight < b.maxHeight) {\n\t\t\t\tb.maxHeight = pMaxHeight;\n\t\t\t}\n\t\t}\n\t\tthis._vBoundaries = b;\n\t},\n\n\t_updateCache: function(data) {\n\t\tthis.offset = this.helper.offset();\n\t\tif (isNumber(data.left)) {\n\t\t\tthis.position.left = data.left;\n\t\t}\n\t\tif (isNumber(data.top)) {\n\t\t\tthis.position.top = data.top;\n\t\t}\n\t\tif (isNumber(data.height)) {\n\t\t\tthis.size.height = data.height;\n\t\t}\n\t\tif (isNumber(data.width)) {\n\t\t\tthis.size.width = data.width;\n\t\t}\n\t},\n\n\t_updateRatio: function( data ) {\n\n\t\tvar cpos = this.position,\n\t\t\tcsize = this.size,\n\t\t\ta = this.axis;\n\n\t\tif (isNumber(data.height)) {\n\t\t\tdata.width = (data.height * this.aspectRatio);\n\t\t} else if (isNumber(data.width)) {\n\t\t\tdata.height = (data.width / this.aspectRatio);\n\t\t}\n\n\t\tif (a === \"sw\") {\n\t\t\tdata.left = cpos.left + (csize.width - data.width);\n\t\t\tdata.top = null;\n\t\t}\n\t\tif (a === \"nw\") {\n\t\t\tdata.top = cpos.top + (csize.height - data.height);\n\t\t\tdata.left = cpos.left + (csize.width - data.width);\n\t\t}\n\n\t\treturn data;\n\t},\n\n\t_respectSize: function( data ) {\n\n\t\tvar o = this._vBoundaries,\n\t\t\ta = this.axis,\n\t\t\tismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height),\n\t\t\tisminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height),\n\t\t\tdw = this.originalPosition.left + this.originalSize.width,\n\t\t\tdh = this.position.top + this.size.height,\n\t\t\tcw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a);\n\t\tif (isminw) {\n\t\t\tdata.width = o.minWidth;\n\t\t}\n\t\tif (isminh) {\n\t\t\tdata.height = o.minHeight;\n\t\t}\n\t\tif (ismaxw) {\n\t\t\tdata.width = o.maxWidth;\n\t\t}\n\t\tif (ismaxh) {\n\t\t\tdata.height = o.maxHeight;\n\t\t}\n\n\t\tif (isminw && cw) {\n\t\t\tdata.left = dw - o.minWidth;\n\t\t}\n\t\tif (ismaxw && cw) {\n\t\t\tdata.left = dw - o.maxWidth;\n\t\t}\n\t\tif (isminh && ch) {\n\t\t\tdata.top = dh - o.minHeight;\n\t\t}\n\t\tif (ismaxh && ch) {\n\t\t\tdata.top = dh - o.maxHeight;\n\t\t}\n\n\t\t// fixing jump error on top/left - bug #2330\n\t\tif (!data.width && !data.height && !data.left && data.top) {\n\t\t\tdata.top = null;\n\t\t} else if (!data.width && !data.height && !data.top && data.left) {\n\t\t\tdata.left = null;\n\t\t}\n\n\t\treturn data;\n\t},\n\n\t_proportionallyResize: function() {\n\n\t\tif (!this._proportionallyResizeElements.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar i, j, borders, paddings, prel,\n\t\t\telement = this.helper || this.element;\n\n\t\tfor ( i=0; i < this._proportionallyResizeElements.length; i++) {\n\n\t\t\tprel = this._proportionallyResizeElements[i];\n\n\t\t\tif (!this.borderDif) {\n\t\t\t\tthis.borderDif = [];\n\t\t\t\tborders = [prel.css(\"borderTopWidth\"), prel.css(\"borderRightWidth\"), prel.css(\"borderBottomWidth\"), prel.css(\"borderLeftWidth\")];\n\t\t\t\tpaddings = [prel.css(\"paddingTop\"), prel.css(\"paddingRight\"), prel.css(\"paddingBottom\"), prel.css(\"paddingLeft\")];\n\n\t\t\t\tfor ( j = 0; j < borders.length; j++ ) {\n\t\t\t\t\tthis.borderDif[ j ] = ( parseInt( borders[ j ], 10 ) || 0 ) + ( parseInt( paddings[ j ], 10 ) || 0 );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tprel.css({\n\t\t\t\theight: (element.height() - this.borderDif[0] - this.borderDif[2]) || 0,\n\t\t\t\twidth: (element.width() - this.borderDif[1] - this.borderDif[3]) || 0\n\t\t\t});\n\n\t\t}\n\n\t},\n\n\t_renderProxy: function() {\n\n\t\tvar el = this.element, o = this.options;\n\t\tthis.elementOffset = el.offset();\n\n\t\tif(this._helper) {\n\n\t\t\tthis.helper = this.helper || $(\"
        \");\n\n\t\t\tthis.helper.addClass(this._helper).css({\n\t\t\t\twidth: this.element.outerWidth() - 1,\n\t\t\t\theight: this.element.outerHeight() - 1,\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tleft: this.elementOffset.left +\"px\",\n\t\t\t\ttop: this.elementOffset.top +\"px\",\n\t\t\t\tzIndex: ++o.zIndex //TODO: Don't modify option\n\t\t\t});\n\n\t\t\tthis.helper\n\t\t\t\t.appendTo(\"body\")\n\t\t\t\t.disableSelection();\n\n\t\t} else {\n\t\t\tthis.helper = this.element;\n\t\t}\n\n\t},\n\n\t_change: {\n\t\te: function(event, dx) {\n\t\t\treturn { width: this.originalSize.width + dx };\n\t\t},\n\t\tw: function(event, dx) {\n\t\t\tvar cs = this.originalSize, sp = this.originalPosition;\n\t\t\treturn { left: sp.left + dx, width: cs.width - dx };\n\t\t},\n\t\tn: function(event, dx, dy) {\n\t\t\tvar cs = this.originalSize, sp = this.originalPosition;\n\t\t\treturn { top: sp.top + dy, height: cs.height - dy };\n\t\t},\n\t\ts: function(event, dx, dy) {\n\t\t\treturn { height: this.originalSize.height + dy };\n\t\t},\n\t\tse: function(event, dx, dy) {\n\t\t\treturn $.extend(this._change.s.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));\n\t\t},\n\t\tsw: function(event, dx, dy) {\n\t\t\treturn $.extend(this._change.s.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));\n\t\t},\n\t\tne: function(event, dx, dy) {\n\t\t\treturn $.extend(this._change.n.apply(this, arguments), this._change.e.apply(this, [event, dx, dy]));\n\t\t},\n\t\tnw: function(event, dx, dy) {\n\t\t\treturn $.extend(this._change.n.apply(this, arguments), this._change.w.apply(this, [event, dx, dy]));\n\t\t}\n\t},\n\n\t_propagate: function(n, event) {\n\t\t$.ui.plugin.call(this, n, [event, this.ui()]);\n\t\t(n !== \"resize\" && this._trigger(n, event, this.ui()));\n\t},\n\n\tplugins: {},\n\n\tui: function() {\n\t\treturn {\n\t\t\toriginalElement: this.originalElement,\n\t\t\telement: this.element,\n\t\t\thelper: this.helper,\n\t\t\tposition: this.position,\n\t\t\tsize: this.size,\n\t\t\toriginalSize: this.originalSize,\n\t\t\toriginalPosition: this.originalPosition\n\t\t};\n\t}\n\n});\n\n/*\n * Resizable Extensions\n */\n\n$.ui.plugin.add(\"resizable\", \"animate\", {\n\n\tstop: function( event ) {\n\t\tvar that = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tpr = that._proportionallyResizeElements,\n\t\t\tista = pr.length && (/textarea/i).test(pr[0].nodeName),\n\t\t\tsoffseth = ista && $.ui.hasScroll(pr[0], \"left\") /* TODO - jump height */ ? 0 : that.sizeDiff.height,\n\t\t\tsoffsetw = ista ? 0 : that.sizeDiff.width,\n\t\t\tstyle = { width: (that.size.width - soffsetw), height: (that.size.height - soffseth) },\n\t\t\tleft = (parseInt(that.element.css(\"left\"), 10) + (that.position.left - that.originalPosition.left)) || null,\n\t\t\ttop = (parseInt(that.element.css(\"top\"), 10) + (that.position.top - that.originalPosition.top)) || null;\n\n\t\tthat.element.animate(\n\t\t\t$.extend(style, top && left ? { top: top, left: left } : {}), {\n\t\t\t\tduration: o.animateDuration,\n\t\t\t\teasing: o.animateEasing,\n\t\t\t\tstep: function() {\n\n\t\t\t\t\tvar data = {\n\t\t\t\t\t\twidth: parseInt(that.element.css(\"width\"), 10),\n\t\t\t\t\t\theight: parseInt(that.element.css(\"height\"), 10),\n\t\t\t\t\t\ttop: parseInt(that.element.css(\"top\"), 10),\n\t\t\t\t\t\tleft: parseInt(that.element.css(\"left\"), 10)\n\t\t\t\t\t};\n\n\t\t\t\t\tif (pr && pr.length) {\n\t\t\t\t\t\t$(pr[0]).css({ width: data.width, height: data.height });\n\t\t\t\t\t}\n\n\t\t\t\t\t// propagating resize, and updating values for each animation step\n\t\t\t\t\tthat._updateCache(data);\n\t\t\t\t\tthat._propagate(\"resize\", event);\n\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n});\n\n$.ui.plugin.add(\"resizable\", \"containment\", {\n\n\tstart: function() {\n\t\tvar element, p, co, ch, cw, width, height,\n\t\t\tthat = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tel = that.element,\n\t\t\toc = o.containment,\n\t\t\tce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;\n\n\t\tif (!ce) {\n\t\t\treturn;\n\t\t}\n\n\t\tthat.containerElement = $(ce);\n\n\t\tif (/document/.test(oc) || oc === document) {\n\t\t\tthat.containerOffset = { left: 0, top: 0 };\n\t\t\tthat.containerPosition = { left: 0, top: 0 };\n\n\t\t\tthat.parentData = {\n\t\t\t\telement: $(document), left: 0, top: 0,\n\t\t\t\twidth: $(document).width(), height: $(document).height() || document.body.parentNode.scrollHeight\n\t\t\t};\n\t\t}\n\n\t\t// i'm a node, so compute top, left, right, bottom\n\t\telse {\n\t\t\telement = $(ce);\n\t\t\tp = [];\n\t\t\t$([ \"Top\", \"Right\", \"Left\", \"Bottom\" ]).each(function(i, name) { p[i] = num(element.css(\"padding\" + name)); });\n\n\t\t\tthat.containerOffset = element.offset();\n\t\t\tthat.containerPosition = element.position();\n\t\t\tthat.containerSize = { height: (element.innerHeight() - p[3]), width: (element.innerWidth() - p[1]) };\n\n\t\t\tco = that.containerOffset;\n\t\t\tch = that.containerSize.height;\n\t\t\tcw = that.containerSize.width;\n\t\t\twidth = ($.ui.hasScroll(ce, \"left\") ? ce.scrollWidth : cw );\n\t\t\theight = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);\n\n\t\t\tthat.parentData = {\n\t\t\t\telement: ce, left: co.left, top: co.top, width: width, height: height\n\t\t\t};\n\t\t}\n\t},\n\n\tresize: function( event ) {\n\t\tvar woset, hoset, isParent, isOffsetRelative,\n\t\t\tthat = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tco = that.containerOffset, cp = that.position,\n\t\t\tpRatio = that._aspectRatio || event.shiftKey,\n\t\t\tcop = { top:0, left:0 }, ce = that.containerElement;\n\n\t\tif (ce[0] !== document && (/static/).test(ce.css(\"position\"))) {\n\t\t\tcop = co;\n\t\t}\n\n\t\tif (cp.left < (that._helper ? co.left : 0)) {\n\t\t\tthat.size.width = that.size.width + (that._helper ? (that.position.left - co.left) : (that.position.left - cop.left));\n\t\t\tif (pRatio) {\n\t\t\t\tthat.size.height = that.size.width / that.aspectRatio;\n\t\t\t}\n\t\t\tthat.position.left = o.helper ? co.left : 0;\n\t\t}\n\n\t\tif (cp.top < (that._helper ? co.top : 0)) {\n\t\t\tthat.size.height = that.size.height + (that._helper ? (that.position.top - co.top) : that.position.top);\n\t\t\tif (pRatio) {\n\t\t\t\tthat.size.width = that.size.height * that.aspectRatio;\n\t\t\t}\n\t\t\tthat.position.top = that._helper ? co.top : 0;\n\t\t}\n\n\t\tthat.offset.left = that.parentData.left+that.position.left;\n\t\tthat.offset.top = that.parentData.top+that.position.top;\n\n\t\twoset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width );\n\t\thoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height );\n\n\t\tisParent = that.containerElement.get(0) === that.element.parent().get(0);\n\t\tisOffsetRelative = /relative|absolute/.test(that.containerElement.css(\"position\"));\n\n\t\tif(isParent && isOffsetRelative) {\n\t\t\twoset -= that.parentData.left;\n\t\t}\n\n\t\tif (woset + that.size.width >= that.parentData.width) {\n\t\t\tthat.size.width = that.parentData.width - woset;\n\t\t\tif (pRatio) {\n\t\t\t\tthat.size.height = that.size.width / that.aspectRatio;\n\t\t\t}\n\t\t}\n\n\t\tif (hoset + that.size.height >= that.parentData.height) {\n\t\t\tthat.size.height = that.parentData.height - hoset;\n\t\t\tif (pRatio) {\n\t\t\t\tthat.size.width = that.size.height * that.aspectRatio;\n\t\t\t}\n\t\t}\n\t},\n\n\tstop: function(){\n\t\tvar that = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tco = that.containerOffset,\n\t\t\tcop = that.containerPosition,\n\t\t\tce = that.containerElement,\n\t\t\thelper = $(that.helper),\n\t\t\tho = helper.offset(),\n\t\t\tw = helper.outerWidth() - that.sizeDiff.width,\n\t\t\th = helper.outerHeight() - that.sizeDiff.height;\n\n\t\tif (that._helper && !o.animate && (/relative/).test(ce.css(\"position\"))) {\n\t\t\t$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });\n\t\t}\n\n\t\tif (that._helper && !o.animate && (/static/).test(ce.css(\"position\"))) {\n\t\t\t$(this).css({ left: ho.left - cop.left - co.left, width: w, height: h });\n\t\t}\n\n\t}\n});\n\n$.ui.plugin.add(\"resizable\", \"alsoResize\", {\n\n\tstart: function () {\n\t\tvar that = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\t_store = function (exp) {\n\t\t\t\t$(exp).each(function() {\n\t\t\t\t\tvar el = $(this);\n\t\t\t\t\tel.data(\"ui-resizable-alsoresize\", {\n\t\t\t\t\t\twidth: parseInt(el.width(), 10), height: parseInt(el.height(), 10),\n\t\t\t\t\t\tleft: parseInt(el.css(\"left\"), 10), top: parseInt(el.css(\"top\"), 10)\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t};\n\n\t\tif (typeof(o.alsoResize) === \"object\" && !o.alsoResize.parentNode) {\n\t\t\tif (o.alsoResize.length) { o.alsoResize = o.alsoResize[0]; _store(o.alsoResize); }\n\t\t\telse { $.each(o.alsoResize, function (exp) { _store(exp); }); }\n\t\t}else{\n\t\t\t_store(o.alsoResize);\n\t\t}\n\t},\n\n\tresize: function (event, ui) {\n\t\tvar that = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tos = that.originalSize,\n\t\t\top = that.originalPosition,\n\t\t\tdelta = {\n\t\t\t\theight: (that.size.height - os.height) || 0, width: (that.size.width - os.width) || 0,\n\t\t\t\ttop: (that.position.top - op.top) || 0, left: (that.position.left - op.left) || 0\n\t\t\t},\n\n\t\t\t_alsoResize = function (exp, c) {\n\t\t\t\t$(exp).each(function() {\n\t\t\t\t\tvar el = $(this), start = $(this).data(\"ui-resizable-alsoresize\"), style = {},\n\t\t\t\t\t\tcss = c && c.length ? c : el.parents(ui.originalElement[0]).length ? [\"width\", \"height\"] : [\"width\", \"height\", \"top\", \"left\"];\n\n\t\t\t\t\t$.each(css, function (i, prop) {\n\t\t\t\t\t\tvar sum = (start[prop]||0) + (delta[prop]||0);\n\t\t\t\t\t\tif (sum && sum >= 0) {\n\t\t\t\t\t\t\tstyle[prop] = sum || null;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\n\t\t\t\t\tel.css(style);\n\t\t\t\t});\n\t\t\t};\n\n\t\tif (typeof(o.alsoResize) === \"object\" && !o.alsoResize.nodeType) {\n\t\t\t$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });\n\t\t}else{\n\t\t\t_alsoResize(o.alsoResize);\n\t\t}\n\t},\n\n\tstop: function () {\n\t\t$(this).removeData(\"resizable-alsoresize\");\n\t}\n});\n\n$.ui.plugin.add(\"resizable\", \"ghost\", {\n\n\tstart: function() {\n\n\t\tvar that = $(this).data(\"ui-resizable\"), o = that.options, cs = that.size;\n\n\t\tthat.ghost = that.originalElement.clone();\n\t\tthat.ghost\n\t\t\t.css({ opacity: 0.25, display: \"block\", position: \"relative\", height: cs.height, width: cs.width, margin: 0, left: 0, top: 0 })\n\t\t\t.addClass(\"ui-resizable-ghost\")\n\t\t\t.addClass(typeof o.ghost === \"string\" ? o.ghost : \"\");\n\n\t\tthat.ghost.appendTo(that.helper);\n\n\t},\n\n\tresize: function(){\n\t\tvar that = $(this).data(\"ui-resizable\");\n\t\tif (that.ghost) {\n\t\t\tthat.ghost.css({ position: \"relative\", height: that.size.height, width: that.size.width });\n\t\t}\n\t},\n\n\tstop: function() {\n\t\tvar that = $(this).data(\"ui-resizable\");\n\t\tif (that.ghost && that.helper) {\n\t\t\tthat.helper.get(0).removeChild(that.ghost.get(0));\n\t\t}\n\t}\n\n});\n\n$.ui.plugin.add(\"resizable\", \"grid\", {\n\n\tresize: function() {\n\t\tvar that = $(this).data(\"ui-resizable\"),\n\t\t\to = that.options,\n\t\t\tcs = that.size,\n\t\t\tos = that.originalSize,\n\t\t\top = that.originalPosition,\n\t\t\ta = that.axis,\n\t\t\tgrid = typeof o.grid === \"number\" ? [o.grid, o.grid] : o.grid,\n\t\t\tgridX = (grid[0]||1),\n\t\t\tgridY = (grid[1]||1),\n\t\t\tox = Math.round((cs.width - os.width) / gridX) * gridX,\n\t\t\toy = Math.round((cs.height - os.height) / gridY) * gridY,\n\t\t\tnewWidth = os.width + ox,\n\t\t\tnewHeight = os.height + oy,\n\t\t\tisMaxWidth = o.maxWidth && (o.maxWidth < newWidth),\n\t\t\tisMaxHeight = o.maxHeight && (o.maxHeight < newHeight),\n\t\t\tisMinWidth = o.minWidth && (o.minWidth > newWidth),\n\t\t\tisMinHeight = o.minHeight && (o.minHeight > newHeight);\n\n\t\to.grid = grid;\n\n\t\tif (isMinWidth) {\n\t\t\tnewWidth = newWidth + gridX;\n\t\t}\n\t\tif (isMinHeight) {\n\t\t\tnewHeight = newHeight + gridY;\n\t\t}\n\t\tif (isMaxWidth) {\n\t\t\tnewWidth = newWidth - gridX;\n\t\t}\n\t\tif (isMaxHeight) {\n\t\t\tnewHeight = newHeight - gridY;\n\t\t}\n\n\t\tif (/^(se|s|e)$/.test(a)) {\n\t\t\tthat.size.width = newWidth;\n\t\t\tthat.size.height = newHeight;\n\t\t} else if (/^(ne)$/.test(a)) {\n\t\t\tthat.size.width = newWidth;\n\t\t\tthat.size.height = newHeight;\n\t\t\tthat.position.top = op.top - oy;\n\t\t} else if (/^(sw)$/.test(a)) {\n\t\t\tthat.size.width = newWidth;\n\t\t\tthat.size.height = newHeight;\n\t\t\tthat.position.left = op.left - ox;\n\t\t} else {\n\t\t\tthat.size.width = newWidth;\n\t\t\tthat.size.height = newHeight;\n\t\t\tthat.position.top = op.top - oy;\n\t\t\tthat.position.left = op.left - ox;\n\t\t}\n\t}\n\n});\n\n})(jQuery);\n\n(function( $, undefined ) {\n\n$.widget(\"ui.selectable\", $.ui.mouse, {\n\tversion: \"1.10.1\",\n\toptions: {\n\t\tappendTo: \"body\",\n\t\tautoRefresh: true,\n\t\tdistance: 0,\n\t\tfilter: \"*\",\n\t\ttolerance: \"touch\",\n\n\t\t// callbacks\n\t\tselected: null,\n\t\tselecting: null,\n\t\tstart: null,\n\t\tstop: null,\n\t\tunselected: null,\n\t\tunselecting: null\n\t},\n\t_create: function() {\n\t\tvar selectees,\n\t\t\tthat = this;\n\n\t\tthis.element.addClass(\"ui-selectable\");\n\n\t\tthis.dragged = false;\n\n\t\t// cache selectee children based on filter\n\t\tthis.refresh = function() {\n\t\t\tselectees = $(that.options.filter, that.element[0]);\n\t\t\tselectees.addClass(\"ui-selectee\");\n\t\t\tselectees.each(function() {\n\t\t\t\tvar $this = $(this),\n\t\t\t\t\tpos = $this.offset();\n\t\t\t\t$.data(this, \"selectable-item\", {\n\t\t\t\t\telement: this,\n\t\t\t\t\t$element: $this,\n\t\t\t\t\tleft: pos.left,\n\t\t\t\t\ttop: pos.top,\n\t\t\t\t\tright: pos.left + $this.outerWidth(),\n\t\t\t\t\tbottom: pos.top + $this.outerHeight(),\n\t\t\t\t\tstartselected: false,\n\t\t\t\t\tselected: $this.hasClass(\"ui-selected\"),\n\t\t\t\t\tselecting: $this.hasClass(\"ui-selecting\"),\n\t\t\t\t\tunselecting: $this.hasClass(\"ui-unselecting\")\n\t\t\t\t});\n\t\t\t});\n\t\t};\n\t\tthis.refresh();\n\n\t\tthis.selectees = selectees.addClass(\"ui-selectee\");\n\n\t\tthis._mouseInit();\n\n\t\tthis.helper = $(\"
        \");\n\t},\n\n\t_destroy: function() {\n\t\tthis.selectees\n\t\t\t.removeClass(\"ui-selectee\")\n\t\t\t.removeData(\"selectable-item\");\n\t\tthis.element\n\t\t\t.removeClass(\"ui-selectable ui-selectable-disabled\");\n\t\tthis._mouseDestroy();\n\t},\n\n\t_mouseStart: function(event) {\n\t\tvar that = this,\n\t\t\toptions = this.options;\n\n\t\tthis.opos = [event.pageX, event.pageY];\n\n\t\tif (this.options.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.selectees = $(options.filter, this.element[0]);\n\n\t\tthis._trigger(\"start\", event);\n\n\t\t$(options.appendTo).append(this.helper);\n\t\t// position helper (lasso)\n\t\tthis.helper.css({\n\t\t\t\"left\": event.pageX,\n\t\t\t\"top\": event.pageY,\n\t\t\t\"width\": 0,\n\t\t\t\"height\": 0\n\t\t});\n\n\t\tif (options.autoRefresh) {\n\t\t\tthis.refresh();\n\t\t}\n\n\t\tthis.selectees.filter(\".ui-selected\").each(function() {\n\t\t\tvar selectee = $.data(this, \"selectable-item\");\n\t\t\tselectee.startselected = true;\n\t\t\tif (!event.metaKey && !event.ctrlKey) {\n\t\t\t\tselectee.$element.removeClass(\"ui-selected\");\n\t\t\t\tselectee.selected = false;\n\t\t\t\tselectee.$element.addClass(\"ui-unselecting\");\n\t\t\t\tselectee.unselecting = true;\n\t\t\t\t// selectable UNSELECTING callback\n\t\t\t\tthat._trigger(\"unselecting\", event, {\n\t\t\t\t\tunselecting: selectee.element\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\n\t\t$(event.target).parents().addBack().each(function() {\n\t\t\tvar doSelect,\n\t\t\t\tselectee = $.data(this, \"selectable-item\");\n\t\t\tif (selectee) {\n\t\t\t\tdoSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass(\"ui-selected\");\n\t\t\t\tselectee.$element\n\t\t\t\t\t.removeClass(doSelect ? \"ui-unselecting\" : \"ui-selected\")\n\t\t\t\t\t.addClass(doSelect ? \"ui-selecting\" : \"ui-unselecting\");\n\t\t\t\tselectee.unselecting = !doSelect;\n\t\t\t\tselectee.selecting = doSelect;\n\t\t\t\tselectee.selected = doSelect;\n\t\t\t\t// selectable (UN)SELECTING callback\n\t\t\t\tif (doSelect) {\n\t\t\t\t\tthat._trigger(\"selecting\", event, {\n\t\t\t\t\t\tselecting: selectee.element\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tthat._trigger(\"unselecting\", event, {\n\t\t\t\t\t\tunselecting: selectee.element\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\n\t},\n\n\t_mouseDrag: function(event) {\n\n\t\tthis.dragged = true;\n\n\t\tif (this.options.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar tmp,\n\t\t\tthat = this,\n\t\t\toptions = this.options,\n\t\t\tx1 = this.opos[0],\n\t\t\ty1 = this.opos[1],\n\t\t\tx2 = event.pageX,\n\t\t\ty2 = event.pageY;\n\n\t\tif (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; }\n\t\tif (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; }\n\t\tthis.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});\n\n\t\tthis.selectees.each(function() {\n\t\t\tvar selectee = $.data(this, \"selectable-item\"),\n\t\t\t\thit = false;\n\n\t\t\t//prevent helper from being selected if appendTo: selectable\n\t\t\tif (!selectee || selectee.element === that.element[0]) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (options.tolerance === \"touch\") {\n\t\t\t\thit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) );\n\t\t\t} else if (options.tolerance === \"fit\") {\n\t\t\t\thit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2);\n\t\t\t}\n\n\t\t\tif (hit) {\n\t\t\t\t// SELECT\n\t\t\t\tif (selectee.selected) {\n\t\t\t\t\tselectee.$element.removeClass(\"ui-selected\");\n\t\t\t\t\tselectee.selected = false;\n\t\t\t\t}\n\t\t\t\tif (selectee.unselecting) {\n\t\t\t\t\tselectee.$element.removeClass(\"ui-unselecting\");\n\t\t\t\t\tselectee.unselecting = false;\n\t\t\t\t}\n\t\t\t\tif (!selectee.selecting) {\n\t\t\t\t\tselectee.$element.addClass(\"ui-selecting\");\n\t\t\t\t\tselectee.selecting = true;\n\t\t\t\t\t// selectable SELECTING callback\n\t\t\t\t\tthat._trigger(\"selecting\", event, {\n\t\t\t\t\t\tselecting: selectee.element\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// UNSELECT\n\t\t\t\tif (selectee.selecting) {\n\t\t\t\t\tif ((event.metaKey || event.ctrlKey) && selectee.startselected) {\n\t\t\t\t\t\tselectee.$element.removeClass(\"ui-selecting\");\n\t\t\t\t\t\tselectee.selecting = false;\n\t\t\t\t\t\tselectee.$element.addClass(\"ui-selected\");\n\t\t\t\t\t\tselectee.selected = true;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselectee.$element.removeClass(\"ui-selecting\");\n\t\t\t\t\t\tselectee.selecting = false;\n\t\t\t\t\t\tif (selectee.startselected) {\n\t\t\t\t\t\t\tselectee.$element.addClass(\"ui-unselecting\");\n\t\t\t\t\t\t\tselectee.unselecting = true;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// selectable UNSELECTING callback\n\t\t\t\t\t\tthat._trigger(\"unselecting\", event, {\n\t\t\t\t\t\t\tunselecting: selectee.element\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (selectee.selected) {\n\t\t\t\t\tif (!event.metaKey && !event.ctrlKey && !selectee.startselected) {\n\t\t\t\t\t\tselectee.$element.removeClass(\"ui-selected\");\n\t\t\t\t\t\tselectee.selected = false;\n\n\t\t\t\t\t\tselectee.$element.addClass(\"ui-unselecting\");\n\t\t\t\t\t\tselectee.unselecting = true;\n\t\t\t\t\t\t// selectable UNSELECTING callback\n\t\t\t\t\t\tthat._trigger(\"unselecting\", event, {\n\t\t\t\t\t\t\tunselecting: selectee.element\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\treturn false;\n\t},\n\n\t_mouseStop: function(event) {\n\t\tvar that = this;\n\n\t\tthis.dragged = false;\n\n\t\t$(\".ui-unselecting\", this.element[0]).each(function() {\n\t\t\tvar selectee = $.data(this, \"selectable-item\");\n\t\t\tselectee.$element.removeClass(\"ui-unselecting\");\n\t\t\tselectee.unselecting = false;\n\t\t\tselectee.startselected = false;\n\t\t\tthat._trigger(\"unselected\", event, {\n\t\t\t\tunselected: selectee.element\n\t\t\t});\n\t\t});\n\t\t$(\".ui-selecting\", this.element[0]).each(function() {\n\t\t\tvar selectee = $.data(this, \"selectable-item\");\n\t\t\tselectee.$element.removeClass(\"ui-selecting\").addClass(\"ui-selected\");\n\t\t\tselectee.selecting = false;\n\t\t\tselectee.selected = true;\n\t\t\tselectee.startselected = true;\n\t\t\tthat._trigger(\"selected\", event, {\n\t\t\t\tselected: selectee.element\n\t\t\t});\n\t\t});\n\t\tthis._trigger(\"stop\", event);\n\n\t\tthis.helper.remove();\n\n\t\treturn false;\n\t}\n\n});\n\n})(jQuery);\n\n(function( $, undefined ) {\n\n/*jshint loopfunc: true */\n\nfunction isOverAxis( x, reference, size ) {\n\treturn ( x > reference ) && ( x < ( reference + size ) );\n}\n\n$.widget(\"ui.sortable\", $.ui.mouse, {\n\tversion: \"1.10.1\",\n\twidgetEventPrefix: \"sort\",\n\tready: false,\n\toptions: {\n\t\tappendTo: \"parent\",\n\t\taxis: false,\n\t\tconnectWith: false,\n\t\tcontainment: false,\n\t\tcursor: \"auto\",\n\t\tcursorAt: false,\n\t\tdropOnEmpty: true,\n\t\tforcePlaceholderSize: false,\n\t\tforceHelperSize: false,\n\t\tgrid: false,\n\t\thandle: false,\n\t\thelper: \"original\",\n\t\titems: \"> *\",\n\t\topacity: false,\n\t\tplaceholder: false,\n\t\trevert: false,\n\t\tscroll: true,\n\t\tscrollSensitivity: 20,\n\t\tscrollSpeed: 20,\n\t\tscope: \"default\",\n\t\ttolerance: \"intersect\",\n\t\tzIndex: 1000,\n\n\t\t// callbacks\n\t\tactivate: null,\n\t\tbeforeStop: null,\n\t\tchange: null,\n\t\tdeactivate: null,\n\t\tout: null,\n\t\tover: null,\n\t\treceive: null,\n\t\tremove: null,\n\t\tsort: null,\n\t\tstart: null,\n\t\tstop: null,\n\t\tupdate: null\n\t},\n\t_create: function() {\n\n\t\tvar o = this.options;\n\t\tthis.containerCache = {};\n\t\tthis.element.addClass(\"ui-sortable\");\n\n\t\t//Get the items\n\t\tthis.refresh();\n\n\t\t//Let's determine if the items are being displayed horizontally\n\t\tthis.floating = this.items.length ? o.axis === \"x\" || (/left|right/).test(this.items[0].item.css(\"float\")) || (/inline|table-cell/).test(this.items[0].item.css(\"display\")) : false;\n\n\t\t//Let's determine the parent's offset\n\t\tthis.offset = this.element.offset();\n\n\t\t//Initialize mouse events for interaction\n\t\tthis._mouseInit();\n\n\t\t//We're ready to go\n\t\tthis.ready = true;\n\n\t},\n\n\t_destroy: function() {\n\t\tthis.element\n\t\t\t.removeClass(\"ui-sortable ui-sortable-disabled\");\n\t\tthis._mouseDestroy();\n\n\t\tfor ( var i = this.items.length - 1; i >= 0; i-- ) {\n\t\t\tthis.items[i].item.removeData(this.widgetName + \"-item\");\n\t\t}\n\n\t\treturn this;\n\t},\n\n\t_setOption: function(key, value){\n\t\tif ( key === \"disabled\" ) {\n\t\t\tthis.options[ key ] = value;\n\n\t\t\tthis.widget().toggleClass( \"ui-sortable-disabled\", !!value );\n\t\t} else {\n\t\t\t// Don't call widget base _setOption for disable as it adds ui-state-disabled class\n\t\t\t$.Widget.prototype._setOption.apply(this, arguments);\n\t\t}\n\t},\n\n\t_mouseCapture: function(event, overrideHandle) {\n\t\tvar currentItem = null,\n\t\t\tvalidHandle = false,\n\t\t\tthat = this;\n\n\t\tif (this.reverting) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif(this.options.disabled || this.options.type === \"static\") {\n\t\t\treturn false;\n\t\t}\n\n\t\t//We have to refresh the items data once first\n\t\tthis._refreshItems(event);\n\n\t\t//Find out if the clicked node (or one of its parents) is a actual item in this.items\n\t\t$(event.target).parents().each(function() {\n\t\t\tif($.data(this, that.widgetName + \"-item\") === that) {\n\t\t\t\tcurrentItem = $(this);\n\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\tif($.data(event.target, that.widgetName + \"-item\") === that) {\n\t\t\tcurrentItem = $(event.target);\n\t\t}\n\n\t\tif(!currentItem) {\n\t\t\treturn false;\n\t\t}\n\t\tif(this.options.handle && !overrideHandle) {\n\t\t\t$(this.options.handle, currentItem).find(\"*\").addBack().each(function() {\n\t\t\t\tif(this === event.target) {\n\t\t\t\t\tvalidHandle = true;\n\t\t\t\t}\n\t\t\t});\n\t\t\tif(!validHandle) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\tthis.currentItem = currentItem;\n\t\tthis._removeCurrentsFromItems();\n\t\treturn true;\n\n\t},\n\n\t_mouseStart: function(event, overrideHandle, noActivation) {\n\n\t\tvar i,\n\t\t\to = this.options;\n\n\t\tthis.currentContainer = this;\n\n\t\t//We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture\n\t\tthis.refreshPositions();\n\n\t\t//Create and append the visible helper\n\t\tthis.helper = this._createHelper(event);\n\n\t\t//Cache the helper size\n\t\tthis._cacheHelperProportions();\n\n\t\t/*\n\t\t * - Position generation -\n\t\t * This block generates everything position related - it's the core of draggables.\n\t\t */\n\n\t\t//Cache the margins of the original element\n\t\tthis._cacheMargins();\n\n\t\t//Get the next scrolling parent\n\t\tthis.scrollParent = this.helper.scrollParent();\n\n\t\t//The element's absolute position on the page minus margins\n\t\tthis.offset = this.currentItem.offset();\n\t\tthis.offset = {\n\t\t\ttop: this.offset.top - this.margins.top,\n\t\t\tleft: this.offset.left - this.margins.left\n\t\t};\n\n\t\t$.extend(this.offset, {\n\t\t\tclick: { //Where the click happened, relative to the element\n\t\t\t\tleft: event.pageX - this.offset.left,\n\t\t\t\ttop: event.pageY - this.offset.top\n\t\t\t},\n\t\t\tparent: this._getParentOffset(),\n\t\t\trelative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper\n\t\t});\n\n\t\t// Only after we got the offset, we can change the helper's position to absolute\n\t\t// TODO: Still need to figure out a way to make relative sorting possible\n\t\tthis.helper.css(\"position\", \"absolute\");\n\t\tthis.cssPosition = this.helper.css(\"position\");\n\n\t\t//Generate the original position\n\t\tthis.originalPosition = this._generatePosition(event);\n\t\tthis.originalPageX = event.pageX;\n\t\tthis.originalPageY = event.pageY;\n\n\t\t//Adjust the mouse offset relative to the helper if \"cursorAt\" is supplied\n\t\t(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));\n\n\t\t//Cache the former DOM position\n\t\tthis.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };\n\n\t\t//If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way\n\t\tif(this.helper[0] !== this.currentItem[0]) {\n\t\t\tthis.currentItem.hide();\n\t\t}\n\n\t\t//Create the placeholder\n\t\tthis._createPlaceholder();\n\n\t\t//Set a containment if given in the options\n\t\tif(o.containment) {\n\t\t\tthis._setContainment();\n\t\t}\n\n\t\tif(o.cursor) { // cursor option\n\t\t\tif ($(\"body\").css(\"cursor\")) {\n\t\t\t\tthis._storedCursor = $(\"body\").css(\"cursor\");\n\t\t\t}\n\t\t\t$(\"body\").css(\"cursor\", o.cursor);\n\t\t}\n\n\t\tif(o.opacity) { // opacity option\n\t\t\tif (this.helper.css(\"opacity\")) {\n\t\t\t\tthis._storedOpacity = this.helper.css(\"opacity\");\n\t\t\t}\n\t\t\tthis.helper.css(\"opacity\", o.opacity);\n\t\t}\n\n\t\tif(o.zIndex) { // zIndex option\n\t\t\tif (this.helper.css(\"zIndex\")) {\n\t\t\t\tthis._storedZIndex = this.helper.css(\"zIndex\");\n\t\t\t}\n\t\t\tthis.helper.css(\"zIndex\", o.zIndex);\n\t\t}\n\n\t\t//Prepare scrolling\n\t\tif(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== \"HTML\") {\n\t\t\tthis.overflowOffset = this.scrollParent.offset();\n\t\t}\n\n\t\t//Call callbacks\n\t\tthis._trigger(\"start\", event, this._uiHash());\n\n\t\t//Recache the helper size\n\t\tif(!this._preserveHelperProportions) {\n\t\t\tthis._cacheHelperProportions();\n\t\t}\n\n\n\t\t//Post \"activate\" events to possible containers\n\t\tif( !noActivation ) {\n\t\t\tfor ( i = this.containers.length - 1; i >= 0; i-- ) {\n\t\t\t\tthis.containers[ i ]._trigger( \"activate\", event, this._uiHash( this ) );\n\t\t\t}\n\t\t}\n\n\t\t//Prepare possible droppables\n\t\tif($.ui.ddmanager) {\n\t\t\t$.ui.ddmanager.current = this;\n\t\t}\n\n\t\tif ($.ui.ddmanager && !o.dropBehaviour) {\n\t\t\t$.ui.ddmanager.prepareOffsets(this, event);\n\t\t}\n\n\t\tthis.dragging = true;\n\n\t\tthis.helper.addClass(\"ui-sortable-helper\");\n\t\tthis._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position\n\t\treturn true;\n\n\t},\n\n\t_mouseDrag: function(event) {\n\t\tvar i, item, itemElement, intersection,\n\t\t\to = this.options,\n\t\t\tscrolled = false;\n\n\t\t//Compute the helpers position\n\t\tthis.position = this._generatePosition(event);\n\t\tthis.positionAbs = this._convertPositionTo(\"absolute\");\n\n\t\tif (!this.lastPositionAbs) {\n\t\t\tthis.lastPositionAbs = this.positionAbs;\n\t\t}\n\n\t\t//Do scrolling\n\t\tif(this.options.scroll) {\n\t\t\tif(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== \"HTML\") {\n\n\t\t\t\tif((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {\n\t\t\t\t\tthis.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;\n\t\t\t\t} else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {\n\t\t\t\t\tthis.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;\n\t\t\t\t}\n\n\t\t\t\tif((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {\n\t\t\t\t\tthis.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;\n\t\t\t\t} else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {\n\t\t\t\t\tthis.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;\n\t\t\t\t}\n\n\t\t\t} else {\n\n\t\t\t\tif(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);\n\t\t\t\t} else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);\n\t\t\t\t}\n\n\t\t\t\tif(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);\n\t\t\t\t} else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {\n\t\t\t\t\tscrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);\n\t\t\t\t}\n\n\t\t\t}\n\n\t\t\tif(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {\n\t\t\t\t$.ui.ddmanager.prepareOffsets(this, event);\n\t\t\t}\n\t\t}\n\n\t\t//Regenerate the absolute position used for position checks\n\t\tthis.positionAbs = this._convertPositionTo(\"absolute\");\n\n\t\t//Set the helper position\n\t\tif(!this.options.axis || this.options.axis !== \"y\") {\n\t\t\tthis.helper[0].style.left = this.position.left+\"px\";\n\t\t}\n\t\tif(!this.options.axis || this.options.axis !== \"x\") {\n\t\t\tthis.helper[0].style.top = this.position.top+\"px\";\n\t\t}\n\n\t\t//Rearrange\n\t\tfor (i = this.items.length - 1; i >= 0; i--) {\n\n\t\t\t//Cache variables and intersection, continue if no intersection\n\t\t\titem = this.items[i];\n\t\t\titemElement = item.item[0];\n\t\t\tintersection = this._intersectsWithPointer(item);\n\t\t\tif (!intersection) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// Only put the placeholder inside the current Container, skip all\n\t\t\t// items form other containers. This works because when moving\n\t\t\t// an item from one container to another the\n\t\t\t// currentContainer is switched before the placeholder is moved.\n\t\t\t//\n\t\t\t// Without this moving items in \"sub-sortables\" can cause the placeholder to jitter\n\t\t\t// beetween the outer and inner container.\n\t\t\tif (item.instance !== this.currentContainer) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t// cannot intersect with itself\n\t\t\t// no useless actions that have been done before\n\t\t\t// no action if the item moved is the parent of the item checked\n\t\t\tif (itemElement !== this.currentItem[0] &&\n\t\t\t\tthis.placeholder[intersection === 1 ? \"next\" : \"prev\"]()[0] !== itemElement &&\n\t\t\t\t!$.contains(this.placeholder[0], itemElement) &&\n\t\t\t\t(this.options.type === \"semi-dynamic\" ? !$.contains(this.element[0], itemElement) : true)\n\t\t\t) {\n\n\t\t\t\tthis.direction = intersection === 1 ? \"down\" : \"up\";\n\n\t\t\t\tif (this.options.tolerance === \"pointer\" || this._intersectsWithSides(item)) {\n\t\t\t\t\tthis._rearrange(event, item);\n\t\t\t\t} else {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tthis._trigger(\"change\", event, this._uiHash());\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t//Post events to containers\n\t\tthis._contactContainers(event);\n\n\t\t//Interconnect with droppables\n\t\tif($.ui.ddmanager) {\n\t\t\t$.ui.ddmanager.drag(this, event);\n\t\t}\n\n\t\t//Call callbacks\n\t\tthis._trigger(\"sort\", event, this._uiHash());\n\n\t\tthis.lastPositionAbs = this.positionAbs;\n\t\treturn false;\n\n\t},\n\n\t_mouseStop: function(event, noPropagation) {\n\n\t\tif(!event) {\n\t\t\treturn;\n\t\t}\n\n\t\t//If we are using droppables, inform the manager about the drop\n\t\tif ($.ui.ddmanager && !this.options.dropBehaviour) {\n\t\t\t$.ui.ddmanager.drop(this, event);\n\t\t}\n\n\t\tif(this.options.revert) {\n\t\t\tvar that = this,\n\t\t\t\tcur = this.placeholder.offset();\n\n\t\t\tthis.reverting = true;\n\n\t\t\t$(this.helper).animate({\n\t\t\t\tleft: cur.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollLeft),\n\t\t\t\ttop: cur.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollTop)\n\t\t\t}, parseInt(this.options.revert, 10) || 500, function() {\n\t\t\t\tthat._clear(event);\n\t\t\t});\n\t\t} else {\n\t\t\tthis._clear(event, noPropagation);\n\t\t}\n\n\t\treturn false;\n\n\t},\n\n\tcancel: function() {\n\n\t\tif(this.dragging) {\n\n\t\t\tthis._mouseUp({ target: null });\n\n\t\t\tif(this.options.helper === \"original\") {\n\t\t\t\tthis.currentItem.css(this._storedCSS).removeClass(\"ui-sortable-helper\");\n\t\t\t} else {\n\t\t\t\tthis.currentItem.show();\n\t\t\t}\n\n\t\t\t//Post deactivating events to containers\n\t\t\tfor (var i = this.containers.length - 1; i >= 0; i--){\n\t\t\t\tthis.containers[i]._trigger(\"deactivate\", null, this._uiHash(this));\n\t\t\t\tif(this.containers[i].containerCache.over) {\n\t\t\t\t\tthis.containers[i]._trigger(\"out\", null, this._uiHash(this));\n\t\t\t\t\tthis.containers[i].containerCache.over = 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\n\t\tif (this.placeholder) {\n\t\t\t//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!\n\t\t\tif(this.placeholder[0].parentNode) {\n\t\t\t\tthis.placeholder[0].parentNode.removeChild(this.placeholder[0]);\n\t\t\t}\n\t\t\tif(this.options.helper !== \"original\" && this.helper && this.helper[0].parentNode) {\n\t\t\t\tthis.helper.remove();\n\t\t\t}\n\n\t\t\t$.extend(this, {\n\t\t\t\thelper: null,\n\t\t\t\tdragging: false,\n\t\t\t\treverting: false,\n\t\t\t\t_noFinalSort: null\n\t\t\t});\n\n\t\t\tif(this.domPosition.prev) {\n\t\t\t\t$(this.domPosition.prev).after(this.currentItem);\n\t\t\t} else {\n\t\t\t\t$(this.domPosition.parent).prepend(this.currentItem);\n\t\t\t}\n\t\t}\n\n\t\treturn this;\n\n\t},\n\n\tserialize: function(o) {\n\n\t\tvar items = this._getItemsAsjQuery(o && o.connected),\n\t\t\tstr = [];\n\t\to = o || {};\n\n\t\t$(items).each(function() {\n\t\t\tvar res = ($(o.item || this).attr(o.attribute || \"id\") || \"\").match(o.expression || (/(.+)[\\-=_](.+)/));\n\t\t\tif (res) {\n\t\t\t\tstr.push((o.key || res[1]+\"[]\")+\"=\"+(o.key && o.expression ? res[1] : res[2]));\n\t\t\t}\n\t\t});\n\n\t\tif(!str.length && o.key) {\n\t\t\tstr.push(o.key + \"=\");\n\t\t}\n\n\t\treturn str.join(\"&\");\n\n\t},\n\n\ttoArray: function(o) {\n\n\t\tvar items = this._getItemsAsjQuery(o && o.connected),\n\t\t\tret = [];\n\n\t\to = o || {};\n\n\t\titems.each(function() { ret.push($(o.item || this).attr(o.attribute || \"id\") || \"\"); });\n\t\treturn ret;\n\n\t},\n\n\t/* Be careful with the following core functions */\n\t_intersectsWith: function(item) {\n\n\t\tvar x1 = this.positionAbs.left,\n\t\t\tx2 = x1 + this.helperProportions.width,\n\t\t\ty1 = this.positionAbs.top,\n\t\t\ty2 = y1 + this.helperProportions.height,\n\t\t\tl = item.left,\n\t\t\tr = l + item.width,\n\t\t\tt = item.top,\n\t\t\tb = t + item.height,\n\t\t\tdyClick = this.offset.click.top,\n\t\t\tdxClick = this.offset.click.left,\n\t\t\tisOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r;\n\n\t\tif ( this.options.tolerance === \"pointer\" ||\n\t\t\tthis.options.forcePointerForContainers ||\n\t\t\t(this.options.tolerance !== \"pointer\" && this.helperProportions[this.floating ? \"width\" : \"height\"] > item[this.floating ? \"width\" : \"height\"])\n\t\t) {\n\t\t\treturn isOverElement;\n\t\t} else {\n\n\t\t\treturn (l < x1 + (this.helperProportions.width / 2) && // Right Half\n\t\t\t\tx2 - (this.helperProportions.width / 2) < r && // Left Half\n\t\t\t\tt < y1 + (this.helperProportions.height / 2) && // Bottom Half\n\t\t\t\ty2 - (this.helperProportions.height / 2) < b ); // Top Half\n\n\t\t}\n\t},\n\n\t_intersectsWithPointer: function(item) {\n\n\t\tvar isOverElementHeight = (this.options.axis === \"x\") || isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),\n\t\t\tisOverElementWidth = (this.options.axis === \"y\") || isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),\n\t\t\tisOverElement = isOverElementHeight && isOverElementWidth,\n\t\t\tverticalDirection = this._getDragVerticalDirection(),\n\t\t\thorizontalDirection = this._getDragHorizontalDirection();\n\n\t\tif (!isOverElement) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn this.floating ?\n\t\t\t( ((horizontalDirection && horizontalDirection === \"right\") || verticalDirection === \"down\") ? 2 : 1 )\n\t\t\t: ( verticalDirection && (verticalDirection === \"down\" ? 2 : 1) );\n\n\t},\n\n\t_intersectsWithSides: function(item) {\n\n\t\tvar isOverBottomHalf = isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),\n\t\t\tisOverRightHalf = isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),\n\t\t\tverticalDirection = this._getDragVerticalDirection(),\n\t\t\thorizontalDirection = this._getDragHorizontalDirection();\n\n\t\tif (this.floating && horizontalDirection) {\n\t\t\treturn ((horizontalDirection === \"right\" && isOverRightHalf) || (horizontalDirection === \"left\" && !isOverRightHalf));\n\t\t} else {\n\t\t\treturn verticalDirection && ((verticalDirection === \"down\" && isOverBottomHalf) || (verticalDirection === \"up\" && !isOverBottomHalf));\n\t\t}\n\n\t},\n\n\t_getDragVerticalDirection: function() {\n\t\tvar delta = this.positionAbs.top - this.lastPositionAbs.top;\n\t\treturn delta !== 0 && (delta > 0 ? \"down\" : \"up\");\n\t},\n\n\t_getDragHorizontalDirection: function() {\n\t\tvar delta = this.positionAbs.left - this.lastPositionAbs.left;\n\t\treturn delta !== 0 && (delta > 0 ? \"right\" : \"left\");\n\t},\n\n\trefresh: function(event) {\n\t\tthis._refreshItems(event);\n\t\tthis.refreshPositions();\n\t\treturn this;\n\t},\n\n\t_connectWith: function() {\n\t\tvar options = this.options;\n\t\treturn options.connectWith.constructor === String ? [options.connectWith] : options.connectWith;\n\t},\n\n\t_getItemsAsjQuery: function(connected) {\n\n\t\tvar i, j, cur, inst,\n\t\t\titems = [],\n\t\t\tqueries = [],\n\t\t\tconnectWith = this._connectWith();\n\n\t\tif(connectWith && connected) {\n\t\t\tfor (i = connectWith.length - 1; i >= 0; i--){\n\t\t\t\tcur = $(connectWith[i]);\n\t\t\t\tfor ( j = cur.length - 1; j >= 0; j--){\n\t\t\t\t\tinst = $.data(cur[j], this.widgetFullName);\n\t\t\t\t\tif(inst && inst !== this && !inst.options.disabled) {\n\t\t\t\t\t\tqueries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(\".ui-sortable-helper\").not(\".ui-sortable-placeholder\"), inst]);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tqueries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(\".ui-sortable-helper\").not(\".ui-sortable-placeholder\"), this]);\n\n\t\tfor (i = queries.length - 1; i >= 0; i--){\n\t\t\tqueries[i][0].each(function() {\n\t\t\t\titems.push(this);\n\t\t\t});\n\t\t}\n\n\t\treturn $(items);\n\n\t},\n\n\t_removeCurrentsFromItems: function() {\n\n\t\tvar list = this.currentItem.find(\":data(\" + this.widgetName + \"-item)\");\n\n\t\tthis.items = $.grep(this.items, function (item) {\n\t\t\tfor (var j=0; j < list.length; j++) {\n\t\t\t\tif(list[j] === item.item[0]) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn true;\n\t\t});\n\n\t},\n\n\t_refreshItems: function(event) {\n\n\t\tthis.items = [];\n\t\tthis.containers = [this];\n\n\t\tvar i, j, cur, inst, targetData, _queries, item, queriesLength,\n\t\t\titems = this.items,\n\t\t\tqueries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]],\n\t\t\tconnectWith = this._connectWith();\n\n\t\tif(connectWith && this.ready) { //Shouldn't be run the first time through due to massive slow-down\n\t\t\tfor (i = connectWith.length - 1; i >= 0; i--){\n\t\t\t\tcur = $(connectWith[i]);\n\t\t\t\tfor (j = cur.length - 1; j >= 0; j--){\n\t\t\t\t\tinst = $.data(cur[j], this.widgetFullName);\n\t\t\t\t\tif(inst && inst !== this && !inst.options.disabled) {\n\t\t\t\t\t\tqueries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);\n\t\t\t\t\t\tthis.containers.push(inst);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfor (i = queries.length - 1; i >= 0; i--) {\n\t\t\ttargetData = queries[i][1];\n\t\t\t_queries = queries[i][0];\n\n\t\t\tfor (j=0, queriesLength = _queries.length; j < queriesLength; j++) {\n\t\t\t\titem = $(_queries[j]);\n\n\t\t\t\titem.data(this.widgetName + \"-item\", targetData); // Data for target checking (mouse manager)\n\n\t\t\t\titems.push({\n\t\t\t\t\titem: item,\n\t\t\t\t\tinstance: targetData,\n\t\t\t\t\twidth: 0, height: 0,\n\t\t\t\t\tleft: 0, top: 0\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t},\n\n\trefreshPositions: function(fast) {\n\n\t\t//This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change\n\t\tif(this.offsetParent && this.helper) {\n\t\t\tthis.offset.parent = this._getParentOffset();\n\t\t}\n\n\t\tvar i, item, t, p;\n\n\t\tfor (i = this.items.length - 1; i >= 0; i--){\n\t\t\titem = this.items[i];\n\n\t\t\t//We ignore calculating positions of all connected containers when we're not over them\n\t\t\tif(item.instance !== this.currentContainer && this.currentContainer && item.item[0] !== this.currentItem[0]) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tt = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;\n\n\t\t\tif (!fast) {\n\t\t\t\titem.width = t.outerWidth();\n\t\t\t\titem.height = t.outerHeight();\n\t\t\t}\n\n\t\t\tp = t.offset();\n\t\t\titem.left = p.left;\n\t\t\titem.top = p.top;\n\t\t}\n\n\t\tif(this.options.custom && this.options.custom.refreshContainers) {\n\t\t\tthis.options.custom.refreshContainers.call(this);\n\t\t} else {\n\t\t\tfor (i = this.containers.length - 1; i >= 0; i--){\n\t\t\t\tp = this.containers[i].element.offset();\n\t\t\t\tthis.containers[i].containerCache.left = p.left;\n\t\t\t\tthis.containers[i].containerCache.top = p.top;\n\t\t\t\tthis.containers[i].containerCache.width\t= this.containers[i].element.outerWidth();\n\t\t\t\tthis.containers[i].containerCache.height = this.containers[i].element.outerHeight();\n\t\t\t}\n\t\t}\n\n\t\treturn this;\n\t},\n\n\t_createPlaceholder: function(that) {\n\t\tthat = that || this;\n\t\tvar className,\n\t\t\to = that.options;\n\n\t\tif(!o.placeholder || o.placeholder.constructor === String) {\n\t\t\tclassName = o.placeholder;\n\t\t\to.placeholder = {\n\t\t\t\telement: function() {\n\n\t\t\t\t\tvar el = $(document.createElement(that.currentItem[0].nodeName))\n\t\t\t\t\t\t.addClass(className || that.currentItem[0].className+\" ui-sortable-placeholder\")\n\t\t\t\t\t\t.removeClass(\"ui-sortable-helper\")[0];\n\n\t\t\t\t\tif(!className) {\n\t\t\t\t\t\tel.style.visibility = \"hidden\";\n\t\t\t\t\t}\n\n\t\t\t\t\treturn el;\n\t\t\t\t},\n\t\t\t\tupdate: function(container, p) {\n\n\t\t\t\t\t// 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that\n\t\t\t\t\t// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified\n\t\t\t\t\tif(className && !o.forcePlaceholderSize) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t//If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item\n\t\t\t\t\tif(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css(\"paddingTop\")||0, 10) - parseInt(that.currentItem.css(\"paddingBottom\")||0, 10)); }\n\t\t\t\t\tif(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css(\"paddingLeft\")||0, 10) - parseInt(that.currentItem.css(\"paddingRight\")||0, 10)); }\n\t\t\t\t}\n\t\t\t};\n\t\t}\n\n\t\t//Create the placeholder\n\t\tthat.placeholder = $(o.placeholder.element.call(that.element, that.currentItem));\n\n\t\t//Append it after the actual current item\n\t\tthat.currentItem.after(that.placeholder);\n\n\t\t//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)\n\t\to.placeholder.update(that, that.placeholder);\n\n\t},\n\n\t_contactContainers: function(event) {\n\t\tvar i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, base, cur, nearBottom,\n\t\t\tinnermostContainer = null,\n\t\t\tinnermostIndex = null;\n\n\t\t// get innermost container that intersects with item\n\t\tfor (i = this.containers.length - 1; i >= 0; i--) {\n\n\t\t\t// never consider a container that's located within the item itself\n\t\t\tif($.contains(this.currentItem[0], this.containers[i].element[0])) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif(this._intersectsWith(this.containers[i].containerCache)) {\n\n\t\t\t\t// if we've already found a container and it's more \"inner\" than this, then continue\n\t\t\t\tif(innermostContainer && $.contains(this.containers[i].element[0], innermostContainer.element[0])) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tinnermostContainer = this.containers[i];\n\t\t\t\tinnermostIndex = i;\n\n\t\t\t} else {\n\t\t\t\t// container doesn't intersect. trigger \"out\" event if necessary\n\t\t\t\tif(this.containers[i].containerCache.over) {\n\t\t\t\t\tthis.containers[i]._trigger(\"out\", event, this._uiHash(this));\n\t\t\t\t\tthis.containers[i].containerCache.over = 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\n\t\t// if no intersecting containers found, return\n\t\tif(!innermostContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\t// move the item into the container if it's not there already\n\t\tif(this.containers.length === 1) {\n\t\t\tthis.containers[innermostIndex]._trigger(\"over\", event, this._uiHash(this));\n\t\t\tthis.containers[innermostIndex].containerCache.over = 1;\n\t\t} else {\n\n\t\t\t//When entering a new container, we will find the item with the least distance and append our item near it\n\t\t\tdist = 10000;\n\t\t\titemWithLeastDistance = null;\n\t\t\tposProperty = this.containers[innermostIndex].floating ? \"left\" : \"top\";\n\t\t\tsizeProperty = this.containers[innermostIndex].floating ? \"width\" : \"height\";\n\t\t\tbase = this.positionAbs[posProperty] + this.offset.click[posProperty];\n\t\t\tfor (j = this.items.length - 1; j >= 0; j--) {\n\t\t\t\tif(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tif(this.items[j].item[0] === this.currentItem[0]) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tcur = this.items[j].item.offset()[posProperty];\n\t\t\t\tnearBottom = false;\n\t\t\t\tif(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)){\n\t\t\t\t\tnearBottom = true;\n\t\t\t\t\tcur += this.items[j][sizeProperty];\n\t\t\t\t}\n\n\t\t\t\tif(Math.abs(cur - base) < dist) {\n\t\t\t\t\tdist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];\n\t\t\t\t\tthis.direction = nearBottom ? \"up\": \"down\";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t//Check if dropOnEmpty is enabled\n\t\t\tif(!itemWithLeastDistance && !this.options.dropOnEmpty) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.currentContainer = this.containers[innermostIndex];\n\t\t\titemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[innermostIndex].element, true);\n\t\t\tthis._trigger(\"change\", event, this._uiHash());\n\t\t\tthis.containers[innermostIndex]._trigger(\"change\", event, this._uiHash(this));\n\n\t\t\t//Update the placeholder\n\t\t\tthis.options.placeholder.update(this.currentContainer, this.placeholder);\n\n\t\t\tthis.containers[innermostIndex]._trigger(\"over\", event, this._uiHash(this));\n\t\t\tthis.containers[innermostIndex].containerCache.over = 1;\n\t\t}\n\n\n\t},\n\n\t_createHelper: function(event) {\n\n\t\tvar o = this.options,\n\t\t\thelper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper === \"clone\" ? this.currentItem.clone() : this.currentItem);\n\n\t\t//Add the helper to the DOM if that didn't happen already\n\t\tif(!helper.parents(\"body\").length) {\n\t\t\t$(o.appendTo !== \"parent\" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);\n\t\t}\n\n\t\tif(helper[0] === this.currentItem[0]) {\n\t\t\tthis._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css(\"position\"), top: this.currentItem.css(\"top\"), left: this.currentItem.css(\"left\") };\n\t\t}\n\n\t\tif(!helper[0].style.width || o.forceHelperSize) {\n\t\t\thelper.width(this.currentItem.width());\n\t\t}\n\t\tif(!helper[0].style.height || o.forceHelperSize) {\n\t\t\thelper.height(this.currentItem.height());\n\t\t}\n\n\t\treturn helper;\n\n\t},\n\n\t_adjustOffsetFromHelper: function(obj) {\n\t\tif (typeof obj === \"string\") {\n\t\t\tobj = obj.split(\" \");\n\t\t}\n\t\tif ($.isArray(obj)) {\n\t\t\tobj = {left: +obj[0], top: +obj[1] || 0};\n\t\t}\n\t\tif (\"left\" in obj) {\n\t\t\tthis.offset.click.left = obj.left + this.margins.left;\n\t\t}\n\t\tif (\"right\" in obj) {\n\t\t\tthis.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;\n\t\t}\n\t\tif (\"top\" in obj) {\n\t\t\tthis.offset.click.top = obj.top + this.margins.top;\n\t\t}\n\t\tif (\"bottom\" in obj) {\n\t\t\tthis.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;\n\t\t}\n\t},\n\n\t_getParentOffset: function() {\n\n\n\t\t//Get the offsetParent and cache its position\n\t\tthis.offsetParent = this.helper.offsetParent();\n\t\tvar po = this.offsetParent.offset();\n\n\t\t// This is a special case where we need to modify a offset calculated on start, since the following happened:\n\t\t// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent\n\t\t// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that\n\t\t// the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag\n\t\tif(this.cssPosition === \"absolute\" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {\n\t\t\tpo.left += this.scrollParent.scrollLeft();\n\t\t\tpo.top += this.scrollParent.scrollTop();\n\t\t}\n\n\t\t// This needs to be actually done for all browsers, since pageX/pageY includes this information\n\t\t// with an ugly IE fix\n\t\tif( this.offsetParent[0] === document.body || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === \"html\" && $.ui.ie)) {\n\t\t\tpo = { top: 0, left: 0 };\n\t\t}\n\n\t\treturn {\n\t\t\ttop: po.top + (parseInt(this.offsetParent.css(\"borderTopWidth\"),10) || 0),\n\t\t\tleft: po.left + (parseInt(this.offsetParent.css(\"borderLeftWidth\"),10) || 0)\n\t\t};\n\n\t},\n\n\t_getRelativeOffset: function() {\n\n\t\tif(this.cssPosition === \"relative\") {\n\t\t\tvar p = this.currentItem.position();\n\t\t\treturn {\n\t\t\t\ttop: p.top - (parseInt(this.helper.css(\"top\"),10) || 0) + this.scrollParent.scrollTop(),\n\t\t\t\tleft: p.left - (parseInt(this.helper.css(\"left\"),10) || 0) + this.scrollParent.scrollLeft()\n\t\t\t};\n\t\t} else {\n\t\t\treturn { top: 0, left: 0 };\n\t\t}\n\n\t},\n\n\t_cacheMargins: function() {\n\t\tthis.margins = {\n\t\t\tleft: (parseInt(this.currentItem.css(\"marginLeft\"),10) || 0),\n\t\t\ttop: (parseInt(this.currentItem.css(\"marginTop\"),10) || 0)\n\t\t};\n\t},\n\n\t_cacheHelperProportions: function() {\n\t\tthis.helperProportions = {\n\t\t\twidth: this.helper.outerWidth(),\n\t\t\theight: this.helper.outerHeight()\n\t\t};\n\t},\n\n\t_setContainment: function() {\n\n\t\tvar ce, co, over,\n\t\t\to = this.options;\n\t\tif(o.containment === \"parent\") {\n\t\t\to.containment = this.helper[0].parentNode;\n\t\t}\n\t\tif(o.containment === \"document\" || o.containment === \"window\") {\n\t\t\tthis.containment = [\n\t\t\t\t0 - this.offset.relative.left - this.offset.parent.left,\n\t\t\t\t0 - this.offset.relative.top - this.offset.parent.top,\n\t\t\t\t$(o.containment === \"document\" ? document : window).width() - this.helperProportions.width - this.margins.left,\n\t\t\t\t($(o.containment === \"document\" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top\n\t\t\t];\n\t\t}\n\n\t\tif(!(/^(document|window|parent)$/).test(o.containment)) {\n\t\t\tce = $(o.containment)[0];\n\t\t\tco = $(o.containment).offset();\n\t\t\tover = ($(ce).css(\"overflow\") !== \"hidden\");\n\n\t\t\tthis.containment = [\n\t\t\t\tco.left + (parseInt($(ce).css(\"borderLeftWidth\"),10) || 0) + (parseInt($(ce).css(\"paddingLeft\"),10) || 0) - this.margins.left,\n\t\t\t\tco.top + (parseInt($(ce).css(\"borderTopWidth\"),10) || 0) + (parseInt($(ce).css(\"paddingTop\"),10) || 0) - this.margins.top,\n\t\t\t\tco.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css(\"borderLeftWidth\"),10) || 0) - (parseInt($(ce).css(\"paddingRight\"),10) || 0) - this.helperProportions.width - this.margins.left,\n\t\t\t\tco.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css(\"borderTopWidth\"),10) || 0) - (parseInt($(ce).css(\"paddingBottom\"),10) || 0) - this.helperProportions.height - this.margins.top\n\t\t\t];\n\t\t}\n\n\t},\n\n\t_convertPositionTo: function(d, pos) {\n\n\t\tif(!pos) {\n\t\t\tpos = this.position;\n\t\t}\n\t\tvar mod = d === \"absolute\" ? 1 : -1,\n\t\t\tscroll = this.cssPosition === \"absolute\" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent,\n\t\t\tscrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);\n\n\t\treturn {\n\t\t\ttop: (\n\t\t\t\tpos.top\t+\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.relative.top * mod +\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.top * mod -\t\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)\n\t\t\t),\n\t\t\tleft: (\n\t\t\t\tpos.left +\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.relative.left * mod +\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.left * mod\t-\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)\n\t\t\t)\n\t\t};\n\n\t},\n\n\t_generatePosition: function(event) {\n\n\t\tvar top, left,\n\t\t\to = this.options,\n\t\t\tpageX = event.pageX,\n\t\t\tpageY = event.pageY,\n\t\t\tscroll = this.cssPosition === \"absolute\" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);\n\n\t\t// This is another very weird special case that only happens for relative elements:\n\t\t// 1. If the css position is relative\n\t\t// 2. and the scroll parent is the document or similar to the offset parent\n\t\t// we have to refresh the relative offset during the scroll so there are no jumps\n\t\tif(this.cssPosition === \"relative\" && !(this.scrollParent[0] !== document && this.scrollParent[0] !== this.offsetParent[0])) {\n\t\t\tthis.offset.relative = this._getRelativeOffset();\n\t\t}\n\n\t\t/*\n\t\t * - Position constraining -\n\t\t * Constrain the position to a mix of grid, containment.\n\t\t */\n\n\t\tif(this.originalPosition) { //If we are not dragging yet, we won't check for options\n\n\t\t\tif(this.containment) {\n\t\t\t\tif(event.pageX - this.offset.click.left < this.containment[0]) {\n\t\t\t\t\tpageX = this.containment[0] + this.offset.click.left;\n\t\t\t\t}\n\t\t\t\tif(event.pageY - this.offset.click.top < this.containment[1]) {\n\t\t\t\t\tpageY = this.containment[1] + this.offset.click.top;\n\t\t\t\t}\n\t\t\t\tif(event.pageX - this.offset.click.left > this.containment[2]) {\n\t\t\t\t\tpageX = this.containment[2] + this.offset.click.left;\n\t\t\t\t}\n\t\t\t\tif(event.pageY - this.offset.click.top > this.containment[3]) {\n\t\t\t\t\tpageY = this.containment[3] + this.offset.click.top;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif(o.grid) {\n\t\t\t\ttop = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];\n\t\t\t\tpageY = this.containment ? ( (top - this.offset.click.top >= this.containment[1] && top - this.offset.click.top <= this.containment[3]) ? top : ((top - this.offset.click.top >= this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;\n\n\t\t\t\tleft = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];\n\t\t\t\tpageX = this.containment ? ( (left - this.offset.click.left >= this.containment[0] && left - this.offset.click.left <= this.containment[2]) ? left : ((left - this.offset.click.left >= this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;\n\t\t\t}\n\n\t\t}\n\n\t\treturn {\n\t\t\ttop: (\n\t\t\t\tpageY -\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.click.top -\t\t\t\t\t\t\t\t\t\t\t\t\t// Click offset (relative to the element)\n\t\t\t\tthis.offset.relative.top\t-\t\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.top +\t\t\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))\n\t\t\t),\n\t\t\tleft: (\n\t\t\t\tpageX -\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// The absolute mouse position\n\t\t\t\tthis.offset.click.left -\t\t\t\t\t\t\t\t\t\t\t\t// Click offset (relative to the element)\n\t\t\t\tthis.offset.relative.left\t-\t\t\t\t\t\t\t\t\t\t\t// Only for relative positioned nodes: Relative offset from element to offset parent\n\t\t\t\tthis.offset.parent.left +\t\t\t\t\t\t\t\t\t\t\t\t// The offsetParent's offset without borders (offset + border)\n\t\t\t\t( ( this.cssPosition === \"fixed\" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))\n\t\t\t)\n\t\t};\n\n\t},\n\n\t_rearrange: function(event, i, a, hardRefresh) {\n\n\t\ta ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === \"down\" ? i.item[0] : i.item[0].nextSibling));\n\n\t\t//Various things done here to improve the performance:\n\t\t// 1. we create a setTimeout, that calls refreshPositions\n\t\t// 2. on the instance, we have a counter variable, that get's higher after every append\n\t\t// 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same\n\t\t// 4. this lets only the last addition to the timeout stack through\n\t\tthis.counter = this.counter ? ++this.counter : 1;\n\t\tvar counter = this.counter;\n\n\t\tthis._delay(function() {\n\t\t\tif(counter === this.counter) {\n\t\t\t\tthis.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove\n\t\t\t}\n\t\t});\n\n\t},\n\n\t_clear: function(event, noPropagation) {\n\n\t\tthis.reverting = false;\n\t\t// We delay all events that have to be triggered to after the point where the placeholder has been removed and\n\t\t// everything else normalized again\n\t\tvar i,\n\t\t\tdelayedTriggers = [];\n\n\t\t// We first have to update the dom position of the actual currentItem\n\t\t// Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)\n\t\tif(!this._noFinalSort && this.currentItem.parent().length) {\n\t\t\tthis.placeholder.before(this.currentItem);\n\t\t}\n\t\tthis._noFinalSort = null;\n\n\t\tif(this.helper[0] === this.currentItem[0]) {\n\t\t\tfor(i in this._storedCSS) {\n\t\t\t\tif(this._storedCSS[i] === \"auto\" || this._storedCSS[i] === \"static\") {\n\t\t\t\t\tthis._storedCSS[i] = \"\";\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.currentItem.css(this._storedCSS).removeClass(\"ui-sortable-helper\");\n\t\t} else {\n\t\t\tthis.currentItem.show();\n\t\t}\n\n\t\tif(this.fromOutside && !noPropagation) {\n\t\t\tdelayedTriggers.push(function(event) { this._trigger(\"receive\", event, this._uiHash(this.fromOutside)); });\n\t\t}\n\t\tif((this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not(\".ui-sortable-helper\")[0] || this.domPosition.parent !== this.currentItem.parent()[0]) && !noPropagation) {\n\t\t\tdelayedTriggers.push(function(event) { this._trigger(\"update\", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed\n\t\t}\n\n\t\t// Check if the items Container has Changed and trigger appropriate\n\t\t// events.\n\t\tif (this !== this.currentContainer) {\n\t\t\tif(!noPropagation) {\n\t\t\t\tdelayedTriggers.push(function(event) { this._trigger(\"remove\", event, this._uiHash()); });\n\t\t\t\tdelayedTriggers.push((function(c) { return function(event) { c._trigger(\"receive\", event, this._uiHash(this)); }; }).call(this, this.currentContainer));\n\t\t\t\tdelayedTriggers.push((function(c) { return function(event) { c._trigger(\"update\", event, this._uiHash(this)); }; }).call(this, this.currentContainer));\n\t\t\t}\n\t\t}\n\n\n\t\t//Post events to containers\n\t\tfor (i = this.containers.length - 1; i >= 0; i--){\n\t\t\tif(!noPropagation) {\n\t\t\t\tdelayedTriggers.push((function(c) { return function(event) { c._trigger(\"deactivate\", event, this._uiHash(this)); }; }).call(this, this.containers[i]));\n\t\t\t}\n\t\t\tif(this.containers[i].containerCache.over) {\n\t\t\t\tdelayedTriggers.push((function(c) { return function(event) { c._trigger(\"out\", event, this._uiHash(this)); }; }).call(this, this.containers[i]));\n\t\t\t\tthis.containers[i].containerCache.over = 0;\n\t\t\t}\n\t\t}\n\n\t\t//Do what was originally in plugins\n\t\tif(this._storedCursor) {\n\t\t\t$(\"body\").css(\"cursor\", this._storedCursor);\n\t\t}\n\t\tif(this._storedOpacity) {\n\t\t\tthis.helper.css(\"opacity\", this._storedOpacity);\n\t\t}\n\t\tif(this._storedZIndex) {\n\t\t\tthis.helper.css(\"zIndex\", this._storedZIndex === \"auto\" ? \"\" : this._storedZIndex);\n\t\t}\n\n\t\tthis.dragging = false;\n\t\tif(this.cancelHelperRemoval) {\n\t\t\tif(!noPropagation) {\n\t\t\t\tthis._trigger(\"beforeStop\", event, this._uiHash());\n\t\t\t\tfor (i=0; i < delayedTriggers.length; i++) {\n\t\t\t\t\tdelayedTriggers[i].call(this, event);\n\t\t\t\t} //Trigger all delayed events\n\t\t\t\tthis._trigger(\"stop\", event, this._uiHash());\n\t\t\t}\n\n\t\t\tthis.fromOutside = false;\n\t\t\treturn false;\n\t\t}\n\n\t\tif(!noPropagation) {\n\t\t\tthis._trigger(\"beforeStop\", event, this._uiHash());\n\t\t}\n\n\t\t//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!\n\t\tthis.placeholder[0].parentNode.removeChild(this.placeholder[0]);\n\n\t\tif(this.helper[0] !== this.currentItem[0]) {\n\t\t\tthis.helper.remove();\n\t\t}\n\t\tthis.helper = null;\n\n\t\tif(!noPropagation) {\n\t\t\tfor (i=0; i < delayedTriggers.length; i++) {\n\t\t\t\tdelayedTriggers[i].call(this, event);\n\t\t\t} //Trigger all delayed events\n\t\t\tthis._trigger(\"stop\", event, this._uiHash());\n\t\t}\n\n\t\tthis.fromOutside = false;\n\t\treturn true;\n\n\t},\n\n\t_trigger: function() {\n\t\tif ($.Widget.prototype._trigger.apply(this, arguments) === false) {\n\t\t\tthis.cancel();\n\t\t}\n\t},\n\n\t_uiHash: function(_inst) {\n\t\tvar inst = _inst || this;\n\t\treturn {\n\t\t\thelper: inst.helper,\n\t\t\tplaceholder: inst.placeholder || $([]),\n\t\t\tposition: inst.position,\n\t\t\toriginalPosition: inst.originalPosition,\n\t\t\toffset: inst.positionAbs,\n\t\t\titem: inst.currentItem,\n\t\t\tsender: _inst ? _inst.element : null\n\t\t};\n\t}\n\n});\n\n})(jQuery);\n\n;(jQuery.effects || (function($, undefined) {\n\nvar dataSpace = \"ui-effects-\";\n\n$.effects = {\n\teffect: {}\n};\n\n/*!\n * jQuery Color Animations v2.1.2\n * https://github.com/jquery/jquery-color\n *\n * Copyright 2013 jQuery Foundation and other contributors\n * Released under the MIT license.\n * http://jquery.org/license\n *\n * Date: Wed Jan 16 08:47:09 2013 -0600\n */\n(function( jQuery, undefined ) {\n\n\tvar stepHooks = \"backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor\",\n\n\t// plusequals test for += 100 -= 100\n\trplusequals = /^([\\-+])=\\s*(\\d+\\.?\\d*)/,\n\t// a set of RE's that can match strings and generate color tuples.\n\tstringParsers = [{\n\t\t\tre: /rgba?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*(?:,\\s*(\\d?(?:\\.\\d+)?)\\s*)?\\)/,\n\t\t\tparse: function( execResult ) {\n\t\t\t\treturn [\n\t\t\t\t\texecResult[ 1 ],\n\t\t\t\t\texecResult[ 2 ],\n\t\t\t\t\texecResult[ 3 ],\n\t\t\t\t\texecResult[ 4 ]\n\t\t\t\t];\n\t\t\t}\n\t\t}, {\n\t\t\tre: /rgba?\\(\\s*(\\d+(?:\\.\\d+)?)\\%\\s*,\\s*(\\d+(?:\\.\\d+)?)\\%\\s*,\\s*(\\d+(?:\\.\\d+)?)\\%\\s*(?:,\\s*(\\d?(?:\\.\\d+)?)\\s*)?\\)/,\n\t\t\tparse: function( execResult ) {\n\t\t\t\treturn [\n\t\t\t\t\texecResult[ 1 ] * 2.55,\n\t\t\t\t\texecResult[ 2 ] * 2.55,\n\t\t\t\t\texecResult[ 3 ] * 2.55,\n\t\t\t\t\texecResult[ 4 ]\n\t\t\t\t];\n\t\t\t}\n\t\t}, {\n\t\t\t// this regex ignores A-F because it's compared against an already lowercased string\n\t\t\tre: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,\n\t\t\tparse: function( execResult ) {\n\t\t\t\treturn [\n\t\t\t\t\tparseInt( execResult[ 1 ], 16 ),\n\t\t\t\t\tparseInt( execResult[ 2 ], 16 ),\n\t\t\t\t\tparseInt( execResult[ 3 ], 16 )\n\t\t\t\t];\n\t\t\t}\n\t\t}, {\n\t\t\t// this regex ignores A-F because it's compared against an already lowercased string\n\t\t\tre: /#([a-f0-9])([a-f0-9])([a-f0-9])/,\n\t\t\tparse: function( execResult ) {\n\t\t\t\treturn [\n\t\t\t\t\tparseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),\n\t\t\t\t\tparseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),\n\t\t\t\t\tparseInt( execResult[ 3 ] + execResult[ 3 ], 16 )\n\t\t\t\t];\n\t\t\t}\n\t\t}, {\n\t\t\tre: /hsla?\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)\\%\\s*,\\s*(\\d+(?:\\.\\d+)?)\\%\\s*(?:,\\s*(\\d?(?:\\.\\d+)?)\\s*)?\\)/,\n\t\t\tspace: \"hsla\",\n\t\t\tparse: function( execResult ) {\n\t\t\t\treturn [\n\t\t\t\t\texecResult[ 1 ],\n\t\t\t\t\texecResult[ 2 ] / 100,\n\t\t\t\t\texecResult[ 3 ] / 100,\n\t\t\t\t\texecResult[ 4 ]\n\t\t\t\t];\n\t\t\t}\n\t\t}],\n\n\t// jQuery.Color( )\n\tcolor = jQuery.Color = function( color, green, blue, alpha ) {\n\t\treturn new jQuery.Color.fn.parse( color, green, blue, alpha );\n\t},\n\tspaces = {\n\t\trgba: {\n\t\t\tprops: {\n\t\t\t\tred: {\n\t\t\t\t\tidx: 0,\n\t\t\t\t\ttype: \"byte\"\n\t\t\t\t},\n\t\t\t\tgreen: {\n\t\t\t\t\tidx: 1,\n\t\t\t\t\ttype: \"byte\"\n\t\t\t\t},\n\t\t\t\tblue: {\n\t\t\t\t\tidx: 2,\n\t\t\t\t\ttype: \"byte\"\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thsla: {\n\t\t\tprops: {\n\t\t\t\thue: {\n\t\t\t\t\tidx: 0,\n\t\t\t\t\ttype: \"degrees\"\n\t\t\t\t},\n\t\t\t\tsaturation: {\n\t\t\t\t\tidx: 1,\n\t\t\t\t\ttype: \"percent\"\n\t\t\t\t},\n\t\t\t\tlightness: {\n\t\t\t\t\tidx: 2,\n\t\t\t\t\ttype: \"percent\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t},\n\tpropTypes = {\n\t\t\"byte\": {\n\t\t\tfloor: true,\n\t\t\tmax: 255\n\t\t},\n\t\t\"percent\": {\n\t\t\tmax: 1\n\t\t},\n\t\t\"degrees\": {\n\t\t\tmod: 360,\n\t\t\tfloor: true\n\t\t}\n\t},\n\tsupport = color.support = {},\n\n\t// element for support tests\n\tsupportElem = jQuery( \"

        \" )[ 0 ],\n\n\t// colors = jQuery.Color.names\n\tcolors,\n\n\t// local aliases of functions called often\n\teach = jQuery.each;\n\n// determine rgba support immediately\nsupportElem.style.cssText = \"background-color:rgba(1,1,1,.5)\";\nsupport.rgba = supportElem.style.backgroundColor.indexOf( \"rgba\" ) > -1;\n\n// define cache name and alpha properties\n// for rgba and hsla spaces\neach( spaces, function( spaceName, space ) {\n\tspace.cache = \"_\" + spaceName;\n\tspace.props.alpha = {\n\t\tidx: 3,\n\t\ttype: \"percent\",\n\t\tdef: 1\n\t};\n});\n\nfunction clamp( value, prop, allowEmpty ) {\n\tvar type = propTypes[ prop.type ] || {};\n\n\tif ( value == null ) {\n\t\treturn (allowEmpty || !prop.def) ? null : prop.def;\n\t}\n\n\t// ~~ is an short way of doing floor for positive numbers\n\tvalue = type.floor ? ~~value : parseFloat( value );\n\n\t// IE will pass in empty strings as value for alpha,\n\t// which will hit this case\n\tif ( isNaN( value ) ) {\n\t\treturn prop.def;\n\t}\n\n\tif ( type.mod ) {\n\t\t// we add mod before modding to make sure that negatives values\n\t\t// get converted properly: -10 -> 350\n\t\treturn (value + type.mod) % type.mod;\n\t}\n\n\t// for now all property types without mod have min and max\n\treturn 0 > value ? 0 : type.max < value ? type.max : value;\n}\n\nfunction stringParse( string ) {\n\tvar inst = color(),\n\t\trgba = inst._rgba = [];\n\n\tstring = string.toLowerCase();\n\n\teach( stringParsers, function( i, parser ) {\n\t\tvar parsed,\n\t\t\tmatch = parser.re.exec( string ),\n\t\t\tvalues = match && parser.parse( match ),\n\t\t\tspaceName = parser.space || \"rgba\";\n\n\t\tif ( values ) {\n\t\t\tparsed = inst[ spaceName ]( values );\n\n\t\t\t// if this was an rgba parse the assignment might happen twice\n\t\t\t// oh well....\n\t\t\tinst[ spaces[ spaceName ].cache ] = parsed[ spaces[ spaceName ].cache ];\n\t\t\trgba = inst._rgba = parsed._rgba;\n\n\t\t\t// exit each( stringParsers ) here because we matched\n\t\t\treturn false;\n\t\t}\n\t});\n\n\t// Found a stringParser that handled it\n\tif ( rgba.length ) {\n\n\t\t// if this came from a parsed string, force \"transparent\" when alpha is 0\n\t\t// chrome, (and maybe others) return \"transparent\" as rgba(0,0,0,0)\n\t\tif ( rgba.join() === \"0,0,0,0\" ) {\n\t\t\tjQuery.extend( rgba, colors.transparent );\n\t\t}\n\t\treturn inst;\n\t}\n\n\t// named colors\n\treturn colors[ string ];\n}\n\ncolor.fn = jQuery.extend( color.prototype, {\n\tparse: function( red, green, blue, alpha ) {\n\t\tif ( red === undefined ) {\n\t\t\tthis._rgba = [ null, null, null, null ];\n\t\t\treturn this;\n\t\t}\n\t\tif ( red.jquery || red.nodeType ) {\n\t\t\tred = jQuery( red ).css( green );\n\t\t\tgreen = undefined;\n\t\t}\n\n\t\tvar inst = this,\n\t\t\ttype = jQuery.type( red ),\n\t\t\trgba = this._rgba = [];\n\n\t\t// more than 1 argument specified - assume ( red, green, blue, alpha )\n\t\tif ( green !== undefined ) {\n\t\t\tred = [ red, green, blue, alpha ];\n\t\t\ttype = \"array\";\n\t\t}\n\n\t\tif ( type === \"string\" ) {\n\t\t\treturn this.parse( stringParse( red ) || colors._default );\n\t\t}\n\n\t\tif ( type === \"array\" ) {\n\t\t\teach( spaces.rgba.props, function( key, prop ) {\n\t\t\t\trgba[ prop.idx ] = clamp( red[ prop.idx ], prop );\n\t\t\t});\n\t\t\treturn this;\n\t\t}\n\n\t\tif ( type === \"object\" ) {\n\t\t\tif ( red instanceof color ) {\n\t\t\t\teach( spaces, function( spaceName, space ) {\n\t\t\t\t\tif ( red[ space.cache ] ) {\n\t\t\t\t\t\tinst[ space.cache ] = red[ space.cache ].slice();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\teach( spaces, function( spaceName, space ) {\n\t\t\t\t\tvar cache = space.cache;\n\t\t\t\t\teach( space.props, function( key, prop ) {\n\n\t\t\t\t\t\t// if the cache doesn't exist, and we know how to convert\n\t\t\t\t\t\tif ( !inst[ cache ] && space.to ) {\n\n\t\t\t\t\t\t\t// if the value was null, we don't need to copy it\n\t\t\t\t\t\t\t// if the key was alpha, we don't need to copy it either\n\t\t\t\t\t\t\tif ( key === \"alpha\" || red[ key ] == null ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tinst[ cache ] = space.to( inst._rgba );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// this is the only case where we allow nulls for ALL properties.\n\t\t\t\t\t\t// call clamp with alwaysAllowEmpty\n\t\t\t\t\t\tinst[ cache ][ prop.idx ] = clamp( red[ key ], prop, true );\n\t\t\t\t\t});\n\n\t\t\t\t\t// everything defined but alpha?\n\t\t\t\t\tif ( inst[ cache ] && jQuery.inArray( null, inst[ cache ].slice( 0, 3 ) ) < 0 ) {\n\t\t\t\t\t\t// use the default of 1\n\t\t\t\t\t\tinst[ cache ][ 3 ] = 1;\n\t\t\t\t\t\tif ( space.from ) {\n\t\t\t\t\t\t\tinst._rgba = space.from( inst[ cache ] );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn this;\n\t\t}\n\t},\n\tis: function( compare ) {\n\t\tvar is = color( compare ),\n\t\t\tsame = true,\n\t\t\tinst = this;\n\n\t\teach( spaces, function( _, space ) {\n\t\t\tvar localCache,\n\t\t\t\tisCache = is[ space.cache ];\n\t\t\tif (isCache) {\n\t\t\t\tlocalCache = inst[ space.cache ] || space.to && space.to( inst._rgba ) || [];\n\t\t\t\teach( space.props, function( _, prop ) {\n\t\t\t\t\tif ( isCache[ prop.idx ] != null ) {\n\t\t\t\t\t\tsame = ( isCache[ prop.idx ] === localCache[ prop.idx ] );\n\t\t\t\t\t\treturn same;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn same;\n\t\t});\n\t\treturn same;\n\t},\n\t_space: function() {\n\t\tvar used = [],\n\t\t\tinst = this;\n\t\teach( spaces, function( spaceName, space ) {\n\t\t\tif ( inst[ space.cache ] ) {\n\t\t\t\tused.push( spaceName );\n\t\t\t}\n\t\t});\n\t\treturn used.pop();\n\t},\n\ttransition: function( other, distance ) {\n\t\tvar end = color( other ),\n\t\t\tspaceName = end._space(),\n\t\t\tspace = spaces[ spaceName ],\n\t\t\tstartColor = this.alpha() === 0 ? color( \"transparent\" ) : this,\n\t\t\tstart = startColor[ space.cache ] || space.to( startColor._rgba ),\n\t\t\tresult = start.slice();\n\n\t\tend = end[ space.cache ];\n\t\teach( space.props, function( key, prop ) {\n\t\t\tvar index = prop.idx,\n\t\t\t\tstartValue = start[ index ],\n\t\t\t\tendValue = end[ index ],\n\t\t\t\ttype = propTypes[ prop.type ] || {};\n\n\t\t\t// if null, don't override start value\n\t\t\tif ( endValue === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\t// if null - use end\n\t\t\tif ( startValue === null ) {\n\t\t\t\tresult[ index ] = endValue;\n\t\t\t} else {\n\t\t\t\tif ( type.mod ) {\n\t\t\t\t\tif ( endValue - startValue > type.mod / 2 ) {\n\t\t\t\t\t\tstartValue += type.mod;\n\t\t\t\t\t} else if ( startValue - endValue > type.mod / 2 ) {\n\t\t\t\t\t\tstartValue -= type.mod;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tresult[ index ] = clamp( ( endValue - startValue ) * distance + startValue, prop );\n\t\t\t}\n\t\t});\n\t\treturn this[ spaceName ]( result );\n\t},\n\tblend: function( opaque ) {\n\t\t// if we are already opaque - return ourself\n\t\tif ( this._rgba[ 3 ] === 1 ) {\n\t\t\treturn this;\n\t\t}\n\n\t\tvar rgb = this._rgba.slice(),\n\t\t\ta = rgb.pop(),\n\t\t\tblend = color( opaque )._rgba;\n\n\t\treturn color( jQuery.map( rgb, function( v, i ) {\n\t\t\treturn ( 1 - a ) * blend[ i ] + a * v;\n\t\t}));\n\t},\n\ttoRgbaString: function() {\n\t\tvar prefix = \"rgba(\",\n\t\t\trgba = jQuery.map( this._rgba, function( v, i ) {\n\t\t\t\treturn v == null ? ( i > 2 ? 1 : 0 ) : v;\n\t\t\t});\n\n\t\tif ( rgba[ 3 ] === 1 ) {\n\t\t\trgba.pop();\n\t\t\tprefix = \"rgb(\";\n\t\t}\n\n\t\treturn prefix + rgba.join() + \")\";\n\t},\n\ttoHslaString: function() {\n\t\tvar prefix = \"hsla(\",\n\t\t\thsla = jQuery.map( this.hsla(), function( v, i ) {\n\t\t\t\tif ( v == null ) {\n\t\t\t\t\tv = i > 2 ? 1 : 0;\n\t\t\t\t}\n\n\t\t\t\t// catch 1 and 2\n\t\t\t\tif ( i && i < 3 ) {\n\t\t\t\t\tv = Math.round( v * 100 ) + \"%\";\n\t\t\t\t}\n\t\t\t\treturn v;\n\t\t\t});\n\n\t\tif ( hsla[ 3 ] === 1 ) {\n\t\t\thsla.pop();\n\t\t\tprefix = \"hsl(\";\n\t\t}\n\t\treturn prefix + hsla.join() + \")\";\n\t},\n\ttoHexString: function( includeAlpha ) {\n\t\tvar rgba = this._rgba.slice(),\n\t\t\talpha = rgba.pop();\n\n\t\tif ( includeAlpha ) {\n\t\t\trgba.push( ~~( alpha * 255 ) );\n\t\t}\n\n\t\treturn \"#\" + jQuery.map( rgba, function( v ) {\n\n\t\t\t// default to 0 when nulls exist\n\t\t\tv = ( v || 0 ).toString( 16 );\n\t\t\treturn v.length === 1 ? \"0\" + v : v;\n\t\t}).join(\"\");\n\t},\n\ttoString: function() {\n\t\treturn this._rgba[ 3 ] === 0 ? \"transparent\" : this.toRgbaString();\n\t}\n});\ncolor.fn.parse.prototype = color.fn;\n\n// hsla conversions adapted from:\n// https://code.google.com/p/maashaack/source/browse/packages/graphics/trunk/src/graphics/colors/HUE2RGB.as?r=5021\n\nfunction hue2rgb( p, q, h ) {\n\th = ( h + 1 ) % 1;\n\tif ( h * 6 < 1 ) {\n\t\treturn p + (q - p) * h * 6;\n\t}\n\tif ( h * 2 < 1) {\n\t\treturn q;\n\t}\n\tif ( h * 3 < 2 ) {\n\t\treturn p + (q - p) * ((2/3) - h) * 6;\n\t}\n\treturn p;\n}\n\nspaces.hsla.to = function ( rgba ) {\n\tif ( rgba[ 0 ] == null || rgba[ 1 ] == null || rgba[ 2 ] == null ) {\n\t\treturn [ null, null, null, rgba[ 3 ] ];\n\t}\n\tvar r = rgba[ 0 ] / 255,\n\t\tg = rgba[ 1 ] / 255,\n\t\tb = rgba[ 2 ] / 255,\n\t\ta = rgba[ 3 ],\n\t\tmax = Math.max( r, g, b ),\n\t\tmin = Math.min( r, g, b ),\n\t\tdiff = max - min,\n\t\tadd = max + min,\n\t\tl = add * 0.5,\n\t\th, s;\n\n\tif ( min === max ) {\n\t\th = 0;\n\t} else if ( r === max ) {\n\t\th = ( 60 * ( g - b ) / diff ) + 360;\n\t} else if ( g === max ) {\n\t\th = ( 60 * ( b - r ) / diff ) + 120;\n\t} else {\n\t\th = ( 60 * ( r - g ) / diff ) + 240;\n\t}\n\n\t// chroma (diff) == 0 means greyscale which, by definition, saturation = 0%\n\t// otherwise, saturation is based on the ratio of chroma (diff) to lightness (add)\n\tif ( diff === 0 ) {\n\t\ts = 0;\n\t} else if ( l <= 0.5 ) {\n\t\ts = diff / add;\n\t} else {\n\t\ts = diff / ( 2 - add );\n\t}\n\treturn [ Math.round(h) % 360, s, l, a == null ? 1 : a ];\n};\n\nspaces.hsla.from = function ( hsla ) {\n\tif ( hsla[ 0 ] == null || hsla[ 1 ] == null || hsla[ 2 ] == null ) {\n\t\treturn [ null, null, null, hsla[ 3 ] ];\n\t}\n\tvar h = hsla[ 0 ] / 360,\n\t\ts = hsla[ 1 ],\n\t\tl = hsla[ 2 ],\n\t\ta = hsla[ 3 ],\n\t\tq = l <= 0.5 ? l * ( 1 + s ) : l + s - l * s,\n\t\tp = 2 * l - q;\n\n\treturn [\n\t\tMath.round( hue2rgb( p, q, h + ( 1 / 3 ) ) * 255 ),\n\t\tMath.round( hue2rgb( p, q, h ) * 255 ),\n\t\tMath.round( hue2rgb( p, q, h - ( 1 / 3 ) ) * 255 ),\n\t\ta\n\t];\n};\n\n\neach( spaces, function( spaceName, space ) {\n\tvar props = space.props,\n\t\tcache = space.cache,\n\t\tto = space.to,\n\t\tfrom = space.from;\n\n\t// makes rgba() and hsla()\n\tcolor.fn[ spaceName ] = function( value ) {\n\n\t\t// generate a cache for this space if it doesn't exist\n\t\tif ( to && !this[ cache ] ) {\n\t\t\tthis[ cache ] = to( this._rgba );\n\t\t}\n\t\tif ( value === undefined ) {\n\t\t\treturn this[ cache ].slice();\n\t\t}\n\n\t\tvar ret,\n\t\t\ttype = jQuery.type( value ),\n\t\t\tarr = ( type === \"array\" || type === \"object\" ) ? value : arguments,\n\t\t\tlocal = this[ cache ].slice();\n\n\t\teach( props, function( key, prop ) {\n\t\t\tvar val = arr[ type === \"object\" ? key : prop.idx ];\n\t\t\tif ( val == null ) {\n\t\t\t\tval = local[ prop.idx ];\n\t\t\t}\n\t\t\tlocal[ prop.idx ] = clamp( val, prop );\n\t\t});\n\n\t\tif ( from ) {\n\t\t\tret = color( from( local ) );\n\t\t\tret[ cache ] = local;\n\t\t\treturn ret;\n\t\t} else {\n\t\t\treturn color( local );\n\t\t}\n\t};\n\n\t// makes red() green() blue() alpha() hue() saturation() lightness()\n\teach( props, function( key, prop ) {\n\t\t// alpha is included in more than one space\n\t\tif ( color.fn[ key ] ) {\n\t\t\treturn;\n\t\t}\n\t\tcolor.fn[ key ] = function( value ) {\n\t\t\tvar vtype = jQuery.type( value ),\n\t\t\t\tfn = ( key === \"alpha\" ? ( this._hsla ? \"hsla\" : \"rgba\" ) : spaceName ),\n\t\t\t\tlocal = this[ fn ](),\n\t\t\t\tcur = local[ prop.idx ],\n\t\t\t\tmatch;\n\n\t\t\tif ( vtype === \"undefined\" ) {\n\t\t\t\treturn cur;\n\t\t\t}\n\n\t\t\tif ( vtype === \"function\" ) {\n\t\t\t\tvalue = value.call( this, cur );\n\t\t\t\tvtype = jQuery.type( value );\n\t\t\t}\n\t\t\tif ( value == null && prop.empty ) {\n\t\t\t\treturn this;\n\t\t\t}\n\t\t\tif ( vtype === \"string\" ) {\n\t\t\t\tmatch = rplusequals.exec( value );\n\t\t\t\tif ( match ) {\n\t\t\t\t\tvalue = cur + parseFloat( match[ 2 ] ) * ( match[ 1 ] === \"+\" ? 1 : -1 );\n\t\t\t\t}\n\t\t\t}\n\t\t\tlocal[ prop.idx ] = value;\n\t\t\treturn this[ fn ]( local );\n\t\t};\n\t});\n});\n\n// add cssHook and .fx.step function for each named hook.\n// accept a space separated string of properties\ncolor.hook = function( hook ) {\n\tvar hooks = hook.split( \" \" );\n\teach( hooks, function( i, hook ) {\n\t\tjQuery.cssHooks[ hook ] = {\n\t\t\tset: function( elem, value ) {\n\t\t\t\tvar parsed, curElem,\n\t\t\t\t\tbackgroundColor = \"\";\n\n\t\t\t\tif ( value !== \"transparent\" && ( jQuery.type( value ) !== \"string\" || ( parsed = stringParse( value ) ) ) ) {\n\t\t\t\t\tvalue = color( parsed || value );\n\t\t\t\t\tif ( !support.rgba && value._rgba[ 3 ] !== 1 ) {\n\t\t\t\t\t\tcurElem = hook === \"backgroundColor\" ? elem.parentNode : elem;\n\t\t\t\t\t\twhile (\n\t\t\t\t\t\t\t(backgroundColor === \"\" || backgroundColor === \"transparent\") &&\n\t\t\t\t\t\t\tcurElem && curElem.style\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\t\tbackgroundColor = jQuery.css( curElem, \"backgroundColor\" );\n\t\t\t\t\t\t\t\tcurElem = curElem.parentNode;\n\t\t\t\t\t\t\t} catch ( e ) {\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tvalue = value.blend( backgroundColor && backgroundColor !== \"transparent\" ?\n\t\t\t\t\t\t\tbackgroundColor :\n\t\t\t\t\t\t\t\"_default\" );\n\t\t\t\t\t}\n\n\t\t\t\t\tvalue = value.toRgbaString();\n\t\t\t\t}\n\t\t\t\ttry {\n\t\t\t\t\telem.style[ hook ] = value;\n\t\t\t\t} catch( e ) {\n\t\t\t\t\t// wrapped to prevent IE from throwing errors on \"invalid\" values like 'auto' or 'inherit'\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tjQuery.fx.step[ hook ] = function( fx ) {\n\t\t\tif ( !fx.colorInit ) {\n\t\t\t\tfx.start = color( fx.elem, hook );\n\t\t\t\tfx.end = color( fx.end );\n\t\t\t\tfx.colorInit = true;\n\t\t\t}\n\t\t\tjQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );\n\t\t};\n\t});\n\n};\n\ncolor.hook( stepHooks );\n\njQuery.cssHooks.borderColor = {\n\texpand: function( value ) {\n\t\tvar expanded = {};\n\n\t\teach( [ \"Top\", \"Right\", \"Bottom\", \"Left\" ], function( i, part ) {\n\t\t\texpanded[ \"border\" + part + \"Color\" ] = value;\n\t\t});\n\t\treturn expanded;\n\t}\n};\n\n// Basic color names only.\n// Usage of any of the other color names requires adding yourself or including\n// jquery.color.svg-names.js.\ncolors = jQuery.Color.names = {\n\t// 4.1. Basic color keywords\n\taqua: \"#00ffff\",\n\tblack: \"#000000\",\n\tblue: \"#0000ff\",\n\tfuchsia: \"#ff00ff\",\n\tgray: \"#808080\",\n\tgreen: \"#008000\",\n\tlime: \"#00ff00\",\n\tmaroon: \"#800000\",\n\tnavy: \"#000080\",\n\tolive: \"#808000\",\n\tpurple: \"#800080\",\n\tred: \"#ff0000\",\n\tsilver: \"#c0c0c0\",\n\tteal: \"#008080\",\n\twhite: \"#ffffff\",\n\tyellow: \"#ffff00\",\n\n\t// 4.2.3. \"transparent\" color keyword\n\ttransparent: [ null, null, null, 0 ],\n\n\t_default: \"#ffffff\"\n};\n\n})( jQuery );\n\n\n/******************************************************************************/\n/****************************** CLASS ANIMATIONS ******************************/\n/******************************************************************************/\n(function() {\n\nvar classAnimationActions = [ \"add\", \"remove\", \"toggle\" ],\n\tshorthandStyles = {\n\t\tborder: 1,\n\t\tborderBottom: 1,\n\t\tborderColor: 1,\n\t\tborderLeft: 1,\n\t\tborderRight: 1,\n\t\tborderTop: 1,\n\t\tborderWidth: 1,\n\t\tmargin: 1,\n\t\tpadding: 1\n\t};\n\n$.each([ \"borderLeftStyle\", \"borderRightStyle\", \"borderBottomStyle\", \"borderTopStyle\" ], function( _, prop ) {\n\t$.fx.step[ prop ] = function( fx ) {\n\t\tif ( fx.end !== \"none\" && !fx.setAttr || fx.pos === 1 && !fx.setAttr ) {\n\t\t\tjQuery.style( fx.elem, prop, fx.end );\n\t\t\tfx.setAttr = true;\n\t\t}\n\t};\n});\n\nfunction getElementStyles( elem ) {\n\tvar key, len,\n\t\tstyle = elem.ownerDocument.defaultView ?\n\t\t\telem.ownerDocument.defaultView.getComputedStyle( elem, null ) :\n\t\t\telem.currentStyle,\n\t\tstyles = {};\n\n\tif ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {\n\t\tlen = style.length;\n\t\twhile ( len-- ) {\n\t\t\tkey = style[ len ];\n\t\t\tif ( typeof style[ key ] === \"string\" ) {\n\t\t\t\tstyles[ $.camelCase( key ) ] = style[ key ];\n\t\t\t}\n\t\t}\n\t// support: Opera, IE <9\n\t} else {\n\t\tfor ( key in style ) {\n\t\t\tif ( typeof style[ key ] === \"string\" ) {\n\t\t\t\tstyles[ key ] = style[ key ];\n\t\t\t}\n\t\t}\n\t}\n\n\treturn styles;\n}\n\n\nfunction styleDifference( oldStyle, newStyle ) {\n\tvar diff = {},\n\t\tname, value;\n\n\tfor ( name in newStyle ) {\n\t\tvalue = newStyle[ name ];\n\t\tif ( oldStyle[ name ] !== value ) {\n\t\t\tif ( !shorthandStyles[ name ] ) {\n\t\t\t\tif ( $.fx.step[ name ] || !isNaN( parseFloat( value ) ) ) {\n\t\t\t\t\tdiff[ name ] = value;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn diff;\n}\n\n// support: jQuery <1.8\nif ( !$.fn.addBack ) {\n\t$.fn.addBack = function( selector ) {\n\t\treturn this.add( selector == null ?\n\t\t\tthis.prevObject : this.prevObject.filter( selector )\n\t\t);\n\t};\n}\n\n$.effects.animateClass = function( value, duration, easing, callback ) {\n\tvar o = $.speed( duration, easing, callback );\n\n\treturn this.queue( function() {\n\t\tvar animated = $( this ),\n\t\t\tbaseClass = animated.attr( \"class\" ) || \"\",\n\t\t\tapplyClassChange,\n\t\t\tallAnimations = o.children ? animated.find( \"*\" ).addBack() : animated;\n\n\t\t// map the animated objects to store the original styles.\n\t\tallAnimations = allAnimations.map(function() {\n\t\t\tvar el = $( this );\n\t\t\treturn {\n\t\t\t\tel: el,\n\t\t\t\tstart: getElementStyles( this )\n\t\t\t};\n\t\t});\n\n\t\t// apply class change\n\t\tapplyClassChange = function() {\n\t\t\t$.each( classAnimationActions, function(i, action) {\n\t\t\t\tif ( value[ action ] ) {\n\t\t\t\t\tanimated[ action + \"Class\" ]( value[ action ] );\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\t\tapplyClassChange();\n\n\t\t// map all animated objects again - calculate new styles and diff\n\t\tallAnimations = allAnimations.map(function() {\n\t\t\tthis.end = getElementStyles( this.el[ 0 ] );\n\t\t\tthis.diff = styleDifference( this.start, this.end );\n\t\t\treturn this;\n\t\t});\n\n\t\t// apply original class\n\t\tanimated.attr( \"class\", baseClass );\n\n\t\t// map all animated objects again - this time collecting a promise\n\t\tallAnimations = allAnimations.map(function() {\n\t\t\tvar styleInfo = this,\n\t\t\t\tdfd = $.Deferred(),\n\t\t\t\topts = $.extend({}, o, {\n\t\t\t\t\tqueue: false,\n\t\t\t\t\tcomplete: function() {\n\t\t\t\t\t\tdfd.resolve( styleInfo );\n\t\t\t\t\t}\n\t\t\t\t});\n\n\t\t\tthis.el.animate( this.diff, opts );\n\t\t\treturn dfd.promise();\n\t\t});\n\n\t\t// once all animations have completed:\n\t\t$.when.apply( $, allAnimations.get() ).done(function() {\n\n\t\t\t// set the final class\n\t\t\tapplyClassChange();\n\n\t\t\t// for each animated element,\n\t\t\t// clear all css properties that were animated\n\t\t\t$.each( arguments, function() {\n\t\t\t\tvar el = this.el;\n\t\t\t\t$.each( this.diff, function(key) {\n\t\t\t\t\tel.css( key, \"\" );\n\t\t\t\t});\n\t\t\t});\n\n\t\t\t// this is guarnteed to be there if you use jQuery.speed()\n\t\t\t// it also handles dequeuing the next anim...\n\t\t\to.complete.call( animated[ 0 ] );\n\t\t});\n\t});\n};\n\n$.fn.extend({\n\t_addClass: $.fn.addClass,\n\taddClass: function( classNames, speed, easing, callback ) {\n\t\treturn speed ?\n\t\t\t$.effects.animateClass.call( this,\n\t\t\t\t{ add: classNames }, speed, easing, callback ) :\n\t\t\tthis._addClass( classNames );\n\t},\n\n\t_removeClass: $.fn.removeClass,\n\tremoveClass: function( classNames, speed, easing, callback ) {\n\t\treturn arguments.length > 1 ?\n\t\t\t$.effects.animateClass.call( this,\n\t\t\t\t{ remove: classNames }, speed, easing, callback ) :\n\t\t\tthis._removeClass.apply( this, arguments );\n\t},\n\n\t_toggleClass: $.fn.toggleClass,\n\ttoggleClass: function( classNames, force, speed, easing, callback ) {\n\t\tif ( typeof force === \"boolean\" || force === undefined ) {\n\t\t\tif ( !speed ) {\n\t\t\t\t// without speed parameter\n\t\t\t\treturn this._toggleClass( classNames, force );\n\t\t\t} else {\n\t\t\t\treturn $.effects.animateClass.call( this,\n\t\t\t\t\t(force ? { add: classNames } : { remove: classNames }),\n\t\t\t\t\tspeed, easing, callback );\n\t\t\t}\n\t\t} else {\n\t\t\t// without force parameter\n\t\t\treturn $.effects.animateClass.call( this,\n\t\t\t\t{ toggle: classNames }, force, speed, easing );\n\t\t}\n\t},\n\n\tswitchClass: function( remove, add, speed, easing, callback) {\n\t\treturn $.effects.animateClass.call( this, {\n\t\t\tadd: add,\n\t\t\tremove: remove\n\t\t}, speed, easing, callback );\n\t}\n});\n\n})();\n\n/******************************************************************************/\n/*********************************** EFFECTS **********************************/\n/******************************************************************************/\n\n(function() {\n\n$.extend( $.effects, {\n\tversion: \"1.10.1\",\n\n\t// Saves a set of properties in a data storage\n\tsave: function( element, set ) {\n\t\tfor( var i=0; i < set.length; i++ ) {\n\t\t\tif ( set[ i ] !== null ) {\n\t\t\t\telement.data( dataSpace + set[ i ], element[ 0 ].style[ set[ i ] ] );\n\t\t\t}\n\t\t}\n\t},\n\n\t// Restores a set of previously saved properties from a data storage\n\trestore: function( element, set ) {\n\t\tvar val, i;\n\t\tfor( i=0; i < set.length; i++ ) {\n\t\t\tif ( set[ i ] !== null ) {\n\t\t\t\tval = element.data( dataSpace + set[ i ] );\n\t\t\t\t// support: jQuery 1.6.2\n\t\t\t\t// http://bugs.jquery.com/ticket/9917\n\t\t\t\t// jQuery 1.6.2 incorrectly returns undefined for any falsy value.\n\t\t\t\t// We can't differentiate between \"\" and 0 here, so we just assume\n\t\t\t\t// empty string since it's likely to be a more common value...\n\t\t\t\tif ( val === undefined ) {\n\t\t\t\t\tval = \"\";\n\t\t\t\t}\n\t\t\t\telement.css( set[ i ], val );\n\t\t\t}\n\t\t}\n\t},\n\n\tsetMode: function( el, mode ) {\n\t\tif (mode === \"toggle\") {\n\t\t\tmode = el.is( \":hidden\" ) ? \"show\" : \"hide\";\n\t\t}\n\t\treturn mode;\n\t},\n\n\t// Translates a [top,left] array into a baseline value\n\t// this should be a little more flexible in the future to handle a string & hash\n\tgetBaseline: function( origin, original ) {\n\t\tvar y, x;\n\t\tswitch ( origin[ 0 ] ) {\n\t\t\tcase \"top\": y = 0; break;\n\t\t\tcase \"middle\": y = 0.5; break;\n\t\t\tcase \"bottom\": y = 1; break;\n\t\t\tdefault: y = origin[ 0 ] / original.height;\n\t\t}\n\t\tswitch ( origin[ 1 ] ) {\n\t\t\tcase \"left\": x = 0; break;\n\t\t\tcase \"center\": x = 0.5; break;\n\t\t\tcase \"right\": x = 1; break;\n\t\t\tdefault: x = origin[ 1 ] / original.width;\n\t\t}\n\t\treturn {\n\t\t\tx: x,\n\t\t\ty: y\n\t\t};\n\t},\n\n\t// Wraps the element around a wrapper that copies position properties\n\tcreateWrapper: function( element ) {\n\n\t\t// if the element is already wrapped, return it\n\t\tif ( element.parent().is( \".ui-effects-wrapper\" )) {\n\t\t\treturn element.parent();\n\t\t}\n\n\t\t// wrap the element\n\t\tvar props = {\n\t\t\t\twidth: element.outerWidth(true),\n\t\t\t\theight: element.outerHeight(true),\n\t\t\t\t\"float\": element.css( \"float\" )\n\t\t\t},\n\t\t\twrapper = $( \"

        \" )\n\t\t\t\t.addClass( \"ui-effects-wrapper\" )\n\t\t\t\t.css({\n\t\t\t\t\tfontSize: \"100%\",\n\t\t\t\t\tbackground: \"transparent\",\n\t\t\t\t\tborder: \"none\",\n\t\t\t\t\tmargin: 0,\n\t\t\t\t\tpadding: 0\n\t\t\t\t}),\n\t\t\t// Store the size in case width/height are defined in % - Fixes #5245\n\t\t\tsize = {\n\t\t\t\twidth: element.width(),\n\t\t\t\theight: element.height()\n\t\t\t},\n\t\t\tactive = document.activeElement;\n\n\t\t// support: Firefox\n\t\t// Firefox incorrectly exposes anonymous content\n\t\t// https://bugzilla.mozilla.org/show_bug.cgi?id=561664\n\t\ttry {\n\t\t\tactive.id;\n\t\t} catch( e ) {\n\t\t\tactive = document.body;\n\t\t}\n\n\t\telement.wrap( wrapper );\n\n\t\t// Fixes #7595 - Elements lose focus when wrapped.\n\t\tif ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {\n\t\t\t$( active ).focus();\n\t\t}\n\n\t\twrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually lose the reference to the wrapped element\n\n\t\t// transfer positioning properties to the wrapper\n\t\tif ( element.css( \"position\" ) === \"static\" ) {\n\t\t\twrapper.css({ position: \"relative\" });\n\t\t\telement.css({ position: \"relative\" });\n\t\t} else {\n\t\t\t$.extend( props, {\n\t\t\t\tposition: element.css( \"position\" ),\n\t\t\t\tzIndex: element.css( \"z-index\" )\n\t\t\t});\n\t\t\t$.each([ \"top\", \"left\", \"bottom\", \"right\" ], function(i, pos) {\n\t\t\t\tprops[ pos ] = element.css( pos );\n\t\t\t\tif ( isNaN( parseInt( props[ pos ], 10 ) ) ) {\n\t\t\t\t\tprops[ pos ] = \"auto\";\n\t\t\t\t}\n\t\t\t});\n\t\t\telement.css({\n\t\t\t\tposition: \"relative\",\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: \"auto\",\n\t\t\t\tbottom: \"auto\"\n\t\t\t});\n\t\t}\n\t\telement.css(size);\n\n\t\treturn wrapper.css( props ).show();\n\t},\n\n\tremoveWrapper: function( element ) {\n\t\tvar active = document.activeElement;\n\n\t\tif ( element.parent().is( \".ui-effects-wrapper\" ) ) {\n\t\t\telement.parent().replaceWith( element );\n\n\t\t\t// Fixes #7595 - Elements lose focus when wrapped.\n\t\t\tif ( element[ 0 ] === active || $.contains( element[ 0 ], active ) ) {\n\t\t\t\t$( active ).focus();\n\t\t\t}\n\t\t}\n\n\n\t\treturn element;\n\t},\n\n\tsetTransition: function( element, list, factor, value ) {\n\t\tvalue = value || {};\n\t\t$.each( list, function( i, x ) {\n\t\t\tvar unit = element.cssUnit( x );\n\t\t\tif ( unit[ 0 ] > 0 ) {\n\t\t\t\tvalue[ x ] = unit[ 0 ] * factor + unit[ 1 ];\n\t\t\t}\n\t\t});\n\t\treturn value;\n\t}\n});\n\n// return an effect options object for the given parameters:\nfunction _normalizeArguments( effect, options, speed, callback ) {\n\n\t// allow passing all options as the first parameter\n\tif ( $.isPlainObject( effect ) ) {\n\t\toptions = effect;\n\t\teffect = effect.effect;\n\t}\n\n\t// convert to an object\n\teffect = { effect: effect };\n\n\t// catch (effect, null, ...)\n\tif ( options == null ) {\n\t\toptions = {};\n\t}\n\n\t// catch (effect, callback)\n\tif ( $.isFunction( options ) ) {\n\t\tcallback = options;\n\t\tspeed = null;\n\t\toptions = {};\n\t}\n\n\t// catch (effect, speed, ?)\n\tif ( typeof options === \"number\" || $.fx.speeds[ options ] ) {\n\t\tcallback = speed;\n\t\tspeed = options;\n\t\toptions = {};\n\t}\n\n\t// catch (effect, options, callback)\n\tif ( $.isFunction( speed ) ) {\n\t\tcallback = speed;\n\t\tspeed = null;\n\t}\n\n\t// add options to effect\n\tif ( options ) {\n\t\t$.extend( effect, options );\n\t}\n\n\tspeed = speed || options.duration;\n\teffect.duration = $.fx.off ? 0 :\n\t\ttypeof speed === \"number\" ? speed :\n\t\tspeed in $.fx.speeds ? $.fx.speeds[ speed ] :\n\t\t$.fx.speeds._default;\n\n\teffect.complete = callback || options.complete;\n\n\treturn effect;\n}\n\nfunction standardSpeed( speed ) {\n\t// valid standard speeds\n\tif ( !speed || typeof speed === \"number\" || $.fx.speeds[ speed ] ) {\n\t\treturn true;\n\t}\n\n\t// invalid strings - treat as \"normal\" speed\n\treturn typeof speed === \"string\" && !$.effects.effect[ speed ];\n}\n\n$.fn.extend({\n\teffect: function( /* effect, options, speed, callback */ ) {\n\t\tvar args = _normalizeArguments.apply( this, arguments ),\n\t\t\tmode = args.mode,\n\t\t\tqueue = args.queue,\n\t\t\teffectMethod = $.effects.effect[ args.effect ];\n\n\t\tif ( $.fx.off || !effectMethod ) {\n\t\t\t// delegate to the original method (e.g., .show()) if possible\n\t\t\tif ( mode ) {\n\t\t\t\treturn this[ mode ]( args.duration, args.complete );\n\t\t\t} else {\n\t\t\t\treturn this.each( function() {\n\t\t\t\t\tif ( args.complete ) {\n\t\t\t\t\t\targs.complete.call( this );\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tfunction run( next ) {\n\t\t\tvar elem = $( this ),\n\t\t\t\tcomplete = args.complete,\n\t\t\t\tmode = args.mode;\n\n\t\t\tfunction done() {\n\t\t\t\tif ( $.isFunction( complete ) ) {\n\t\t\t\t\tcomplete.call( elem[0] );\n\t\t\t\t}\n\t\t\t\tif ( $.isFunction( next ) ) {\n\t\t\t\t\tnext();\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// if the element is hiddden and mode is hide,\n\t\t\t// or element is visible and mode is show\n\t\t\tif ( elem.is( \":hidden\" ) ? mode === \"hide\" : mode === \"show\" ) {\n\t\t\t\tdone();\n\t\t\t} else {\n\t\t\t\teffectMethod.call( elem[0], args, done );\n\t\t\t}\n\t\t}\n\n\t\treturn queue === false ? this.each( run ) : this.queue( queue || \"fx\", run );\n\t},\n\n\t_show: $.fn.show,\n\tshow: function( speed ) {\n\t\tif ( standardSpeed( speed ) ) {\n\t\t\treturn this._show.apply( this, arguments );\n\t\t} else {\n\t\t\tvar args = _normalizeArguments.apply( this, arguments );\n\t\t\targs.mode = \"show\";\n\t\t\treturn this.effect.call( this, args );\n\t\t}\n\t},\n\n\t_hide: $.fn.hide,\n\thide: function( speed ) {\n\t\tif ( standardSpeed( speed ) ) {\n\t\t\treturn this._hide.apply( this, arguments );\n\t\t} else {\n\t\t\tvar args = _normalizeArguments.apply( this, arguments );\n\t\t\targs.mode = \"hide\";\n\t\t\treturn this.effect.call( this, args );\n\t\t}\n\t},\n\n\t// jQuery core overloads toggle and creates _toggle\n\t__toggle: $.fn.toggle,\n\ttoggle: function( speed ) {\n\t\tif ( standardSpeed( speed ) || typeof speed === \"boolean\" || $.isFunction( speed ) ) {\n\t\t\treturn this.__toggle.apply( this, arguments );\n\t\t} else {\n\t\t\tvar args = _normalizeArguments.apply( this, arguments );\n\t\t\targs.mode = \"toggle\";\n\t\t\treturn this.effect.call( this, args );\n\t\t}\n\t},\n\n\t// helper functions\n\tcssUnit: function(key) {\n\t\tvar style = this.css( key ),\n\t\t\tval = [];\n\n\t\t$.each( [ \"em\", \"px\", \"%\", \"pt\" ], function( i, unit ) {\n\t\t\tif ( style.indexOf( unit ) > 0 ) {\n\t\t\t\tval = [ parseFloat( style ), unit ];\n\t\t\t}\n\t\t});\n\t\treturn val;\n\t}\n});\n\n})();\n\n/******************************************************************************/\n/*********************************** EASING ***********************************/\n/******************************************************************************/\n\n(function() {\n\n// based on easing equations from Robert Penner (http://www.robertpenner.com/easing)\n\nvar baseEasings = {};\n\n$.each( [ \"Quad\", \"Cubic\", \"Quart\", \"Quint\", \"Expo\" ], function( i, name ) {\n\tbaseEasings[ name ] = function( p ) {\n\t\treturn Math.pow( p, i + 2 );\n\t};\n});\n\n$.extend( baseEasings, {\n\tSine: function ( p ) {\n\t\treturn 1 - Math.cos( p * Math.PI / 2 );\n\t},\n\tCirc: function ( p ) {\n\t\treturn 1 - Math.sqrt( 1 - p * p );\n\t},\n\tElastic: function( p ) {\n\t\treturn p === 0 || p === 1 ? p :\n\t\t\t-Math.pow( 2, 8 * (p - 1) ) * Math.sin( ( (p - 1) * 80 - 7.5 ) * Math.PI / 15 );\n\t},\n\tBack: function( p ) {\n\t\treturn p * p * ( 3 * p - 2 );\n\t},\n\tBounce: function ( p ) {\n\t\tvar pow2,\n\t\t\tbounce = 4;\n\n\t\twhile ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}\n\t\treturn 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );\n\t}\n});\n\n$.each( baseEasings, function( name, easeIn ) {\n\t$.easing[ \"easeIn\" + name ] = easeIn;\n\t$.easing[ \"easeOut\" + name ] = function( p ) {\n\t\treturn 1 - easeIn( 1 - p );\n\t};\n\t$.easing[ \"easeInOut\" + name ] = function( p ) {\n\t\treturn p < 0.5 ?\n\t\t\teaseIn( p * 2 ) / 2 :\n\t\t\t1 - easeIn( p * -2 + 2 ) / 2;\n\t};\n});\n\n})();\n\n})(jQuery));\n\n(function( $, undefined ) {\n\nvar uid = 0,\n\thideProps = {},\n\tshowProps = {};\n\nhideProps.height = hideProps.paddingTop = hideProps.paddingBottom =\n\thideProps.borderTopWidth = hideProps.borderBottomWidth = \"hide\";\nshowProps.height = showProps.paddingTop = showProps.paddingBottom =\n\tshowProps.borderTopWidth = showProps.borderBottomWidth = \"show\";\n\n$.widget( \"ui.accordion\", {\n\tversion: \"1.10.1\",\n\toptions: {\n\t\tactive: 0,\n\t\tanimate: {},\n\t\tcollapsible: false,\n\t\tevent: \"click\",\n\t\theader: \"> li > :first-child,> :not(li):even\",\n\t\theightStyle: \"auto\",\n\t\ticons: {\n\t\t\tactiveHeader: \"ui-icon-triangle-1-s\",\n\t\t\theader: \"ui-icon-triangle-1-e\"\n\t\t},\n\n\t\t// callbacks\n\t\tactivate: null,\n\t\tbeforeActivate: null\n\t},\n\n\t_create: function() {\n\t\tvar options = this.options;\n\t\tthis.prevShow = this.prevHide = $();\n\t\tthis.element.addClass( \"ui-accordion ui-widget ui-helper-reset\" )\n\t\t\t// ARIA\n\t\t\t.attr( \"role\", \"tablist\" );\n\n\t\t// don't allow collapsible: false and active: false / null\n\t\tif ( !options.collapsible && (options.active === false || options.active == null) ) {\n\t\t\toptions.active = 0;\n\t\t}\n\n\t\tthis._processPanels();\n\t\t// handle negative values\n\t\tif ( options.active < 0 ) {\n\t\t\toptions.active += this.headers.length;\n\t\t}\n\t\tthis._refresh();\n\t},\n\n\t_getCreateEventData: function() {\n\t\treturn {\n\t\t\theader: this.active,\n\t\t\tpanel: !this.active.length ? $() : this.active.next(),\n\t\t\tcontent: !this.active.length ? $() : this.active.next()\n\t\t};\n\t},\n\n\t_createIcons: function() {\n\t\tvar icons = this.options.icons;\n\t\tif ( icons ) {\n\t\t\t$( \"\" )\n\t\t\t\t.addClass( \"ui-accordion-header-icon ui-icon \" + icons.header )\n\t\t\t\t.prependTo( this.headers );\n\t\t\tthis.active.children( \".ui-accordion-header-icon\" )\n\t\t\t\t.removeClass( icons.header )\n\t\t\t\t.addClass( icons.activeHeader );\n\t\t\tthis.headers.addClass( \"ui-accordion-icons\" );\n\t\t}\n\t},\n\n\t_destroyIcons: function() {\n\t\tthis.headers\n\t\t\t.removeClass( \"ui-accordion-icons\" )\n\t\t\t.children( \".ui-accordion-header-icon\" )\n\t\t\t\t.remove();\n\t},\n\n\t_destroy: function() {\n\t\tvar contents;\n\n\t\t// clean up main element\n\t\tthis.element\n\t\t\t.removeClass( \"ui-accordion ui-widget ui-helper-reset\" )\n\t\t\t.removeAttr( \"role\" );\n\n\t\t// clean up headers\n\t\tthis.headers\n\t\t\t.removeClass( \"ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top\" )\n\t\t\t.removeAttr( \"role\" )\n\t\t\t.removeAttr( \"aria-selected\" )\n\t\t\t.removeAttr( \"aria-controls\" )\n\t\t\t.removeAttr( \"tabIndex\" )\n\t\t\t.each(function() {\n\t\t\t\tif ( /^ui-accordion/.test( this.id ) ) {\n\t\t\t\t\tthis.removeAttribute( \"id\" );\n\t\t\t\t}\n\t\t\t});\n\t\tthis._destroyIcons();\n\n\t\t// clean up content panels\n\t\tcontents = this.headers.next()\n\t\t\t.css( \"display\", \"\" )\n\t\t\t.removeAttr( \"role\" )\n\t\t\t.removeAttr( \"aria-expanded\" )\n\t\t\t.removeAttr( \"aria-hidden\" )\n\t\t\t.removeAttr( \"aria-labelledby\" )\n\t\t\t.removeClass( \"ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled\" )\n\t\t\t.each(function() {\n\t\t\t\tif ( /^ui-accordion/.test( this.id ) ) {\n\t\t\t\t\tthis.removeAttribute( \"id\" );\n\t\t\t\t}\n\t\t\t});\n\t\tif ( this.options.heightStyle !== \"content\" ) {\n\t\t\tcontents.css( \"height\", \"\" );\n\t\t}\n\t},\n\n\t_setOption: function( key, value ) {\n\t\tif ( key === \"active\" ) {\n\t\t\t// _activate() will handle invalid values and update this.options\n\t\t\tthis._activate( value );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( key === \"event\" ) {\n\t\t\tif ( this.options.event ) {\n\t\t\t\tthis._off( this.headers, this.options.event );\n\t\t\t}\n\t\t\tthis._setupEvents( value );\n\t\t}\n\n\t\tthis._super( key, value );\n\n\t\t// setting collapsible: false while collapsed; open first panel\n\t\tif ( key === \"collapsible\" && !value && this.options.active === false ) {\n\t\t\tthis._activate( 0 );\n\t\t}\n\n\t\tif ( key === \"icons\" ) {\n\t\t\tthis._destroyIcons();\n\t\t\tif ( value ) {\n\t\t\t\tthis._createIcons();\n\t\t\t}\n\t\t}\n\n\t\t// #5332 - opacity doesn't cascade to positioned elements in IE\n\t\t// so we need to add the disabled class to the headers and panels\n\t\tif ( key === \"disabled\" ) {\n\t\t\tthis.headers.add( this.headers.next() )\n\t\t\t\t.toggleClass( \"ui-state-disabled\", !!value );\n\t\t}\n\t},\n\n\t_keydown: function( event ) {\n\t\t/*jshint maxcomplexity:15*/\n\t\tif ( event.altKey || event.ctrlKey ) {\n\t\t\treturn;\n\t\t}\n\n\t\tvar keyCode = $.ui.keyCode,\n\t\t\tlength = this.headers.length,\n\t\t\tcurrentIndex = this.headers.index( event.target ),\n\t\t\ttoFocus = false;\n\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase keyCode.RIGHT:\n\t\t\tcase keyCode.DOWN:\n\t\t\t\ttoFocus = this.headers[ ( currentIndex + 1 ) % length ];\n\t\t\t\tbreak;\n\t\t\tcase keyCode.LEFT:\n\t\t\tcase keyCode.UP:\n\t\t\t\ttoFocus = this.headers[ ( currentIndex - 1 + length ) % length ];\n\t\t\t\tbreak;\n\t\t\tcase keyCode.SPACE:\n\t\t\tcase keyCode.ENTER:\n\t\t\t\tthis._eventHandler( event );\n\t\t\t\tbreak;\n\t\t\tcase keyCode.HOME:\n\t\t\t\ttoFocus = this.headers[ 0 ];\n\t\t\t\tbreak;\n\t\t\tcase keyCode.END:\n\t\t\t\ttoFocus = this.headers[ length - 1 ];\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( toFocus ) {\n\t\t\t$( event.target ).attr( \"tabIndex\", -1 );\n\t\t\t$( toFocus ).attr( \"tabIndex\", 0 );\n\t\t\ttoFocus.focus();\n\t\t\tevent.preventDefault();\n\t\t}\n\t},\n\n\t_panelKeyDown : function( event ) {\n\t\tif ( event.keyCode === $.ui.keyCode.UP && event.ctrlKey ) {\n\t\t\t$( event.currentTarget ).prev().focus();\n\t\t}\n\t},\n\n\trefresh: function() {\n\t\tvar options = this.options;\n\t\tthis._processPanels();\n\n\t\t// was collapsed or no panel\n\t\tif ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) {\n\t\t\toptions.active = false;\n\t\t\tthis.active = $();\n\t\t// active false only when collapsible is true\n\t\t} if ( options.active === false ) {\n\t\t\tthis._activate( 0 );\n\t\t// was active, but active panel is gone\n\t\t} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {\n\t\t\t// all remaining panel are disabled\n\t\t\tif ( this.headers.length === this.headers.find(\".ui-state-disabled\").length ) {\n\t\t\t\toptions.active = false;\n\t\t\t\tthis.active = $();\n\t\t\t// activate previous panel\n\t\t\t} else {\n\t\t\t\tthis._activate( Math.max( 0, options.active - 1 ) );\n\t\t\t}\n\t\t// was active, active panel still exists\n\t\t} else {\n\t\t\t// make sure active index is correct\n\t\t\toptions.active = this.headers.index( this.active );\n\t\t}\n\n\t\tthis._destroyIcons();\n\n\t\tthis._refresh();\n\t},\n\n\t_processPanels: function() {\n\t\tthis.headers = this.element.find( this.options.header )\n\t\t\t.addClass( \"ui-accordion-header ui-helper-reset ui-state-default ui-corner-all\" );\n\n\t\tthis.headers.next()\n\t\t\t.addClass( \"ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom\" )\n\t\t\t.filter(\":not(.ui-accordion-content-active)\")\n\t\t\t.hide();\n\t},\n\n\t_refresh: function() {\n\t\tvar maxHeight,\n\t\t\toptions = this.options,\n\t\t\theightStyle = options.heightStyle,\n\t\t\tparent = this.element.parent(),\n\t\t\taccordionId = this.accordionId = \"ui-accordion-\" +\n\t\t\t\t(this.element.attr( \"id\" ) || ++uid);\n\n\t\tthis.active = this._findActive( options.active )\n\t\t\t.addClass( \"ui-accordion-header-active ui-state-active ui-corner-top\" )\n\t\t\t.removeClass( \"ui-corner-all\" );\n\t\tthis.active.next()\n\t\t\t.addClass( \"ui-accordion-content-active\" )\n\t\t\t.show();\n\n\t\tthis.headers\n\t\t\t.attr( \"role\", \"tab\" )\n\t\t\t.each(function( i ) {\n\t\t\t\tvar header = $( this ),\n\t\t\t\t\theaderId = header.attr( \"id\" ),\n\t\t\t\t\tpanel = header.next(),\n\t\t\t\t\tpanelId = panel.attr( \"id\" );\n\t\t\t\tif ( !headerId ) {\n\t\t\t\t\theaderId = accordionId + \"-header-\" + i;\n\t\t\t\t\theader.attr( \"id\", headerId );\n\t\t\t\t}\n\t\t\t\tif ( !panelId ) {\n\t\t\t\t\tpanelId = accordionId + \"-panel-\" + i;\n\t\t\t\t\tpanel.attr( \"id\", panelId );\n\t\t\t\t}\n\t\t\t\theader.attr( \"aria-controls\", panelId );\n\t\t\t\tpanel.attr( \"aria-labelledby\", headerId );\n\t\t\t})\n\t\t\t.next()\n\t\t\t\t.attr( \"role\", \"tabpanel\" );\n\n\t\tthis.headers\n\t\t\t.not( this.active )\n\t\t\t.attr({\n\t\t\t\t\"aria-selected\": \"false\",\n\t\t\t\ttabIndex: -1\n\t\t\t})\n\t\t\t.next()\n\t\t\t\t.attr({\n\t\t\t\t\t\"aria-expanded\": \"false\",\n\t\t\t\t\t\"aria-hidden\": \"true\"\n\t\t\t\t})\n\t\t\t\t.hide();\n\n\t\t// make sure at least one header is in the tab order\n\t\tif ( !this.active.length ) {\n\t\t\tthis.headers.eq( 0 ).attr( \"tabIndex\", 0 );\n\t\t} else {\n\t\t\tthis.active.attr({\n\t\t\t\t\"aria-selected\": \"true\",\n\t\t\t\ttabIndex: 0\n\t\t\t})\n\t\t\t.next()\n\t\t\t\t.attr({\n\t\t\t\t\t\"aria-expanded\": \"true\",\n\t\t\t\t\t\"aria-hidden\": \"false\"\n\t\t\t\t});\n\t\t}\n\n\t\tthis._createIcons();\n\n\t\tthis._setupEvents( options.event );\n\n\t\tif ( heightStyle === \"fill\" ) {\n\t\t\tmaxHeight = parent.height();\n\t\t\tthis.element.siblings( \":visible\" ).each(function() {\n\t\t\t\tvar elem = $( this ),\n\t\t\t\t\tposition = elem.css( \"position\" );\n\n\t\t\t\tif ( position === \"absolute\" || position === \"fixed\" ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tmaxHeight -= elem.outerHeight( true );\n\t\t\t});\n\n\t\t\tthis.headers.each(function() {\n\t\t\t\tmaxHeight -= $( this ).outerHeight( true );\n\t\t\t});\n\n\t\t\tthis.headers.next()\n\t\t\t\t.each(function() {\n\t\t\t\t\t$( this ).height( Math.max( 0, maxHeight -\n\t\t\t\t\t\t$( this ).innerHeight() + $( this ).height() ) );\n\t\t\t\t})\n\t\t\t\t.css( \"overflow\", \"auto\" );\n\t\t} else if ( heightStyle === \"auto\" ) {\n\t\t\tmaxHeight = 0;\n\t\t\tthis.headers.next()\n\t\t\t\t.each(function() {\n\t\t\t\t\tmaxHeight = Math.max( maxHeight, $( this ).css( \"height\", \"\" ).height() );\n\t\t\t\t})\n\t\t\t\t.height( maxHeight );\n\t\t}\n\t},\n\n\t_activate: function( index ) {\n\t\tvar active = this._findActive( index )[ 0 ];\n\n\t\t// trying to activate the already active panel\n\t\tif ( active === this.active[ 0 ] ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// trying to collapse, simulate a click on the currently active header\n\t\tactive = active || this.active[ 0 ];\n\n\t\tthis._eventHandler({\n\t\t\ttarget: active,\n\t\t\tcurrentTarget: active,\n\t\t\tpreventDefault: $.noop\n\t\t});\n\t},\n\n\t_findActive: function( selector ) {\n\t\treturn typeof selector === \"number\" ? this.headers.eq( selector ) : $();\n\t},\n\n\t_setupEvents: function( event ) {\n\t\tvar events = {\n\t\t\tkeydown: \"_keydown\"\n\t\t};\n\t\tif ( event ) {\n\t\t\t$.each( event.split(\" \"), function( index, eventName ) {\n\t\t\t\tevents[ eventName ] = \"_eventHandler\";\n\t\t\t});\n\t\t}\n\n\t\tthis._off( this.headers.add( this.headers.next() ) );\n\t\tthis._on( this.headers, events );\n\t\tthis._on( this.headers.next(), { keydown: \"_panelKeyDown\" });\n\t\tthis._hoverable( this.headers );\n\t\tthis._focusable( this.headers );\n\t},\n\n\t_eventHandler: function( event ) {\n\t\tvar options = this.options,\n\t\t\tactive = this.active,\n\t\t\tclicked = $( event.currentTarget ),\n\t\t\tclickedIsActive = clicked[ 0 ] === active[ 0 ],\n\t\t\tcollapsing = clickedIsActive && options.collapsible,\n\t\t\ttoShow = collapsing ? $() : clicked.next(),\n\t\t\ttoHide = active.next(),\n\t\t\teventData = {\n\t\t\t\toldHeader: active,\n\t\t\t\toldPanel: toHide,\n\t\t\t\tnewHeader: collapsing ? $() : clicked,\n\t\t\t\tnewPanel: toShow\n\t\t\t};\n\n\t\tevent.preventDefault();\n\n\t\tif (\n\t\t\t\t// click on active header, but not collapsible\n\t\t\t\t( clickedIsActive && !options.collapsible ) ||\n\t\t\t\t// allow canceling activation\n\t\t\t\t( this._trigger( \"beforeActivate\", event, eventData ) === false ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\toptions.active = collapsing ? false : this.headers.index( clicked );\n\n\t\t// when the call to ._toggle() comes after the class changes\n\t\t// it causes a very odd bug in IE 8 (see #6720)\n\t\tthis.active = clickedIsActive ? $() : clicked;\n\t\tthis._toggle( eventData );\n\n\t\t// switch classes\n\t\t// corner classes on the previously active header stay after the animation\n\t\tactive.removeClass( \"ui-accordion-header-active ui-state-active\" );\n\t\tif ( options.icons ) {\n\t\t\tactive.children( \".ui-accordion-header-icon\" )\n\t\t\t\t.removeClass( options.icons.activeHeader )\n\t\t\t\t.addClass( options.icons.header );\n\t\t}\n\n\t\tif ( !clickedIsActive ) {\n\t\t\tclicked\n\t\t\t\t.removeClass( \"ui-corner-all\" )\n\t\t\t\t.addClass( \"ui-accordion-header-active ui-state-active ui-corner-top\" );\n\t\t\tif ( options.icons ) {\n\t\t\t\tclicked.children( \".ui-accordion-header-icon\" )\n\t\t\t\t\t.removeClass( options.icons.header )\n\t\t\t\t\t.addClass( options.icons.activeHeader );\n\t\t\t}\n\n\t\t\tclicked\n\t\t\t\t.next()\n\t\t\t\t.addClass( \"ui-accordion-content-active\" );\n\t\t}\n\t},\n\n\t_toggle: function( data ) {\n\t\tvar toShow = data.newPanel,\n\t\t\ttoHide = this.prevShow.length ? this.prevShow : data.oldPanel;\n\n\t\t// handle activating a panel during the animation for another activation\n\t\tthis.prevShow.add( this.prevHide ).stop( true, true );\n\t\tthis.prevShow = toShow;\n\t\tthis.prevHide = toHide;\n\n\t\tif ( this.options.animate ) {\n\t\t\tthis._animate( toShow, toHide, data );\n\t\t} else {\n\t\t\ttoHide.hide();\n\t\t\ttoShow.show();\n\t\t\tthis._toggleComplete( data );\n\t\t}\n\n\t\ttoHide.attr({\n\t\t\t\"aria-expanded\": \"false\",\n\t\t\t\"aria-hidden\": \"true\"\n\t\t});\n\t\ttoHide.prev().attr( \"aria-selected\", \"false\" );\n\t\t// if we're switching panels, remove the old header from the tab order\n\t\t// if we're opening from collapsed state, remove the previous header from the tab order\n\t\t// if we're collapsing, then keep the collapsing header in the tab order\n\t\tif ( toShow.length && toHide.length ) {\n\t\t\ttoHide.prev().attr( \"tabIndex\", -1 );\n\t\t} else if ( toShow.length ) {\n\t\t\tthis.headers.filter(function() {\n\t\t\t\treturn $( this ).attr( \"tabIndex\" ) === 0;\n\t\t\t})\n\t\t\t.attr( \"tabIndex\", -1 );\n\t\t}\n\n\t\ttoShow\n\t\t\t.attr({\n\t\t\t\t\"aria-expanded\": \"true\",\n\t\t\t\t\"aria-hidden\": \"false\"\n\t\t\t})\n\t\t\t.prev()\n\t\t\t\t.attr({\n\t\t\t\t\t\"aria-selected\": \"true\",\n\t\t\t\t\ttabIndex: 0\n\t\t\t\t});\n\t},\n\n\t_animate: function( toShow, toHide, data ) {\n\t\tvar total, easing, duration,\n\t\t\tthat = this,\n\t\t\tadjust = 0,\n\t\t\tdown = toShow.length &&\n\t\t\t\t( !toHide.length || ( toShow.index() < toHide.index() ) ),\n\t\t\tanimate = this.options.animate || {},\n\t\t\toptions = down && animate.down || animate,\n\t\t\tcomplete = function() {\n\t\t\t\tthat._toggleComplete( data );\n\t\t\t};\n\n\t\tif ( typeof options === \"number\" ) {\n\t\t\tduration = options;\n\t\t}\n\t\tif ( typeof options === \"string\" ) {\n\t\t\teasing = options;\n\t\t}\n\t\t// fall back from options to animation in case of partial down settings\n\t\teasing = easing || options.easing || animate.easing;\n\t\tduration = duration || options.duration || animate.duration;\n\n\t\tif ( !toHide.length ) {\n\t\t\treturn toShow.animate( showProps, duration, easing, complete );\n\t\t}\n\t\tif ( !toShow.length ) {\n\t\t\treturn toHide.animate( hideProps, duration, easing, complete );\n\t\t}\n\n\t\ttotal = toShow.show().outerHeight();\n\t\ttoHide.animate( hideProps, {\n\t\t\tduration: duration,\n\t\t\teasing: easing,\n\t\t\tstep: function( now, fx ) {\n\t\t\t\tfx.now = Math.round( now );\n\t\t\t}\n\t\t});\n\t\ttoShow\n\t\t\t.hide()\n\t\t\t.animate( showProps, {\n\t\t\t\tduration: duration,\n\t\t\t\teasing: easing,\n\t\t\t\tcomplete: complete,\n\t\t\t\tstep: function( now, fx ) {\n\t\t\t\t\tfx.now = Math.round( now );\n\t\t\t\t\tif ( fx.prop !== \"height\" ) {\n\t\t\t\t\t\tadjust += fx.now;\n\t\t\t\t\t} else if ( that.options.heightStyle !== \"content\" ) {\n\t\t\t\t\t\tfx.now = Math.round( total - toHide.outerHeight() - adjust );\n\t\t\t\t\t\tadjust = 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t},\n\n\t_toggleComplete: function( data ) {\n\t\tvar toHide = data.oldPanel;\n\n\t\ttoHide\n\t\t\t.removeClass( \"ui-accordion-content-active\" )\n\t\t\t.prev()\n\t\t\t\t.removeClass( \"ui-corner-top\" )\n\t\t\t\t.addClass( \"ui-corner-all\" );\n\n\t\t// Work around for rendering bug in IE (#5421)\n\t\tif ( toHide.length ) {\n\t\t\ttoHide.parent()[0].className = toHide.parent()[0].className;\n\t\t}\n\n\t\tthis._trigger( \"activate\", null, data );\n\t}\n});\n\n})( jQuery );\n\n(function( $, undefined ) {\n\n// used to prevent race conditions with remote data sources\nvar requestIndex = 0;\n\n$.widget( \"ui.autocomplete\", {\n\tversion: \"1.10.1\",\n\tdefaultElement: \"\",\n\toptions: {\n\t\tappendTo: null,\n\t\tautoFocus: false,\n\t\tdelay: 300,\n\t\tminLength: 1,\n\t\tposition: {\n\t\t\tmy: \"left top\",\n\t\t\tat: \"left bottom\",\n\t\t\tcollision: \"none\"\n\t\t},\n\t\tsource: null,\n\n\t\t// callbacks\n\t\tchange: null,\n\t\tclose: null,\n\t\tfocus: null,\n\t\topen: null,\n\t\tresponse: null,\n\t\tsearch: null,\n\t\tselect: null\n\t},\n\n\tpending: 0,\n\n\t_create: function() {\n\t\t// Some browsers only repeat keydown events, not keypress events,\n\t\t// so we use the suppressKeyPress flag to determine if we've already\n\t\t// handled the keydown event. #7269\n\t\t// Unfortunately the code for & in keypress is the same as the up arrow,\n\t\t// so we use the suppressKeyPressRepeat flag to avoid handling keypress\n\t\t// events when we know the keydown event was used to modify the\n\t\t// search term. #7799\n\t\tvar suppressKeyPress, suppressKeyPressRepeat, suppressInput,\n\t\t\tnodeName = this.element[0].nodeName.toLowerCase(),\n\t\t\tisTextarea = nodeName === \"textarea\",\n\t\t\tisInput = nodeName === \"input\";\n\n\t\tthis.isMultiLine =\n\t\t\t// Textareas are always multi-line\n\t\t\tisTextarea ? true :\n\t\t\t// Inputs are always single-line, even if inside a contentEditable element\n\t\t\t// IE also treats inputs as contentEditable\n\t\t\tisInput ? false :\n\t\t\t// All other element types are determined by whether or not they're contentEditable\n\t\t\tthis.element.prop( \"isContentEditable\" );\n\n\t\tthis.valueMethod = this.element[ isTextarea || isInput ? \"val\" : \"text\" ];\n\t\tthis.isNewMenu = true;\n\n\t\tthis.element\n\t\t\t.addClass( \"ui-autocomplete-input\" )\n\t\t\t.attr( \"autocomplete\", \"off\" );\n\n\t\tthis._on( this.element, {\n\t\t\tkeydown: function( event ) {\n\t\t\t\t/*jshint maxcomplexity:15*/\n\t\t\t\tif ( this.element.prop( \"readOnly\" ) ) {\n\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\tsuppressInput = true;\n\t\t\t\t\tsuppressKeyPressRepeat = true;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsuppressKeyPress = false;\n\t\t\t\tsuppressInput = false;\n\t\t\t\tsuppressKeyPressRepeat = false;\n\t\t\t\tvar keyCode = $.ui.keyCode;\n\t\t\t\tswitch( event.keyCode ) {\n\t\t\t\tcase keyCode.PAGE_UP:\n\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\tthis._move( \"previousPage\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.PAGE_DOWN:\n\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\tthis._move( \"nextPage\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.UP:\n\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\tthis._keyEvent( \"previous\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.DOWN:\n\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\tthis._keyEvent( \"next\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.ENTER:\n\t\t\t\tcase keyCode.NUMPAD_ENTER:\n\t\t\t\t\t// when menu is open and has focus\n\t\t\t\t\tif ( this.menu.active ) {\n\t\t\t\t\t\t// #6055 - Opera still allows the keypress to occur\n\t\t\t\t\t\t// which causes forms to submit\n\t\t\t\t\t\tsuppressKeyPress = true;\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tthis.menu.select( event );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.TAB:\n\t\t\t\t\tif ( this.menu.active ) {\n\t\t\t\t\t\tthis.menu.select( event );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.ESCAPE:\n\t\t\t\t\tif ( this.menu.element.is( \":visible\" ) ) {\n\t\t\t\t\t\tthis._value( this.term );\n\t\t\t\t\t\tthis.close( event );\n\t\t\t\t\t\t// Different browsers have different default behavior for escape\n\t\t\t\t\t\t// Single press can mean undo or clear\n\t\t\t\t\t\t// Double press in IE means clear the whole form\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tsuppressKeyPressRepeat = true;\n\t\t\t\t\t// search timeout should be triggered before the input value is changed\n\t\t\t\t\tthis._searchTimeout( event );\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t},\n\t\t\tkeypress: function( event ) {\n\t\t\t\tif ( suppressKeyPress ) {\n\t\t\t\t\tsuppressKeyPress = false;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( suppressKeyPressRepeat ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// replicate some key handlers to allow them to repeat in Firefox and Opera\n\t\t\t\tvar keyCode = $.ui.keyCode;\n\t\t\t\tswitch( event.keyCode ) {\n\t\t\t\tcase keyCode.PAGE_UP:\n\t\t\t\t\tthis._move( \"previousPage\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.PAGE_DOWN:\n\t\t\t\t\tthis._move( \"nextPage\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.UP:\n\t\t\t\t\tthis._keyEvent( \"previous\", event );\n\t\t\t\t\tbreak;\n\t\t\t\tcase keyCode.DOWN:\n\t\t\t\t\tthis._keyEvent( \"next\", event );\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t},\n\t\t\tinput: function( event ) {\n\t\t\t\tif ( suppressInput ) {\n\t\t\t\t\tsuppressInput = false;\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis._searchTimeout( event );\n\t\t\t},\n\t\t\tfocus: function() {\n\t\t\t\tthis.selectedItem = null;\n\t\t\t\tthis.previous = this._value();\n\t\t\t},\n\t\t\tblur: function( event ) {\n\t\t\t\tif ( this.cancelBlur ) {\n\t\t\t\t\tdelete this.cancelBlur;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tclearTimeout( this.searching );\n\t\t\t\tthis.close( event );\n\t\t\t\tthis._change( event );\n\t\t\t}\n\t\t});\n\n\t\tthis._initSource();\n\t\tthis.menu = $( \"