Showing preview only (394K chars total). Download the full file or copy to clipboard to get everything.
Repository: daybrush/guides
Branch: master
Commit: a3ba2781d3c7
Files: 193
Total size: 348.4 KB
Directory structure:
gitextract_q_zk3947/
├── .editorconfig
├── .github/
│ └── ISSUE_TEMPLATE.md
├── .gitignore
├── .npmignore
├── .yarnrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── config/
│ └── update-type-consts.js
├── demo/
│ ├── index.css
│ └── index.html
├── jsdoc.json
├── lerna.json
├── package.json
├── packages/
│ ├── croact-guides/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── demo/
│ │ │ └── index.html
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ └── index.umd.ts
│ │ ├── tsconfig.declaration.json
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── guides/
│ │ ├── .gitignore
│ │ ├── .npmignore
│ │ ├── CHANGELOG.md
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── rollup.config.js
│ │ ├── src/
│ │ │ ├── Guides.tsx
│ │ │ ├── GuidesManager.tsx
│ │ │ ├── InnerGuides.tsx
│ │ │ ├── consts.ts
│ │ │ ├── index.cjs.ts
│ │ │ ├── index.esm.ts
│ │ │ ├── index.ts
│ │ │ └── index.umd.ts
│ │ ├── test/
│ │ │ └── manual/
│ │ │ ├── guides.html
│ │ │ └── index.html
│ │ ├── tsconfig.declaration.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.test.json
│ │ └── tslint.json
│ ├── ngx-guides/
│ │ ├── .browserslistrc
│ │ ├── .editorconfig
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── angular.json
│ │ ├── karma.conf.js
│ │ ├── package.json
│ │ ├── projects/
│ │ │ └── ngx-guides/
│ │ │ ├── .browserslistrc
│ │ │ ├── CHANGELOG.md
│ │ │ ├── README.md
│ │ │ ├── karma.conf.js
│ │ │ ├── ng-package.json
│ │ │ ├── package.json
│ │ │ ├── src/
│ │ │ │ ├── lib/
│ │ │ │ │ ├── consts.ts
│ │ │ │ │ ├── ngx-guides.component.spec.ts
│ │ │ │ │ ├── ngx-guides.component.ts
│ │ │ │ │ ├── ngx-guides.interface.ts
│ │ │ │ │ ├── ngx-guides.module.ts
│ │ │ │ │ ├── ngx-guides.service.spec.ts
│ │ │ │ │ ├── ngx-guides.service.ts
│ │ │ │ │ └── types.ts
│ │ │ │ ├── public-api.ts
│ │ │ │ └── test.ts
│ │ │ ├── tsconfig.lib.json
│ │ │ ├── tsconfig.lib.prod.json
│ │ │ └── tsconfig.spec.json
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── app.component.css
│ │ │ │ ├── app.component.html
│ │ │ │ ├── app.component.spec.ts
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── assets/
│ │ │ │ └── .gitkeep
│ │ │ ├── environments/
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── polyfills.ts
│ │ │ ├── styles.css
│ │ │ └── test.ts
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ └── tsconfig.spec.json
│ ├── preact-guides/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── demo/
│ │ │ └── index.html
│ │ ├── package.json
│ │ ├── rollup.config.demo.js
│ │ ├── rollup.config.js
│ │ ├── src/
│ │ │ ├── demo/
│ │ │ │ ├── App.css
│ │ │ │ ├── App.tsx
│ │ │ │ └── index.tsx
│ │ │ └── preact-guides/
│ │ │ ├── Guides.d.ts
│ │ │ ├── Guides.js
│ │ │ ├── index.esm.ts
│ │ │ ├── index.ts
│ │ │ └── index.umd.ts
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.declaration.json
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── react-guides/
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── index.html
│ │ │ └── manifest.json
│ │ ├── rollup.config.js
│ │ ├── src/
│ │ │ ├── demo/
│ │ │ │ ├── App.css
│ │ │ │ ├── App.tsx
│ │ │ │ ├── InfiniteViewer.css
│ │ │ │ ├── InfiniteViewer.tsx
│ │ │ │ └── serviceWorker.ts
│ │ │ ├── index.tsx
│ │ │ ├── react-app-env.d.ts
│ │ │ └── react-guides/
│ │ │ ├── Guides.tsx
│ │ │ ├── consts.ts
│ │ │ ├── index.esm.ts
│ │ │ ├── index.ts
│ │ │ ├── index.umd.ts
│ │ │ ├── types.ts
│ │ │ └── utils.ts
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.declaration.json
│ │ ├── tsconfig.json
│ │ └── tslint.json
│ ├── svelte-guides/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── global.css
│ │ │ └── index.html
│ │ ├── rollup.build.config.js
│ │ ├── rollup.config.js
│ │ ├── rollup_start_dev.js
│ │ ├── src/
│ │ │ ├── App.svelte
│ │ │ ├── Guides.svelte
│ │ │ ├── index.d.ts
│ │ │ ├── index.js
│ │ │ └── main.js
│ │ ├── svelte.config.js
│ │ └── tsconfig.json
│ ├── vue-guides/
│ │ ├── .browserslistrc
│ │ ├── .eslintrc.js
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── LICENSE
│ │ ├── README.md
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── rollup.config.js
│ │ ├── src/
│ │ │ ├── App.vue
│ │ │ ├── App2.vue
│ │ │ ├── components/
│ │ │ │ ├── Guides.vue
│ │ │ │ ├── Guides.vue.d.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── types.ts
│ │ │ ├── main.ts
│ │ │ ├── shims-tsx.d.ts
│ │ │ └── shims-vue.d.ts
│ │ ├── tsconfig.declaration.json
│ │ └── tsconfig.json
│ └── vue3-guides/
│ ├── .browserslistrc
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── README.md
│ ├── demo/
│ │ ├── App.vue
│ │ ├── App2.vue
│ │ ├── index.ts
│ │ └── shims-vue.d.ts
│ ├── package.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── index.html
│ ├── rollup.config.js
│ ├── src/
│ │ ├── Guides.vue
│ │ ├── Guides.vue.d.ts
│ │ ├── index.ts
│ │ └── types.ts
│ ├── tsconfig.declaration.json
│ └── tsconfig.json
├── rollup.config.js
├── static/
│ └── scripts/
│ └── custom.js
├── tsconfig.declaration.json
├── tsconfig.json
├── tsconfig.test.json
└── tslint.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
[{package.json,.travis.yml}]
indent_style = space
indent_size = 4
[*.svelte]
indent_style = space
indent_size = 2
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
## Environments
* Framework name:
* Framework version:
* Component name:
* Component version:
* Testable Address(optional):
## Description
<!-- Let me know your situation -->
================================================
FILE: .gitignore
================================================
node_modules/
*.DS_Store
.DS_Store
doc/
dist/
demo/dist/
packages/*/dist/
release/
npm-debug.log*
coverage/
jsdoc/
doc/
outjs/
declaration/
build/
.vscode/
rollup-plugin-visualizer/
statistics/
.scene_cache
*.mp4
================================================
FILE: .npmignore
================================================
node_modules/
*.DS_Store
.DS_Store
doc/
template/
example/
karma.conf.js
test/
mocha.opts
Gruntfile.js
webpack.*.js
.travis.yml
packages
release/
demo/
coverage/
dist/report.html
rollup-plugin-visualizer/
outjs/
.scene_cache
*.mp3
*.mp4
================================================
FILE: .yarnrc
================================================
workspaces-experimental true
================================================
FILE: CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.29.2](https://github.com/daybrush/guides/compare/0.29.1...0.29.2) (2023-07-29)
### :sparkles: Packages
* `croact-guides` 0.26.2
* `@scena/guides` 0.29.2
* `preact-guides` 0.28.2
* `@scena/react-guides` 0.28.2
* `svelte-guides` 0.28.2
* `vue-guides` 0.28.2
* `vue3-guides` 0.12.2
* `ngx-guides` 0.28.2
### :bug: Bug Fix
* `@scena/react-guides`
* remove console.log #71 ([ebe4518](https://github.com/daybrush/guides/commit/ebe451868f594f0afd4d040bc7f054bce50e4e97))
### :mega: Other
* All
* publish packages ([9b659fe](https://github.com/daybrush/guides/commit/9b659fe71eb2fcb53b731e88b1561a0b18b9fcdc))
## [0.29.1](https://github.com/daybrush/guides/compare/0.29.0...0.29.1) (2023-07-23)
### :sparkles: Packages
* `croact-guides` 0.26.1
* `@scena/guides` 0.29.1
* `preact-guides` 0.28.1
* `@scena/react-guides` 0.28.1
* `svelte-guides` 0.28.1
* `vue-guides` 0.28.1
* `vue3-guides` 0.12.1
* `ngx-guides` 0.28.1
### :bug: Bug Fix
* `@scena/react-guides`
* fix guides zoom #83 ([207f218](https://github.com/daybrush/guides/commit/207f218266968c0a206df10a0732312e3a6508de))
### :mega: Other
* All
* publish packages ([73e2427](https://github.com/daybrush/guides/commit/73e24270c27eec1f30cc051fe84569e79f85822c))
## [0.29.0](https://github.com/daybrush/guides/compare/0.28.0...0.29.0) (2023-07-22)
### :sparkles: Packages
* `croact-guides` 0.26.0
* `@scena/guides` 0.29.0
* `preact-guides` 0.28.0
* `@scena/react-guides` 0.28.0
* `svelte-guides` 0.28.0
* `vue-guides` 0.28.0
* `vue3-guides` 0.12.0
* `ngx-guides` 0.28.0
### :rocket: New Features
* `@scena/react-guides`
* add `guidesZoom` prop #83 ([42694cc](https://github.com/daybrush/guides/commit/42694cc48173a31df52e430697a43dfe2569426b))
### :mega: Other
* All
* publish packages ([324f848](https://github.com/daybrush/guides/commit/324f848e0bae231c82b33be29ee2534d58a6d6b1))
## [0.28.0](https://github.com/daybrush/guides/compare/0.27.0...0.28.0) (2023-06-02)
### :sparkles: Packages
* `croact-guides` 0.25.0
* `@scena/guides` 0.28.0
* `preact-guides` 0.27.0
* `@scena/react-guides` 0.27.0
* `svelte-guides` 0.27.0
* `vue-guides` 0.27.0
* `vue3-guides` 0.11.0
* `ngx-guides` 0.27.0
### :rocket: New Features
* `preact-guides`, `croact-guides`, `@scena/react-guides`
* update ruler and add drawRuler method ([20b1182](https://github.com/daybrush/guides/commit/20b1182c3e8c93980418f34e1360cb4c81a2a0d3))
### :mega: Other
* All
* publish packages ([53d07f3](https://github.com/daybrush/guides/commit/53d07f3e31011ee6bff1a2558380dc6e61e98337))
## [0.27.0](https://github.com/daybrush/guides/compare/0.26.5...0.27.0) (2023-06-01)
### :sparkles: Packages
* `croact-guides` 0.24.0
* `@scena/guides` 0.27.0
* `preact-guides` 0.26.0
* `@scena/react-guides` 0.26.0
* `svelte-guides` 0.26.0
* `vue-guides` 0.26.0
* `vue3-guides` 0.10.0
* `ngx-guides` 0.26.0
### :rocket: New Features
* `preact-guides`, `croact-guides`, `@scena/react-guides`, `@scena/guides`
* update ruler and modules ([f528ce4](https://github.com/daybrush/guides/commit/f528ce4c7ef6dd554112a7b86a0f7449d7cd230f))
* `svelte-guides`
* support svelte types ([a401a7a](https://github.com/daybrush/guides/commit/a401a7a4f1325e8364aef55d1728a27167dc1c91))
### :mega: Other
* All
* publish packages ([d038e92](https://github.com/daybrush/guides/commit/d038e92046e55f0f65f4ddde24f12ed117fd64e2))
## [0.26.5](https://github.com/daybrush/guides/compare/0.26.4...0.26.5) (2023-05-16)
### :sparkles: Packages
* `croact-guides` 0.23.3
* `@scena/guides` 0.26.5
* `preact-guides` 0.25.3
* `@scena/react-guides` 0.25.3
* `svelte-guides` 0.25.5
* `vue-guides` 0.25.5
* `vue3-guides` 0.9.5
* `ngx-guides` 0.25.5
### :bug: Bug Fix
* `preact-guides`, `croact-guides`
* update css-styled version ([7327395](https://github.com/daybrush/guides/commit/7327395786810c872f53678d47602b80db127197))
### :mega: Other
* All
* publish packages ([78ed8c7](https://github.com/daybrush/guides/commit/78ed8c708759927cabeb53b8c607fc6f54324371))
## [0.26.4](https://github.com/daybrush/guides/compare/0.26.2...0.26.4) (2023-05-15)
### :sparkles: Packages
* `croact-guides` 0.23.2
* `@scena/guides` 0.26.4
* `preact-guides` 0.25.2
* `@scena/react-guides` 0.25.2
* `svelte-guides` 0.25.4
* `vue-guides` 0.25.4
* `vue3-guides` 0.9.4
* `ngx-guides` 0.25.4
### :rocket: New Features
* `preact-guides`, `croact-guides`, `@scena/react-guides`, `@scena/guides`
* update depency modules ([21b67a8](https://github.com/daybrush/guides/commit/21b67a80dfd61183e175d9ac6c64502c092aba74))
### :bug: Bug Fix
* `@scena/guides`
* fix containerProvider #81 ([d12a0b2](https://github.com/daybrush/guides/commit/d12a0b213adac199f61358f71a0787f1d05208ba))
### :mega: Other
* All
* publish packages ([1898b89](https://github.com/daybrush/guides/commit/1898b895d5c812a5fd77d99a5928f7e420152772))
* `vue3-guides`, `vue-guides`, `svelte-guides`, `ngx-guides`, `@scena/guides`
* update packages ([d8db884](https://github.com/daybrush/guides/commit/d8db884cdf43c19f77ad9c5721d3a466808853c3))
## [0.26.2](https://github.com/daybrush/guides/compare/0.26.0...0.26.2) (2023-05-07)
### :sparkles: Packages
* `croact-guides` 0.23.1
* `@scena/guides` 0.26.2
* `preact-guides` 0.25.1
* `@scena/react-guides` 0.25.1
* `svelte-guides` 0.25.2
* `vue-guides` 0.25.2
* `vue3-guides` 0.9.2
* `ngx-guides` 0.25.2
### :bug: Bug Fix
* `@scena/guides`
* fix not triggered events #80 ([a8acea3](https://github.com/daybrush/guides/commit/a8acea31ceb22a89055e117c67e4d122e4cb52ac))
* `@scena/react-guides`
* fix resize observer ([29cf3b0](https://github.com/daybrush/guides/commit/29cf3b076abf7095fd22c65f6a2baf9ac70287cb))
### :mega: Other
* All
* publish packages ([e1fb57c](https://github.com/daybrush/guides/commit/e1fb57c59a4a8e6b3e55ffb68cfea64760270288))
* `vue3-guides`, `vue-guides`, `svelte-guides`, `ngx-guides`, `croact-guides`, `@scena/guides`
* update croact version ([2fd28db](https://github.com/daybrush/guides/commit/2fd28dbbfd648b8ee6fee39f3972057fce580ae0))
## [0.26.0](https://github.com/daybrush/guides/compare/0.25.0...0.26.0) (2023-04-12)
### :sparkles: Packages
* `croact-guides` 0.23.0
* `@scena/guides` 0.26.0
* `preact-guides` 0.25.0
* `@scena/react-guides` 0.25.0
* `svelte-guides` 0.25.0
* `vue-guides` 0.25.0
* `vue3-guides` 0.9.0
* `ngx-guides` 0.25.0
### :rocket: New Features
* `croact-guides`, `@scena/react-guides`
* add resize cursor ([85fb038](https://github.com/daybrush/guides/commit/85fb038c910e9c6c6f7432ad64acf54eaac1d0eb))
* `@scena/react-guides`
* add defaultGuidesPos prop ([a7d31ea](https://github.com/daybrush/guides/commit/a7d31eacc9ecc429fc0aa3cf6e909eb02047acba))
### :bug: Bug Fix
* `svelte-guides`
* fix svelte main field ([9157cef](https://github.com/daybrush/guides/commit/9157cef04c3688b7d14596043c5ad774f9aa5179))
### :mega: Other
* All
* publish packages ([548990d](https://github.com/daybrush/guides/commit/548990d8577ffe565b8605f74edd9eb5a6519deb))
## [0.25.0](https://github.com/daybrush/guides/compare/0.24.0...0.25.0) (2023-04-06)
### :sparkles: Packages
* `croact-guides` 0.22.0
* `@scena/guides` 0.25.0
* `preact-guides` 0.24.0
* `@scena/react-guides` 0.24.0
* `svelte-guides` 0.24.0
* `vue-guides` 0.24.0
* `vue3-guides` 0.8.0
* `ngx-guides` 0.24.0
### :rocket: New Features
* All
* add croact-guides ([a7be435](https://github.com/daybrush/guides/commit/a7be435704e24b6d80af80e069a6cc4047d645bc))
### :memo: Documentation
* `ngx-guides`
* fix Angular README #79 ([4f8b64d](https://github.com/daybrush/guides/commit/4f8b64d1a36e496431e785ea2d2e0cb18b94d9c4))
### :mega: Other
* All
* publish packages ([f30e2ba](https://github.com/daybrush/guides/commit/f30e2bad78e1bc02307c8dde8cb1b69ecccdf116))
## [0.24.0](https://github.com/daybrush/guides/compare/0.23.3...0.24.0) (2023-03-04)
### :sparkles: Packages
* `@scena/guides` 0.24.0
* `preact-guides` 0.23.0
* `react-compat-guides` 0.21.0
* `@scena/react-guides` 0.23.0
* `svelte-guides` 0.23.0
* `vue-guides` 0.23.0
* `vue3-guides` 0.7.0
* `ngx-guides` 0.23.0
### :rocket: New Features
* `react-compat-guides`, `preact-guides`, `@scena/react-guides`
* update ruler ([f59fa59](https://github.com/daybrush/guides/commit/f59fa5988f3c4dd96925677ca787e4fb55b150f1))
### :bug: Bug Fix
* `@scena/react-guides`
* update Guides.tsx (#75) ([a11951c](https://github.com/daybrush/guides/commit/a11951c622818d2d80aa47d45dae9fc4379fc2c2))
### :memo: Documentation
* `@scena/react-guides`
* fix type docs ([a5946eb](https://github.com/daybrush/guides/commit/a5946eb64d86079fb5f17810f9f511bc78802e1c))
### :mega: Other
* All
* publish packages ([1afbe1d](https://github.com/daybrush/guides/commit/1afbe1d193cf2457dc9f3296b73d38b5859c0ee0))
## [0.23.3](https://github.com/daybrush/guides/compare/0.23.2...0.23.3) (2023-02-04)
### :sparkles: Packages
* `@scena/guides` 0.23.3
* `preact-guides` 0.22.3
* `react-compat-guides` 0.20.3
* `@scena/react-guides` 0.22.3
* `svelte-guides` 0.22.3
* `vue-guides` 0.22.3
* `vue3-guides` 0.6.3
* `ngx-guides` 0.22.3
### :bug: Bug Fix
* `@scena/react-guides`
* added missing Guide Options Properties (#73) ([182c6c3](https://github.com/daybrush/guides/commit/182c6c39f5bf1bba19486b84f7db1f1327fc989d))
* fix typo ([b58e3a7](https://github.com/daybrush/guides/commit/b58e3a7c7adab44e7a9228f1dfe783996182c1e6))
### :mega: Other
* All
* publish packages ([ae0d147](https://github.com/daybrush/guides/commit/ae0d14738d83b4f5352463b69f89efe7cc111baf))
## [0.23.2](https://github.com/daybrush/guides/compare/0.23.1...0.23.2) (2023-01-29)
### :sparkles: Packages
* `@scena/guides` 0.23.2
* `preact-guides` 0.22.2
* `react-compat-guides` 0.20.2
* `@scena/react-guides` 0.22.2
* `svelte-guides` 0.22.2
* `vue-guides` 0.22.2
* `vue3-guides` 0.6.2
* `ngx-guides` 0.22.2
### :bug: Bug Fix
* `@scena/react-guides`
* fix missing property #72 ([b14c179](https://github.com/daybrush/guides/commit/b14c17987e9305fb9cc8d5d59318179f00d33693))
### :mega: Other
* All
* publish packages ([0f7949a](https://github.com/daybrush/guides/commit/0f7949a9954e2093d6a599dc545f988ed624d41f))
## [0.23.1](https://github.com/daybrush/guides/compare/0.23.0...0.23.1) (2023-01-29)
### :sparkles: Packages
* `@scena/guides` 0.23.1
* `preact-guides` 0.22.1
* `react-compat-guides` 0.20.1
* `@scena/react-guides` 0.22.1
* `svelte-guides` 0.22.1
* `vue-guides` 0.22.1
* `vue3-guides` 0.6.1
* `ngx-guides` 0.22.1
### :bug: Bug Fix
* `@scena/react-guides`
* remove console.log ([c1c55b7](https://github.com/daybrush/guides/commit/c1c55b7965edb34a1ad83f9b03886ba5a52a4c92))
### :mega: Other
* All
* publish packages ([ab753c1](https://github.com/daybrush/guides/commit/ab753c1c820463c1c0b7805d428c803c5eacc1e3))
## [0.23.0](https://github.com/daybrush/guides/compare/0.22.0...0.23.0) (2023-01-29)
### :sparkles: Packages
* `@scena/guides` 0.23.0
* `preact-guides` 0.22.0
* `react-compat-guides` 0.20.0
* `@scena/react-guides` 0.22.0
* `svelte-guides` 0.22.0
* `vue-guides` 0.22.0
* `vue3-guides` 0.6.0
* `ngx-guides` 0.22.0
### :rocket: New Features
* `@scena/react-guides`
* add zoomTo prop #62 ([ac19fee](https://github.com/daybrush/guides/commit/ac19fee790aee7a984beec551e1873dba8ef4d9f))
### :mega: Other
* All
* publish packages ([6f83fa0](https://github.com/daybrush/guides/commit/6f83fa0c75f494aa79fff98f4a57f86ab295b67d))
## [0.22.0](https://github.com/daybrush/guides/compare/0.21.1...0.22.0) (2023-01-28)
### :sparkles: Packages
* `@scena/guides` 0.22.0
* `preact-guides` 0.21.0
* `react-compat-guides` 0.19.0
* `@scena/react-guides` 0.21.0
* `svelte-guides` 0.21.0
* `vue-guides` 0.21.0
* `vue3-guides` 0.5.0
* `ngx-guides` 0.21.0
### :rocket: New Features
* `@scena/react-guides`
* add guidesOffset prop #49 ([6335663](https://github.com/daybrush/guides/commit/6335663a713bf0d9e312757e9e082f62d79cd9e7))
### :bug: Bug Fix
* `@scena/react-guides`
* fix remove index #9 ([54907a3](https://github.com/daybrush/guides/commit/54907a38e036973c2dbe07266bfc3bdf633676c6))
### :mega: Other
* All
* publish packages ([9473e84](https://github.com/daybrush/guides/commit/9473e8464fbd4c374ac6251ff995586afd163719))
## [0.21.1](https://github.com/daybrush/guides/compare/0.21.0...0.21.1) (2023-01-27)
### :sparkles: Packages
* `@scena/guides` 0.21.1
* `preact-guides` 0.20.1
* `react-compat-guides` 0.18.1
* `@scena/react-guides` 0.20.1
* `svelte-guides` 0.20.1
* `vue-guides` 0.20.1
* `vue3-guides` 0.4.1
* `ngx-guides` 0.20.1
### :mega: Other
* All
* publish packages ([628b944](https://github.com/daybrush/guides/commit/628b9444bb9e6f5546c7a5edd55a090126f52dd5))
## [0.21.0](https://github.com/daybrush/guides/compare/0.20.0...0.21.0) (2023-01-20)
### :sparkles: Packages
* `@scena/guides` 0.21.0
* `preact-guides` 0.20.0
* `react-compat-guides` 0.18.0
* `@scena/react-guides` 0.20.0
* `svelte-guides` 0.20.0
* `vue-guides` 0.20.0
* `vue3-guides` 0.4.0
* `ngx-guides` 0.20.0
### :rocket: New Features
* `react-compat-guides`, `@scena/react-guides`
* add getGuideScrollPos, getRulerScrollPos ([9687c89](https://github.com/daybrush/guides/commit/9687c89598ab9136c6d26cb06ebba2ca45dc26ae))
### :bug: Bug Fix
* `vue3-guides`, `vue-guides`, `svelte-guides`, `react-compat-guides`, `preact-guides`, `@scena/react-guides`, `@scena/guides`
* fix files field #67 ([28bf5b3](https://github.com/daybrush/guides/commit/28bf5b3bd97cebd94eaf2195f0e99750f14e7ecb))
* `ngx-guides`, `@scena/react-guides`
* fix missing guideStyle prop #69 ([1520b89](https://github.com/daybrush/guides/commit/1520b896c29a2f11d96d55d2dbf51c0c06d9a113))
* `@scena/react-guides`
* fix base class names ([25e00d0](https://github.com/daybrush/guides/commit/25e00d08a9e1410134ba6b352ae722af57f5ff38))
* fix dragScroll #68 ([62f7871](https://github.com/daybrush/guides/commit/62f787157fff4a3ea95c2a840fcb94a6f03ad6bb))
* fix first defaultGuides prop ([b07ea2e](https://github.com/daybrush/guides/commit/b07ea2ee9a2f5485a2468323a1e23cfda788163b))
* fix types #63 ([ee8706f](https://github.com/daybrush/guides/commit/ee8706f2598045e7693bcb4119a2754c1cb81701))
### :mega: Other
* All
* publish packages ([095e7c6](https://github.com/daybrush/guides/commit/095e7c670d3bd0bdc168e2f3c11b5dbb8074b26b))
* publish packages ([1daa6ea](https://github.com/daybrush/guides/commit/1daa6ea441f6c96b8f354953605cd6ac89117878))
* publish packages ([e143c21](https://github.com/daybrush/guides/commit/e143c2175309bf480ef17731321f6728b8d6bcc2))
* publish packages ([ce2037a](https://github.com/daybrush/guides/commit/ce2037a18f5f6bbcd750e1fd72cbfc60e3f2c217))
* publish packages ([0abcba2](https://github.com/daybrush/guides/commit/0abcba24e8b83ea51cf369124e8c2d85fee1ef7e))
## [0.20.0](https://github.com/daybrush/guides/compare/0.19.0...0.20.0) (2022-11-13)
### :sparkles: Packages
* `@scena/guides` 0.20.0
* `preact-guides` 0.19.0
* `react-compat-guides` 0.17.0
* `@scena/react-guides` 0.19.0
* `svelte-guides` 0.19.0
* `vue-guides` 0.19.0
* `vue3-guides` 0.3.0
* `ngx-guides` 0.19.0
### :rocket: New Features
* All
* add scrollOptions #64 ([e0dc92a](https://github.com/daybrush/guides/commit/e0dc92a9ed417dff071b43a68b065907f8f1b8ad))
* `@scena/react-guides`
* add getElement method, index property #63 #66 ([627cd2b](https://github.com/daybrush/guides/commit/627cd2bdeb15aeeb41171e5318edc6c4a20ffc7a))
### :bug: Bug Fix
* `vue-guides`, `svelte-guides`, `react-compat-guides`, `preact-guides`, `@scena/react-guides`, `@scena/guides`
* update dependencies ([054e101](https://github.com/daybrush/guides/commit/054e101d1b177bdfefab74bf440a4cb3cf8137be))
* `react-compat-guides`, `preact-guides`, `ngx-guides`, `@scena/react-guides`, `@scena/guides`
* fix scroll event name ([6eba67b](https://github.com/daybrush/guides/commit/6eba67b33c0de50e1c68ff75882889227db663bc))
* `@scena/react-guides`
* fix same pos guideline #65 ([94a7b6a](https://github.com/daybrush/guides/commit/94a7b6af76128782fe3e1fa6d5ae3d5ff70b8276))
### :memo: Documentation
* added a new reference (#54) ([492f72a](https://github.com/daybrush/guides/commit/492f72a2d66f2f28d8c48d8603acba3b1525bedf))
### :mega: Other
* All
* publish packages ([9cc8e3a](https://github.com/daybrush/guides/commit/9cc8e3ae5f83aa1513c1560166c6babbbe31dfd7))
## [0.19.0](https://github.com/daybrush/guides/compare/0.18.2...0.19.0) (2022-09-21)
### :sparkles: Packages
* `@scena/guides` 0.19.0
* `preact-guides` 0.18.0
* `react-compat-guides` 0.16.0
* `@scena/react-guides` 0.18.0
* `svelte-guides` 0.18.0
* `vue-guides` 0.18.0
* `vue3-guides` 0.2.0
* `ngx-guides` 0.18.0
### :rocket: New Features
* `react-compat-guides`, `preact-guides`, `@scena/react-guides`
* set zoom dynamically by nextZoom ([b35f2cb](https://github.com/daybrush/guides/commit/b35f2cb5bc5a8606e8494e0e2bf528577cae1393))
### :mega: Other
* All
* apply lerna ([63f4f1f](https://github.com/daybrush/guides/commit/63f4f1ff447c52d96e91d289d56414a2e84687f8))
* publish packages ([83de3e4](https://github.com/daybrush/guides/commit/83de3e4ae4bad11905939a44dfa2776fe7d6987d))
* Other
* Release 0.18.2 ([e8fde6e](https://github.com/daybrush/guides/commit/e8fde6e5b9076ed3137f2d071b03d7f939182099))
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
<h2 align="middle">Guides</h2>
<p align="middle">
<a href="https://www.npmjs.com/package/@scena/guides" target="_blank"><img src="https://img.shields.io/npm/v/@scena/guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue3-guides" target="_blank"><img
alt="Vue3"
src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Svelte"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p align="middle">A Guides component that can draw ruler and manage guidelines.</p>
<p align="middle">
<a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
<a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
<a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
<a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
</p>
## ⚙️ Installation
### npm
```sh
$ npm i @scena/guides
```
### scripts
```html
<script src="//daybrush.com/guides/release/latest/dist/guides.min.js"></script>
```
## 🚀 How to use
```tsx
import Guides from "@scena/guides";
const guides = new Guides(document.body, {
type: "horizontal",
}).on("changeGuides", e => {
console.log(e.guides);
});
let scrollX = 0;
let scrollY = 0;
window.addEventListener("resize", () => {
guides.resize();
});
window.addEventListener("wheel", e => {
scrollX += e.deltaX;
scrollY += e.deltaY;
guides.scrollGuides(scrollY);
guides.scroll(scrollX);
});
```
### Ruler Units
The default unit is px, and a line is drawn every 50px. If you want to use a different unit instead of the px unit, use it like this:
* 1px (Default)
* zoom: 1
* unit: 50 (every 50px)
* 1cm = 37.7952px
* zoom: 37.7952
* unit: 1 (every 1cm)
* 1in = 96px = 2.54cm
* zoom: 96
* unit: 1 (every 1in)
See:
- https://www.w3schools.com/cssref/css_units.asp
- https://www.scaler.com/topics/css/css-units/
## ⚙️ Developments
The `guides` repo is managed as a [monorepo](https://github.com/lerna/lerna) with `yarn`.
```sh
yarn config set registry https://registry.npmjs.org/
```
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If you have any questions or requests or want to contribute to `guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
## 📝 License
This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
```
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
================================================
FILE: config/update-type-consts.js
================================================
const path = require("path");
const { convertProperties } = require("@daybrush/release/angular");
const { PROPERTIES, EVENTS } = require("../packages/react-guides/dist/guides.cjs.js");
convertProperties(
{
ANGULAR_GUIDES_INPUTS: PROPERTIES,
ANGULAR_GUIDES_OUTPUTS: EVENTS,
},
[
path.resolve(__dirname, "../packages/ngx-guides/projects/ngx-guides/src/public-api.ts"),
],
);
================================================
FILE: demo/index.css
================================================
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:100&display=swap");
html, body {
font-family: "Open Sans", sans-serif;
position: relative;
margin: 0;
padding: 0;
height: 100%;
color: #333;
letter-spacing: 1px;
background: #f5f5f5;
font-weight: 300;
touch-action: manipulation;
}
#root, .page {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
a {
text-decoration: none;
color: #333;
}
.ruler {
position:absolute;
top: 0;
left: 0;
}
.ruler.horizontal {
left: 0px;
width: 100%;
height: 30px;
}
.ruler.vertical {
top: 0px;
width: 30px;
height: 100%;
}
.box {
position: relative;
width: 30px;
height: 30px;
background: #444;
box-sizing: border-box;
z-index: 21;
}
.box:before, .box:after {
position: absolute;
content: "";
background: #777;
}
.box:before {
width: 1px;
height: 100%;
left: 100%;
}
.box:after {
height: 1px;
width: 100%;
top: 100%;
}
.container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
max-width: calc(100% - 60px);
width: 100%;
}
.badges {
padding: 10px;
}
.badges img {
height: 20px;
margin: 0px 2px;
}
.buttons {
text-align: center;
margin: 0;
padding: 10px;
}
.buttons a {
margin: 0;
position: relative;
text-decoration: none;
color: #333;
border: 1px solid #333;
padding: 12px 30px;
min-width: 140px;
text-align: center;
display: inline-block;
box-sizing: border-box;
margin: 5px;
transition: all ease 0.5s;
}
.buttons a:hover {
background: #333;
color: #fff;
}
p {
padding: 0;
margin: 0;
}
.dragit {
font-weight: bold;
}
================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="description" content="A Guides component that can draw ruler and manage guidelines." />
<meta property="og:title" content="A Guides component that can draw ruler and manage guidelines.">
<meta property="og:url" content="https://daybrush.com/guides">
<meta property="og:image" content="https://daybrush.com/guides/images/guides1920x1080.png">
<meta property="og:description" content="A Guides component that can draw ruler and manage guidelines.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="A Guides component that can draw ruler and manage guidelines.">
<meta name="twitter:url" content="https://daybrush.com/guides">
<meta name="twitter:image" content="https://daybrush.com/guides/images/guides1920x1080.png">
<meta name="twitter:description" content="A Guides component that can draw ruler and manage guidelines.">
<meta name="theme-color" content="#f5f5f5">
<title>A Guides component that can draw ruler and manage guidelines.</title>
<link rel="stylesheet" type="text/css" href="./index.css" />
</head>
<body>
<div class="box"></div>
<div class="ruler horizontal">
</div>
<div class="ruler vertical">
</div>
<div class="container">
<img src="https://daybrush.com/guides/images/guides.png" width="200" alt="guides" />
<p class="dragit">Drag Screen & Rulers!</p>
<p class="badges">
<a href="https://www.npmjs.com/package/@scena/guides" target="_blank">
<img src="https://img.shields.io/npm/v/@scena/guides.svg?style=flat-square&color=007acc&label=version"
alt="npm version" /></a>
<a href="https://github.com/daybrush/guides" target="_blank">
<img src="https://img.shields.io/github/stars/daybrush/guides.svg?color=42b883&style=flat-square" /></a>
<a href="https://github.com/daybrush/guides" target="_blank">
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />
</a>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank">
<img
src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D" />
</a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img
alt="React"
src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img
alt="Preact"
src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
alt="Angular"
src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Svelte"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p class="description">A Guides component that can draw ruler and manage guidelines.</p>
<div class="buttons">
<a href="https://github.com/daybrush/guides" target="_blank">Download</a>
<!-- <a href="./release/latest/doc" target="_blank">API</a> -->
</div>
</div>
<script src="https://daybrush.com/gesto/release/latest/dist/gesto.js"></script>
<script src="./release/latest/dist/guides.js"></script>
<script>
const guides1 = new Guides(document.querySelector(".ruler.horizontal"), {
type: "horizontal",
displayDragPos: true,
rulerStyle: { left: "30px", width: "calc(100% - 30px)", height: "100%" },
useResizeObserver: true,
});
const guides2 = new Guides(document.querySelector(".ruler.vertical"), {
type: "vertical",
displayDragPos: true,
rulerStyle: { top: "30px", height: "calc(100% - 30px)", width: "100%" },
useResizeObserver: true,
});
let scrollX = 0;
let scrollY = 0;
const box = document.querySelector(".box");
new Gesto(document.body).on("dragStart", e => {
if (e.inputEvent.target === box || e.inputEvent.target.nodeName === "A") {
return false;
}
}).on("drag", e => {
scrollX -= e.deltaX;
scrollY -= e.deltaY;
guides1.scroll(scrollX);
guides1.scrollGuides(scrollY);
guides2.scroll(scrollY);
guides2.scrollGuides(scrollX);
});
box.addEventListener("click", () => {
scrollX = 0;
scrollY = 0;
guides1.scroll(0);
guides1.scrollGuides(0);
guides2.scroll(0);
guides2.scrollGuides(0);
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-TRBNXHQ0ZF');
</script>
</body>
</html>
================================================
FILE: jsdoc.json
================================================
{
"plugins": [],
"recurseDepth": 10,
"opts": {
"template": "./node_modules/daybrush-jsdoc-template",
"destination": "./doc/"
},
"source": {
"include": [
"packages/guides/src",
"README.md",
"packages/react-guides/src/react-guides",
"node_modules/@scena/event-emitter/src",
"node_modules/@scena/react-ruler/src/react-ruler"
],
"includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$",
"excludePattern": "(^|\\/|\\\\)_"
},
"sourceType": "module",
"tags": {
"allowUnknownTags": true,
"dictionaries": [
"jsdoc",
"closure"
]
},
"templates": {
"cleverLinks": false,
"monospaceLinks": false,
"default": {
"staticFiles": {
"include": [
"./static"
]
}
}
},
"linkMap": {
"IObject": "http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface",
"DragScrollOptions": "https://daybrush.com/dragscroll/release/latest/doc/global.html#DragScrollOptions"
},
"docdash": {
"repo": "daybrush/guides",
"menu": {
"Github repo": {
"href": "https://github.com/daybrush/guides",
"target": "_blank",
"class": "menu-item",
"id": "repository"
}
}
}
}
================================================
FILE: lerna.json
================================================
{
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*",
"packages/ngx-guides/projects/ngx-guides"
],
"version": "independent",
"lernaHelperOptions": {
"deployFileMap": [
{
"basePath": "packages/guides/dist",
"dists": [
"demo/release/{{version}}/dist",
"demo/release/latest/dist"
]
},
{
"basePath": "doc",
"dists": [
"demo/release/{{version}}/doc",
"demo/release/latest/doc"
]
}
],
"beforeReleaseScripts": [
"npm run packages:build",
"npm run doc",
"npm run deploy"
]
}
}
================================================
FILE: package.json
================================================
{
"name": "guides-root",
"private": true,
"description": "A Guides component that can draw ruler and manage guidelines.",
"keywords": [
"scene",
"scenejs",
"scene.js",
"scena",
"ruler",
"guides",
"scroller"
],
"repository": {
"type": "git",
"url": "git+https://github.com/daybrush/guides.git"
},
"author": "Daybrush",
"license": "MIT",
"bugs": {
"url": "https://github.com/daybrush/guides/issues"
},
"homepage": "https://github.com/daybrush/guides#readme",
"scripts": {
"build": "npm run build --prefix ./packages/guides",
"packages:update": "lerna-helper version && yarn && npm run update-type-consts",
"update-type-consts": "node ./config/update-type-consts.js",
"packages:build": "npm run build --prefix packages/react-guides && npm run update-type-consts && lerna run build --ignore ngx-guides --ignore @scena/react-guides",
"packages:publish": "lerna-helper publish --ignore ngx-guides --commit 'chore: publish packages'",
"demo:build": "npm run packages:build && npm run doc && npm run build:storybook && npm run build:storybook2",
"changelog": "lerna-helper changelog --type all --base @scena/guides",
"changelog:root": "lerna-helper changelog --type root --base @scena/guides",
"doc": "rm -rf ./doc && jsdoc -c jsdoc.json",
"predeploy": "lerna-helper deploy --base @scena/guides --pre",
"deploy": "lerna-helper deploy --base @scena/guides",
"release": "lerna-helper release --base @scena/guides"
},
"devDependencies": {
"@daybrush/jsdoc": "^0.4.7",
"@daybrush/release": "^0.7.1",
"cpx": "1.5.0",
"daybrush-jsdoc-template": "^1.10.0",
"gh-pages": "^2.0.1",
"intercept-stdout": "0.1.2",
"lerna": "^4.0.0",
"lerna-changelog": "2.2.0",
"typescript": "^4.5.0 <4.6.0"
},
"workspaces": {
"nohoist": [
"**/@daybrush/builder",
"**/@daybrush/builder/**",
"**/rollup-plugin-vue",
"**/rollup-plugin-vue/**",
"**/karma",
"**/karma/**",
"**/karma-*",
"**/karma-*/**",
"**/@tyoes/chai",
"**/@tyoes/chai/**",
"**/@types/karma-chai",
"**/@types/karma-chai/**",
"**/@types/mocha",
"**/@types/mocha/**",
"**/@vue/*",
"**/@vue/*/**",
"**/vue",
"**/vue/**"
],
"packages": [
"packages/*",
"packages/ngx-guides/projects/ngx-guides"
]
},
"resolutions": {
"@daybrush/utils": "^1.12.1",
"@types/react": "^16.9.17",
"typescript": "^4.5.0 <4.6.0",
"@egjs/agent": "^2.2.1",
"@egjs/children-differ": "^1.0.1",
"@scena/dragscroll": "^1.3.0",
"@scena/matrix": "^1.1.1",
"css-to-mat": "^1.0.3",
"framework-utils": "^1.1.0",
"gesto": "^1.18.1",
"overlap-area": "^1.1.0",
"croact-css-styled": "^1.1.8",
"react-css-styled": "^1.1.8",
"tslib": "^2.3.0"
},
"overrides": {
"@daybrush/utils": "^1.12.1",
"@types/react": "^16.9.17",
"typescript": "^4.5.0 <4.6.0",
"@egjs/agent": "^2.2.1",
"@egjs/children-differ": "^1.0.1",
"@scena/dragscroll": "^1.3.0",
"@scena/matrix": "^1.1.1",
"css-to-mat": "^1.0.3",
"framework-utils": "^1.1.0",
"gesto": "^1.18.1",
"overlap-area": "^1.1.0",
"croact-css-styled": "^1.1.8",
"react-css-styled": "^1.1.8",
"tslib": "^2.3.0"
}
}
================================================
FILE: packages/croact-guides/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.26.2](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.26.1...croact-guides@0.26.2) (2023-07-29)
### :mega: Other
* publish packages ([9b659fe](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/9b659fe71eb2fcb53b731e88b1561a0b18b9fcdc))
## [0.26.1](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.26.0...croact-guides@0.26.1) (2023-07-23)
### :mega: Other
* publish packages ([73e2427](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/73e24270c27eec1f30cc051fe84569e79f85822c))
## [0.26.0](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.25.0...croact-guides@0.26.0) (2023-07-22)
### :mega: Other
* publish packages ([324f848](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/324f848e0bae231c82b33be29ee2534d58a6d6b1))
## [0.25.0](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.24.0...croact-guides@0.25.0) (2023-06-02)
### :rocket: New Features
* update ruler and add drawRuler method ([20b1182](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/20b1182c3e8c93980418f34e1360cb4c81a2a0d3))
### :mega: Other
* publish packages ([53d07f3](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/53d07f3e31011ee6bff1a2558380dc6e61e98337))
## [0.24.0](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.23.3...croact-guides@0.24.0) (2023-06-01)
### :rocket: New Features
* update ruler and modules ([f528ce4](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/f528ce4c7ef6dd554112a7b86a0f7449d7cd230f))
### :mega: Other
* publish packages ([d038e92](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/d038e92046e55f0f65f4ddde24f12ed117fd64e2))
## [0.23.3](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.23.2...croact-guides@0.23.3) (2023-05-16)
### :bug: Bug Fix
* update css-styled version ([7327395](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/7327395786810c872f53678d47602b80db127197))
### :mega: Other
* publish packages ([78ed8c7](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/78ed8c708759927cabeb53b8c607fc6f54324371))
## [0.23.2](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.23.1...croact-guides@0.23.2) (2023-05-15)
### :rocket: New Features
* update depency modules ([21b67a8](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/21b67a80dfd61183e175d9ac6c64502c092aba74))
### :mega: Other
* publish packages ([1898b89](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/1898b895d5c812a5fd77d99a5928f7e420152772))
## [0.23.1](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.23.0...croact-guides@0.23.1) (2023-05-07)
### :mega: Other
* publish packages ([e1fb57c](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/e1fb57c59a4a8e6b3e55ffb68cfea64760270288))
* update croact version ([2fd28db](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/2fd28dbbfd648b8ee6fee39f3972057fce580ae0))
## [0.23.0](https://github.com/daybrush/guides/blob/master/packages/croact-guides/compare/croact-guides@0.22.0...croact-guides@0.23.0) (2023-04-12)
### :rocket: New Features
* add resize cursor ([85fb038](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/85fb038c910e9c6c6f7432ad64acf54eaac1d0eb))
### :mega: Other
* publish packages ([548990d](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/548990d8577ffe565b8605f74edd9eb5a6519deb))
## 0.22.0 (2023-04-06)
### :rocket: New Features
* add croact-guides ([a7be435](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/a7be435704e24b6d80af80e069a6cc4047d645bc))
### :mega: Other
* publish packages ([f30e2ba](https://github.com/daybrush/guides/blob/master/packages/croact-guides/commit/f30e2bad78e1bc02307c8dde8cb1b69ecccdf116))
## [0.21.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.20.3...react-compat-guides@0.21.0) (2023-03-04)
### :rocket: New Features
* update ruler ([f59fa59](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/f59fa5988f3c4dd96925677ca787e4fb55b150f1))
### :mega: Other
* publish packages ([1afbe1d](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/1afbe1d193cf2457dc9f3296b73d38b5859c0ee0))
## [0.20.3](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.20.2...react-compat-guides@0.20.3) (2023-02-04)
### :mega: Other
* publish packages ([ae0d147](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/ae0d14738d83b4f5352463b69f89efe7cc111baf))
## [0.20.2](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.20.1...react-compat-guides@0.20.2) (2023-01-29)
### :mega: Other
* publish packages ([0f7949a](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/0f7949a9954e2093d6a599dc545f988ed624d41f))
## [0.20.1](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.20.0...react-compat-guides@0.20.1) (2023-01-29)
### :mega: Other
* publish packages ([ab753c1](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/ab753c1c820463c1c0b7805d428c803c5eacc1e3))
## [0.20.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.19.0...react-compat-guides@0.20.0) (2023-01-29)
### :mega: Other
* publish packages ([6f83fa0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/6f83fa0c75f494aa79fff98f4a57f86ab295b67d))
## [0.19.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.18.1...react-compat-guides@0.19.0) (2023-01-28)
### :mega: Other
* publish packages ([9473e84](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/9473e8464fbd4c374ac6251ff995586afd163719))
## [0.18.1](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.18.0...react-compat-guides@0.18.1) (2023-01-27)
### :mega: Other
* publish packages ([628b944](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/628b9444bb9e6f5546c7a5edd55a090126f52dd5))
## [0.18.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.17.0...react-compat-guides@0.18.0) (2023-01-20)
### :rocket: New Features
* add getGuideScrollPos, getRulerScrollPos ([9687c89](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/9687c89598ab9136c6d26cb06ebba2ca45dc26ae))
### :bug: Bug Fix
* fix files field #67 ([28bf5b3](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/28bf5b3bd97cebd94eaf2195f0e99750f14e7ecb))
### :mega: Other
* publish packages ([095e7c6](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/095e7c670d3bd0bdc168e2f3c11b5dbb8074b26b))
* publish packages ([1daa6ea](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/1daa6ea441f6c96b8f354953605cd6ac89117878))
* publish packages ([e143c21](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/e143c2175309bf480ef17731321f6728b8d6bcc2))
* publish packages ([ce2037a](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/ce2037a18f5f6bbcd750e1fd72cbfc60e3f2c217))
* publish packages ([0abcba2](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/0abcba24e8b83ea51cf369124e8c2d85fee1ef7e))
## [0.17.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.16.0...react-compat-guides@0.17.0) (2022-11-13)
### :rocket: New Features
* add scrollOptions #64 ([e0dc92a](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/e0dc92a9ed417dff071b43a68b065907f8f1b8ad))
### :bug: Bug Fix
* fix scroll event name ([6eba67b](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/6eba67b33c0de50e1c68ff75882889227db663bc))
* update dependencies ([054e101](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/054e101d1b177bdfefab74bf440a4cb3cf8137be))
### :mega: Other
* publish packages ([9cc8e3a](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/9cc8e3ae5f83aa1513c1560166c6babbbe31dfd7))
## [0.16.0](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/compare/react-compat-guides@0.15.1...react-compat-guides@0.16.0) (2022-09-21)
### :mega: Other
* publish packages ([83de3e4](https://github.com/daybrush/guides/blob/master/packages/react-compat-guides/commit/83de3e4ae4bad11905939a44dfa2776fe7d6987d))
================================================
FILE: packages/croact-guides/LICENSE
================================================
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/croact-guides/README.md
================================================
================================================
FILE: packages/croact-guides/demo/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Preact App</title>
<link rel="stylesheet" href="./dist/index.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script src="./dist/index.js"></script>
</html>
================================================
FILE: packages/croact-guides/package.json
================================================
{
"name": "croact-guides",
"version": "0.26.2",
"description": "A React Compat Guides component that can draw ruler and manage guidelines.",
"main": "./dist/guides.cjs.js",
"module": "./dist/guides.esm.js",
"sideEffects": false,
"types": "declaration/index.d.ts",
"scripts": {
"lint": "tslint -c tslint.json 'src/**/*.ts'",
"start": "open ./demo/index.html && rollup -c rollup.config.demo.js -w",
"build": "rollup -c && npm run declaration && print-sizes ./dist ",
"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json"
},
"keywords": [
"scene",
"scenejs",
"scene.js",
"scena",
"guides",
"scroller",
"react",
"compat"
],
"repository": {
"type": "git",
"url": "https://github.com/daybrush/guides/blob/master/packages/croact-guides"
},
"author": "Daybrush",
"license": "MIT",
"bugs": {
"url": "https://github.com/daybrush/guides/issues"
},
"homepage": "https://daybrush.com/guides",
"files": [
"./*",
"src/*",
"dist/*",
"declaration/*",
"README.md"
],
"devDependencies": {
"@daybrush/builder": "^0.1.0",
"@scenejs/effects": "^1.0.1",
"@types/react": "^16.0.0",
"croact": "^1.0.3",
"keycon": "^0.3.0",
"print-sizes": "^0.2.0",
"rollup-plugin-css-bundle": "^1.0.4",
"rollup-plugin-react-compat": "^0.1.1",
"scenejs": "^1.1.4",
"shape-svg": "^0.3.3",
"tslint": "^5.16.0",
"typescript": "^4.5.0 <4.6.0"
},
"dependencies": {
"@daybrush/utils": "^1.12.1",
"@scena/dragscroll": "^1.3.0",
"@scena/react-guides": "~0.28.2",
"croact-css-styled": "^1.1.8",
"croact-ruler": "^0.18.0",
"css-to-mat": "^1.0.3",
"framework-utils": "^1.1.0",
"gesto": "^1.18.1",
"react-css-styled": "^1.1.8"
}
}
================================================
FILE: packages/croact-guides/rollup.config.js
================================================
import builder from "@daybrush/builder";
import reactCompat from "rollup-plugin-react-compat";
const external = {
"croact": "croact",
"croact-ruler": "croact-ruler",
"croact-css-styled": "croact-css-styled",
"@daybrush/utils": "utils",
"css-styled": "css-styled",
"framework-utils": "framework-utils",
"gesto": "Gesto",
"@egjs/agent": "eg.Agent",
"@egjs/children-differ": "eg.ChildrenDiffer",
"css-to-mat": "CssToMat",
};
const reactPlugin = reactCompat({
useCroact: true,
aliasModules: {
"@scena/react-ruler": "croact-ruler",
"react-css-styled": "croact-css-styled",
}
})
export default builder([
{
sourcemap: false,
input: "src/index.ts",
output: "./dist/guides.esm.js",
exports: "named",
format: "es",
plugins: [reactPlugin],
external,
},
{
sourcemap: false,
input: "src/index.umd.ts",
output: "./dist/guides.cjs.js",
exports: "default",
plugins: [reactPlugin],
format: "cjs",
external,
},
]);
================================================
FILE: packages/croact-guides/src/index.ts
================================================
import Guides from "@scena/react-guides";
export default Guides;
export * from "@scena/react-guides";
================================================
FILE: packages/croact-guides/src/index.umd.ts
================================================
import Guides, * as others from "./index";
for (const name in others) {
(Guides as any)[name] = (others as any)[name];
}
export default Guides;
================================================
FILE: packages/croact-guides/tsconfig.declaration.json
================================================
{
"extends": "./tsconfig",
"compilerOptions": {
"removeComments": false,
"declaration": true,
"emitDeclarationOnly": true,
"declarationDir": "declaration"
}
}
================================================
FILE: packages/croact-guides/tsconfig.json
================================================
{
"compilerOptions": {
"outDir": "./outjs/",
"esModuleInterop": false,
"sourceMap": true,
"module": "es2015",
"target": "es5",
"experimentalDecorators": true,
"skipLibCheck": true,
"moduleResolution": "node",
"lib": [
"es2015",
"dom"
],
},
"include": [
"./src/**/*.ts"
]
}
================================================
FILE: packages/croact-guides/tslint.json
================================================
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"rules": {
"typedef": [true, "parameter"],
"jsdoc-format": false,
"forin": false,
"no-console": false,
"no-any": false,
"interface-name": false,
"indent": [
true,
"spaces",
4
],
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-unused-expression": false,
"arrow-parens": [
true,
"ban-single-arg-parens"
],
"max-line-length": [
true,
{
"limit": 120,
"ignore-pattern": "(\\* @)|//"
}
],
"trailing-comma": [
true,
{
"multiline": {
"objects": "always",
"arrays": "always",
"functions": "always",
"typeLiterals": "ignore"
},
"esSpecCompliant": true
}
]
}
}
================================================
FILE: packages/guides/.gitignore
================================================
node_modules/
*.DS_Store
.DS_Store
doc/
dist/
demo/dist/
packages/*/dist/
release/
npm-debug.log*
coverage/
jsdoc/
doc/
outjs/
declaration/
build/
.vscode/
rollup-plugin-visualizer/
statistics/
.scene_cache
*.mp4
================================================
FILE: packages/guides/.npmignore
================================================
node_modules/
*.DS_Store
.DS_Store
doc/
template/
example/
karma.conf.js
test/
mocha.opts
Gruntfile.js
webpack.*.js
.travis.yml
packages
release/
demo/
coverage/
dist/report.html
rollup-plugin-visualizer/
outjs/
.scene_cache
*.mp3
*.mp4
================================================
FILE: packages/guides/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.29.2](https://github.com/daybrush/guides/compare/@scena/guides@0.29.1...@scena/guides@0.29.2) (2023-07-29)
### :mega: Other
* publish packages ([9b659fe](https://github.com/daybrush/guides/commit/9b659fe71eb2fcb53b731e88b1561a0b18b9fcdc))
## [0.29.1](https://github.com/daybrush/guides/compare/@scena/guides@0.29.0...@scena/guides@0.29.1) (2023-07-23)
### :mega: Other
* publish packages ([73e2427](https://github.com/daybrush/guides/commit/73e24270c27eec1f30cc051fe84569e79f85822c))
## [0.29.0](https://github.com/daybrush/guides/compare/@scena/guides@0.28.0...@scena/guides@0.29.0) (2023-07-22)
### :mega: Other
* publish packages ([324f848](https://github.com/daybrush/guides/commit/324f848e0bae231c82b33be29ee2534d58a6d6b1))
## [0.28.0](https://github.com/daybrush/guides/compare/@scena/guides@0.27.0...@scena/guides@0.28.0) (2023-06-02)
### :mega: Other
* publish packages ([53d07f3](https://github.com/daybrush/guides/commit/53d07f3e31011ee6bff1a2558380dc6e61e98337))
## [0.27.0](https://github.com/daybrush/guides/compare/@scena/guides@0.26.5...@scena/guides@0.27.0) (2023-06-01)
### :rocket: New Features
* update ruler and modules ([f528ce4](https://github.com/daybrush/guides/commit/f528ce4c7ef6dd554112a7b86a0f7449d7cd230f))
### :mega: Other
* publish packages ([d038e92](https://github.com/daybrush/guides/commit/d038e92046e55f0f65f4ddde24f12ed117fd64e2))
## [0.26.5](https://github.com/daybrush/guides/compare/@scena/guides@0.26.4...@scena/guides@0.26.5) (2023-05-16)
### :mega: Other
* publish packages ([78ed8c7](https://github.com/daybrush/guides/commit/78ed8c708759927cabeb53b8c607fc6f54324371))
## [0.26.4](https://github.com/daybrush/guides/compare/@scena/guides@0.26.2...@scena/guides@0.26.4) (2023-05-15)
### :rocket: New Features
* update depency modules ([21b67a8](https://github.com/daybrush/guides/commit/21b67a80dfd61183e175d9ac6c64502c092aba74))
### :bug: Bug Fix
* fix containerProvider #81 ([d12a0b2](https://github.com/daybrush/guides/commit/d12a0b213adac199f61358f71a0787f1d05208ba))
### :mega: Other
* publish packages ([1898b89](https://github.com/daybrush/guides/commit/1898b895d5c812a5fd77d99a5928f7e420152772))
* update packages ([d8db884](https://github.com/daybrush/guides/commit/d8db884cdf43c19f77ad9c5721d3a466808853c3))
## [0.26.2](https://github.com/daybrush/guides/compare/@scena/guides@0.26.0...@scena/guides@0.26.2) (2023-05-07)
### :bug: Bug Fix
* fix not triggered events #80 ([a8acea3](https://github.com/daybrush/guides/commit/a8acea31ceb22a89055e117c67e4d122e4cb52ac))
### :mega: Other
* publish packages ([e1fb57c](https://github.com/daybrush/guides/commit/e1fb57c59a4a8e6b3e55ffb68cfea64760270288))
* update croact version ([2fd28db](https://github.com/daybrush/guides/commit/2fd28dbbfd648b8ee6fee39f3972057fce580ae0))
## [0.26.0](https://github.com/daybrush/guides/compare/@scena/guides@0.25.0...@scena/guides@0.26.0) (2023-04-12)
### :mega: Other
* publish packages ([548990d](https://github.com/daybrush/guides/commit/548990d8577ffe565b8605f74edd9eb5a6519deb))
## [0.25.0](https://github.com/daybrush/guides/compare/@scena/guides@0.24.0...@scena/guides@0.25.0) (2023-04-06)
### :rocket: New Features
* add croact-guides ([a7be435](https://github.com/daybrush/guides/commit/a7be435704e24b6d80af80e069a6cc4047d645bc))
### :mega: Other
* publish packages ([f30e2ba](https://github.com/daybrush/guides/commit/f30e2bad78e1bc02307c8dde8cb1b69ecccdf116))
## [0.24.0](https://github.com/daybrush/guides/compare/@scena/guides@0.23.3...@scena/guides@0.24.0) (2023-03-04)
### :mega: Other
* publish packages ([1afbe1d](https://github.com/daybrush/guides/commit/1afbe1d193cf2457dc9f3296b73d38b5859c0ee0))
## [0.23.3](https://github.com/daybrush/guides/compare/@scena/guides@0.23.2...@scena/guides@0.23.3) (2023-02-04)
### :mega: Other
* publish packages ([ae0d147](https://github.com/daybrush/guides/commit/ae0d14738d83b4f5352463b69f89efe7cc111baf))
## [0.23.2](https://github.com/daybrush/guides/compare/@scena/guides@0.23.1...@scena/guides@0.23.2) (2023-01-29)
### :mega: Other
* publish packages ([0f7949a](https://github.com/daybrush/guides/commit/0f7949a9954e2093d6a599dc545f988ed624d41f))
## [0.23.1](https://github.com/daybrush/guides/compare/@scena/guides@0.23.0...@scena/guides@0.23.1) (2023-01-29)
### :mega: Other
* publish packages ([ab753c1](https://github.com/daybrush/guides/commit/ab753c1c820463c1c0b7805d428c803c5eacc1e3))
## [0.23.0](https://github.com/daybrush/guides/compare/@scena/guides@0.22.0...@scena/guides@0.23.0) (2023-01-29)
### :mega: Other
* publish packages ([6f83fa0](https://github.com/daybrush/guides/commit/6f83fa0c75f494aa79fff98f4a57f86ab295b67d))
## [0.22.0](https://github.com/daybrush/guides/compare/@scena/guides@0.21.1...@scena/guides@0.22.0) (2023-01-28)
### :mega: Other
* publish packages ([9473e84](https://github.com/daybrush/guides/commit/9473e8464fbd4c374ac6251ff995586afd163719))
## [0.21.1](https://github.com/daybrush/guides/compare/@scena/guides@0.21.0...@scena/guides@0.21.1) (2023-01-27)
### :mega: Other
* publish packages ([628b944](https://github.com/daybrush/guides/commit/628b9444bb9e6f5546c7a5edd55a090126f52dd5))
## [0.21.0](https://github.com/daybrush/guides/compare/@scena/guides@0.20.0...@scena/guides@0.21.0) (2023-01-20)
### :bug: Bug Fix
* fix files field #67 ([28bf5b3](https://github.com/daybrush/guides/commit/28bf5b3bd97cebd94eaf2195f0e99750f14e7ecb))
### :mega: Other
* publish packages ([095e7c6](https://github.com/daybrush/guides/commit/095e7c670d3bd0bdc168e2f3c11b5dbb8074b26b))
* publish packages ([1daa6ea](https://github.com/daybrush/guides/commit/1daa6ea441f6c96b8f354953605cd6ac89117878))
* publish packages ([e143c21](https://github.com/daybrush/guides/commit/e143c2175309bf480ef17731321f6728b8d6bcc2))
* publish packages ([ce2037a](https://github.com/daybrush/guides/commit/ce2037a18f5f6bbcd750e1fd72cbfc60e3f2c217))
* publish packages ([0abcba2](https://github.com/daybrush/guides/commit/0abcba24e8b83ea51cf369124e8c2d85fee1ef7e))
## [0.20.0](https://github.com/daybrush/guides/compare/@scena/guides@0.19.0...@scena/guides@0.20.0) (2022-11-13)
### :rocket: New Features
* add scrollOptions #64 ([e0dc92a](https://github.com/daybrush/guides/commit/e0dc92a9ed417dff071b43a68b065907f8f1b8ad))
### :bug: Bug Fix
* fix scroll event name ([6eba67b](https://github.com/daybrush/guides/commit/6eba67b33c0de50e1c68ff75882889227db663bc))
* update dependencies ([054e101](https://github.com/daybrush/guides/commit/054e101d1b177bdfefab74bf440a4cb3cf8137be))
### :mega: Other
* publish packages ([9cc8e3a](https://github.com/daybrush/guides/commit/9cc8e3ae5f83aa1513c1560166c6babbbe31dfd7))
## [0.19.0](https://github.com/daybrush/guides/compare/@scena/guides@0.18.2...@scena/guides@0.19.0) (2022-09-21)
### :mega: Other
* publish packages ([83de3e4](https://github.com/daybrush/guides/commit/83de3e4ae4bad11905939a44dfa2776fe7d6987d))
================================================
FILE: packages/guides/README.md
================================================
<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
<h2 align="middle">Guides</h2>
<p align="middle">
<a href="https://www.npmjs.com/package/@scena/guides" target="_blank"><img src="https://img.shields.io/npm/v/@scena/guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue3-guides" target="_blank"><img
alt="Vue3"
src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Svelte"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p align="middle">A Guides component that can draw ruler and manage guidelines.</p>
<p align="middle">
<a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
<a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
<a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
<a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
</p>
## ⚙️ Installation
### npm
```sh
$ npm i @scena/guides
```
### scripts
```html
<script src="//daybrush.com/guides/release/latest/dist/guides.min.js"></script>
```
## 🚀 How to use
```tsx
import Guides from "@scena/guides";
const guides = new Guides(document.body, {
type: "horizontal",
}).on("changeGuides", e => {
console.log(e.guides);
});
let scrollX = 0;
let scrollY = 0;
window.addEventListener("resize", () => {
guides.resize();
});
window.addEventListener("wheel", e => {
scrollX += e.deltaX;
scrollY += e.deltaY;
guides.scrollGuides(scrollY);
guides.scroll(scrollX);
});
```
### Ruler Units
The default unit is px, and a line is drawn every 50px. If you want to use a different unit instead of the px unit, use it like this:
* 1px (Default)
* zoom: 1
* unit: 50 (every 50px)
* 1cm = 37.7952px
* zoom: 37.7952
* unit: 1 (every 1cm)
* 1in = 96px = 2.54cm
* zoom: 96
* unit: 1 (every 1in)
See: https://www.w3schools.com/cssref/css_units.asp
## ⚙️ Developments
### `npm run demo:start`
Runs the app in the development mode.<br>
Open `demo/index.html` file.
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If you have any questions or requests or want to contribute to `guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
## 📝 License
This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
```
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
================================================
FILE: packages/guides/package.json
================================================
{
"name": "@scena/guides",
"version": "0.29.2",
"description": "A Vanilla Guides component that can draw ruler and manage guidelines.",
"main": "./dist/guides.cjs.js",
"module": "./dist/guides.esm.js",
"sideEffects": false,
"types": "declaration/index.d.ts",
"scripts": {
"start": "rollup -c -w",
"build": "rollup -c && npm run declaration && print-sizes ./dist",
"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json"
},
"keywords": [
"scene",
"scenejs",
"scene.js",
"scena",
"guides",
"scroller"
],
"repository": {
"type": "git",
"url": "git+https://github.com/daybrush/guides.git"
},
"author": "Daybrush",
"license": "MIT",
"bugs": {
"url": "https://github.com/daybrush/guides/issues"
},
"files": [
"./*",
"src/*",
"dist/*",
"declaration/*",
"README.md"
],
"homepage": "https://daybrush.com/guides",
"devDependencies": {
"@daybrush/builder": "^0.1.2",
"@daybrush/demo": "0.0.2",
"@daybrush/jsdoc": "^0.3.9",
"@daybrush/release": "^0.2.4",
"@types/karma-chai": "^0.1.2",
"@types/mocha": "^5.2.7",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"daybrush-jsdoc-template": "^1.6.0",
"gesto": "^1.18.1",
"gh-pages": "^2.0.1",
"keycon": "^1.1.0",
"print-sizes": "^0.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"rollup-plugin-css-bundle": "^1.0.4",
"rollup-plugin-react-compat": "^0.1.1",
"scenejs": "^1.1.4",
"tslint": "^5.18.0",
"typescript": "^4.5.0 <4.6.0"
},
"dependencies": {
"@scena/event-emitter": "^1.0.4",
"croact": "^1.0.3",
"croact-guides": "~0.26.2"
}
}
================================================
FILE: packages/guides/rollup.config.js
================================================
import builder from "@daybrush/builder";
import compat from "rollup-plugin-react-compat";
const reactCompat = compat({
useCroact: true,
aliasModules: {
"@scena/react-guides": "croact-guides",
},
});
const resolveReactCompat = compat({
useCroact: true,
resolveCompat: true,
});
const external = {
"croact": "croact",
"croact-guides": "croact-guides",
"@egjs/component": "@egjs/component",
"@daybrush/utils": "@daybrush/utils",
"gesto": "gesto",
"framework-utils": "framework-utils",
"@egjs/agent": "eg.Agent",
"@egjs/children-differ": "eg.ChildrenDiffer",
};
export default builder([
{
name: "Guides",
input: "src/index.umd.ts",
output: "./dist/guides.js",
plugins: [resolveReactCompat],
},
{
name: "Guides",
input: "src/index.umd.ts",
output: "./dist/guides.min.js",
plugins: [resolveReactCompat],
uglify: true,
},
{
input: "src/index.esm.ts",
output: "./dist/guides.esm.js",
exports: "named",
format: "es",
plugins: [reactCompat],
external,
},
{
input: "src/index.cjs.ts",
output: "./dist/guides.cjs.js",
exports: "named",
format: "cjs",
plugins: [reactCompat],
external,
},
]);
================================================
FILE: packages/guides/src/Guides.tsx
================================================
import GuidesManager from "./GuidesManager";
export default class Guides extends GuidesManager {}
================================================
FILE: packages/guides/src/GuidesManager.tsx
================================================
import { ref, Properties } from "framework-utils";
import * as React from "react";
import { PROPERTIES, METHODS, EVENTS } from "./consts";
import { GuidesInterface, GuidesEvents, GuidesOptions } from "@scena/react-guides/declaration/types";
import InnerGuides from "./InnerGuides";
import EventEmitter from "@scena/event-emitter";
import { camelize } from "@daybrush/utils";
import { ContainerProvider, renderSelf } from "croact";
@Properties(METHODS as any, (prototype, property) => {
if (prototype[property]) {
return;
}
prototype[property] = function(...args) {
const self = this.getInnerGuides();
if (!self || !self[property]) {
return;
}
return self[property](...args);
};
})
@Properties(PROPERTIES, (prototype, property) => {
Object.defineProperty(prototype, property, {
get() {
return this.getInnerGuides().props[property];
},
set(value) {
this.innerGuides.setState({
[property]: value,
});
},
enumerable: true,
configurable: true,
});
})
/**
* @sort 1
* @extends EventEmitter
*/
class Guides extends EventEmitter<GuidesEvents> {
private containerProvider: ContainerProvider | null = null;
private selfElement: HTMLElement | null = null;
private _warp = false;
private innerGuides!: InnerGuides;
/**
* @sort 1
* @param - guides' container
* @param {$ts:Partial<Guides.GuidesOptions>} - guides' options
*/
constructor(container: HTMLElement, options: Partial<GuidesOptions> = {}) {
super();
const events: any = {};
EVENTS.forEach(name => {
events[camelize(`on ${name}`)] = (e: any) => this.trigger(name as any, e);
});
let selfElement!: HTMLElement;
if (options.warpSelf) {
delete options.warpSelf;
this._warp = true;
selfElement = container;
} else {
selfElement = document.createElement("div");
container.appendChild(selfElement);
}
this.containerProvider = renderSelf(
<InnerGuides ref={ref(this, "innerGuides")}
{...events}
{...options} />,
selfElement,
);
}
/**
* @param state
* @param callback
*/
public setState(state: Partial<GuidesOptions>, callback?: () => void) {
this.innerGuides.setState(state, callback);
}
/**
* @param callback
*/
public forceUpdate(callback?: () => void) {
this.innerGuides.forceUpdate(callback);
}
/**
* destroy guides
*/
public destroy() {
const selfElement = this.selfElement!;
renderSelf(
null,
selfElement!,
this.containerProvider,
);
if (!this._warp) {
selfElement?.parentElement?.removeChild(selfElement);
}
this.selfElement = null;
this.innerGuides = null;
}
private getInnerGuides() {
return this.innerGuides.guides;
}
}
interface Guides extends GuidesInterface {}
export default Guides;
================================================
FILE: packages/guides/src/InnerGuides.tsx
================================================
import * as React from "react";
import { ref } from "framework-utils";
import ReactGuides from "@scena/react-guides";
import { GuidesOptions } from "@scena/react-guides/declaration/types";
export interface InnerGuidesProps extends GuidesOptions {
container?: HTMLElement;
}
export default class InnerGuides extends React.Component<InnerGuidesProps, InnerGuidesProps> {
public state: InnerGuidesProps = {};
public guides: ReactGuides;
constructor(props: InnerGuidesProps) {
super(props);
this.state = this.props;
}
public render() {
return <ReactGuides ref={ref(this, "guides")} {...this.state} />;
}
}
================================================
FILE: packages/guides/src/consts.ts
================================================
import {
PROPERTIES as GUIDES_PROPERTIES,
METHODS as GUIDES_METHODS,
EVENTS as GUIDES_EVENTS,
} from "@scena/react-guides";
import {
GuidesOptions,
} from "@scena/react-guides/declaration/types";
export const PROPERTIES: Array<keyof GuidesOptions> = GUIDES_PROPERTIES;
export const METHODS = GUIDES_METHODS as readonly string[];
export const EVENTS = GUIDES_EVENTS as readonly string[];
================================================
FILE: packages/guides/src/index.cjs.ts
================================================
import Guides, * as others from "./index.esm";
for (const name in others) {
(Guides as any)[name] = others[name];
}
declare const module: any;
module.exports = Guides;
export * from "./index.esm";
export default Guides;
================================================
FILE: packages/guides/src/index.esm.ts
================================================
import Guides from "./Guides";
export * from "./consts";
export default Guides;
================================================
FILE: packages/guides/src/index.ts
================================================
import Guides from "./Guides";
export * from "@scena/react-guides/declaration/types";
export * from "./consts";
export default Guides;
================================================
FILE: packages/guides/src/index.umd.ts
================================================
import Guides, * as others from "./index.esm";
for (const name in others) {
(Guides as any)[name] = others[name];
}
export default Guides;
================================================
FILE: packages/guides/test/manual/guides.html
================================================
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,
body,
#root,
.app {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #333;
background: #fdfdfd;
}
.app {
transform-style: preserve-3d;
}
.viewer {
position: relative;
width: 100%;
height: 100%;
}
.viewport {
width: 600px;
height: 800px;
/* height: 600px; */
border: 1px solid #eee;
box-sizing: border-box;
}
.reset {
position: absolute !important;
background: #333;
width: 30px;
height: 30px;
z-index: 1;
border-right: 1px solid #444;
border-bottom: 1px solid #444;
box-sizing: border-box;
cursor: pointer;
}
.guides {
position: absolute !important;
top: 0;
left: 0;
transform: translateZ(1px);
}
.guides.horizontal {
left: 30px;
width: calc(100% - 30px);
height: 30px !important;
}
.guides.vertical {
top: 30px;
height: calc(100% - 30px);
width: 30px !important;
}
/*
.scena-vertical .scena-guide {
height: calc(100% + 30px)!important;
top: -30px;
}
.scena-horizontal .scena-guide {
width: calc(100% + 30px)!important;
top: -30px;
} */
.viewer {
position: absolute !important;
left: 30px;
top: 30px;
width: calc(100% - 30px);
height: calc(100% - 30px);
}
.viewport {
text-align: center;
}
.viewport p {
padding: 0;
margin: 0;
}
.buttons {
padding: 5px;
}
.button {
display: inline-block;
padding: 10px 20px;
border: 2px solid #333;
color: #333;
font-weight: bold;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
margin: 2px;
}
.viewport p.description {
text-align: left;
padding: 5px 20px;
box-sizing: border-box;
}
.component {
display: inline-block;
padding: 5px;
margin-bottom: 10px;
}
.component p {
padding: 0;
margin: 0;
}
.component .logo {
position: relative;
width: 150px;
height: 150px;
}
.component img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
max-height: 100%;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.component a {
color: black;
font-weight: bold;
}
</style>
<div class="app">
<div class="reset"></div>
<div class="guides horizontal"></div>
<div class="guides vertical"></div>
</div>
<script src ="../../dist/guides.js"></script>
<script>
const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
snapThreshold: 5,
snaps: [0, 300, 600],
displayDragPos: true,
dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
console.log("ho", guides);
// moveable.horizontalGuidelines = guides;
});
const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
type: "vertical",
snapThreshold: 5,
snaps: [0, 200, 400],
displayDragPos: true,
dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
console.log("ver", guides);
});
</script>
================================================
FILE: packages/guides/test/manual/index.html
================================================
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
html,
body,
#root,
.app {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: #333;
background: #fdfdfd;
}
.app {
transform-style: preserve-3d;
}
.viewer {
position: relative;
width: 100%;
height: 100%;
}
.viewport {
width: 600px;
height: 800px;
/* height: 600px; */
border: 1px solid #eee;
box-sizing: border-box;
}
.reset {
position: absolute !important;
background: #333;
width: 30px;
height: 30px;
z-index: 1;
border-right: 1px solid #444;
border-bottom: 1px solid #444;
box-sizing: border-box;
cursor: pointer;
}
.guides {
position: absolute !important;
top: 0;
left: 0;
transform: translateZ(1px);
}
.guides.horizontal {
left: 30px;
width: calc(100% - 30px);
height: 30px !important;
}
.guides.vertical {
top: 30px;
height: calc(100% - 30px);
width: 30px !important;
}
/*
.scena-vertical .scena-guide {
height: calc(100% + 30px)!important;
top: -30px;
}
.scena-horizontal .scena-guide {
width: calc(100% + 30px)!important;
top: -30px;
} */
.viewer {
position: absolute !important;
left: 30px;
top: 30px;
width: calc(100% - 30px);
height: calc(100% - 30px);
}
.viewport {
text-align: center;
}
.viewport p {
padding: 0;
margin: 0;
}
.buttons {
padding: 5px;
}
.button {
display: inline-block;
padding: 10px 20px;
border: 2px solid #333;
color: #333;
font-weight: bold;
text-decoration: none;
font-size: 14px;
letter-spacing: 1px;
margin: 2px;
}
.viewport p.description {
text-align: left;
padding: 5px 20px;
box-sizing: border-box;
}
.component {
display: inline-block;
padding: 5px;
margin-bottom: 10px;
}
.component p {
padding: 0;
margin: 0;
}
.component .logo {
position: relative;
width: 150px;
height: 150px;
}
.component img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: auto;
max-height: 100%;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.component a {
color: black;
font-weight: bold;
}
</style>
<div class="app">
<div class="reset"></div>
<div class="guides horizontal"></div>
<div class="guides vertical"></div>
<div class="viewer">
<div class="viewport">
<p class="logo"><img src="https://daybrush.com/infinite-viewer/images/logo.png" data-moveable /></p>
<h2 data-moveable>Infinite Viewer</h2>
<p class="description" data-moveable>Infinite Viewer is Document Viewer Component with infinite scrolling.</p>
<select data-moveable>
<option>A</option>
<option>B</option>
</select>
<div class="buttons">
<a href="https://github.com/daybrush/infinite-viewer" class="button">Download</a>
<a href="https://daybrush.com/infinite-viewer/release/latest/doc" class="button">API</a>
</div>
<p class="description" data-moveable> This component can scroll up and down, left and right in the
negative direction and in the positive direction. It can also be used in combination with
moveable, selecto, guides.</p>
<div class="component" data-moveable>
<p class="logo"><img src="https://daybrush.com/moveable/images/256x256.png" alt="Logo" /></p>
<p><a href="https://github.com/daybrush/moveable" target="_blank">Moveable</a></p>
</div>
<div class="component" data-moveable>
<p class="logo"><img src="https://daybrush.com/selecto/images/256x256.png" alt="Logo" style="padding: 10px;" /></p>
<p><a href="https://github.com/daybrush/selecto" target="_blank">Selecto</a></p>
</div>
<div class="component" data-moveable>
<p class="logo"><img src="https://daybrush.com/guides/images/guides.png" alt="Logo" /></p>
<p><a href="https://github.com/daybrush/guides" target="_blank">Guides</a></p>
</div>
<div class="component" data-moveable>
<p class="logo"><img src="https://daybrush.com/scenejs/images/clapperboard.png" alt="Logo" /></p>
<p><a href="https://github.com/daybrush/scenejs" target="_blank">Scene.js</a></p>
</div>
</div>
</div>
</div>
<!-- <script src="../dist/infinite-viewer.js"></script> -->√
<script src="https://daybrush.com/infinite-viewer/release/latest/dist/infinite-viewer.js"></script>
<script src="https://daybrush.com/keycon/release/latest/dist/keycon.js"></script>
<!-- <script src="../../selecto/dist/selecto.js"></script> -->
<script src="https://daybrush.com/selecto/release/latest/dist/selecto.js"></script>
<!-- <script src="https://daybrush.com/guides/release/latest/dist/guides.js"></script> -->
<script src ="../../dist/guides.js"></script>
<!-- <script src="../../../../moveable/packages/moveable/dist/moveable.js"></script> -->
<script src="https://daybrush.com/moveable/release/latest/dist/moveable.js"></script>
<script src="https://daybrush.com/moveable-helper/release/latest/dist/moveable-helper.js"></script>
<script>
let targets = [];
const moveable = new Moveable(document.querySelector(".viewport"), {
target: [],
draggable: true,
resizable: true,
rotatable: true,
snappable: true,
snapCenter: true,
});
const helper = MoveableHelper.create();
moveable
.on("dragStart", helper.onDragStart)
.on("drag", helper.onDrag)
.on("dragGroupStart", helper.onDragGroupStart)
.on("dragGroup", helper.onDragGroup)
.on("scaleStart", helper.onScaleStart)
.on("scale", helper.onScale)
.on("scaleGroupStart", helper.onScaleGroupStart)
.on("scaleGroup", helper.onScaleGroup)
.on("rotateStart", helper.onRotateStart)
.on("rotate", helper.onRotate)
.on("rotateGroupStart", helper.onRotateGroupStart)
.on("rotateGroup", helper.onRotateGroup)
.on("snap", e => {
// console.log(e);
});
const scrollOptions = {
container: () => viewer.getContainer(),
getScrollPosition: () => {
return [
viewer.getScrollLeft(),
viewer.getScrollTop(),
];
},
threshold: 200,
throttleTime: 30,
};
const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
snapThreshold: 5,
snaps: [0, 300, 600],
displayDragPos: true,
scrollOptions,
dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
moveable.horizontalGuidelines = guides;
}).on("requestScroll", ({ direction }) => {
viewer.scrollBy(0, direction[1] * 10);
});
const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
type: "vertical",
snapThreshold: 5,
snaps: [0, 200, 400],
displayDragPos: true,
dragPosFormat: v => `${v}px`,
scrollOptions,
}).on("changeGuides", ({ guides }) => {
moveable.verticalGuidelines = guides;
}).on("requestScroll", ({ direction }) => {
viewer.scrollBy(direction[0] * 10, 0);
});
const viewer = new InfiniteViewer(
document.querySelector(".viewer"),
document.querySelector(".viewport"),
{
useTransform: true,
usePinch: true,
useResizeObserver: true,
pinchThreshold: 50,
// rangeX: [0, 0],
// rangeY: [0, 0],
// rangeOffsetX: [-200, 200],
// rangeOffsetY: [-200, 200],
useWheelScroll: true,
zoomRange: [0.1, 10],
maxPinchWheel: 10,
}
).on("dragStart", e => {
const target = e.inputEvent.target;
if (
target.nodeName === "A"
|| moveable.isMoveableElement(target)
|| targets.some(t => t === target || t.contains(target))
) {
e.stop();
}
}).on("dragEnd", e => {
if (!e.isDrag) {
selecto.clickTarget(e.inputEvent);
}
}).on("abortPinch", e => {
// console.log("abort", e.inputEvent);
selecto.triggerDragStart(e.inputEvent);
}).on("scroll", e => {
// console.log("Change SCROLL", e.scrollLeft);
const zoom = viewer.zoom;
horizontalGuides.scroll(e.scrollLeft, zoom);
horizontalGuides.scrollGuides(e.scrollTop, zoom);
verticalGuides.scroll(e.scrollTop, zoom);
verticalGuides.scrollGuides(e.scrollLeft, zoom);
}).on("pinch", e => {
// console.log(e);
document.querySelector(".description").innerHTML = e.inputEvent.type;
const zoom = Math.max(0.1, e.zoom);
verticalGuides.zoom = zoom;
horizontalGuides.zoom = zoom;
viewer.zoom = zoom;
})
const selecto = new Selecto({
container: document.querySelector(".app"),
dragContainer: ".viewer",
hitRate: 0,
selectByClick: true,
selectFromInside: false,
selectableTargets: ["[data-moveable]"],
toggleContinueSelect: ["shift"],
scrollOptions: {
container: viewer.getContainer(),
threshold: 30,
throttleTime: 30,
getScrollPosition: ({ direction }) => {
return [
viewer.getScrollLeft(),
viewer.getScrollTop(),
];
}
}
}).on("dragStart", e => {
const inputEvent = e.inputEvent;
const target = inputEvent.target;
if (
target.nodeName === "A"
|| (inputEvent.type === "touchstart" && e.isTrusted)
|| moveable.isMoveableElement(target)
|| targets.some(t => t === target || t.contains(target))
) {
console.log("?", inputEvent.type);
e.stop();
}
}).on("scroll", ({ direction }) => {
viewer.scrollBy(direction[0] * 10, direction[1] * 10);
}).on("selectEnd", e => {
targets = e.selected;
moveable.target = targets;
if (e.isDragStart) {
e.inputEvent.preventDefault();
setTimeout(() => {
moveable.dragStart(e.inputEvent);
});
}
});
requestAnimationFrame(() => {
viewer.scrollCenter();
});
window.addEventListener("resize", () => {
horizontalGuides.resize();
verticalGuides.resize();
});
document.querySelector(".reset").addEventListener("click", () => {
viewer.scrollCenter();
});
</script>
================================================
FILE: packages/guides/tsconfig.declaration.json
================================================
{
"extends": "./tsconfig",
"compilerOptions": {
"removeComments": false,
"declaration": true,
"emitDeclarationOnly": true,
"declarationDir": "declaration"
}
}
================================================
FILE: packages/guides/tsconfig.json
================================================
{
"compilerOptions": {
"outDir": "./outjs/",
"esModuleInterop": false,
"sourceMap": true,
"module": "es2015",
"target": "es5",
"experimentalDecorators": true,
"skipLibCheck": true,
"moduleResolution": "node",
"jsx": "react",
"lib": [
"es2015",
"dom"
],
},
"include": [
"./src/**/*.ts"
]
}
================================================
FILE: packages/guides/tsconfig.test.json
================================================
{
"extends": "./tsconfig",
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": false,
"types": [
"karma-chai",
"mocha"
]
},
"include": [
"./src/**/*.ts",
"./test/**/*.ts"
]
}
================================================
FILE: packages/guides/tslint.json
================================================
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"rules": {
"jsdoc-format": false,
"forin": false,
"no-console": false,
"no-any": false,
"no-empty-interface": false,
"interface-name": false,
"indent": [
true,
"spaces",
4
],
"ordered-imports": false,
"object-literal-sort-keys": false,
"no-unused-expression": false,
"arrow-parens": [
true,
"ban-single-arg-parens"
],
"max-line-length": [
true,
{
"limit": 120,
"ignore-pattern": "(\\* @)|//"
}
],
"trailing-comma": [
true,
{
"multiline": {
"objects": "always",
"arrays": "always",
"functions": "always",
"typeLiterals": "ignore"
},
"esSpecCompliant": true
}
]
}
}
================================================
FILE: packages/ngx-guides/.browserslistrc
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
================================================
FILE: packages/ngx-guides/.editorconfig
================================================
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
================================================
FILE: packages/ngx-guides/.gitignore
================================================
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
================================================
FILE: packages/ngx-guides/README.md
================================================
<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
<h2 align="middle">Angular Guides</h2>
<p align="middle">
<a href="https://www.npmjs.com/package/ngx-guides" target="_blank"><img src="https://img.shields.io/npm/v/ngx-guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
alt="Vue3"
src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p align="middle">An Angular Guides component that can draw grids and scroll infinitely.</p>
<p align="middle">
<a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
<a href="https://codesandbox.io/s/ngx-guides-demo-tdqjxo" target="_blank"><strong>CodeSandbox</strong></a> /
<a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
<a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
<a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
</p>
## ⚙️ Installation
### npm
```sh
$ npm i ngx-guides
```
## 🚀 How to use
* app.component.html
```html
<div class="guides">
<ngx-guides
type="horizontal" ref="guides"
v-on:changeGuides="onChangeGuides"
></ngx-guides>
</div>
```
* app.module.ts
```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxGuidesModule } from "ngx-guides";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxGuidesModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
## ⚙️ Developments
### `npm run start`
Runs the app in the development mode.<br>
Open [http://localhost:4200](http://localhost:4200) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If you have any questions or requests or want to contribute to `ngx-guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
## 📝 License
This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
```
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
================================================
FILE: packages/ngx-guides/angular.json
================================================
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngx-guides-project": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ngx-guides-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "ngx-guides-project:build:production"
},
"development": {
"browserTarget": "ngx-guides-project:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngx-guides-project:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
}
}
},
"ngx-guides": {
"projectType": "library",
"root": "projects/ngx-guides",
"sourceRoot": "projects/ngx-guides/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:ng-packagr",
"options": {
"project": "projects/ngx-guides/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/ngx-guides/tsconfig.lib.prod.json"
},
"development": {
"tsConfig": "projects/ngx-guides/tsconfig.lib.json"
}
},
"defaultConfiguration": "production"
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ngx-guides/src/test.ts",
"tsConfig": "projects/ngx-guides/tsconfig.spec.json",
"karmaConfig": "projects/ngx-guides/karma.conf.js"
}
}
}
}
},
"defaultProject": "ngx-guides-project"
}
================================================
FILE: packages/ngx-guides/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/ngx-guides-project'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: packages/ngx-guides/package.json
================================================
{
"name": "ngx-guides-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build ngx-guides --configuration production",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"lernaHelperPublishPath": "./dist/ngx-guides",
"dependencies": {
"@angular/animations": "~13.3.0",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"@scena/guides": "~0.29.2",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.3.9",
"@angular/cli": "~13.3.9",
"@angular/compiler-cli": "~13.3.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"ng-packagr": "^13.0.0",
"typescript": "^4.5.0 <4.6.0"
}
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/.browserslistrc
================================================
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
================================================
FILE: packages/ngx-guides/projects/ngx-guides/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.28.2](https://github.com/daybrush/guides/compare/ngx-guides@0.28.1...ngx-guides@0.28.2) (2023-07-29)
### :mega: Other
* publish packages ([9b659fe](https://github.com/daybrush/guides/commit/9b659fe71eb2fcb53b731e88b1561a0b18b9fcdc))
## [0.28.1](https://github.com/daybrush/guides/compare/ngx-guides@0.28.0...ngx-guides@0.28.1) (2023-07-23)
### :mega: Other
* publish packages ([73e2427](https://github.com/daybrush/guides/commit/73e24270c27eec1f30cc051fe84569e79f85822c))
## [0.28.0](https://github.com/daybrush/guides/compare/ngx-guides@0.27.0...ngx-guides@0.28.0) (2023-07-22)
### :mega: Other
* publish packages ([324f848](https://github.com/daybrush/guides/commit/324f848e0bae231c82b33be29ee2534d58a6d6b1))
## [0.27.0](https://github.com/daybrush/guides/compare/ngx-guides@0.26.0...ngx-guides@0.27.0) (2023-06-02)
### :mega: Other
* publish packages ([53d07f3](https://github.com/daybrush/guides/commit/53d07f3e31011ee6bff1a2558380dc6e61e98337))
## [0.26.0](https://github.com/daybrush/guides/compare/ngx-guides@0.25.5...ngx-guides@0.26.0) (2023-06-01)
### :mega: Other
* publish packages ([d038e92](https://github.com/daybrush/guides/commit/d038e92046e55f0f65f4ddde24f12ed117fd64e2))
## [0.25.5](https://github.com/daybrush/guides/compare/ngx-guides@0.25.4...ngx-guides@0.25.5) (2023-05-16)
### :mega: Other
* publish packages ([78ed8c7](https://github.com/daybrush/guides/commit/78ed8c708759927cabeb53b8c607fc6f54324371))
## [0.25.4](https://github.com/daybrush/guides/compare/ngx-guides@0.25.2...ngx-guides@0.25.4) (2023-05-15)
### :mega: Other
* publish packages ([1898b89](https://github.com/daybrush/guides/commit/1898b895d5c812a5fd77d99a5928f7e420152772))
* update packages ([d8db884](https://github.com/daybrush/guides/commit/d8db884cdf43c19f77ad9c5721d3a466808853c3))
## [0.25.2](https://github.com/daybrush/guides/compare/ngx-guides@0.25.0...ngx-guides@0.25.2) (2023-05-07)
### :mega: Other
* publish packages ([e1fb57c](https://github.com/daybrush/guides/commit/e1fb57c59a4a8e6b3e55ffb68cfea64760270288))
* update croact version ([2fd28db](https://github.com/daybrush/guides/commit/2fd28dbbfd648b8ee6fee39f3972057fce580ae0))
## [0.25.0](https://github.com/daybrush/guides/compare/ngx-guides@0.24.0...ngx-guides@0.25.0) (2023-04-12)
### :mega: Other
* publish packages ([548990d](https://github.com/daybrush/guides/commit/548990d8577ffe565b8605f74edd9eb5a6519deb))
## [0.24.0](https://github.com/daybrush/guides/compare/ngx-guides@0.23.0...ngx-guides@0.24.0) (2023-04-06)
### :rocket: New Features
* add croact-guides ([a7be435](https://github.com/daybrush/guides/commit/a7be435704e24b6d80af80e069a6cc4047d645bc))
### :memo: Documentation
* fix Angular README #79 ([4f8b64d](https://github.com/daybrush/guides/commit/4f8b64d1a36e496431e785ea2d2e0cb18b94d9c4))
### :mega: Other
* publish packages ([f30e2ba](https://github.com/daybrush/guides/commit/f30e2bad78e1bc02307c8dde8cb1b69ecccdf116))
## [0.23.0](https://github.com/daybrush/guides/compare/ngx-guides@0.22.3...ngx-guides@0.23.0) (2023-03-04)
### :mega: Other
* publish packages ([1afbe1d](https://github.com/daybrush/guides/commit/1afbe1d193cf2457dc9f3296b73d38b5859c0ee0))
## [0.22.3](https://github.com/daybrush/guides/compare/ngx-guides@0.22.2...ngx-guides@0.22.3) (2023-02-04)
### :mega: Other
* publish packages ([ae0d147](https://github.com/daybrush/guides/commit/ae0d14738d83b4f5352463b69f89efe7cc111baf))
## [0.22.2](https://github.com/daybrush/guides/compare/ngx-guides@0.22.1...ngx-guides@0.22.2) (2023-01-29)
### :mega: Other
* publish packages ([0f7949a](https://github.com/daybrush/guides/commit/0f7949a9954e2093d6a599dc545f988ed624d41f))
## [0.22.1](https://github.com/daybrush/guides/compare/ngx-guides@0.22.0...ngx-guides@0.22.1) (2023-01-29)
### :mega: Other
* publish packages ([ab753c1](https://github.com/daybrush/guides/commit/ab753c1c820463c1c0b7805d428c803c5eacc1e3))
## [0.22.0](https://github.com/daybrush/guides/compare/ngx-guides@0.21.0...ngx-guides@0.22.0) (2023-01-29)
### :mega: Other
* publish packages ([6f83fa0](https://github.com/daybrush/guides/commit/6f83fa0c75f494aa79fff98f4a57f86ab295b67d))
## [0.21.0](https://github.com/daybrush/guides/compare/ngx-guides@0.20.1...ngx-guides@0.21.0) (2023-01-28)
### :mega: Other
* publish packages ([9473e84](https://github.com/daybrush/guides/commit/9473e8464fbd4c374ac6251ff995586afd163719))
## [0.20.1](https://github.com/daybrush/guides/compare/ngx-guides@0.20.0...ngx-guides@0.20.1) (2023-01-27)
### :mega: Other
* publish packages ([628b944](https://github.com/daybrush/guides/commit/628b9444bb9e6f5546c7a5edd55a090126f52dd5))
## [0.20.0](https://github.com/daybrush/guides/compare/ngx-guides@0.19.0...ngx-guides@0.20.0) (2023-01-20)
### :bug: Bug Fix
* fix missing guideStyle prop #69 ([1520b89](https://github.com/daybrush/guides/commit/1520b896c29a2f11d96d55d2dbf51c0c06d9a113))
### :mega: Other
* publish packages ([095e7c6](https://github.com/daybrush/guides/commit/095e7c670d3bd0bdc168e2f3c11b5dbb8074b26b))
* publish packages ([1daa6ea](https://github.com/daybrush/guides/commit/1daa6ea441f6c96b8f354953605cd6ac89117878))
* publish packages ([e143c21](https://github.com/daybrush/guides/commit/e143c2175309bf480ef17731321f6728b8d6bcc2))
* publish packages ([ce2037a](https://github.com/daybrush/guides/commit/ce2037a18f5f6bbcd750e1fd72cbfc60e3f2c217))
* publish packages ([0abcba2](https://github.com/daybrush/guides/commit/0abcba24e8b83ea51cf369124e8c2d85fee1ef7e))
## [0.19.0](https://github.com/daybrush/guides/compare/ngx-guides@0.18.0...ngx-guides@0.19.0) (2022-11-13)
### :rocket: New Features
* add scrollOptions #64 ([e0dc92a](https://github.com/daybrush/guides/commit/e0dc92a9ed417dff071b43a68b065907f8f1b8ad))
### :bug: Bug Fix
* fix scroll event name ([6eba67b](https://github.com/daybrush/guides/commit/6eba67b33c0de50e1c68ff75882889227db663bc))
### :mega: Other
* publish packages ([9cc8e3a](https://github.com/daybrush/guides/commit/9cc8e3ae5f83aa1513c1560166c6babbbe31dfd7))
## [0.18.0](https://github.com/daybrush/guides/compare/ngx-guides@0.17.3...ngx-guides@0.18.0) (2022-09-21)
### :mega: Other
* publish packages ([83de3e4](https://github.com/daybrush/guides/commit/83de3e4ae4bad11905939a44dfa2776fe7d6987d))
================================================
FILE: packages/ngx-guides/projects/ngx-guides/README.md
================================================
<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
<h2 align="middle">Angular Guides</h2>
<p align="middle">
<a href="https://www.npmjs.com/package/ngx-guides" target="_blank"><img src="https://img.shields.io/npm/v/ngx-guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img
alt="Vue3"
src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p align="middle">An Angular Guides component that can draw grids and scroll infinitely.</p>
<p align="middle">
<a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
<a href="https://codesandbox.io/s/ngx-guides-demo-tdqjxo" target="_blank"><strong>CodeSandbox</strong></a> /
<a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
<a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
<a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
</p>
## ⚙️ Installation
### npm
```sh
$ npm i ngx-guides
```
## 🚀 How to use
* app.component.html
```html
<div class="guides">
<ngx-guides
type="horizontal" ref="guides"
v-on:changeGuides="onChangeGuides"
></ngx-guides>
</div>
```
* app.module.ts
```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxGuidesModule } from "ngx-guides";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxGuidesModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
```
## ⚙️ Developments
### `npm run start`
Runs the app in the development mode.<br>
Open [http://localhost:4200](http://localhost:4200) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If you have any questions or requests or want to contribute to `ngx-guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
## 📝 License
This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
```
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
================================================
FILE: packages/ngx-guides/projects/ngx-guides/karma.conf.js
================================================
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, '../../coverage/ngx-guides'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
================================================
FILE: packages/ngx-guides/projects/ngx-guides/ng-package.json
================================================
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/ngx-guides",
"lib": {
"entryFile": "src/public-api.ts"
},
"allowedNonPeerDependencies": [
"@scena/guides"
]
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/package.json
================================================
{
"name": "ngx-guides",
"version": "0.28.2",
"description": "An Angular Guides component that can draw ruler and manage guidelines.",
"keywords": [
"scene",
"scenejs",
"scene.js",
"scena",
"ruler",
"guidelines",
"guides",
"scroller",
"angular"
],
"repository": {
"type": "git",
"url": "git+https://github.com/daybrush/guides.git"
},
"author": "Daybrush",
"license": "MIT",
"bugs": {
"url": "https://github.com/daybrush/guides/issues"
},
"homepage": "https://daybrush.com/guides",
"dependencies": {
"@scena/guides": "~0.29.2",
"tslib": "^2.3.0"
}
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/consts.ts
================================================
// auto
// eslint-disable-next-line max-len
export const ANGULAR_GUIDES_INPUTS: ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","defaultGuidesPos","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","guidesZoom","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","defaultScrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","warpSelf","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset","marks","markColor"] = ["className","rulerStyle","snapThreshold","snaps","displayDragPos","cspNonce","dragPosFormat","defaultGuides","showGuides","scrollOptions","guideStyle","guidesOffset","digit","defaultGuidesPos","dragGuideStyle","displayGuidePos","guidePosFormat","guidePosStyle","lockGuides","guidesZoom","type","width","height","unit","zoom","direction","textAlign","font","segment","mainLineSize","longLineSize","shortLineSize","lineOffset","textOffset","negativeRuler","range","scrollPos","defaultScrollPos","style","backgroundColor","rangeBackgroundColor","lineColor","textColor","textBackgroundColor","textFormat","warpSelf","selectedBackgroundColor","selectedRanges","defaultPixelScale","useResizeObserver","selectedRangesText","selectedRangesTextColor","selectedRangesTextOffset","marks","markColor"];
export const ANGULAR_GUIDES_OUTPUTS: ["changeGuides","requestScroll","dragStart","drag","dragEnd","clickRuler"] = ["changeGuides","requestScroll","dragStart","drag","dragEnd","clickRuler"];
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.spec.ts
================================================
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgxGuidesComponent } from './ngx-guides.component';
describe('NgxGuidesComponent', () => {
let component: NgxGuidesComponent;
let fixture: ComponentFixture<NgxGuidesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NgxGuidesComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NgxGuidesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.ts
================================================
import {
Component, AfterViewInit, ViewChild,
ElementRef, OnChanges, SimpleChanges,
OnDestroy, EventEmitter
} from '@angular/core';
import Guides, { EVENTS, PROPERTIES, GuideOptions } from '@scena/guides';
import { NgxGuidesInterface } from './ngx-guides.interface';
import { ANGULAR_GUIDES_INPUTS, ANGULAR_GUIDES_OUTPUTS } from './consts';
@Component({
selector: 'ngx-guides',
template: `
<div class="guides" #guidesRef></div>
`,
styles: [],
inputs: ANGULAR_GUIDES_INPUTS,
outputs: ANGULAR_GUIDES_OUTPUTS,
})
export class NgxGuidesComponent extends NgxGuidesInterface implements AfterViewInit, OnChanges, OnDestroy {
@ViewChild('guidesRef', { static: false }) private guidesRef!: ElementRef;
constructor() {
super();
EVENTS.forEach(name => {
(this as any)[name] = new EventEmitter();
});
}
ngOnChanges(changes: SimpleChanges): void {
const guides = this.guides;
if (!guides) {
return;
}
for (const name in changes) {
const { previousValue, currentValue } = changes[name];
if (previousValue === currentValue) {
continue;
}
if (name === 'style') {
this.setStyle();
} else {
(guides as any)[name] = currentValue;
}
}
}
ngAfterViewInit() {
const el = this.guidesRef.nativeElement;
const options: GuideOptions = {};
PROPERTIES.forEach(name => {
if (name === "style") {
return;
}
if (name in this) {
(options as any)[name] = this[name];
}
});
options.warpSelf = true;
const guides = new Guides(el, options);
this.guides = guides;
this.setStyle();
EVENTS.forEach(name => {
guides.on(name as any, e => {
(this as any)[name].emit(e as any);
});
});
}
ngOnDestroy() {
this.guides.destroy();
}
setStyle() {
const el = this.guidesRef.nativeElement;
const elStyle = el.style;
const style = this.style;
for (const name in style) {
if (elStyle[name] === style[name]) {
continue;
}
elStyle[name] = style[name];
}
}
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.interface.ts
================================================
import VanillaGuides, { METHODS, GuidesInterface, GuidesOptions } from '@scena/guides';
import { withMethods, MethodInterface } from 'framework-utils';
import { NgxGuidesComponent } from './ngx-guides.component';
import { NgxGuidesEvents } from './types';
export class NgxGuidesInterface {
@withMethods(METHODS as any)
protected guides!: VanillaGuides;
}
export interface NgxGuidesInterface
extends MethodInterface<GuidesInterface, VanillaGuides, NgxGuidesComponent>,
Required<GuidesOptions>, NgxGuidesEvents {}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.module.ts
================================================
import { NgModule } from '@angular/core';
import { NgxGuidesComponent } from './ngx-guides.component';
@NgModule({
declarations: [NgxGuidesComponent],
imports: [
],
exports: [NgxGuidesComponent]
})
export class NgxGuidesModule { }
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.service.spec.ts
================================================
import { TestBed } from '@angular/core/testing';
import { NgxGuidesService } from './ngx-guides.service';
describe('NgxGuidesService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: NgxGuidesService = TestBed.get(NgxGuidesService);
expect(service).toBeTruthy();
});
});
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.service.ts
================================================
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class NgxGuidesService {
constructor() { }
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/types.ts
================================================
import { EventEmitter } from '@angular/core';
import { GuidesEvents } from '@scena/guides';
export type NgxGuidesEvents = {
[key in keyof GuidesEvents]: EventEmitter<GuidesEvents[key]>
};
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/public-api.ts
================================================
/*
* Public API Surface of ngx-guides
*/
export * from './lib/ngx-guides.service';
export * from './lib/ngx-guides.component';
export * from './lib/ngx-guides.module';
================================================
FILE: packages/ngx-guides/projects/ngx-guides/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
<T>(id: string): T;
keys(): string[];
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: packages/ngx-guides/projects/ngx-guides/tsconfig.lib.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": []
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/tsconfig.lib.prod.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}
================================================
FILE: packages/ngx-guides/projects/ngx-guides/tsconfig.spec.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
================================================
FILE: packages/ngx-guides/src/app/app.component.css
================================================
================================================
FILE: packages/ngx-guides/src/app/app.component.html
================================================
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #333;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 8px 0;
}
p {
margin: 0;
}
.spacer {
flex: 1;
}
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar img {
margin: 0 16px;
}
.toolbar #twitter-logo {
height: 40px;
margin: 0 8px;
}
.toolbar #youtube-logo {
height: 40px;
margin: 0 16px;
}
.toolbar #twitter-logo:hover,
.toolbar #youtube-logo:hover {
opacity: 0.8;
}
.content {
display: flex;
margin: 82px auto 32px;
padding: 0 16px;
max-width: 960px;
flex-direction: column;
align-items: center;
}
svg.material-icons {
height: 24px;
width: auto;
}
svg.material-icons:not(:last-child) {
margin-right: 8px;
}
.card svg.material-icons path {
fill: #888;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.card {
all: unset;
border-radius: 4px;
border: 1px solid #eee;
background-color: #fafafa;
height: 40px;
width: 200px;
margin: 0 8px 16px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
line-height: 24px;
}
.card-container .card:not(:last-child) {
margin-right: 0;
}
.card.card-small {
height: 16px;
width: 168px;
}
.card-container .card:not(.highlight-card) {
cursor: pointer;
}
.card-container .card:not(.highlight-card):hover {
transform: translateY(-3px);
box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.card-container .card:not(.highlight-card):hover .material-icons path {
fill: rgb(105, 103, 103);
}
.card.highlight-card {
background-color: #1976d2;
color: white;
font-weight: 600;
border: none;
width: auto;
min-width: 30%;
position: relative;
}
.card.card.highlight-card span {
margin-left: 60px;
}
svg#rocket {
width: 80px;
position: absolute;
left: -10px;
top: -24px;
}
svg#rocket-smoke {
height: calc(100vh - 95px);
position: absolute;
top: 10px;
right: 180px;
z-index: -10;
}
a,
a:visited,
a:hover {
color: #1976d2;
text-decoration: none;
}
a:hover {
color: #125699;
}
.terminal {
position: relative;
width: 80%;
max-width: 600px;
border-radius: 6px;
padding-top: 45px;
margin-top: 8px;
overflow: hidden;
background-color: rgb(15, 15, 16);
}
.terminal::before {
content: "\2022 \2022 \2022";
position: absolute;
top: 0;
left: 0;
height: 4px;
background: rgb(58, 58, 58);
color: #c2c3c4;
width: 100%;
font-size: 2rem;
line-height: 0;
padding: 14px 0;
text-indent: 4px;
}
.terminal pre {
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
color: white;
padding: 0 1rem 1rem;
margin: 0;
}
.circle-link {
height: 40px;
width: 40px;
border-radius: 40px;
margin: 8px;
background-color: white;
border: 1px solid #eeeeee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: 1s ease-out;
}
.circle-link:hover {
transform: translateY(-0.25rem);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
footer {
margin-top: 8px;
display: flex;
align-items: center;
line-height: 20px;
}
footer a {
display: flex;
align-items: center;
}
.github-star-badge {
color: #24292e;
display: flex;
align-items: center;
font-size: 12px;
padding: 3px 10px;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
margin-left: 4px;
font-weight: 600;
}
.github-star-badge:hover {
background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
border-color: rgba(27,31,35,.35);
background-position: -.5em;
}
.github-star-badge .material-icons {
height: 16px;
width: 16px;
margin-right: 4px;
}
svg#clouds {
position: fixed;
bottom: -160px;
left: -230px;
z-index: -10;
width: 1920px;
}
/* Responsive Styles */
@media screen and (max-width: 767px) {
.card-container > *:not(.circle-link) ,
.terminal {
width: 100%;
}
.card:not(.highlight-card) {
height: 16px;
margin: 8px 0;
}
.card.highlight-card span {
margin-left: 72px;
}
svg#rocket-smoke {
right: 120px;
transform: rotate(-5deg);
}
}
@media screen and (max-width: 575px) {
svg#rocket-smoke {
display: none;
visibility: hidden;
}
}
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
width="40"
alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
<span>Welcome</span>
<div class="spacer"></div>
<a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
<svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect width="400" height="400" fill="none"/>
<path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
</svg>
</a>
<a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
<svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
</svg>
</a>
</div>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<svg id="rocket" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
<title>Rocket Ship</title>
<g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
<circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
<g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
<path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
<path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
</g>
</g>
</svg>
<span>{{ title }} app is running!</span>
<svg id="rocket-smoke" xmlns="http://www.w3.org/2000/svg" width="516.119" height="1083.632" viewBox="0 0 516.119 1083.632">
<title>Rocket Ship Smoke</title>
<path id="Path_40" data-name="Path 40" d="M644.6,141S143.02,215.537,147.049,870.207s342.774,201.755,342.774,201.755S404.659,847.213,388.815,762.2c-27.116-145.51-11.551-384.124,271.9-609.1C671.15,139.365,644.6,141,644.6,141Z" transform="translate(-147.025 -140.939)" fill="#f5f5f5"/>
</svg>
</div>
<!-- Resources -->
<h2>Resources</h2>
<p>Here are some links to help you get started:</p>
<div class="card-container">
<a class="card" target="_blank" rel="noopener" href="https://angular.io/tutorial">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>
<span>Learn Angular</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg> </a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
<span>CLI Documentation</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://material.angular.io">
<svg xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px" width="21.813" height="23.453" viewBox="0 0 21.813 23.453"><path d="M4099.584,972.736h0l-10.882,3.9,1.637,14.4,9.245,5.153,9.245-5.153,1.686-14.4Z" transform="translate(-4088.702 -972.736)" fill="#808080"/><path d="M4181.516,972.736v23.453l9.245-5.153,1.686-14.4Z" transform="translate(-4170.633 -972.736)" fill="#808080"/><path d="M4137.529,1076.127l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1058.315)" fill="#ffe0b2"/><path d="M4137.529,1051.705l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1036.757)" fill="#fff3e0"/><path d="M4137.529,1027.283l-7.7-3.723,4.417-2.721,7.753,3.723Z" transform="translate(-4125.003 -1015.199)" fill="#fff"/></svg>
<span>Angular Material</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://blog.angular.io/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>
<span>Angular Blog</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
<a class="card" target="_blank" rel="noopener" href="https://angular.io/devtools/">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M14.73,13.31C15.52,12.24,16,10.93,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.43,0,2.74-0.48,3.81-1.27L19.59,21L21,19.59L14.73,13.31z M9.5,14C7.01,14,5,11.99,5,9.5S7.01,5,9.5,5S14,7.01,14,9.5 S11.99,14,9.5,14z"/><polygon points="10.29,8.44 9.5,6 8.71,8.44 6.25,8.44 8.26,10.03 7.49,12.5 9.5,10.97 11.51,12.5 10.74,10.03 12.75,8.44"/></g></g></svg>
<span>Angular DevTools</span>
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
</a>
</div>
<!-- Next Steps -->
<h2>Next Steps</h2>
<p>What do you want to do next with your app?</p>
<input type="hidden" #selection>
<div class="card-container">
<button class="card card-small" (click)="selection.value = 'component'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>New Component</span>
</button>
<button class="card card-small" (click)="selection.value = 'material'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Angular Material</span>
</button>
<button class="card card-small" (click)="selection.value = 'pwa'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add PWA Support</span>
</button>
<button class="card card-small" (click)="selection.value = 'dependency'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Add Dependency</span>
</button>
<button class="card card-small" (click)="selection.value = 'test'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Run and Watch Tests</span>
</button>
<button class="card card-small" (click)="selection.value = 'build'" tabindex="0">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
<span>Build for Production</span>
</button>
</div>
<!-- Terminal -->
<div class="terminal" [ngSwitch]="selection.value">
<pre *ngSwitchDefault>ng generate component xyz</pre>
<pre *ngSwitchCase="'material'">ng add @angular/material</pre>
<pre *ngSwitchCase="'pwa'">ng add @angular/pwa</pre>
<pre *ngSwitchCase="'dependency'">ng add _____</pre>
<pre *ngSwitchCase="'test'">ng test</pre>
<pre *ngSwitchCase="'build'">ng build</pre>
</div>
<!-- Links -->
<div class="card-container">
<a class="circle-link" title="Find a Local Meetup" href="https://www.meetup.com/find/?keywords=angular" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="24.607" height="23.447" viewBox="0 0 24.607 23.447">
<title>Meetup Logo</title>
<path id="logo--mSwarm" d="M21.221,14.95A4.393,4.393,0,0,1,17.6,19.281a4.452,4.452,0,0,1-.8.069c-.09,0-.125.035-.154.117a2.939,2.939,0,0,1-2.506,2.091,2.868,2.868,0,0,1-2.248-.624.168.168,0,0,0-.245-.005,3.926,3.926,0,0,1-2.589.741,4.015,4.015,0,0,1-3.7-3.347,2.7,2.7,0,0,1-.043-.38c0-.106-.042-.146-.143-.166a3.524,3.524,0,0,1-1.516-.69A3.623,3.623,0,0,1,2.23,14.557a3.66,3.66,0,0,1,1.077-3.085.138.138,0,0,0,.026-.2,3.348,3.348,0,0,1-.451-1.821,3.46,3.46,0,0,1,2.749-3.28.44.44,0,0,0,.355-.281,5.072,5.072,0,0,1,3.863-3,5.028,5.028,0,0,1,3.555.666.31.31,0,0,0,.271.03A4.5,4.5,0,0,1,18.3,4.7a4.4,4.4,0,0,1,1.334,2.751,3.658,3.658,0,0,1,.022.706.131.131,0,0,0,.1.157,2.432,2.432,0,0,1,1.574,1.645,2.464,2.464,0,0,1-.7,2.616c-.065.064-.051.1-.014.166A4.321,4.321,0,0,1,21.221,14.95ZM13.4,14.607a2.09,2.09,0,0,0,1.409,1.982,4.7,4.7,0,0,0,1.275.221,1.807,1.807,0,0,0,.9-.151.542.542,0,0,0,.321-.545.558.558,0,0,0-.359-.534,1.2,1.2,0,0,0-.254-.078c-.262-.047-.526-.086-.787-.138a.674.674,0,0,1-.617-.75,3.394,3.394,0,0,1,.218-1.109c.217-.658.509-1.286.79-1.918a15.609,15.609,0,0,0,.745-1.86,1.95,1.95,0,0,0,.06-1.073,1.286,1.286,0,0,0-1.051-1.033,1.977,1.977,0,0,0-1.521.2.339.339,0,0,1-.446-.042c-.1-.092-.2-.189-.307-.284a1.214,1.214,0,0,0-1.643-.061,7.563,7.563,0,0,1-.614.512A.588.588,0,0,1,10.883,8c-.215-.115-.437-.215-.659-.316a2.153,2.153,0,0,0-.695-.248A2.091,2.091,0,0,0,7.541,8.562a9.915,9.915,0,0,0-.405.986c-.559,1.545-1.015,3.123-1.487,4.7a1.528,1.528,0,0,0,.634,1.777,1.755,1.755,0,0,0,1.5.211,1.35,1.35,0,0,0,.824-.858c.543-1.281,1.032-2.584,1.55-3.875.142-.355.28-.712.432-1.064a.548.548,0,0,1,.851-.24.622.622,0,0,1,.185.539,2.161,2.161,0,0,1-.181.621c-.337.852-.68,1.7-1.018,2.552a2.564,2.564,0,0,0-.173.528.624.624,0,0,0,.333.71,1.073,1.073,0,0,0,.814.034,1.22,1.22,0,0,0,.657-.655q.758-1.488,1.511-2.978.35-.687.709-1.37a1.073,1.073,0,0,1,.357-.434.43.43,0,0,1,.463-.016.373.373,0,0,1,.153.387.7.7,0,0,1-.057.236c-.065.157-.127.316-.2.469-.42.883-.846,1.763-1.262,2.648A2.463,2.463,0,0,0,13.4,14.607Zm5.888,6.508a1.09,1.09,0,0,0-2.179.006,1.09,1.09,0,0,0,2.179-.006ZM1.028,12.139a1.038,1.038,0,1,0,.01-2.075,1.038,1.038,0,0,0-.01,2.075ZM13.782.528a1.027,1.027,0,1,0-.011,2.055A1.027,1.027,0,0,0,13.782.528ZM22.21,6.95a.882.882,0,0,0-1.763.011A.882.882,0,0,0,22.21,6.95ZM4.153,4.439a.785.785,0,1,0,.787-.78A.766.766,0,0,0,4.153,4.439Zm8.221,18.22a.676.676,0,1,0-.677.666A.671.671,0,0,0,12.374,22.658ZM22.872,12.2a.674.674,0,0,0-.665.665.656.656,0,0,0,.655.643.634.634,0,0,0,.655-.644A.654.654,0,0,0,22.872,12.2ZM7.171-.123A.546.546,0,0,0,6.613.43a.553.553,0,1,0,1.106,0A.539.539,0,0,0,7.171-.123ZM24.119,9.234a.507.507,0,0,0-.493.488.494.494,0,0,0,.494.494.48.48,0,0,0,.487-.483A.491.491,0,0,0,24.119,9.234Zm-19.454,9.7a.5.5,0,0,0-.488-.488.491.491,0,0,0-.487.5.483.483,0,0,0,.491.479A.49.49,0,0,0,4.665,18.936Z" transform="translate(0 0.123)" fill="#f64060"/>
</svg>
</a>
<a class="circle-link" title="Join the Conversation on Discord" href="https://discord.gg/angular" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 245 240">
<title>Discord Logo</title>
<path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
<path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/>
</svg>
</a>
</div>
<!-- Footer -->
<footer>
Love Angular?
<a href="https://github.com/angular/angular" target="_blank" rel="noopener"> Give our repo a star.
<div class="github-star-badge">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
Star
</div>
</a>
<a href="https://github.com/angular/angular" target="_blank" rel="noopener">
<svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</a>
</footer>
<svg id="clouds" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677" viewBox="0 0 2611.084 485.677">
<title>Gray Clouds Background</title>
<path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
</svg>
</div>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
================================================
FILE: packages/ngx-guides/src/app/app.component.spec.ts
================================================
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'ngx-guides-project'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('ngx-guides-project');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('ngx-guides-project app is running!');
});
});
================================================
FILE: packages/ngx-guides/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ngx-guides-project';
}
================================================
FILE: packages/ngx-guides/src/app/app.module.ts
================================================
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: packages/ngx-guides/src/assets/.gitkeep
================================================
================================================
FILE: packages/ngx-guides/src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: packages/ngx-guides/src/environments/environment.ts
================================================
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
================================================
FILE: packages/ngx-guides/src/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgxGuidesProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
================================================
FILE: packages/ngx-guides/src/main.ts
================================================
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
================================================
FILE: packages/ngx-guides/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes recent versions of Safari, Chrome (including
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: packages/ngx-guides/src/styles.css
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: packages/ngx-guides/src/test.ts
================================================
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
<T>(id: string): T;
keys(): string[];
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
================================================
FILE: packages/ngx-guides/tsconfig.app.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: packages/ngx-guides/tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"paths": {
"ngx-guides": [
"dist/ngx-guides/ngx-guides",
"dist/ngx-guides"
]
},
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
================================================
FILE: packages/ngx-guides/tsconfig.spec.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}
================================================
FILE: packages/preact-guides/CHANGELOG.md
================================================
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [0.28.2](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.28.1...preact-guides@0.28.2) (2023-07-29)
### :mega: Other
* publish packages ([9b659fe](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/9b659fe71eb2fcb53b731e88b1561a0b18b9fcdc))
## [0.28.1](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.28.0...preact-guides@0.28.1) (2023-07-23)
### :mega: Other
* publish packages ([73e2427](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/73e24270c27eec1f30cc051fe84569e79f85822c))
## [0.28.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.27.0...preact-guides@0.28.0) (2023-07-22)
### :mega: Other
* publish packages ([324f848](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/324f848e0bae231c82b33be29ee2534d58a6d6b1))
## [0.27.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.26.0...preact-guides@0.27.0) (2023-06-02)
### :rocket: New Features
* update ruler and add drawRuler method ([20b1182](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/20b1182c3e8c93980418f34e1360cb4c81a2a0d3))
### :mega: Other
* publish packages ([53d07f3](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/53d07f3e31011ee6bff1a2558380dc6e61e98337))
## [0.26.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.25.3...preact-guides@0.26.0) (2023-06-01)
### :rocket: New Features
* update ruler and modules ([f528ce4](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/f528ce4c7ef6dd554112a7b86a0f7449d7cd230f))
### :mega: Other
* publish packages ([d038e92](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/d038e92046e55f0f65f4ddde24f12ed117fd64e2))
## [0.25.3](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.25.2...preact-guides@0.25.3) (2023-05-16)
### :bug: Bug Fix
* update css-styled version ([7327395](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/7327395786810c872f53678d47602b80db127197))
### :mega: Other
* publish packages ([78ed8c7](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/78ed8c708759927cabeb53b8c607fc6f54324371))
## [0.25.2](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.25.1...preact-guides@0.25.2) (2023-05-15)
### :rocket: New Features
* update depency modules ([21b67a8](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/21b67a80dfd61183e175d9ac6c64502c092aba74))
### :mega: Other
* publish packages ([1898b89](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/1898b895d5c812a5fd77d99a5928f7e420152772))
## [0.25.1](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.25.0...preact-guides@0.25.1) (2023-05-07)
### :mega: Other
* publish packages ([e1fb57c](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/e1fb57c59a4a8e6b3e55ffb68cfea64760270288))
## [0.25.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.24.0...preact-guides@0.25.0) (2023-04-12)
### :mega: Other
* publish packages ([548990d](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/548990d8577ffe565b8605f74edd9eb5a6519deb))
## [0.24.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.23.0...preact-guides@0.24.0) (2023-04-06)
### :rocket: New Features
* add croact-guides ([a7be435](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/a7be435704e24b6d80af80e069a6cc4047d645bc))
### :mega: Other
* publish packages ([f30e2ba](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/f30e2bad78e1bc02307c8dde8cb1b69ecccdf116))
## [0.23.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.22.3...preact-guides@0.23.0) (2023-03-04)
### :rocket: New Features
* update ruler ([f59fa59](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/f59fa5988f3c4dd96925677ca787e4fb55b150f1))
### :mega: Other
* publish packages ([1afbe1d](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/1afbe1d193cf2457dc9f3296b73d38b5859c0ee0))
## [0.22.3](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.22.2...preact-guides@0.22.3) (2023-02-04)
### :mega: Other
* publish packages ([ae0d147](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/ae0d14738d83b4f5352463b69f89efe7cc111baf))
## [0.22.2](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.22.1...preact-guides@0.22.2) (2023-01-29)
### :mega: Other
* publish packages ([0f7949a](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/0f7949a9954e2093d6a599dc545f988ed624d41f))
## [0.22.1](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.22.0...preact-guides@0.22.1) (2023-01-29)
### :mega: Other
* publish packages ([ab753c1](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/ab753c1c820463c1c0b7805d428c803c5eacc1e3))
## [0.22.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.21.0...preact-guides@0.22.0) (2023-01-29)
### :mega: Other
* publish packages ([6f83fa0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/6f83fa0c75f494aa79fff98f4a57f86ab295b67d))
## [0.21.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.20.1...preact-guides@0.21.0) (2023-01-28)
### :mega: Other
* publish packages ([9473e84](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/9473e8464fbd4c374ac6251ff995586afd163719))
## [0.20.1](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.20.0...preact-guides@0.20.1) (2023-01-27)
### :mega: Other
* publish packages ([628b944](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/628b9444bb9e6f5546c7a5edd55a090126f52dd5))
## [0.20.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.19.0...preact-guides@0.20.0) (2023-01-20)
### :bug: Bug Fix
* fix files field #67 ([28bf5b3](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/28bf5b3bd97cebd94eaf2195f0e99750f14e7ecb))
### :mega: Other
* publish packages ([095e7c6](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/095e7c670d3bd0bdc168e2f3c11b5dbb8074b26b))
* publish packages ([1daa6ea](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/1daa6ea441f6c96b8f354953605cd6ac89117878))
* publish packages ([e143c21](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/e143c2175309bf480ef17731321f6728b8d6bcc2))
* publish packages ([ce2037a](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/ce2037a18f5f6bbcd750e1fd72cbfc60e3f2c217))
* publish packages ([0abcba2](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/0abcba24e8b83ea51cf369124e8c2d85fee1ef7e))
## [0.19.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.18.0...preact-guides@0.19.0) (2022-11-13)
### :rocket: New Features
* add scrollOptions #64 ([e0dc92a](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/e0dc92a9ed417dff071b43a68b065907f8f1b8ad))
### :bug: Bug Fix
* fix scroll event name ([6eba67b](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/6eba67b33c0de50e1c68ff75882889227db663bc))
* update dependencies ([054e101](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/054e101d1b177bdfefab74bf440a4cb3cf8137be))
### :mega: Other
* publish packages ([9cc8e3a](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/9cc8e3ae5f83aa1513c1560166c6babbbe31dfd7))
## [0.18.0](https://github.com/daybrush/guides/blob/master/packages/preact-guides/compare/preact-guides@0.17.1...preact-guides@0.18.0) (2022-09-21)
### :mega: Other
* publish packages ([83de3e4](https://github.com/daybrush/guides/blob/master/packages/preact-guides/commit/83de3e4ae4bad11905939a44dfa2776fe7d6987d))
================================================
FILE: packages/preact-guides/LICENSE
================================================
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/preact-guides/README.md
================================================
<p align="middle" ><img src="https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png"/></p>
<h2 align="middle">Preact Guides</h2>
<p align="middle">
<a href="https://www.npmjs.com/package/preact-guides" target="_blank"><img src="https://img.shields.io/npm/v/preact-guides.svg?style=flat-square&color=007acc&label=version" alt="npm version" /></a>
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square"/>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D"/></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984"></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img
alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38"></a>
</p>
<p align="middle">A Preact Guides component that can draw ruler and manage guidelines.</p>
<p align="middle">
<a href="https://daybrush.com/guides" target="_blank"><strong>Demo</strong></a> /
<a href="https://daybrush.com/guides/release/latest/doc/" target="_blank"><strong>API</strong></a> /
<a href="https://github.com/daybrush/ruler" target="_blank"><strong>Ruler</strong></a> /
<a href="https://github.com/daybrush/scena" target="_blank"><strong>Main Project</strong></a>
</p>
## ⚙️ Installation
### npm
```sh
$ npm i preact-guides
```
## 🚀 How to use
```tsx
import { Component, h } from "preact";
import Guides from "preact-guides";
export default class App extends Component {
render() {
return (<Guides
ref={e => {
this.guides = e;
}}
type="horizontal"
setGuides={guides => {
console.log(guides);
}}
/>);
}
componentDidMount() {
this.guides.resize();
let scrollX = 0;
let scrollY = 0;
window.addEventListener("wheel", e => {
scrollX += e.deltaX;
scrollY += e.deltaY;
this.guides.scrollGuides(scrollY);
this.guides.scroll(scrollX);
});
window.addEventListener("resize", () => {
this.guides.resize();
});
}
}
export interface RulerProps {
type?: "horizontal" | "vertical";
width?: number;
height?: number;
unit?: number;
zoom?: number;
direction?: "start" | "end";
style?: IObject<any>;
backgroundColor?: string;
lineColor?: string;
textColor?: string;
}
export interface GuidesProps extends RulerProps {
className?: string;
setGuides?: (guides: number[]) => any;
rulerStyle?: IObject<any>;
snapThreshold?: number;
snaps?: number[];
}
export interface GuidesInterface {
getGuides(): number[];
scroll(pos: number): void;
scrollGuides(pos: number): void;
loadGuides(guides: number[]): void;
resize(): void;
}
```
## ⚙️ Developments
### `npm run start`
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If you have any questions or requests or want to contribute to `@scena/react-guides` or other packages, please write the [issue](https://github.com/daybrush/guides/issues) or give me a Pull Request freely.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/guides/issues) on GitHub.
## 📝 License
This project is [MIT](https://github.com/daybrush/guides/blob/master/LICENSE) licensed.
```
MIT License
Copyright (c) 2019 Daybrush
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
================================================
FILE: packages/preact-guides/demo/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Preact App</title>
<link rel="stylesheet" href="./dist/index.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<script src="./dist/index.js"></script>
</html>
================================================
FILE: packages/preact-guides/package.json
================================================
{
"name": "preact-guides",
"version": "0.28.2",
"description": "A Preact Guides component that can draw ruler and manage guidelines.",
"main": "./dist/guides.cjs.js",
"module": "./dist/guides.esm.js",
"sideEffects": false,
"types": "declaration/index.d.ts",
"scripts": {
"lint": "tslint -c tslint.json 'src/**/*.ts'",
"start": "open ./demo/index.html && rollup -c rollup.config.demo.js -w",
"build": "rollup -c && npm run declaration && print-sizes ./dist ",
"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && npm run declaration:cp",
"declaration:cp": "cp src/preact-guides/Guides.d.ts declaration/Guides.d.ts"
},
"keywords": [
"scene",
"scenejs",
"scene.js",
"scena",
"guides",
"scroller",
"preact"
],
"repository": {
"type": "git",
"url": "https://github.com/daybrush/guides/blob/master/packages/preact-guides"
},
"author": "Daybrush",
"license": "MIT",
"bugs": {
"url": "https://github.com/daybrush/guides/issues"
},
"files": [
"./*",
"src/*",
"dist/*",
"declaration/*",
"README.md"
],
"homepage": "https://daybrush.com/guides",
"devDependencies": {
"@daybrush/builder": "^0.1.0",
"@scenejs/effects": "^1.0.1",
"keycon": "^0.3.0",
"preact": "^10.0.0",
"print-sizes": "^0.2.0",
"rollup-plugin-css-bundle": "^1.0.4",
"rollup-plugin-preact": "^0.5.2",
"scenejs": "^1.1.4",
"shape-svg": "^0.3.3",
"tslint": "^5.16.0",
"typescript": "^4.5.0 <4.6.0"
},
"dependencies": {
"@daybrush/utils": "^1.12.1",
"@scena/dragscroll": "^1.3.0",
"@scena/react-guides": "~0.28.2",
"css-to-mat": "^1.0.3",
"framework-utils": "^1.1.0",
"gesto": "^1.18.1",
"preact-css-styled": "^1.1.8",
"preact-ruler": "^0.19.0",
"react-css-styled": "^1.1.8"
}
}
================================================
FILE: packages/preact-guides/rollup.config.demo.js
================================================
import builder from "@daybrush/builder";
import css from "rollup-plugin-css-bundle";
const preact = require("rollup-plugin-preact");
export default builder({
input: "./src/demo/index.tsx",
tsconfig: "./tsconfig.build.json",
sourcemap: false,
format: "umd",
output: "./demo/dist/index.js",
name: "app",
exports: "named",
plugins: [
css({ output: "./demo/dist/index.css" }),
preact({
noPropTypes: true,
noEnv: true,
noReactIs: true,
resolvePreactCompat: true,
// usePreactX: true,
}),
],
});
================================================
FILE: packages/preact-guides/rollup.config.js
================================================
import builder from "@daybrush/builder";
const preact = require("rollup-plugin-preact");
const defaultOptions = {
tsconfig: "tsconfig.build.json",
external: {
"@daybrush/utils": "utils",
"gesto": "Gesto",
"preact": "Preact",
"preact/compat": "preact/compat",
"preact-compat": "preact-compat",
"preact-css-styled": "preact-css-styled",
"preact-ruler": "preact-ruler",
"framework-utils": "framework-utils",
"@egjs/agent": "eg.Agent",
"@egjs/children-differ": "eg.ChildrenDiffer",
"css-to-mat": "CssToMat",
},
exports: "named",
plugins: [
preact({
noPropTypes: false,
noEnv: false,
noReactIs: false,
usePreactX: true,
aliasModules: {
"react-css-styled": "preact-css-styled",
"@scena/react-ruler": "preact-ruler",
},
}),
],
sourcemap: false,
};
export default builder([
{
...defaultOptions,
input: "src/preact-guides/index.esm.ts",
output: "./dist/guides.esm.js",
format: "es",
},
{
...defaultOptions,
input: "src/preact-guides/index.umd.ts",
output: "./dist/guides.cjs.js",
format: "cjs",
exports: "default",
},
]);
================================================
FILE: packages/preact-guides/src/demo/App.css
================================================
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:100&display=swap");
html, body {
font-family: "Open Sans", sans-serif;
position: relative;
margin: 0;
padding: 0;
height: 100%;
color: #333;
letter-spacing: 1px;
background: #f5f5f5;
font-weight: 300;
touch-action: manipulation;
}
#root, .page {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
a {
text-decoration: none;
color: #333;
}
.ruler {
position:absolute;
top: 0;
left: 0;
}
.ruler.horizontal {
left: 0px;
width: 100%;
height: 30px;
}
.ruler.vertical {
top: 0px;
width: 30px;
height: 100%;
}
.box {
position: relative;
width: 30px;
height: 30px;
background: #444;
box-sizing: border-box;
z-index: 21;
}
.box:before, .box:after {
position: absolute;
content: "";
background: #777;
}
.box:before {
width: 1px;
height: 100%;
left: 100%;
}
.box:after {
height: 1px;
width: 100%;
top: 100%;
}
.container {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
max-width: calc(100% - 60px);
width: 100%;
}
.badges {
padding: 10px;
}
.badges img {
height: 20px;
margin: 0px 2px;
}
.buttons {
text-align: center;
margin: 0;
padding: 10px;
}
.buttons a {
margin: 0;
position: relative;
text-decoration: none;
color: #333;
border: 1px solid #333;
padding: 12px 30px;
min-width: 140px;
text-align: center;
display: inline-block;
box-sizing: border-box;
margin: 5px;
transition: all ease 0.5s;
}
.buttons a:hover {
background: #333;
color: #fff;
}
p {
padding: 0;
margin: 0;
}
.dragit {
font-weight: bold;
}
================================================
FILE: packages/preact-guides/src/demo/App.tsx
================================================
import { Component, h } from "preact";
import Scene from "scenejs";
import "./App.css";
import Guides from "../preact-guides/Guides";
import { ref } from "framework-utils";
import Gesto from "gesto";
export default class App extends Component<{}> {
private scene: Scene = new Scene();
// private editor!: Editor;
private guides1: Guides;
private guides2: Guides;
private scrollX: number = 0;
private scrollY: number = 0;
public render() {
return (<div className="page">
<div className="box" onClick={this.restore}></div>
<div className="ruler horizontal">
<Guides ref={ref(this, "guides1")}
type="horizontal"
rulerStyle={{ left: "30px", width: "calc(100% - 30px)", height: "100%" }}
setGuides={(guides) => {
console.log("horizontal", guides);
}}
/>
</div>
<div className="ruler vertical">
<Guides ref={ref(this, "guides2")}
type="vertical"
rulerStyle={{ top: "30px", height: "calc(100% - 30px)", width: "100%" }}
setGuides={(guides) => {
console.log("vertical", guides);
}}
/>
</div>
<div className="container">
<img src="https://daybrush.com/guides/images/guides.png" width="200" alt="guides" />
<p className="dragit">Drag Screen & Rulers!</p>
<p className="badges">
<a href="https://www.npmjs.com/package/svelte-guides" target="_blank">
<img src="https://img.shields.io/npm/v/svelte-guides.svg?style=flat-square&color=007acc&label=version"
alt="npm version" /></a>
<a href="https://github.com/daybrush/guides" target="_blank">
<img src="https://img.shields.io/github/stars/daybrush/guides.svg?color=42b883&style=flat-square" /></a>
<a href="https://github.com/daybrush/guides" target="_blank">
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />
</a>
<a href="https://github.com/daybrush/guides/blob/master/LICENSE" target="_blank">
<img
src="https://img.shields.io/github/license/daybrush/guides.svg?style=flat-square&label=license&color=08CE5D" />
</a>
<a href="https://github.com/daybrush/guides/tree/master/packages/react-guides" target="_blank"><img alt="React"
src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&color=61daeb" /></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/preact-guides" target="_blank"><img alt="Preact"
src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&color=673ab8" /></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/ngx-guides" target="_blank"><img alt="Angular"
src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&color=C82B38" /></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/vue-guides" target="_blank"><img alt="Vue"
src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984" /></a>
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank"><img alt="Svelte"
src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&color=C82B38" /></a>
</p>
<p className="description">A Preact Guides component that can draw ruler and manage guidelines.</p>
<div className="buttons">
<a href="https://github.com/daybrush/guides/tree/master/packages/svelte-guides" target="_blank">Download</a>
<
gitextract_q_zk3947/ ├── .editorconfig ├── .github/ │ └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .yarnrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config/ │ └── update-type-consts.js ├── demo/ │ ├── index.css │ └── index.html ├── jsdoc.json ├── lerna.json ├── package.json ├── packages/ │ ├── croact-guides/ │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── README.md │ │ ├── demo/ │ │ │ └── index.html │ │ ├── package.json │ │ ├── rollup.config.js │ │ ├── src/ │ │ │ ├── index.ts │ │ │ └── index.umd.ts │ │ ├── tsconfig.declaration.json │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── guides/ │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── package.json │ │ ├── rollup.config.js │ │ ├── src/ │ │ │ ├── Guides.tsx │ │ │ ├── GuidesManager.tsx │ │ │ ├── InnerGuides.tsx │ │ │ ├── consts.ts │ │ │ ├── index.cjs.ts │ │ │ ├── index.esm.ts │ │ │ ├── index.ts │ │ │ └── index.umd.ts │ │ ├── test/ │ │ │ └── manual/ │ │ │ ├── guides.html │ │ │ └── index.html │ │ ├── tsconfig.declaration.json │ │ ├── tsconfig.json │ │ ├── tsconfig.test.json │ │ └── tslint.json │ ├── ngx-guides/ │ │ ├── .browserslistrc │ │ ├── .editorconfig │ │ ├── .gitignore │ │ ├── README.md │ │ ├── angular.json │ │ ├── karma.conf.js │ │ ├── package.json │ │ ├── projects/ │ │ │ └── ngx-guides/ │ │ │ ├── .browserslistrc │ │ │ ├── CHANGELOG.md │ │ │ ├── README.md │ │ │ ├── karma.conf.js │ │ │ ├── ng-package.json │ │ │ ├── package.json │ │ │ ├── src/ │ │ │ │ ├── lib/ │ │ │ │ │ ├── consts.ts │ │ │ │ │ ├── ngx-guides.component.spec.ts │ │ │ │ │ ├── ngx-guides.component.ts │ │ │ │ │ ├── ngx-guides.interface.ts │ │ │ │ │ ├── ngx-guides.module.ts │ │ │ │ │ ├── ngx-guides.service.spec.ts │ │ │ │ │ ├── ngx-guides.service.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── public-api.ts │ │ │ │ └── test.ts │ │ │ ├── tsconfig.lib.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ └── tsconfig.spec.json │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── app.component.css │ │ │ │ ├── app.component.html │ │ │ │ ├── app.component.spec.ts │ │ │ │ ├── app.component.ts │ │ │ │ └── app.module.ts │ │ │ ├── assets/ │ │ │ │ └── .gitkeep │ │ │ ├── environments/ │ │ │ │ ├── environment.prod.ts │ │ │ │ └── environment.ts │ │ │ ├── index.html │ │ │ ├── main.ts │ │ │ ├── polyfills.ts │ │ │ ├── styles.css │ │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ └── tsconfig.spec.json │ ├── preact-guides/ │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── README.md │ │ ├── demo/ │ │ │ └── index.html │ │ ├── package.json │ │ ├── rollup.config.demo.js │ │ ├── rollup.config.js │ │ ├── src/ │ │ │ ├── demo/ │ │ │ │ ├── App.css │ │ │ │ ├── App.tsx │ │ │ │ └── index.tsx │ │ │ └── preact-guides/ │ │ │ ├── Guides.d.ts │ │ │ ├── Guides.js │ │ │ ├── index.esm.ts │ │ │ ├── index.ts │ │ │ └── index.umd.ts │ │ ├── tsconfig.build.json │ │ ├── tsconfig.declaration.json │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── react-guides/ │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── README.md │ │ ├── package.json │ │ ├── public/ │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── rollup.config.js │ │ ├── src/ │ │ │ ├── demo/ │ │ │ │ ├── App.css │ │ │ │ ├── App.tsx │ │ │ │ ├── InfiniteViewer.css │ │ │ │ ├── InfiniteViewer.tsx │ │ │ │ └── serviceWorker.ts │ │ │ ├── index.tsx │ │ │ ├── react-app-env.d.ts │ │ │ └── react-guides/ │ │ │ ├── Guides.tsx │ │ │ ├── consts.ts │ │ │ ├── index.esm.ts │ │ │ ├── index.ts │ │ │ ├── index.umd.ts │ │ │ ├── types.ts │ │ │ └── utils.ts │ │ ├── tsconfig.build.json │ │ ├── tsconfig.declaration.json │ │ ├── tsconfig.json │ │ └── tslint.json │ ├── svelte-guides/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── README.md │ │ ├── package.json │ │ ├── public/ │ │ │ ├── global.css │ │ │ └── index.html │ │ ├── rollup.build.config.js │ │ ├── rollup.config.js │ │ ├── rollup_start_dev.js │ │ ├── src/ │ │ │ ├── App.svelte │ │ │ ├── Guides.svelte │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── main.js │ │ ├── svelte.config.js │ │ └── tsconfig.json │ ├── vue-guides/ │ │ ├── .browserslistrc │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE │ │ ├── README.md │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── public/ │ │ │ └── index.html │ │ ├── rollup.config.js │ │ ├── src/ │ │ │ ├── App.vue │ │ │ ├── App2.vue │ │ │ ├── components/ │ │ │ │ ├── Guides.vue │ │ │ │ ├── Guides.vue.d.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── main.ts │ │ │ ├── shims-tsx.d.ts │ │ │ └── shims-vue.d.ts │ │ ├── tsconfig.declaration.json │ │ └── tsconfig.json │ └── vue3-guides/ │ ├── .browserslistrc │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── demo/ │ │ ├── App.vue │ │ ├── App2.vue │ │ ├── index.ts │ │ └── shims-vue.d.ts │ ├── package.json │ ├── postcss.config.js │ ├── public/ │ │ └── index.html │ ├── rollup.config.js │ ├── src/ │ │ ├── Guides.vue │ │ ├── Guides.vue.d.ts │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.declaration.json │ └── tsconfig.json ├── rollup.config.js ├── static/ │ └── scripts/ │ └── custom.js ├── tsconfig.declaration.json ├── tsconfig.json ├── tsconfig.test.json └── tslint.json
SYMBOL INDEX (106 symbols across 29 files)
FILE: packages/guides/src/Guides.tsx
class Guides (line 3) | class Guides extends GuidesManager {}
FILE: packages/guides/src/GuidesManager.tsx
class Guides (line 10) | @Properties(METHODS as any, (prototype, property) => {
method get (line 25) | get() {
method set (line 28) | set(value) {
method constructor (line 51) | constructor(container: HTMLElement, options: Partial<GuidesOptions> = ...
method setState (line 79) | public setState(state: Partial<GuidesOptions>, callback?: () => void) {
method forceUpdate (line 85) | public forceUpdate(callback?: () => void) {
method destroy (line 91) | public destroy() {
method getInnerGuides (line 105) | private getInnerGuides() {
type Guides (line 109) | interface Guides extends GuidesInterface {}
method get (line 25) | get() {
method set (line 28) | set(value) {
method constructor (line 51) | constructor(container: HTMLElement, options: Partial<GuidesOptions> = ...
method setState (line 79) | public setState(state: Partial<GuidesOptions>, callback?: () => void) {
method forceUpdate (line 85) | public forceUpdate(callback?: () => void) {
method destroy (line 91) | public destroy() {
method getInnerGuides (line 105) | private getInnerGuides() {
FILE: packages/guides/src/InnerGuides.tsx
type InnerGuidesProps (line 6) | interface InnerGuidesProps extends GuidesOptions {
class InnerGuides (line 9) | class InnerGuides extends React.Component<InnerGuidesProps, InnerGuidesP...
method constructor (line 12) | constructor(props: InnerGuidesProps) {
method render (line 16) | public render() {
FILE: packages/guides/src/consts.ts
constant PROPERTIES (line 9) | const PROPERTIES: Array<keyof GuidesOptions> = GUIDES_PROPERTIES;
constant METHODS (line 11) | const METHODS = GUIDES_METHODS as readonly string[];
constant EVENTS (line 13) | const EVENTS = GUIDES_EVENTS as readonly string[];
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/consts.ts
constant ANGULAR_GUIDES_INPUTS (line 3) | const ANGULAR_GUIDES_INPUTS: ["className","rulerStyle","snapThreshold","...
constant ANGULAR_GUIDES_OUTPUTS (line 4) | const ANGULAR_GUIDES_OUTPUTS: ["changeGuides","requestScroll","dragStart...
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.ts
class NgxGuidesComponent (line 19) | class NgxGuidesComponent extends NgxGuidesInterface implements AfterView...
method constructor (line 21) | constructor() {
method ngOnChanges (line 27) | ngOnChanges(changes: SimpleChanges): void {
method ngAfterViewInit (line 46) | ngAfterViewInit() {
method ngOnDestroy (line 71) | ngOnDestroy() {
method setStyle (line 74) | setStyle() {
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.interface.ts
class NgxGuidesInterface (line 6) | class NgxGuidesInterface {
type NgxGuidesInterface (line 10) | interface NgxGuidesInterface
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.module.ts
class NgxGuidesModule (line 12) | class NgxGuidesModule { }
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.service.ts
class NgxGuidesService (line 6) | class NgxGuidesService {
method constructor (line 8) | constructor() { }
FILE: packages/ngx-guides/projects/ngx-guides/src/lib/types.ts
type NgxGuidesEvents (line 4) | type NgxGuidesEvents = {
FILE: packages/ngx-guides/src/app/app.component.ts
class AppComponent (line 8) | class AppComponent {
FILE: packages/ngx-guides/src/app/app.module.ts
class AppModule (line 16) | class AppModule { }
FILE: packages/preact-guides/src/demo/App.tsx
class App (line 8) | class App extends Component<{}> {
method render (line 15) | public render() {
method componentDidMount (line 71) | public componentDidMount() {
FILE: packages/preact-guides/src/preact-guides/Guides.d.ts
class PreactGuides (line 4) | class PreactGuides extends Component<GuidesProps, GuidesState> {
type PreactGuides (line 7) | interface PreactGuides extends Component<GuidesProps, GuidesState>, Guid...
FILE: packages/react-guides/src/demo/App.tsx
type State (line 9) | interface State {
class App (line 18) | class App extends Component<{}> {
method render (line 55) | public render() {
method componentDidMount (line 184) | public componentDidMount() {
FILE: packages/react-guides/src/demo/InfiniteViewer.tsx
function App (line 7) | function App() {
FILE: packages/react-guides/src/demo/serviceWorker.ts
type Config (line 23) | interface Config {
function register (line 28) | function register(config?: Config) {
function registerValidSW (line 65) | function registerValidSW(swUrl: string, config?: Config) {
function checkValidServiceWorker (line 109) | function checkValidServiceWorker(swUrl: string, config?: Config) {
function unregister (line 137) | function unregister() {
FILE: packages/react-guides/src/react-guides/Guides.tsx
class Guides (line 15) | class Guides extends React.PureComponent<GuidesProps, GuidesState> imple...
method constructor (line 58) | constructor(props: GuidesProps) {
method render (line 63) | public render() {
method drawRuler (line 115) | public drawRuler(options: DrawRulerOptions) {
method renderGuides (line 118) | public renderGuides() {
method componentDidMount (line 156) | public componentDidMount() {
method componentWillUnmount (line 227) | public componentWillUnmount() {
method componentDidUpdate (line 231) | public componentDidUpdate(prevProps: any) {
method loadGuides (line 244) | public loadGuides(guides: number[]) {
method getGuides (line 254) | public getGuides(): number[] {
method scrollGuides (line 262) | public scrollGuides(pos: number, nextZoom = this._guidesZoom) {
method zoomTo (line 288) | public zoomTo(nextZoom: number, nextGuidesZoom = nextZoom) {
method getElement (line 297) | public getElement() {
method getRulerElement (line 305) | public getRulerElement() {
method getGuideScrollPos (line 311) | public getGuideScrollPos() {
method getRulerScrollPos (line 317) | public getRulerScrollPos() {
method scroll (line 325) | public scroll(pos: number, nextZoom = this._zoom) {
method resize (line 334) | public resize(nextZoom = this._zoom) {
method movePos (line 492) | private movePos(e: any) {
method getTranslateName (line 539) | private getTranslateName() {
method _startDragScroll (line 543) | private _startDragScroll(e: OnDragStart) {
method _dragScroll (line 568) | private _dragScroll(e: OnDrag) {
method _endDragScroll (line 578) | private _endDragScroll(e: OnDragEnd) {
method _setZoom (line 585) | private _setZoom(zooms: { zoom?: number; guidesZoom?: number }) {
FILE: packages/react-guides/src/react-guides/consts.ts
constant ADDER (line 6) | const ADDER = prefix("guide", "adder");
constant GUIDES (line 7) | const GUIDES = prefix("guides");
constant GUIDE (line 8) | const GUIDE = prefix("guide");
constant DRAGGING (line 9) | const DRAGGING = prefix("dragging");
constant DISPLAY_DRAG (line 10) | const DISPLAY_DRAG = prefix("display-drag");
constant GUIDES_CSS (line 11) | const GUIDES_CSS = prefixCSS("scena-guides-", `
constant PROPERTIES (line 120) | const PROPERTIES: Array<keyof GuidesOptions> = [
constant METHODS (line 144) | const METHODS = [
constant EVENTS (line 159) | const EVENTS = [
FILE: packages/react-guides/src/react-guides/types.ts
type GuidesState (line 11) | interface GuidesState {
type GuidesOptions (line 20) | interface GuidesOptions extends RulerProps {
type GuideOptions (line 129) | interface GuideOptions extends GuidesOptions {
type GuidesProps (line 137) | interface GuidesProps extends GuidesOptions {
type OnChangeGuides (line 149) | interface OnChangeGuides {
type OnRequestScroll (line 162) | interface OnRequestScroll {
type OnDragStart (line 172) | interface OnDragStart extends OnGestoDragStart {
type OnDrag (line 180) | interface OnDrag extends OnGestoDrag {
type OnDragEnd (line 188) | interface OnDragEnd extends OnGestoDragEnd {
type OnClickRuler (line 196) | interface OnClickRuler extends OnGestoDragEnd {
type GuidesInterface (line 203) | interface GuidesInterface {
type GuidesEvents (line 218) | interface GuidesEvents {
FILE: packages/react-guides/src/react-guides/utils.ts
function prefix (line 3) | function prefix(...classNames: string[]) {
FILE: packages/svelte-guides/rollup_start_dev.js
method writeBundle (line 6) | writeBundle() {
FILE: packages/svelte-guides/src/index.d.ts
type SvelteGuidesEvents (line 5) | type SvelteGuidesEvents = {
class GuidesComponent (line 8) | class GuidesComponent extends SvelteComponentTyped<
type GuidesComponent (line 13) | interface GuidesComponent extends GuidesInterface {
FILE: packages/vue-guides/src/components/Guides.vue.d.ts
type VueGuides (line 4) | type VueGuides = VueGuidesInterface;
FILE: packages/vue-guides/src/components/types.ts
type VueGuidesInterface (line 4) | interface VueGuidesInterface
FILE: packages/vue-guides/src/shims-tsx.d.ts
type Element (line 6) | interface Element extends VNode {}
type ElementClass (line 8) | interface ElementClass extends Vue {}
type IntrinsicElements (line 9) | interface IntrinsicElements {
FILE: packages/vue3-guides/src/Guides.vue.d.ts
type VueGuides (line 4) | type VueGuides = VueGuidesInterface;
FILE: packages/vue3-guides/src/types.ts
type VueGuidesInterface (line 4) | interface VueGuidesInterface
FILE: static/scripts/custom.js
function gtag (line 3) | function gtag() { dataLayer.push(arguments); }
Condensed preview — 193 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (389K chars).
[
{
"path": ".editorconfig",
"chars": 310,
"preview": "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\nindent_size = 4\ninsert_"
},
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 178,
"preview": "## Environments\n* Framework name:\n* Framework version:\n* Component name: \n* Component version:\n* Testable Address(option"
},
{
"path": ".gitignore",
"chars": 213,
"preview": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ndist/\ndemo/dist/\npackages/*/dist/\nrelease/\nnpm-debug.log*\ncoverage/\njsdoc/\ndoc/\n"
},
{
"path": ".npmignore",
"chars": 236,
"preview": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.tra"
},
{
"path": ".yarnrc",
"chars": 29,
"preview": "workspaces-experimental true\n"
},
{
"path": "CHANGELOG.md",
"chars": 17508,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "README.md",
"chars": 5279,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "config/update-type-consts.js",
"chars": 414,
"preview": "const path = require(\"path\");\nconst { convertProperties } = require(\"@daybrush/release/angular\");\nconst { PROPERTIES, EV"
},
{
"path": "demo/index.css",
"chars": 1899,
"preview": "@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap\");\n@import url(\"https://fonts.go"
},
{
"path": "demo/index.html",
"chars": 6020,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\"\n content=\"width=device-widt"
},
{
"path": "jsdoc.json",
"chars": 1486,
"preview": "{\n \"plugins\": [],\n \"recurseDepth\": 10,\n \"opts\": {\n \"template\": \"./node_modules/daybrush-jsdoc-template\","
},
{
"path": "lerna.json",
"chars": 825,
"preview": "{\n \"npmClient\": \"yarn\",\n \"useWorkspaces\": true,\n \"packages\": [\n \"packages/*\",\n \"packages/ngx-guid"
},
{
"path": "package.json",
"chars": 3763,
"preview": "{\n \"name\": \"guides-root\",\n \"private\": true,\n \"description\": \"A Guides component that can draw ruler and manage "
},
{
"path": "packages/croact-guides/CHANGELOG.md",
"chars": 9691,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/croact-guides/LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "packages/croact-guides/README.md",
"chars": 0,
"preview": ""
},
{
"path": "packages/croact-guides/demo/index.html",
"chars": 739,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Preact App</title>\n <link rel=\"styl"
},
{
"path": "packages/croact-guides/package.json",
"chars": 2018,
"preview": "{\n \"name\": \"croact-guides\",\n \"version\": \"0.26.2\",\n \"description\": \"A React Compat Guides component that can dra"
},
{
"path": "packages/croact-guides/rollup.config.js",
"chars": 1100,
"preview": "\nimport builder from \"@daybrush/builder\";\nimport reactCompat from \"rollup-plugin-react-compat\";\n\nconst external = {\n "
},
{
"path": "packages/croact-guides/src/index.ts",
"chars": 102,
"preview": "import Guides from \"@scena/react-guides\";\nexport default Guides;\nexport * from \"@scena/react-guides\";\n"
},
{
"path": "packages/croact-guides/src/index.umd.ts",
"chars": 150,
"preview": "import Guides, * as others from \"./index\";\n\nfor (const name in others) {\n (Guides as any)[name] = (others as any)[nam"
},
{
"path": "packages/croact-guides/tsconfig.declaration.json",
"chars": 181,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"removeComments\": false,\n \"declaration\": true,\n \"emitDecla"
},
{
"path": "packages/croact-guides/tsconfig.json",
"chars": 336,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./outjs/\",\n \"esModuleInterop\": false,\n \"sourceMap\": true,\n \"module\": \"e"
},
{
"path": "packages/croact-guides/tslint.json",
"chars": 747,
"preview": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"typedef\": [true, \"parameter\"],\n\t\t"
},
{
"path": "packages/guides/.gitignore",
"chars": 213,
"preview": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ndist/\ndemo/dist/\npackages/*/dist/\nrelease/\nnpm-debug.log*\ncoverage/\njsdoc/\ndoc/\n"
},
{
"path": "packages/guides/.npmignore",
"chars": 236,
"preview": "node_modules/\n*.DS_Store\n.DS_Store\ndoc/\ntemplate/\nexample/\nkarma.conf.js\ntest/\nmocha.opts\nGruntfile.js\nwebpack.*.js\n.tra"
},
{
"path": "packages/guides/CHANGELOG.md",
"chars": 7165,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/guides/README.md",
"chars": 5171,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/guides/package.json",
"chars": 1917,
"preview": "{\n \"name\": \"@scena/guides\",\n \"version\": \"0.29.2\",\n \"description\": \"A Vanilla Guides component that can draw rul"
},
{
"path": "packages/guides/rollup.config.js",
"chars": 1345,
"preview": "\nimport builder from \"@daybrush/builder\";\nimport compat from \"rollup-plugin-react-compat\";\n\n\nconst reactCompat = compat("
},
{
"path": "packages/guides/src/Guides.tsx",
"chars": 99,
"preview": "import GuidesManager from \"./GuidesManager\";\n\nexport default class Guides extends GuidesManager {}\n"
},
{
"path": "packages/guides/src/GuidesManager.tsx",
"chars": 3184,
"preview": "import { ref, Properties } from \"framework-utils\";\nimport * as React from \"react\";\nimport { PROPERTIES, METHODS, EVENTS "
},
{
"path": "packages/guides/src/InnerGuides.tsx",
"chars": 655,
"preview": "import * as React from \"react\";\nimport { ref } from \"framework-utils\";\nimport ReactGuides from \"@scena/react-guides\";\nim"
},
{
"path": "packages/guides/src/consts.ts",
"chars": 405,
"preview": "import {\n PROPERTIES as GUIDES_PROPERTIES,\n METHODS as GUIDES_METHODS,\n EVENTS as GUIDES_EVENTS,\n} from \"@scena"
},
{
"path": "packages/guides/src/index.cjs.ts",
"chars": 226,
"preview": "import Guides, * as others from \"./index.esm\";\n\nfor (const name in others) {\n (Guides as any)[name] = others[name];\n}"
},
{
"path": "packages/guides/src/index.esm.ts",
"chars": 81,
"preview": "import Guides from \"./Guides\";\n\nexport * from \"./consts\";\nexport default Guides;\n"
},
{
"path": "packages/guides/src/index.ts",
"chars": 136,
"preview": "import Guides from \"./Guides\";\n\nexport * from \"@scena/react-guides/declaration/types\";\nexport * from \"./consts\";\nexport "
},
{
"path": "packages/guides/src/index.umd.ts",
"chars": 145,
"preview": "import Guides, * as others from \"./index.esm\";\n\nfor (const name in others) {\n (Guides as any)[name] = others[name];\n}"
},
{
"path": "packages/guides/test/manual/guides.html",
"chars": 3699,
"preview": "<meta charset=\"utf-8\">\n<meta name=\"viewport\"\n content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum"
},
{
"path": "packages/guides/test/manual/index.html",
"chars": 11474,
"preview": "<meta charset=\"utf-8\">\n<meta name=\"viewport\"\n content=\"width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum"
},
{
"path": "packages/guides/tsconfig.declaration.json",
"chars": 181,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"removeComments\": false,\n \"declaration\": true,\n \"emitDecla"
},
{
"path": "packages/guides/tsconfig.json",
"chars": 357,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./outjs/\",\n \"esModuleInterop\": false,\n \"sourceMap\": true,\n \"module\": \"e"
},
{
"path": "packages/guides/tsconfig.test.json",
"chars": 228,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"noImplicitAny\": false,\n \"types\": ["
},
{
"path": "packages/guides/tslint.json",
"chars": 757,
"preview": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"jsdoc-format\": false,\n\t\t\"forin\": "
},
{
"path": "packages/ngx-guides/.browserslistrc",
"chars": 600,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "packages/ngx-guides/.editorconfig",
"chars": 274,
"preview": "# Editor configuration, see https://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size ="
},
{
"path": "packages/ngx-guides/.gitignore",
"chars": 548,
"preview": "# See http://help.github.com/ignore-files/ for more about ignoring files.\n\n# Compiled output\n/dist\n/tmp\n/out-tsc\n/bazel-"
},
{
"path": "packages/ngx-guides/README.md",
"chars": 5052,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/ngx-guides/angular.json",
"chars": 4118,
"preview": "{\n \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",\n \"version\": 1,\n \"newProjectRoot\": \"projects\",\n \""
},
{
"path": "packages/ngx-guides/karma.conf.js",
"chars": 1435,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "packages/ngx-guides/package.json",
"chars": 1236,
"preview": "{\n \"name\": \"ngx-guides-project\",\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"ng\": \"ng\",\n \"start\": \"ng serve\",\n \"bui"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/.browserslistrc",
"chars": 600,
"preview": "# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.\n# For addit"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/CHANGELOG.md",
"chars": 6493,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/README.md",
"chars": 5052,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/karma.conf.js",
"chars": 1431,
"preview": "// Karma configuration file, see link for more information\n// https://karma-runner.github.io/1.0/config/configuration-fi"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/ng-package.json",
"chars": 219,
"preview": "{\n \"$schema\": \"../../node_modules/ng-packagr/ng-package.schema.json\",\n \"dest\": \"../../dist/ngx-guides\",\n \"lib\": {\n "
},
{
"path": "packages/ngx-guides/projects/ngx-guides/package.json",
"chars": 632,
"preview": "{\n \"name\": \"ngx-guides\",\n \"version\": \"0.28.2\",\n \"description\": \"An Angular Guides component that can draw ruler and m"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/consts.ts",
"chars": 1855,
"preview": "// auto\n// eslint-disable-next-line max-len\nexport const ANGULAR_GUIDES_INPUTS: [\"className\",\"rulerStyle\",\"snapThreshold"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.spec.ts",
"chars": 650,
"preview": "import { async, ComponentFixture, TestBed } from '@angular/core/testing';\n\nimport { NgxGuidesComponent } from './ngx-gui"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.component.ts",
"chars": 2108,
"preview": "import {\n Component, AfterViewInit, ViewChild,\n ElementRef, OnChanges, SimpleChanges,\n OnDestroy, EventEmitter\n} from"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.interface.ts",
"chars": 517,
"preview": "import VanillaGuides, { METHODS, GuidesInterface, GuidesOptions } from '@scena/guides';\nimport { withMethods, MethodInte"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.module.ts",
"chars": 242,
"preview": "import { NgModule } from '@angular/core';\nimport { NgxGuidesComponent } from './ngx-guides.component';\n\n\n\n@NgModule({\n "
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.service.spec.ts",
"chars": 349,
"preview": "import { TestBed } from '@angular/core/testing';\n\nimport { NgxGuidesService } from './ngx-guides.service';\n\ndescribe('Ng"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/ngx-guides.service.ts",
"chars": 138,
"preview": "import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class NgxGuidesService {\n\n co"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/lib/types.ts",
"chars": 191,
"preview": "import { EventEmitter } from '@angular/core';\nimport { GuidesEvents } from '@scena/guides';\n\nexport type NgxGuidesEvents"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/public-api.ts",
"chars": 171,
"preview": "/*\n * Public API Surface of ngx-guides\n */\n\nexport * from './lib/ngx-guides.service';\nexport * from './lib/ngx-guides.co"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/src/test.ts",
"chars": 763,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js';\nimp"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/tsconfig.lib.json",
"chars": 333,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/tsconfig.lib.prod.json",
"chars": 240,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.lib.json\",\n \"co"
},
{
"path": "packages/ngx-guides/projects/ngx-guides/tsconfig.spec.json",
"chars": 309,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"../../tsconfig.json\",\n \"co"
},
{
"path": "packages/ngx-guides/src/app/app.component.css",
"chars": 0,
"preview": ""
},
{
"path": "packages/ngx-guides/src/app/app.component.html",
"chars": 23332,
"preview": "<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->\n<!-- * * * * * * * * * * * The content below * * "
},
{
"path": "packages/ngx-guides/src/app/app.component.spec.ts",
"chars": 992,
"preview": "import { TestBed } from '@angular/core/testing';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent"
},
{
"path": "packages/ngx-guides/src/app/app.component.ts",
"chars": 222,
"preview": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n templateUrl: './app.component.html',\n"
},
{
"path": "packages/ngx-guides/src/app/app.module.ts",
"chars": 314,
"preview": "import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppCompon"
},
{
"path": "packages/ngx-guides/src/assets/.gitkeep",
"chars": 0,
"preview": ""
},
{
"path": "packages/ngx-guides/src/environments/environment.prod.ts",
"chars": 51,
"preview": "export const environment = {\n production: true\n};\n"
},
{
"path": "packages/ngx-guides/src/environments/environment.ts",
"chars": 658,
"preview": "// This file can be replaced during build by using the `fileReplacements` array.\n// `ng build` replaces `environment.ts`"
},
{
"path": "packages/ngx-guides/src/index.html",
"chars": 302,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <title>NgxGuidesProject</title>\n <base href=\"/\">\n <"
},
{
"path": "packages/ngx-guides/src/main.ts",
"chars": 372,
"preview": "import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynami"
},
{
"path": "packages/ngx-guides/src/polyfills.ts",
"chars": 2338,
"preview": "/**\n * This file includes polyfills needed by Angular and is loaded before the app.\n * You can add your own extra polyfi"
},
{
"path": "packages/ngx-guides/src/styles.css",
"chars": 80,
"preview": "/* You can add global styles to this file, and also import other style files */\n"
},
{
"path": "packages/ngx-guides/src/test.ts",
"chars": 745,
"preview": "// This file is required by karma.conf.js and loads recursively all the .spec and framework files\n\nimport 'zone.js/testi"
},
{
"path": "packages/ngx-guides/tsconfig.app.json",
"chars": 287,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compil"
},
{
"path": "packages/ngx-guides/tsconfig.json",
"chars": 979,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"compileOnSave\": false,\n \"compilerOpti"
},
{
"path": "packages/ngx-guides/tsconfig.spec.json",
"chars": 333,
"preview": "/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n \"extends\": \"./tsconfig.json\",\n \"compil"
},
{
"path": "packages/preact-guides/CHANGELOG.md",
"chars": 8978,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/preact-guides/LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "packages/preact-guides/README.md",
"chars": 5675,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/preact-guides/demo/index.html",
"chars": 739,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Preact App</title>\n <link rel=\"styl"
},
{
"path": "packages/preact-guides/package.json",
"chars": 2067,
"preview": "{\n \"name\": \"preact-guides\",\n \"version\": \"0.28.2\",\n \"description\": \"A Preact Guides component that can draw rule"
},
{
"path": "packages/preact-guides/rollup.config.demo.js",
"chars": 614,
"preview": "import builder from \"@daybrush/builder\";\nimport css from \"rollup-plugin-css-bundle\";\nconst preact = require(\"rollup-plug"
},
{
"path": "packages/preact-guides/rollup.config.js",
"chars": 1340,
"preview": "import builder from \"@daybrush/builder\";\nconst preact = require(\"rollup-plugin-preact\");\n\n\nconst defaultOptions = {\n "
},
{
"path": "packages/preact-guides/src/demo/App.css",
"chars": 1899,
"preview": "@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap\");\n@import url(\"https://fonts.go"
},
{
"path": "packages/preact-guides/src/demo/App.tsx",
"chars": 5059,
"preview": "import { Component, h } from \"preact\";\nimport Scene from \"scenejs\";\nimport \"./App.css\";\nimport Guides from \"../preact-gu"
},
{
"path": "packages/preact-guides/src/demo/index.tsx",
"chars": 113,
"preview": "import { render, h } from \"preact\";\nimport App from \"./App\";\n\nrender(<App />, document.getElementById(\"root\")!);\n"
},
{
"path": "packages/preact-guides/src/preact-guides/Guides.d.ts",
"chars": 354,
"preview": "import { GuidesInterface, GuidesProps, GuidesState } from \"@scena/react-guides/declaration/types\";\nimport Preact, { Comp"
},
{
"path": "packages/preact-guides/src/preact-guides/Guides.js",
"chars": 65,
"preview": "import Guides from \"@scena/react-guides\";\nexport default Guides;\n"
},
{
"path": "packages/preact-guides/src/preact-guides/index.esm.ts",
"chars": 92,
"preview": "import Guides from \"./Guides\";\n\nexport default Guides;\nexport * from \"@scena/react-guides\";\n"
},
{
"path": "packages/preact-guides/src/preact-guides/index.ts",
"chars": 110,
"preview": "import Guides from \"./Guides\";\n\nexport * from \"@scena/react-guides/declaration/types\";\nexport default Guides;\n"
},
{
"path": "packages/preact-guides/src/preact-guides/index.umd.ts",
"chars": 154,
"preview": "import Guides, * as others from \"./index.esm\";\n\nfor (const name in others) {\n (Guides as any)[name] = (others as any)"
},
{
"path": "packages/preact-guides/tsconfig.build.json",
"chars": 114,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"jsx\": \"react\",\n \"jsxFactory\": \"h\",\n },\n }\n"
},
{
"path": "packages/preact-guides/tsconfig.declaration.json",
"chars": 347,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"allowJs\": false,\n \"noEmit\": false,\n \"isol"
},
{
"path": "packages/preact-guides/tsconfig.json",
"chars": 662,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./outjs/\",\n \"esModuleInterop\": false,\n \"sourceMap\": true,\n \"module\": \"e"
},
{
"path": "packages/preact-guides/tslint.json",
"chars": 747,
"preview": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"typedef\": [true, \"parameter\"],\n\t\t"
},
{
"path": "packages/react-guides/CHANGELOG.md",
"chars": 12926,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/react-guides/LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "packages/react-guides/README.md",
"chars": 5487,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/react-guides/package.json",
"chars": 2304,
"preview": "{\n \"name\": \"@scena/react-guides\",\n \"version\": \"0.28.2\",\n \"description\": \"A React Guides component that can draw"
},
{
"path": "packages/react-guides/public/index.html",
"chars": 1682,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/"
},
{
"path": "packages/react-guides/public/manifest.json",
"chars": 306,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "packages/react-guides/rollup.config.js",
"chars": 741,
"preview": "import builder from \"@daybrush/builder\";\n\nconst defaultOptions = {\n tsconfig: \"tsconfig.build.json\",\n external: {\n"
},
{
"path": "packages/react-guides/src/demo/App.css",
"chars": 1899,
"preview": "@import url(\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap\");\n@import url(\"https://fonts.go"
},
{
"path": "packages/react-guides/src/demo/App.tsx",
"chars": 9567,
"preview": "import { Component } from \"react\";\nimport * as React from \"react\";\nimport Scene from \"scenejs\";\nimport \"./App.css\";\nimpo"
},
{
"path": "packages/react-guides/src/demo/InfiniteViewer.css",
"chars": 510,
"preview": "html,\nbody,\n.App,\n#root {\n padding: 0;\n margin: 0;\n position: relative;\n height: 100%;\n}\n.guides.horizontal {\n posi"
},
{
"path": "packages/react-guides/src/demo/InfiniteViewer.tsx",
"chars": 3246,
"preview": "import React, { useState } from \"react\";\nimport Guides from \"../react-guides\";\nimport InfiniteViewer from \"react-infinit"
},
{
"path": "packages/react-guides/src/demo/serviceWorker.ts",
"chars": 5209,
"preview": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the ap"
},
{
"path": "packages/react-guides/src/index.tsx",
"chars": 484,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n// import App from \"./demo/App\";\nimport App from \"./demo/In"
},
{
"path": "packages/react-guides/src/react-app-env.d.ts",
"chars": 40,
"preview": "/// <reference types=\"react-scripts\" />\n"
},
{
"path": "packages/react-guides/src/react-guides/Guides.tsx",
"chars": 20338,
"preview": "import * as React from \"react\";\nimport Ruler, { DrawRulerOptions, PROPERTIES as RULER_PROPERTIES, RulerProps } from \"@sc"
},
{
"path": "packages/react-guides/src/react-guides/consts.ts",
"chars": 3095,
"preview": "import { prefix } from \"./utils\";\nimport { prefixCSS } from \"framework-utils\";\nimport { GuidesOptions } from \"./types\";\n"
},
{
"path": "packages/react-guides/src/react-guides/index.esm.ts",
"chars": 111,
"preview": "import Guides from \"./Guides\";\n\nexport default Guides;\nexport { PROPERTIES, METHODS, EVENTS } from \"./consts\";\n"
},
{
"path": "packages/react-guides/src/react-guides/index.ts",
"chars": 112,
"preview": "import Guides from \"./index.esm\";\n\nexport default Guides;\nexport * from \"./types\";\nexport * from \"./index.esm\";\n"
},
{
"path": "packages/react-guides/src/react-guides/index.umd.ts",
"chars": 153,
"preview": "import Guides, * as others from \"./index.esm\";\n\nfor (const name in others) {\n (Guides as any)[name] = (others as any)"
},
{
"path": "packages/react-guides/src/react-guides/types.ts",
"chars": 4868,
"preview": "import { DrawRulerOptions, RulerProps } from \"@scena/react-ruler/declaration/types\";\nimport { IObject } from \"@daybrush/"
},
{
"path": "packages/react-guides/src/react-guides/utils.ts",
"chars": 156,
"preview": "import { prefixNames } from \"framework-utils\";\n\nexport function prefix(...classNames: string[]) {\n return prefixNames"
},
{
"path": "packages/react-guides/tsconfig.build.json",
"chars": 88,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"jsx\": \"react\"\n },\n }\n"
},
{
"path": "packages/react-guides/tsconfig.declaration.json",
"chars": 346,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"allowJs\": false,\n \"noEmit\": false,\n \"isol"
},
{
"path": "packages/react-guides/tsconfig.json",
"chars": 598,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./outjs/\",\n \"esModuleInterop\": false,\n \"sourceMap\": true,\n \"module\": \"e"
},
{
"path": "packages/react-guides/tslint.json",
"chars": 781,
"preview": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"typedef\": [true, \"parameter\"],\n\t\t"
},
{
"path": "packages/svelte-guides/.gitignore",
"chars": 39,
"preview": ".DS_Store\nnode_modules\npublic/bundle.*\n"
},
{
"path": "packages/svelte-guides/CHANGELOG.md",
"chars": 6739,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/svelte-guides/LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "packages/svelte-guides/README.md",
"chars": 5642,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/svelte-guides/package.json",
"chars": 1530,
"preview": "{\n \"name\": \"svelte-guides\",\n \"version\": \"0.28.2\",\n \"description\": \"A Svelte Guides component that can draw rule"
},
{
"path": "packages/svelte-guides/public/global.css",
"chars": 850,
"preview": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-s"
},
{
"path": "packages/svelte-guides/public/index.html",
"chars": 355,
"preview": "<!doctype html>\n<html>\n<head>\n\t<meta charset='utf-8'>\n\t<meta name='viewport' content='width=device-width'>\n\n\t<title>Svel"
},
{
"path": "packages/svelte-guides/rollup.build.config.js",
"chars": 616,
"preview": "import buildHelper from \"@daybrush/builder\";\nimport svelte from 'rollup-plugin-svelte';\nimport { preprocess } from \"@pyo"
},
{
"path": "packages/svelte-guides/rollup.config.js",
"chars": 1634,
"preview": "import svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollu"
},
{
"path": "packages/svelte-guides/rollup_start_dev.js",
"chars": 296,
"preview": "import * as child_process from 'child_process';\n\nlet running_dev_server = false;\n\nexport default {\n\twriteBundle() {\n\t\tif"
},
{
"path": "packages/svelte-guides/src/App.svelte",
"chars": 6054,
"preview": "<script lang=\"ts\">\n import Guides from \"./index\";\n import { onMount } from \"svelte\";\n import Gesto from \"gesto\";\n\n l"
},
{
"path": "packages/svelte-guides/src/Guides.svelte",
"chars": 1348,
"preview": "<script>\n import VanillaGuides, {\n PROPERTIES,\n EVENTS\n } from \"@scena/guides\";\n\n import {\n onMount,\n onD"
},
{
"path": "packages/svelte-guides/src/index.d.ts",
"chars": 478,
"preview": "/// <reference types=\"svelte\" />\nimport { SvelteComponentTyped } from \"svelte\";\nimport { GuidesInterface, GuidesOptions,"
},
{
"path": "packages/svelte-guides/src/index.js",
"chars": 555,
"preview": "import Guides from \"./Guides.svelte\";\nimport { METHODS } from \"@scena/guides\";\n\nexport default /*#__PURE__*/ (() => {\n "
},
{
"path": "packages/svelte-guides/src/main.js",
"chars": 132,
"preview": "import App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: {\n\t\tname: 'world'\n\t}\n});\n\nexport "
},
{
"path": "packages/svelte-guides/svelte.config.js",
"chars": 114,
"preview": "const sveltePreprocess = require('svelte-preprocess');\n\nmodule.exports = {\n preprocess: sveltePreprocess(),\n};\n"
},
{
"path": "packages/svelte-guides/tsconfig.json",
"chars": 5618,
"preview": "{\n \"include\": [\"src/**/*\"],\n \"exclude\": [\"node_modules/*\"],\n \"compilerOptions\": {\n /* Basic Options */\n "
},
{
"path": "packages/vue-guides/.browserslistrc",
"chars": 21,
"preview": "> 1%\nlast 2 versions\n"
},
{
"path": "packages/vue-guides/.eslintrc.js",
"chars": 389,
"preview": "module.exports = {\n root: true,\n env: {\n node: true\n },\n 'extends': [\n 'plugin:vue/essential',\n 'eslint:rec"
},
{
"path": "packages/vue-guides/.gitignore",
"chars": 208,
"preview": ".DS_Store\nnode_modules\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error"
},
{
"path": "packages/vue-guides/CHANGELOG.md",
"chars": 6330,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/vue-guides/LICENSE",
"chars": 1064,
"preview": "MIT License\n\nCopyright (c) 2019 Daybrush\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "packages/vue-guides/README.md",
"chars": 6031,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/vue-guides/package.json",
"chars": 1857,
"preview": "{\n \"name\": \"vue-guides\",\n \"version\": \"0.28.2\",\n \"description\": \"A Vue Guides component that can draw grids and "
},
{
"path": "packages/vue-guides/postcss.config.js",
"chars": 59,
"preview": "module.exports = {\n plugins: {\n autoprefixer: {}\n }\n}\n"
},
{
"path": "packages/vue-guides/public/index.html",
"chars": 557,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "packages/vue-guides/rollup.config.js",
"chars": 514,
"preview": "\nimport builder from \"@daybrush/builder\";\nimport vuePlugin from \"rollup-plugin-vue\";\n\nexport default builder([\n {\n "
},
{
"path": "packages/vue-guides/src/App.vue",
"chars": 6828,
"preview": "<template>\n <div class=\"page\">\n <div class=\"box\" @click=\"onRestore\" ref=\"box\" />\n <div class=\"ruler horizontal\">\n"
},
{
"path": "packages/vue-guides/src/App2.vue",
"chars": 462,
"preview": "<template>\n <div id=\"app\">\n <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n </div>\n</template>\n\n<script lang=\"ts\">\nim"
},
{
"path": "packages/vue-guides/src/components/Guides.vue",
"chars": 1723,
"preview": "<template>\n <div ref=\"container\"></div>\n</template>\n<script lang=\"ts\">\nimport VanillaGuides, {\n PROPERTIES,\n METHODS,"
},
{
"path": "packages/vue-guides/src/components/Guides.vue.d.ts",
"chars": 156,
"preview": "import { VueGuidesInterface } from \"./types\";\n\ndeclare const VueGuides: VueGuidesInterface;\ntype VueGuides = VueGuidesIn"
},
{
"path": "packages/vue-guides/src/components/index.ts",
"chars": 59,
"preview": "import Guides from \"./Guides.vue\";\n\nexport default Guides;\n"
},
{
"path": "packages/vue-guides/src/components/types.ts",
"chars": 437,
"preview": "import { MethodInterface } from \"framework-utils\";\nimport VanillaGuides, { GuideOptions, GuidesInterface } from \"@scena/"
},
{
"path": "packages/vue-guides/src/main.ts",
"chars": 136,
"preview": "import Vue from 'vue'\nimport App from './App.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n render: h => h(App),\n})"
},
{
"path": "packages/vue-guides/src/shims-tsx.d.ts",
"chars": 304,
"preview": "import Vue, { VNode } from 'vue'\n\ndeclare global {\n namespace JSX {\n // tslint:disable no-empty-interface\n interf"
},
{
"path": "packages/vue-guides/src/shims-vue.d.ts",
"chars": 72,
"preview": "declare module '*.vue' {\n import Vue from 'vue'\n export default Vue\n}\n"
},
{
"path": "packages/vue-guides/tsconfig.declaration.json",
"chars": 232,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"removeComments\": false,\n \"declaration\": true,\n \"emitDecla"
},
{
"path": "packages/vue-guides/tsconfig.json",
"chars": 680,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"esnext\",\n \"strict\": true,\n \"jsx\": \"preserve\",\n \"im"
},
{
"path": "packages/vue3-guides/.browserslistrc",
"chars": 21,
"preview": "> 1%\nlast 2 versions\n"
},
{
"path": "packages/vue3-guides/.gitignore",
"chars": 214,
"preview": ".DS_Store\nnode_modules\n/dist\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn"
},
{
"path": "packages/vue3-guides/CHANGELOG.md",
"chars": 6185,
"preview": "# Change Log\n\nAll notable changes to this project will be documented in this file.\nSee [Conventional Commits](https://co"
},
{
"path": "packages/vue3-guides/README.md",
"chars": 6257,
"preview": "\n\n<p align=\"middle\" ><img src=\"https://raw.githubusercontent.com/daybrush/guides/master/demo/images/guides.png\"/></p>\n<h"
},
{
"path": "packages/vue3-guides/demo/App.vue",
"chars": 6847,
"preview": "<template>\n <div class=\"page\">\n <div class=\"box\" @click=\"onRestore\" ref=\"box\" />\n <div class=\"ruler horizontal\">\n"
},
{
"path": "packages/vue3-guides/demo/App2.vue",
"chars": 462,
"preview": "<template>\n <div id=\"app\">\n <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n </div>\n</template>\n\n<script lang=\"ts\">\nim"
},
{
"path": "packages/vue3-guides/demo/index.ts",
"chars": 92,
"preview": "import { createApp } from 'vue';\nimport App from './App.vue';\n\ncreateApp(App).mount('#app')\n"
},
{
"path": "packages/vue3-guides/demo/shims-vue.d.ts",
"chars": 176,
"preview": "/* eslint-disable */\ndeclare module '*.vue' {\n import type { DefineComponent } from 'vue'\n const component: Define"
},
{
"path": "packages/vue3-guides/package.json",
"chars": 1650,
"preview": "{\n \"name\": \"vue3-guides\",\n \"version\": \"0.12.2\",\n \"description\": \"A Vue 3 Guides component that can draw grids a"
},
{
"path": "packages/vue3-guides/postcss.config.js",
"chars": 59,
"preview": "module.exports = {\n plugins: {\n autoprefixer: {}\n }\n}\n"
},
{
"path": "packages/vue3-guides/public/index.html",
"chars": 559,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE="
},
{
"path": "packages/vue3-guides/rollup.config.js",
"chars": 593,
"preview": "const buildHelper = require(\"@daybrush/builder\");\nconst vuePlugin = require(\"rollup-plugin-vue\");\n\nconst defaultOptions "
},
{
"path": "packages/vue3-guides/src/Guides.vue",
"chars": 1723,
"preview": "<template>\n <div ref=\"container\"></div>\n</template>\n<script lang=\"ts\">\nimport VanillaGuides, {\n PROPERTIES,\n METHODS,"
},
{
"path": "packages/vue3-guides/src/Guides.vue.d.ts",
"chars": 156,
"preview": "import { VueGuidesInterface } from \"./types\";\n\ndeclare const VueGuides: VueGuidesInterface;\ntype VueGuides = VueGuidesIn"
},
{
"path": "packages/vue3-guides/src/index.ts",
"chars": 84,
"preview": "import Guides from \"./Guides.vue\";\n\nexport * from \"./types\";\nexport default Guides;\n"
},
{
"path": "packages/vue3-guides/src/types.ts",
"chars": 437,
"preview": "import { MethodInterface } from \"framework-utils\";\nimport VanillaGuides, { GuideOptions, GuidesInterface } from \"@scena/"
},
{
"path": "packages/vue3-guides/tsconfig.declaration.json",
"chars": 259,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"removeComments\": false,\n \"declaration\": true,\n \"emitDecla"
},
{
"path": "packages/vue3-guides/tsconfig.json",
"chars": 680,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"module\": \"esnext\",\n \"strict\": true,\n \"jsx\": \"preserve\",\n \"im"
},
{
"path": "rollup.config.js",
"chars": 1345,
"preview": "\nimport builder from \"@daybrush/builder\";\nimport compat from \"rollup-plugin-react-compat\";\n\n\nconst reactCompat = compat("
},
{
"path": "static/scripts/custom.js",
"chars": 353,
"preview": "(function () {\n window.dataLayer = window.dataLayer || [];\n function gtag() { dataLayer.push(arguments); }\n gta"
},
{
"path": "tsconfig.declaration.json",
"chars": 181,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"removeComments\": false,\n \"declaration\": true,\n \"emitDecla"
},
{
"path": "tsconfig.json",
"chars": 357,
"preview": "{\n \"compilerOptions\": {\n \"outDir\": \"./outjs/\",\n \"esModuleInterop\": false,\n \"sourceMap\": true,\n \"module\": \"e"
},
{
"path": "tsconfig.test.json",
"chars": 228,
"preview": "{\n \"extends\": \"./tsconfig\",\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"noImplicitAny\": false,\n \"types\": ["
},
{
"path": "tslint.json",
"chars": 757,
"preview": "{\n\t\"defaultSeverity\": \"error\",\n\t\"extends\": [\n\t\t\"tslint:recommended\"\n\t],\n\t\"rules\": {\n\t\t\"jsdoc-format\": false,\n\t\t\"forin\": "
}
]
About this extraction
This page contains the full source code of the daybrush/guides GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 193 files (348.4 KB), approximately 113.6k tokens, and a symbol index with 106 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.