{"_id":"@curriculumassociates/stage-inspector","_rev":"3-0b2a3e3772c7ac0f0b0b637fc0083a9c","name":"@curriculumassociates/stage-inspector","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@curriculumassociates/stage-inspector","version":"1.0.0","description":"Debugging tool to help figure out layout issues when using CreateJS","main":"dist/stage-inspector.js","scripts":{"build":"rm -rf dist && NODE_ENV=production webpack","start":"rm -rf dist && NODE_ENV=development webpack","clobber":"rm -rf node_modules/ && npm cache clean --force"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/CurriculumAssociates/stage-inspector.git"},"keywords":["createjs","stage","inspector","debugging"],"author":{"name":"Curriculum Associates","email":"opensource@cainc.com"},"license":"ISC","devDependencies":{"babel-core":"6.24.0","babel-loader":"7.1.4","babel-polyfill":"6.23.0","babel-preset-es2015":"6.24.0","babel-preset-react":"6.24.1","file-loader":"1.1.11","url-loader":"1.0.1","webpack":"4.7.0","webpack-cli":"3.2.3","webpack-node-externals":"1.7.2"},"dependencies":{},"gitHead":"8910ee33aa201dd95f52bc91300d5d0842f6d0e9","bugs":{"url":"https://github.com/CurriculumAssociates/stage-inspector/issues"},"homepage":"https://github.com/CurriculumAssociates/stage-inspector#readme","_id":"@curriculumassociates/stage-inspector@1.0.0","_nodeVersion":"12.20.1","_npmVersion":"6.14.10","dist":{"integrity":"sha512-xTGjpM5WcWGfRPXyQVGzhOE0nS0A1mWO1zqme+vClKy38L7w0u/UB8N1cHQYVr6Z8vp1NdfEU72uEFgUjbvTAA==","shasum":"577daf92bb47d7f745978686d947cb572ff4229f","tarball":"https://registry.npmjs.org/@curriculumassociates/stage-inspector/-/stage-inspector-1.0.0.tgz","fileCount":8,"unpackedSize":47247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVsUCRA9TVsSAnZWagAA9zMP/01XmJWlwoOno/wWsI+H\nLDHuDpfeV7osf/AIcqQCR3ThhjCbnLVcAQ01JHAIgqJZiUv4arJXEge3wB72\nSfnIwxK3ShOSmeRwxPdDVQOFcmm3m8kacRxk1r+zcWdXAOlehe2P8lJQWMlh\nJUIwz/9OfepNFdE30wvcUiqD3B5+DexNoHdV8pcu1RfKGidamGW5hf4KdUto\nIuwOYPbWNmEqkf01ml3wQt+Ax16JW115fZxij9/6t3xMHQKlJD2ImKmORJvx\nhaWQnIvdlLTee+6FSp2O5CgX1+QP650v9HekjrCMLYfGnVbEK9uAPa2ac8SQ\nhsZuIZYf/WywgZi4LXn0suiOhG2q3QDz/NuKCYVQ8DH1oWJOGxDx7+M0g8p0\nKlBwLKVO5XAH2UfzCqPR3NwVKe5GQOh1azkwD9BnE8XIdUwWUsOblb/uVL5I\njseYAM144Sedgu71z49FmeeW1+qpgo+jCAncLp/6VV1jSBM1+fyen7uJYcZE\n4kpmWGq7wpMjDipxCJyLPlE6vrYN/zY5aSpyqyMS4jVQbLo/HnMDECo5tMCK\n1+QWIm8kGCBlZl3uRXOczMDSx9LCrwQSPgWiusTNMQRpqhPiQacLXPgH174G\nFK7yjw5OV+janWWvupYOldj4oTn1zDhj5YNbHk9Otyp8hxZDEdz1sGjQx5me\nflue\r\n=uO1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfwyNjOstopPg9c4h03ClaWhJ1nFz+E4o/nIr1fI7b0AiEAsPGy/8Li/pl+NXasSKjnRN69G9cG3TMEOIofxmiDL24="}]},"_npmUser":{"name":"cainc-ops","email":"opensource@cainc.com"},"directories":{},"maintainers":[{"name":"cainc-ops","email":"opensource@cainc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stage-inspector_1.0.0_1614109459574_0.3626627022520341"},"_hasShrinkwrap":false},"1.0.1":{"name":"@curriculumassociates/stage-inspector","version":"1.0.1","description":"Debugging tool to help figure out layout issues when using CreateJS","main":"dist/stage-inspector.js","scripts":{"build":"rm -rf dist && NODE_ENV=production webpack","start":"rm -rf dist && NODE_ENV=development webpack","clobber":"rm -rf node_modules/ && npm cache clean --force"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/CurriculumAssociates/stage-inspector.git"},"keywords":["createjs","stage","inspector","debugging"],"author":{"name":"Curriculum Associates","email":"opensource@cainc.com"},"license":"ISC","devDependencies":{"babel-core":"6.24.0","babel-loader":"7.1.4","babel-polyfill":"6.23.0","babel-preset-es2015":"6.24.0","babel-preset-react":"6.24.1","file-loader":"1.1.11","url-loader":"1.0.1","webpack":"4.7.0","webpack-cli":"3.2.3","webpack-node-externals":"1.7.2"},"dependencies":{},"gitHead":"d636f8b152b09ad9ee747234d3e52be0d7583cd4","bugs":{"url":"https://github.com/CurriculumAssociates/stage-inspector/issues"},"homepage":"https://github.com/CurriculumAssociates/stage-inspector#readme","_id":"@curriculumassociates/stage-inspector@1.0.1","_nodeVersion":"12.22.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-iPR7LRVIDYsmenXCGnV7Xwr2SjjCtKZJeqO2QgnnhbkRIghRr0r1j170XGjrhAOYfp9zBM2f0u1qxiYeJ9Dazg==","shasum":"f1bd9bf5fa0f7cd8c18410ca9142786d86074cd2","tarball":"https://registry.npmjs.org/@curriculumassociates/stage-inspector/-/stage-inspector-1.0.1.tgz","fileCount":8,"unpackedSize":48239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcFPyCRA9TVsSAnZWagAAhVYQAIlbbZazQBfvuJJtHz6/\nActjnCku4Mh4oKVB3tz+TKmLmpelEMrt1GZ8dZH+eQzmKWdbsG+NKxUtwR6i\neE6AAr79U2PrKdw6oQIWkU5Gb6CCaHhHxZOz0+QpxyVVd8z9LHmd87LzS2rO\nFu7ZomsQkgFU6XY4ZLkpV5WOUebbzBCKblvH8xoyssNGKScLuwIxSNBhnJCB\nS2c5NzelVSXrT+0ldRRFWy4t0tOFJTbB6TXMWfFl/fL1c87soNDELkiIG0tv\nJ7kyWhpgPm08YAabWGFDyfBoPssZ1aWNQnWWKikJJh70zy0uWIWgfVokEpmb\n4zr7wLLewDAhYbOmnY+Kg9eVCXcU/+zIxWRn21n52SCjeSjcWix4KHBpTzhp\n5/9VTLQNfDQX3ykgu8ZGEMm17SIYKnRgOn8WzDNC1piWZHTtnh7JrKY8AQ8h\nLgI+9UBtbQ7KhWcOzVDriJbSWy2dPHI5QUU2IUfoBrSGr4YaRp2EeCiW6v+M\n140jhtU2++AjYoJKa70mE57Y0HMDFQCrc14c7cXh7af7TcZTXxJCjQ1Lax/E\nbqnx3HxkJZ6cwRW4hmLv8vBXlGpPO1iyT9JHs8GmdEDZWTpZKydCbH5ySTD4\nP8K66DMfEID/aCKOiHqbqBJEZ3gQ3DiAueaWPHOTwJwClEtHs+iFi1T/D16I\na+n6\r\n=BIO3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC24NV4UrSUh8eHdAJHBYJIUqHeEF/woQU2w4GNCKIiDgIhAOGQLS4xHjlrtuvDNvvLaLlk+9Q8if1JMRygswRc6QSW"}]},"_npmUser":{"name":"cainc-ops","email":"opensource@cainc.com"},"directories":{},"maintainers":[{"name":"cainc-ops","email":"opensource@cainc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stage-inspector_1.0.1_1617974257443_0.766206903129816"},"_hasShrinkwrap":false},"1.0.2":{"name":"@curriculumassociates/stage-inspector","version":"1.0.2","description":"Debugging tool to help figure out layout issues when using CreateJS","main":"dist/stage-inspector.js","scripts":{"build":"rm -rf dist && NODE_ENV=production webpack","start":"rm -rf dist && NODE_ENV=development webpack","clobber":"rm -rf node_modules/ && npm cache clean --force"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/CurriculumAssociates/stage-inspector.git"},"keywords":["createjs","stage","inspector","debugging"],"author":{"name":"Curriculum Associates","email":"opensource@cainc.com"},"license":"ISC","devDependencies":{"babel-core":"6.24.0","babel-loader":"7.1.4","babel-polyfill":"6.23.0","babel-preset-es2015":"6.24.0","babel-preset-react":"6.24.1","file-loader":"1.1.11","url-loader":"1.0.1","webpack":"4.44.2","webpack-cli":"3.2.3","webpack-node-externals":"1.7.2"},"dependencies":{},"gitHead":"f08ba050ad790e8667995bdec53a6133e37ef3da","bugs":{"url":"https://github.com/CurriculumAssociates/stage-inspector/issues"},"homepage":"https://github.com/CurriculumAssociates/stage-inspector#readme","_id":"@curriculumassociates/stage-inspector@1.0.2","_nodeVersion":"12.22.10","_npmVersion":"6.14.16","dist":{"integrity":"sha512-cSrJqu5i79nThe3eIxGhZNOqQNdGu3Z8xlWwWHuJjJMIAff9DEkfDbNnd6IAvQyg1RPp+eXvQ2vl3SHwBkRcMA==","shasum":"588bbe645cc33b2f0e3195fd339ad5d3a9ecc15e","tarball":"https://registry.npmjs.org/@curriculumassociates/stage-inspector/-/stage-inspector-1.0.2.tgz","fileCount":8,"unpackedSize":48651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiKmaAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGBxAAhgLL1/lWFydl8vXcWkYCJaW32aLVSXrBDUtsTN2fJCniys1+\r\n/+vd/tU4DZFWuftRGX3RUTNu7/oQzG9R/yUeQ/G3yKhNO6NdeU6oXekVfCz+\r\nU65j1J1ahvc0i1jq3sSVPkx5Ln/qxY88r8QJuaPFye3y/E0XHwvp3omoStEF\r\nEUo+m10VtJuBoeHM9MDEYk1z8p1SVdawypEFN8iuqIDoDLivP9wq8GbJ8ebK\r\nMr8D6TDf+dhLGJAjgss0Qat0j+DsKkADvv3/ewx5JPsN5bOH8ZX7bTcKJFTG\r\nQvZcl5d08dxUVlSdTygdDioseUaqbnBkcStDLAsvNhDUAgMy0Svy+JabrXGm\r\nLCCcX0IFPHHx/7i13j53UIrtRqsbZ8i+BvZ9bFPhhJcBbmXESr2GQyxnySeE\r\nErh8L0VUy6Ot51LUDmlNyPYUf7Culm6w4P5248NubtQ5zl+1zXJr3lGdHy53\r\nYpjJNENfCbMiUwhBCTF5B6Xno8fgChpi0e5+WWlJiRKCxy604wLLSCI9KnJH\r\nfGa7MgVGzuMKVm0aXrTgthPTgsPgTdFAZ1CdP1ocrM5ZGtFRI240KjI2p7jb\r\nhIw3sctExcwTfcljSkMtW+qKV8d9XvqWl0uc+pdCLVMb6z5n4hPemDKYEX24\r\nDOlAKj4xZ7HwOq2OB+Wl2r65pPwvrkuELvU=\r\n=UJ2f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbj5N2QcM5oSvjXBtduwFvBLNIX25fzgJ4NolB1pIvCAiEAlRxKueWP2Wx4hrLG0TWJ5dNsTpKXjb7liLimP8eIT1w="}]},"_npmUser":{"name":"cainc-ops","email":"opensource@cainc.com"},"directories":{},"maintainers":[{"name":"cainc-ops","email":"opensource@cainc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stage-inspector_1.0.2_1646945920679_0.829018267831793"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-23T19:44:19.465Z","1.0.0":"2021-02-23T19:44:19.714Z","modified":"2022-04-05T02:20:30.175Z","1.0.1":"2021-04-09T13:17:37.774Z","1.0.2":"2022-03-10T20:58:40.833Z"},"maintainers":[{"name":"cainc-ops","email":"opensource@cainc.com"}],"description":"Debugging tool to help figure out layout issues when using CreateJS","homepage":"https://github.com/CurriculumAssociates/stage-inspector#readme","keywords":["createjs","stage","inspector","debugging"],"repository":{"type":"git","url":"git+https://github.com/CurriculumAssociates/stage-inspector.git"},"author":{"name":"Curriculum Associates","email":"opensource@cainc.com"},"bugs":{"url":"https://github.com/CurriculumAssociates/stage-inspector/issues"},"license":"ISC","readme":"# stage-inspector\n\n## Description\nThis is a tool to help developers investigate layout issues when using CreateJS.  It does this primarily in two ways.  The first is optionally adding an overlay displaying various properties of a set of DisplayObjects.  The list of which properties are shown this way is configurable.  The second is by displaying information and a reference to various DisplayObjects in the console.  While both of the functions for these approaches take an optional filter array to determine which DisplayObjects to include in their data set, there is also the ability to click on the stage to have all DisplayObjects under that mouse position be used as the filter to the console function.\n\n## CreateJS Version\nThis module was developed using the 0.8.2 of CreateJS/EaselJS.\n\n## Usage\nSince this is a debugging tool, it is expected to be primarily used through the browser's console.  So, while a consuming project may not need to create or use a StageInspector instance, it should import the module to ensure it's included in the consuming project's bundle and therefore available at runtime.  Such as with:\n```\nimport StageInspector from '@curriculumassociates/stage-inspector'; // eslint-disable-line no-unused-vars\n```\n\nOnce the module is imported, instances of the StageInspector class can be created either in that file or in the console since the StageInspector class is made available through `window.StageInspector`.  To create an instance, the CreateJS Stage instance that it should inspect needs to be provided:\n```\nvar si = new StageInspector(stage);\n```\nSince each StageInspector instance is tied to a particular Stage instance, if the consuming project has multiple Stages that should be inspected, then multiple StageInspector instances should be created.\n\nWith those setup steps done, there are two primary member functions for getting data to help with debugging.\n* `si.show(filters)`: Displays an overlay on the Stage to identify DisplayObjects and provide information about their properties.  Only DisplayObjects that match the filter (discussed in the next section) will be included in the overlay's data.  The overlay can be hidden with `si.hide()`.  It is also worth noting that the `getBounds` function for the DisplayObject must return the bounds rather than null in order to be displayed in the overlay.  If that function returns null, then its children will still be displayed in the overlay if they match the filter and provide their bounds.\n* `si.dump(filters)`: For DisplayObjects that match the filter (discussed in the next section) this outputs to the console a reference to the DisplayObject and various information about the DisplayObject that is commonly useful in debugging layout issues.  Part of that info is the same set of information for the DisplayObject's children, if any, which to avoid flooding the screen are initially shown in a collapsed state.  The reference is intended to be used to adjust the DisplayObject's properties to achieve the desired layout in the Stage before making the changes to the consuming project's code base.\n\nThese functions can be effectively used together by using the overlay to determine which DisplayObjects need to be adjusted.  Then by using the ids from the overlay of those DisplayObjects as the filter to `si.dump(filters)`.  Then using the reference to the DisplayObject in that output to find the property and value that need to be changed to achieve the desired visual.\n\nAdditionally there is `si.enableClickToDump()`.  It adds a click listener to the Stage's capture phase so that all DisplayObjects under the mouse cursor are used as the filter to `si.dump(filters)`.  There are other event listeners (`mousedown`, `pressup`, `dblclick`, `mouseout`, `mouseover`, and `pressmove`) bound to the capture phase by this function so that mouse events are not sent to the DisplayObjects, which otherwise could alter the state of what is trying to be debugged.  This feature can be turned off by calling the corresponding disable function, `si.disableClickToDump()`.\n\nThere are also a few functions to help with finding particular DisplayObjects.  They are:\n* `si.getObjectByName(name)` which takes the string argument to search against the DisplayObject `name` field for\n* `si.getObjectById(id)` which takes an integer argument to search against the DisplayObject `id` field for\n* `si.getObjectsByCustomSearch(func)` which takes a predicate function as an argument.  The function will be passed a DisplayObject each time it is called.  Only those DisplayObjects for which the functions returns a truthy value will be included in the returned array.\n\n### Filtering\nAs mentioned in the previous section, both `si.show` and `si.dump` take an optional argument for filtering which DisplayObjects they will include in their output.  If no filter argument is specified, then the Stage instance and all its descendant DisplayObjects are included.  When the filter argument is used, it is an array where if a DisplayObject matches any entry in the array, then it is included in the output.  The entries in that array can be:\n* a number which is compared against DisplayObjects' id field for exact matches\n* a string which is compared against DisplayObjects' name field for exact matches\n* a DisplayObject which will be included if it is a descendant of the Stage\n\n### Changing Displayed Properties\nThe data displayed in the overlay is configurable by adjusting the `si.propFilters` object.  If a field of that object has a truthy value and corresponds to a field in a DisplayObject instance that does not have its value set to an object, then it will be included in the overlay data for that DisplayObject.  There are also a few additional fields to `si.propFilters` that this module supports, which unless otherwise noted will be displayed outside of the DisplayObject's info container in the overlay.  These are:\n* `bounds` which will draw the bounds of the DisplayObject\n* `pos` which displays a + at the DisplayObject's position along with the text for its x and y properties (to 3 decimal places) to the lower-right of the +\n* `regPos` which displays a + at the DisplayObject's position along with the text for its regX and regY properties (to 3 decimal places) to the upper-right of the +\n* `width` which along the middle of the interior of the bound's top edge the width (to 3 decimal places) of the DisplayObject, in its local coordinate space\n* `height` which along the middle of the interior of the bound's left edge the height (to 3 decimal places) of the DisplayObject, in its local coordinate space\n* `parentId` includes the id field of the DisplayObject's parent in the info container\nChanges to the configuration will be reflected in the overlay the next time it is drawn (which is controlled by how often the Stage redraws and if updateOnDraw is true)\n\n### Display Data for a Frame or Per Stage Redraw\nAs previously discussed, doing `si.show(filters)` display an informational overlay on the Stage.  By default the data in the overlay updates each time the Stage is redrawn.  That can be turned off by doing `si.updateOnDraw = false` so that the overlay data becomes fixed.  It is worth noting that if `si.updateOnDraw` is false before calling `si.show(filters)`, then the overlay will only be drawn the next time the stage is redrawn.  The show function itself does not trigger a render pass of the Stage.\n\n### Adjusting Colors\nBy default the overlay displays information about DisplayObjects in different colors.  Which color to use is a combination of the `si.nestColors` array and how many nesting levels the DisplayObject is from the Stage.  If a DisplayObject is more nesting levels away from the Stage than `si.nestColors` has entries for, then the last color in the array is used instead.  The entries of this array are strings for CSS compatible color values.  These colors can be changed either for a particular nesting level or by replacing the whole array.  For example, if you want the third level to be blue (keeping in mind this is a 0-based array):\n```\nsi.nestColors[2] = 'blue';\n```\nOr if you want the overlay to always display its data in red regardless of nesting level, then you can do:\n```\nsi.nestColors = [ '#ff0000' ];\n```\n","readmeFilename":"readme.md"}