├── demo ├── index.js ├── images │ ├── ruler.png │ └── ruler1920x1080.png ├── index.css └── index.html ├── packages ├── croact-ruler │ ├── README.md │ ├── src │ │ ├── index.ts │ │ └── index.umd.ts │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ ├── tslint.json │ ├── rollup.config.js │ ├── LICENSE │ └── package.json ├── ngx-ruler │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── app.component.spec.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── styles.css │ │ ├── index.html │ │ ├── main.ts │ │ ├── test.ts │ │ └── polyfills.ts │ ├── projects │ │ └── ngx-ruler │ │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── ngx-ruler.service.ts │ │ │ │ ├── ngx-ruler.module.ts │ │ │ │ ├── ngx-ruler.service.spec.ts │ │ │ │ ├── ngx-ruler.interface.ts │ │ │ │ ├── ngx-ruler.component.spec.ts │ │ │ │ ├── consts.ts │ │ │ │ └── ngx-ruler.component.ts │ │ │ ├── public-api.ts │ │ │ └── test.ts │ │ │ ├── ng-package.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ ├── tsconfig.spec.json │ │ │ ├── tsconfig.lib.json │ │ │ ├── .browserslistrc │ │ │ ├── package.json │ │ │ ├── README.md │ │ │ ├── karma.conf.js │ │ │ └── CHANGELOG.md │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .browserslistrc │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ ├── karma.conf.js │ └── angular.json ├── vue-ruler │ ├── .browserslistrc │ ├── src │ │ ├── components │ │ │ ├── index.ts │ │ │ ├── Ruler.vue.d.ts │ │ │ └── Ruler.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── shims-vue.d.ts │ │ ├── main.ts │ │ ├── App.vue │ │ ├── shims-tsx.d.ts │ │ └── App2.vue │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── .gitignore │ ├── tsconfig.declaration.json │ ├── .eslintrc.js │ ├── rollup.config.js │ ├── tsconfig.json │ ├── LICENSE │ ├── package.json │ ├── README.md │ └── CHANGELOG.md ├── react-ruler │ ├── .env │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── react-ruler │ │ │ ├── index.esm.ts │ │ │ ├── index.ts │ │ │ ├── index.umd.ts │ │ │ ├── consts.ts │ │ │ └── types.ts │ │ ├── index.tsx │ │ └── demo │ │ │ ├── App.css │ │ │ └── serviceWorker.ts │ ├── tsconfig.build.json │ ├── public │ │ ├── manifest.json │ │ └── index.html │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ ├── rollup.config.js │ ├── tslint.json │ ├── LICENSE │ ├── package.json │ └── README.md ├── svelte-ruler │ ├── .gitignore │ ├── public │ │ ├── favicon.png │ │ ├── index.html │ │ └── global.css │ ├── svelte.config.js │ ├── src │ │ ├── main.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── Ruler.svelte │ │ └── App.svelte │ ├── rollup_start_dev.js │ ├── rollup.build.config.js │ ├── LICENSE │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ ├── tsconfig.json │ └── CHANGELOG.md ├── preact-ruler │ ├── src │ │ ├── preact-ruler │ │ │ ├── Ruler.js │ │ │ ├── index.esm.ts │ │ │ ├── index.ts │ │ │ ├── index.umd.ts │ │ │ └── Ruler.d.ts │ │ └── demo │ │ │ ├── index.tsx │ │ │ ├── App.css │ │ │ └── App.tsx │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ ├── rollup.config.demo.js │ ├── tsconfig.json │ ├── demo │ │ ├── index.html │ │ ├── dist │ │ │ └── index.css │ │ └── logo.svg │ ├── tslint.json │ ├── LICENSE │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── CHANGELOG.md └── ruler │ ├── src │ ├── index.esm.ts │ ├── index.umd.ts │ ├── index.ts │ ├── types.ts │ ├── consts.ts │ ├── InnerRuler.tsx │ └── Ruler.tsx │ ├── tsconfig.declaration.json │ ├── .npmignore │ ├── tests │ └── manual │ │ └── portal.html │ ├── tsconfig.json │ ├── rollup.config.js │ ├── package.json │ ├── README.md │ └── CHANGELOG.md ├── .yarnrc ├── .github └── ISSUE_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .editorconfig ├── static └── scripts │ └── custom.js ├── config └── update-type-consts.js ├── rollup.config.demo.js ├── lerna.json ├── tslint.json ├── LICENSE ├── jsdoc.json ├── package.json └── README.md /demo/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/croact-ruler/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | workspaces-experimental true 2 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/vue-ruler/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /packages/react-ruler/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | PUBLIC_URL=/ 3 | -------------------------------------------------------------------------------- /packages/svelte-ruler/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | public/bundle.* 4 | -------------------------------------------------------------------------------- /packages/react-ruler/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /demo/images/ruler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/demo/images/ruler.png -------------------------------------------------------------------------------- /packages/vue-ruler/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler.vue"; 2 | export default Ruler; 3 | -------------------------------------------------------------------------------- /demo/images/ruler1920x1080.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/demo/images/ruler1920x1080.png -------------------------------------------------------------------------------- /packages/ngx-ruler/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/packages/ngx-ruler/src/favicon.ico -------------------------------------------------------------------------------- /packages/ngx-ruler/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/preact-ruler/Ruler.js: -------------------------------------------------------------------------------- 1 | import Ruler from "@scena/react-ruler"; 2 | export default Ruler; 3 | -------------------------------------------------------------------------------- /packages/vue-ruler/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/ruler/src/index.esm.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler"; 2 | 3 | export * from "./consts"; 4 | export default Ruler; 5 | -------------------------------------------------------------------------------- /packages/vue-ruler/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/packages/vue-ruler/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue-ruler/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/packages/vue-ruler/src/assets/logo.png -------------------------------------------------------------------------------- /packages/vue-ruler/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /packages/svelte-ruler/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/ruler/HEAD/packages/svelte-ruler/public/favicon.png -------------------------------------------------------------------------------- /packages/ngx-ruler/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /packages/react-ruler/src/react-ruler/index.esm.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler"; 2 | 3 | export default Ruler; 4 | export * from "./consts"; 5 | -------------------------------------------------------------------------------- /packages/croact-ruler/src/index.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "@scena/react-ruler"; 2 | export default Ruler; 3 | export * from "@scena/react-ruler"; 4 | -------------------------------------------------------------------------------- /packages/react-ruler/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/preact-ruler/index.esm.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler"; 2 | 3 | export default Ruler; 4 | export * from "@scena/react-ruler"; 5 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import { render, h } from "preact"; 2 | import App from "./App"; 3 | 4 | render(, document.getElementById("root")!); 5 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/preact-ruler/index.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler"; 2 | 3 | export * from "@scena/react-ruler/declaration/types"; 4 | export default Ruler; 5 | -------------------------------------------------------------------------------- /packages/svelte-ruler/svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | 3 | module.exports = { 4 | preprocess: sveltePreprocess(), 5 | }; 6 | -------------------------------------------------------------------------------- /packages/react-ruler/src/react-ruler/index.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./index.esm"; 2 | 3 | export * from "./types"; 4 | export * from "./index.esm"; 5 | export default Ruler; 6 | -------------------------------------------------------------------------------- /packages/preact-ruler/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "jsxFactory": "h", 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /packages/ruler/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Ruler, * as others from "./index.esm"; 2 | 3 | for (const name in others) { 4 | (Ruler as any)[name] = others[name]; 5 | } 6 | 7 | export default Ruler; 8 | -------------------------------------------------------------------------------- /packages/ruler/src/index.ts: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler"; 2 | 3 | export * from "./types"; 4 | export * from "@scena/react-ruler/declaration/types"; 5 | export * from "./consts"; 6 | export default Ruler; 7 | -------------------------------------------------------------------------------- /packages/ruler/src/types.ts: -------------------------------------------------------------------------------- 1 | import { RulerProps } from "@scena/react-ruler/declaration/types"; 2 | 3 | export interface InnerRulerProps extends RulerProps { 4 | parentElement?: HTMLElement; 5 | } 6 | -------------------------------------------------------------------------------- /packages/croact-ruler/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Ruler, * as others from "./index"; 2 | 3 | for (const name in others) { 4 | (Ruler as any)[name] = (others as any)[name]; 5 | } 6 | 7 | export default Ruler; 8 | -------------------------------------------------------------------------------- /packages/svelte-ruler/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | name: 'world' 7 | } 8 | }); 9 | 10 | export default app; -------------------------------------------------------------------------------- /packages/react-ruler/src/react-ruler/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Ruler, * as others from "./index.esm"; 2 | 3 | for (const name in others) { 4 | (Ruler as any)[name] = (others as any)[name]; 5 | } 6 | export default Ruler; 7 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/preact-ruler/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Ruler, * as others from "./index.esm"; 2 | 3 | for (const name in others) { 4 | (Ruler as any)[name] = (others as any)[name]; 5 | } 6 | 7 | export default Ruler; 8 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Environments 2 | * Framework name: 3 | * Framework version: 4 | * Component name: 5 | * Component version: 6 | * Testable Address(optional): 7 | 8 | ## Description 9 | 10 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class NgxRulerService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-ruler 3 | */ 4 | 5 | export * from './lib/ngx-ruler.service'; 6 | export * from './lib/ngx-ruler.component'; 7 | export * from './lib/ngx-ruler.module'; 8 | -------------------------------------------------------------------------------- /packages/ruler/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/croact-ruler/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ngx-ruler-project'; 10 | } 11 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-ruler", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "@scena/ruler" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | dist/ 6 | demo/dist/ 7 | packages/*/dist/ 8 | release/ 9 | npm-debug.log* 10 | coverage/ 11 | jsdoc/ 12 | doc/ 13 | outjs/ 14 | declaration/ 15 | build/ 16 | .vscode/ 17 | rollup-plugin-visualizer/ 18 | statistics/ 19 | .scene_cache 20 | *.mp4 21 | -------------------------------------------------------------------------------- /packages/vue-ruler/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw? 21 | -------------------------------------------------------------------------------- /packages/vue-ruler/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": false, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | }, 9 | "include": [ 10 | "src/components/**/*.ts", 11 | ], 12 | } 13 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 16 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | template/ 6 | example/ 7 | karma.conf.js 8 | test/ 9 | mocha.opts 10 | Gruntfile.js 11 | webpack.*.js 12 | .travis.yml 13 | packages 14 | release/ 15 | demo/ 16 | coverage/ 17 | dist/report.html 18 | rollup-plugin-visualizer/ 19 | outjs/ 20 | .scene_cache 21 | *.mp3 22 | *.mp4 -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { NgxRulerComponent } from './ngx-ruler.component'; 3 | 4 | 5 | 6 | @NgModule({ 7 | declarations: [NgxRulerComponent], 8 | imports: [ 9 | ], 10 | exports: [NgxRulerComponent] 11 | }) 12 | export class NgxRulerModule { } 13 | -------------------------------------------------------------------------------- /packages/ruler/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | template/ 6 | example/ 7 | karma.conf.js 8 | test/ 9 | mocha.opts 10 | Gruntfile.js 11 | webpack.*.js 12 | .travis.yml 13 | packages 14 | release/ 15 | demo/ 16 | coverage/ 17 | dist/report.html 18 | rollup-plugin-visualizer/ 19 | outjs/ 20 | .scene_cache 21 | *.mp3 22 | *.mp4 -------------------------------------------------------------------------------- /packages/ngx-ruler/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/preact-ruler/Ruler.d.ts: -------------------------------------------------------------------------------- 1 | import { RulerInterface, RulerProps } from "@scena/react-ruler/declaration/types"; 2 | import Preact, { Component } from "preact"; 3 | 4 | export default class PreactRuler extends Component { 5 | public render(): any; 6 | } 7 | export default interface PreactRuler extends Component, RulerInterface {} 8 | -------------------------------------------------------------------------------- /packages/ruler/src/consts.ts: -------------------------------------------------------------------------------- 1 | import { RulerProps, RulerInterface } from "@scena/react-ruler/declaration/types"; 2 | import { 3 | PROPERTIES as RULER_PROPERTIES, 4 | METHODS as RULER_METHODS, 5 | } from "@scena/react-ruler"; 6 | 7 | export const PROPERTIES: Array = RULER_PROPERTIES; 8 | export const METHODS: Array = RULER_METHODS; 9 | -------------------------------------------------------------------------------- /packages/svelte-ruler/rollup_start_dev.js: -------------------------------------------------------------------------------- 1 | import * as child_process from 'child_process'; 2 | 3 | let running_dev_server = false; 4 | 5 | export default { 6 | writeBundle() { 7 | if (!running_dev_server) { 8 | running_dev_server = true; 9 | child_process.spawn('npm', ['run', 'start:dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true }); 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxRulerProject 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/ngx-ruler/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | indent_style = space 8 | indent_size = 4 9 | insert_final_newline = true 10 | max_line_length = 80 11 | trim_trailing_whitespace = true 12 | 13 | [{package.json,.travis.yml}] 14 | indent_style = space 15 | indent_size = 4 16 | 17 | [*.svelte] 18 | indent_style = space 19 | indent_size = 2 20 | -------------------------------------------------------------------------------- /packages/react-ruler/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /packages/ruler/tests/manual/portal.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /packages/svelte-ruler/src/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from "svelte"; 3 | import { RulerInterface, RulerProps } from "@scena/ruler"; 4 | 5 | export default class RulerComponent extends SvelteComponentTyped< 6 | RulerProps, 7 | {} 8 | > { } 9 | 10 | export default interface RulerComponent extends RulerInterface { 11 | } 12 | export * from "@scena/ruler"; 13 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/components/Ruler.vue.d.ts: -------------------------------------------------------------------------------- 1 | import VanillaRuler, { RulerProps, RulerInterface } from "@scena/ruler"; 2 | 3 | interface VueRulerInterface 4 | extends RulerProps, RulerInterface { 5 | $el: HTMLElement; 6 | $_ruler: VanillaRuler; 7 | $props: RulerProps; 8 | } 9 | 10 | declare const VueRuler: VueRulerInterface; 11 | type VueRuler = VueRulerInterface; 12 | 13 | export default VueRuler; 14 | -------------------------------------------------------------------------------- /static/scripts/custom.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | window.dataLayer = window.dataLayer || []; 3 | function gtag() { dataLayer.push(arguments); } 4 | gtag('js', new Date()); 5 | 6 | gtag('config', 'G-TRBNXHQ0ZF'); 7 | var script = document.createElement("script"); 8 | 9 | script.src = "https://www.googletagmanager.com/gtag/js?id=G-TRBNXHQ0ZF"; 10 | 11 | document.body.appendChild(script); 12 | })(); 13 | -------------------------------------------------------------------------------- /config/update-type-consts.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { convertProperties } = require("@daybrush/release/angular"); 3 | const { PROPERTIES } = require("../packages/react-ruler/dist/ruler.cjs.js"); 4 | 5 | convertProperties( 6 | { 7 | ANGULAR_RULER_INPUTS: PROPERTIES, 8 | }, 9 | [ 10 | path.resolve(__dirname, "../packages/ngx-ruler/projects/ngx-ruler/src/public-api.ts"), 11 | ], 12 | ); 13 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/croact-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "es2015", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "lib": [ 12 | "es2015", 13 | "dom" 14 | ], 15 | }, 16 | "include": [ 17 | "./src/**/*.ts" 18 | ] 19 | } -------------------------------------------------------------------------------- /packages/ngx-ruler/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /packages/ngx-ruler/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [] 10 | }, 11 | "exclude": [ 12 | "src/test.ts", 13 | "**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-ruler/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": false, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/react-ruler/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/preact-ruler/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": false, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/preact-ruler/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxRulerService } from './ngx-ruler.service'; 4 | 5 | describe('NgxRulerService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: NgxRulerService = TestBed.get(NgxRulerService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "es2015", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "jsx": "react", 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | }, 17 | "include": [ 18 | "./src/**/*.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/svelte-ruler/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.interface.ts: -------------------------------------------------------------------------------- 1 | import VanillaRuler, { METHODS, RulerInterface } from '@scena/ruler'; 2 | import { withMethods } from 'framework-utils'; 3 | import { RulerProps } from '@scena/ruler'; 4 | 5 | export class NgxRulerInterface { 6 | @withMethods(METHODS as any) 7 | protected ruler!: VanillaRuler; 8 | } 9 | // tslint:disable-next-line: no-empty-interface 10 | export interface NgxRulerInterface extends RulerInterface, Required {} 11 | -------------------------------------------------------------------------------- /packages/vue-ruler/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended', 9 | '@vue/typescript' 10 | ], 11 | rules: { 12 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 14 | }, 15 | parserOptions: { 16 | parser: '@typescript-eslint/parser' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-ruler/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./demo/App"; 4 | // import * as serviceWorker from "./demo/serviceWorker"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | 8 | // If you want your app to work offline and load faster, you can change 9 | // unregister() to register() below. Note this comes with some pitfalls. 10 | // Learn more about service workers: https://bit.ly/CRA-PWA 11 | // serviceWorker.unregister(); 12 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgxRulerModule } from '../../projects/ngx-ruler/src/public-api'; 4 | 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | NgxRulerModule, 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/App2.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /rollup.config.demo.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | import cssbundle from "rollup-plugin-css-bundle"; 3 | import compat from "rollup-plugin-react-compat"; 4 | 5 | const resolveReactCompat = compat({ 6 | useCroact: true, 7 | resolveCompat: true, 8 | }); 9 | 10 | 11 | export default builder([ 12 | { 13 | input: "demo/src/index.ts", 14 | output: "./demo/dist/index.js", 15 | format: "iife", 16 | exports: "named", 17 | plugins: [cssbundle({output: "./demo/dist/index.css"}), resolveReactCompat], 18 | resolve: true, 19 | // uglify: true, 20 | }, 21 | ]); 22 | -------------------------------------------------------------------------------- /packages/vue-ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | import builder from "@daybrush/builder"; 3 | import vuePlugin from "rollup-plugin-vue"; 4 | 5 | export default builder([ 6 | { 7 | input: "src/components/index.ts", 8 | output: "./dist/ruler.esm.js", 9 | exports: "named", 10 | format: "es", 11 | plugins: [ 12 | vuePlugin(), 13 | ], 14 | }, 15 | { 16 | input: "src/components/index.ts", 17 | output: "./dist/ruler.cjs.js", 18 | exports: "default", 19 | format: "cjs", 20 | plugins: [ 21 | vuePlugin(), 22 | ], 23 | }, 24 | ]); 25 | -------------------------------------------------------------------------------- /packages/vue-ruler/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-ruler 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/ruler/src/InnerRuler.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { createPortal } from "react-dom"; 3 | import { ref } from "framework-utils"; 4 | import ReactRuler from "@scena/react-ruler"; 5 | import { InnerRulerProps } from "./types"; 6 | 7 | export default class InnerRuler extends React.Component { 8 | public state: InnerRulerProps = {}; 9 | public ruler: ReactRuler; 10 | constructor(props: InnerRulerProps) { 11 | super(props); 12 | this.state = this.props; 13 | } 14 | public render() { 15 | return ; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/svelte-ruler/src/index.js: -------------------------------------------------------------------------------- 1 | import Ruler from "./Ruler.svelte"; 2 | import { METHODS } from "@scena/ruler"; 3 | 4 | export default /*#__PURE__*/ (() => { 5 | const prototype = Ruler.prototype; 6 | 7 | if (!prototype) { 8 | return Ruler; 9 | } 10 | METHODS.forEach(name => { 11 | prototype[name] = function (...args) { 12 | const self = this.getInstance(); 13 | const result = self[name](...args); 14 | 15 | if (result === self) { 16 | return this; 17 | } else { 18 | return result; 19 | } 20 | }; 21 | }); 22 | return Ruler; 23 | })(); 24 | -------------------------------------------------------------------------------- /packages/ngx-ruler/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /packages/ngx-ruler/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /packages/preact-ruler/rollup.config.demo.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | import css from "rollup-plugin-css-bundle"; 3 | const preact = require("rollup-plugin-preact"); 4 | 5 | 6 | 7 | 8 | export default builder({ 9 | input: "./src/demo/index.tsx", 10 | tsconfig: "./tsconfig.build.json", 11 | sourcemap: false, 12 | format: "umd", 13 | output: "./demo/dist/index.js", 14 | name: "app", 15 | exports: "named", 16 | plugins: [ 17 | css({ output: "./demo/dist/index.css" }), 18 | preact({ 19 | noPropTypes: true, 20 | noEnv: true, 21 | noReactIs: true, 22 | resolvePreactCompat: true, 23 | // usePreactX: true, 24 | }), 25 | ], 26 | }); 27 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-ruler", 3 | "version": "0.19.0", 4 | "description": "An Angular Ruler component that can draw grids and scroll infinitely.", 5 | "keywords": [ 6 | "scene", 7 | "scenejs", 8 | "scene.js", 9 | "scena", 10 | "ruler", 11 | "scroller", 12 | "angular" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/daybrush/ruler.git" 17 | }, 18 | "author": "Daybrush", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/daybrush/ruler/issues" 22 | }, 23 | "homepage": "https://github.com/daybrush/ruler#readme", 24 | "dependencies": { 25 | "@scena/ruler": "~0.20.0", 26 | "tslib": "^2.3.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "jsx": "preserve", 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | "allowJs": true, 17 | "allowSyntheticDefaultImports": true, 18 | "strict": true, 19 | "strictNullChecks": true, 20 | "forceConsistentCasingInFileNames": true, 21 | "resolveJsonModule": true, 22 | "isolatedModules": true, 23 | "noEmit": true 24 | }, 25 | "include": [ 26 | "./src/**/*.ts", 27 | "./src/**/*.tsx" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/svelte-ruler/rollup.build.config.js: -------------------------------------------------------------------------------- 1 | import buildHelper from "@daybrush/builder"; 2 | import svelte from 'rollup-plugin-svelte'; 3 | import { preprocess } from "@pyoner/svelte-ts-preprocess"; 4 | 5 | const defaultOptions = { 6 | tsconfig: "", 7 | input: './src/index.js', 8 | commonjs: true, 9 | external: { 10 | "svelte": "svelte", 11 | }, 12 | plugins: [ 13 | svelte({ 14 | preprocess: preprocess(), 15 | }), 16 | ], 17 | } 18 | export default buildHelper([ 19 | { 20 | ...defaultOptions, 21 | output: "dist/ruler.cjs.js", 22 | format: "cjs", 23 | }, 24 | { 25 | ...defaultOptions, 26 | output: "dist/ruler.esm.js", 27 | format: "es", 28 | }, 29 | ]); 30 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone'; 4 | import 'zone.js/dist/zone-testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { 7 | BrowserDynamicTestingModule, 8 | platformBrowserDynamicTesting 9 | } from '@angular/platform-browser-dynamic/testing'; 10 | 11 | declare const require: any; 12 | 13 | // First, initialize the Angular testing environment. 14 | getTestBed().initTestEnvironment( 15 | BrowserDynamicTestingModule, 16 | platformBrowserDynamicTesting() 17 | ); 18 | // Then we find all the tests. 19 | const context = require.context('./', true, /\.spec\.ts$/); 20 | // And load the modules. 21 | context.keys().map(context); 22 | -------------------------------------------------------------------------------- /packages/preact-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "experimentalDecorators": true, 9 | "skipLibCheck": true, 10 | "moduleResolution": "node", 11 | "jsx": "preserve", 12 | "lib": [ 13 | "es2015", 14 | "dom" 15 | ], 16 | "allowJs": true, 17 | "allowSyntheticDefaultImports": true, 18 | "strict": true, 19 | "strictNullChecks": true, 20 | "forceConsistentCasingInFileNames": true, 21 | "resolveJsonModule": true, 22 | "isolatedModules": true, 23 | "noEmit": true 24 | }, 25 | "include": [ 26 | "./src/**/*.ts", "src/preact-ruler/Ruler.js", "src/preact-ruler/Ruler.d.ts" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NgxRulerComponent } from './ngx-ruler.component'; 4 | 5 | describe('NgxRulerComponent', () => { 6 | let component: NgxRulerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NgxRulerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NgxRulerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /packages/preact-ruler/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Preact App 6 | 7 | 8 | 9 | 10 |
11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | (id: string): T; 13 | keys(): string[]; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /packages/vue-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/react-ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | 3 | const defaultOptions = { 4 | tsconfig: "tsconfig.build.json", 5 | external: { 6 | "@daybrush/utils": "utils", 7 | "@daybrush/drag": "utils", 8 | "@egjs/axes": "eg.Axes", 9 | "react": "React", 10 | "keycon": "KeyController", 11 | "react-dom": "ReactDOM", 12 | "react-css-styler": "styled" 13 | }, 14 | }; 15 | 16 | export default builder([ 17 | { 18 | ...defaultOptions, 19 | input: "src/react-ruler/index.esm.ts", 20 | output: "./dist/ruler.esm.js", 21 | format: "es", 22 | exports: "named", 23 | }, 24 | { 25 | ...defaultOptions, 26 | input: "src/react-ruler/index.umd.ts", 27 | output: "./dist/ruler.cjs.js", 28 | format: "cjs", 29 | exports: "default", 30 | }, 31 | ]); 32 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "packages": [ 5 | "packages/*", 6 | "packages/ngx-ruler/projects/ngx-ruler" 7 | ], 8 | "version": "independent", 9 | "lernaHelperOptions": { 10 | "deployFileMap": [ 11 | { 12 | "basePath": "packages/ruler/dist", 13 | "dists": [ 14 | "demo/release/{{version}}/dist", 15 | "demo/release/latest/dist" 16 | ] 17 | }, 18 | { 19 | "basePath": "doc", 20 | "dists": [ 21 | "demo/release/{{version}}/doc", 22 | "demo/release/latest/doc" 23 | ] 24 | } 25 | ], 26 | "beforeReleaseScripts": [ 27 | "npm run demo:build", 28 | "npm run deploy" 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "jsdoc-format": false, 8 | "forin": false, 9 | "no-console": false, 10 | "no-any": false, 11 | "no-empty-interface": false, 12 | "interface-name": false, 13 | "indent": [ 14 | true, 15 | "spaces", 16 | 4 17 | ], 18 | "ordered-imports": false, 19 | "object-literal-sort-keys": false, 20 | "no-unused-expression": false, 21 | "arrow-parens": [ 22 | true, 23 | "ban-single-arg-parens" 24 | ], 25 | "max-line-length": [ 26 | true, 27 | { 28 | "limit": 120, 29 | "ignore-pattern": "(\\* @)|//" 30 | } 31 | ], 32 | "trailing-comma": [ 33 | true, 34 | { 35 | "multiline": { 36 | "objects": "always", 37 | "arrays": "always", 38 | "functions": "always", 39 | "typeLiterals": "ignore" 40 | }, 41 | "esSpecCompliant": true 42 | } 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/croact-ruler/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "typedef": [true, "parameter"], 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "interface-name": false, 13 | "indent": [ 14 | true, 15 | "spaces", 16 | 4 17 | ], 18 | "ordered-imports": false, 19 | "object-literal-sort-keys": false, 20 | "no-unused-expression": false, 21 | "arrow-parens": [ 22 | true, 23 | "ban-single-arg-parens" 24 | ], 25 | "max-line-length": [ 26 | true, 27 | { 28 | "limit": 120, 29 | "ignore-pattern": "(\\* @)|//" 30 | } 31 | ], 32 | "trailing-comma": [ 33 | true, 34 | { 35 | "multiline": { 36 | "objects": "always", 37 | "arrays": "always", 38 | "functions": "always", 39 | "typeLiterals": "ignore" 40 | }, 41 | "esSpecCompliant": true 42 | } 43 | ] 44 | } 45 | } -------------------------------------------------------------------------------- /packages/preact-ruler/src/demo/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | transform-origin: 30% 50%; 4 | transform: scaleX(-0.8) translateY(30px); 5 | } 6 | .App * { 7 | position: relative; 8 | } 9 | .App-logo { 10 | position: relative; 11 | /* animation: App-logo-spin infinite 20s linear; */ 12 | transform: rotate(18deg); 13 | width: 300px; 14 | height: 200px; 15 | } 16 | .App code { 17 | display: inline-block; 18 | } 19 | img { 20 | background: #f55; 21 | } 22 | .App-header { 23 | background-color: #282c34; 24 | min-height: 100vh; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | justify-content: center; 29 | font-size: calc(10px + 2vmin); 30 | transform: rotate(-9deg); 31 | color: white; 32 | } 33 | 34 | .App-link { 35 | color: #61dafb; 36 | } 37 | 38 | @keyframes App-logo-spin { 39 | from { 40 | transform: rotate(0deg); 41 | } 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/preact-ruler/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "typedef": [true, "parameter"], 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "interface-name": false, 13 | "indent": [ 14 | true, 15 | "spaces", 16 | 4 17 | ], 18 | "ordered-imports": false, 19 | "object-literal-sort-keys": false, 20 | "no-unused-expression": false, 21 | "arrow-parens": [ 22 | true, 23 | "ban-single-arg-parens" 24 | ], 25 | "max-line-length": [ 26 | true, 27 | { 28 | "limit": 120, 29 | "ignore-pattern": "(\\* @)|//" 30 | } 31 | ], 32 | "trailing-comma": [ 33 | true, 34 | { 35 | "multiline": { 36 | "objects": "always", 37 | "arrays": "always", 38 | "functions": "always", 39 | "typeLiterals": "ignore" 40 | }, 41 | "esSpecCompliant": true 42 | } 43 | ] 44 | } 45 | } -------------------------------------------------------------------------------- /packages/preact-ruler/demo/dist/index.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | transform-origin: 30% 50%; 4 | transform: scaleX(-0.8) translateY(30px); 5 | } 6 | .App * { 7 | position: relative; 8 | } 9 | .App-logo { 10 | position: relative; 11 | /* animation: App-logo-spin infinite 20s linear; */ 12 | transform: rotate(18deg); 13 | width: 300px; 14 | height: 200px; 15 | } 16 | .App code { 17 | display: inline-block; 18 | } 19 | img { 20 | background: #f55; 21 | } 22 | .App-header { 23 | background-color: #282c34; 24 | min-height: 100vh; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | justify-content: center; 29 | font-size: calc(10px + 2vmin); 30 | transform: rotate(-9deg); 31 | color: white; 32 | } 33 | 34 | .App-link { 35 | color: #61dafb; 36 | } 37 | 38 | @keyframes App-logo-spin { 39 | from { 40 | transform: rotate(0deg); 41 | } 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /packages/react-ruler/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended" 5 | ], 6 | "rules": { 7 | "typedef": [true, "parameter"], 8 | "jsdoc-format": false, 9 | "forin": false, 10 | "no-console": false, 11 | "no-any": false, 12 | "no-empty": false, 13 | "interface-name": false, 14 | "indent": [ 15 | true, 16 | "spaces", 17 | 4 18 | ], 19 | "ordered-imports": false, 20 | "object-literal-sort-keys": false, 21 | "no-unused-expression": false, 22 | "arrow-parens": [ 23 | true, 24 | "ban-single-arg-parens" 25 | ], 26 | "max-line-length": [ 27 | true, 28 | { 29 | "limit": 120, 30 | "ignore-pattern": "(\\* @)|//" 31 | } 32 | ], 33 | "trailing-comma": [ 34 | true, 35 | { 36 | "multiline": { 37 | "objects": "always", 38 | "arrays": "always", 39 | "functions": "always", 40 | "typeLiterals": "ignore" 41 | }, 42 | "esSpecCompliant": true 43 | } 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/croact-ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | import builder from "@daybrush/builder"; 3 | import reactCompat from "rollup-plugin-react-compat"; 4 | 5 | const external = { 6 | "croact": "croact", 7 | "@daybrush/utils": "utils", 8 | "css-styled": "css-styled", 9 | "framework-utils": "framework-utils", 10 | "@daybrush/drag": "Dragger", 11 | "@egjs/agent": "eg.Agent", 12 | "@egjs/children-differ": "eg.ChildrenDiffer", 13 | }; 14 | 15 | 16 | const reactPlugin = reactCompat({ 17 | useCroact: true, 18 | }) 19 | 20 | 21 | 22 | export default builder([ 23 | { 24 | sourcemap: false, 25 | input: "src/index.ts", 26 | output: "./dist/ruler.esm.js", 27 | exports: "named", 28 | format: "es", 29 | plugins: [reactPlugin], 30 | external, 31 | }, 32 | { 33 | sourcemap: false, 34 | input: "src/index.umd.ts", 35 | output: "./dist/ruler.cjs.js", 36 | exports: "default", 37 | plugins: [reactPlugin], 38 | format: "cjs", 39 | external, 40 | }, 41 | ]); 42 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/consts.ts: -------------------------------------------------------------------------------- 1 | // auto 2 | // eslint-disable-next-line max-len 3 | export const ANGULAR_RULER_INPUTS: ["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"] = ["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"]; 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/README.md: -------------------------------------------------------------------------------- 1 | # NgxRuler 2 | 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0. 4 | 5 | ## Code scaffolding 6 | 7 | Run `ng generate component component-name --project ngx-ruler` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-ruler`. 8 | > Note: Don't forget to add `--project ngx-ruler` or else it will be added to the default project in your `angular.json` file. 9 | 10 | ## Build 11 | 12 | Run `ng build ngx-ruler` to build the project. The build artifacts will be stored in the `dist/` directory. 13 | 14 | ## Publishing 15 | 16 | After building your library with `ng build ngx-ruler`, go to the dist folder `cd dist/ngx-ruler` and run `npm publish`. 17 | 18 | ## Running unit tests 19 | 20 | Run `ng test ngx-ruler` to execute the unit tests via [Karma](https://karma-runner.github.io). 21 | 22 | ## Further help 23 | 24 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 25 | -------------------------------------------------------------------------------- /packages/react-ruler/src/react-ruler/consts.ts: -------------------------------------------------------------------------------- 1 | import { RulerInterface, RulerProps } from "./types"; 2 | 3 | export const PROPERTIES: Array = [ 4 | "type", 5 | "width", 6 | "height", 7 | "unit", 8 | "zoom", 9 | "direction", 10 | "textAlign", 11 | "font", 12 | "segment", 13 | "mainLineSize", 14 | "longLineSize", 15 | "shortLineSize", 16 | "lineOffset", 17 | "textOffset", 18 | "negativeRuler", 19 | "range", 20 | "scrollPos", 21 | "defaultScrollPos", 22 | "style", 23 | "backgroundColor", 24 | "rangeBackgroundColor", 25 | "lineColor", 26 | "textColor", 27 | "textBackgroundColor", 28 | "textFormat", 29 | "warpSelf", 30 | "selectedBackgroundColor", 31 | "selectedRanges", 32 | "defaultPixelScale", 33 | "useResizeObserver", 34 | "selectedRangesText", 35 | "selectedRangesTextColor", 36 | "selectedRangesTextOffset", 37 | "marks", 38 | "markColor", 39 | ]; 40 | export const METHODS: Array = [ 41 | "scroll", 42 | "resize", 43 | "getScrollPos", 44 | "draw", 45 | ]; 46 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | }); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'ngx-ruler-project'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.componentInstance; 22 | expect(app.title).toEqual('ngx-ruler-project'); 23 | }); 24 | 25 | it('should render title', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.nativeElement as HTMLElement; 29 | expect(compiled.querySelector('.content span')?.textContent).toContain('ngx-ruler-project app is running!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/react-ruler/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/vue-ruler/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/croact-ruler/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/ngx-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "paths": { 15 | "ngx-ruler": [ 16 | "dist/ngx-ruler/ngx-ruler", 17 | "dist/ngx-ruler" 18 | ] 19 | }, 20 | "declaration": false, 21 | "downlevelIteration": true, 22 | "experimentalDecorators": true, 23 | "moduleResolution": "node", 24 | "importHelpers": true, 25 | "target": "es2017", 26 | "module": "es2020", 27 | "lib": [ 28 | "es2020", 29 | "dom" 30 | ] 31 | }, 32 | "angularCompilerOptions": { 33 | "enableI18nLegacyMessageIdFormat": false, 34 | "strictInjectionParameters": true, 35 | "strictInputAccessModifiers": true, 36 | "strictTemplates": true 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/preact-ruler/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/svelte-ruler/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daybrush 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /packages/svelte-ruler/public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | padding: 0.4em; 36 | margin: 0 0 0.5em 0; 37 | box-sizing: border-box; 38 | border: 1px solid #ccc; 39 | border-radius: 2px; 40 | } 41 | 42 | input:disabled { 43 | color: #ccc; 44 | } 45 | 46 | input[type="range"] { 47 | height: 0; 48 | } 49 | 50 | button { 51 | color: #333; 52 | background-color: #f4f4f4; 53 | outline: none; 54 | } 55 | 56 | button:active { 57 | background-color: #ddd; 58 | } 59 | 60 | button:focus { 61 | border-color: #666; 62 | } 63 | -------------------------------------------------------------------------------- /packages/ngx-ruler/README.md: -------------------------------------------------------------------------------- 1 | # NgxRulerProject 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.9. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /packages/svelte-ruler/src/Ruler.svelte: -------------------------------------------------------------------------------- 1 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /jsdoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [], 3 | "recurseDepth": 10, 4 | "opts": { 5 | "template": "./node_modules/daybrush-jsdoc-template", 6 | "destination": "./doc/" 7 | }, 8 | "source": { 9 | "include": [ 10 | "README.md", 11 | "packages/ruler/src", 12 | "packages/react-ruler/src/react-ruler" 13 | ], 14 | "includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$", 15 | "excludePattern": "(^|\\/|\\\\)_" 16 | }, 17 | "sourceType": "module", 18 | "tags": { 19 | "allowUnknownTags": true, 20 | "dictionaries": [ 21 | "jsdoc", 22 | "closure" 23 | ] 24 | }, 25 | "linkMap": { 26 | "IObject": "http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface" 27 | }, 28 | "templates": { 29 | "cleverLinks": false, 30 | "monospaceLinks": false, 31 | "default": { 32 | "staticFiles": { 33 | "include": [ 34 | "./static" 35 | ] 36 | } 37 | } 38 | }, 39 | "docdash": { 40 | "menu": { 41 | "Github repo": { 42 | "href": "https://github.com/daybrush/ruler", 43 | "target": "_blank", 44 | "class": "menu-item", 45 | "id": "repository" 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /packages/ngx-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-ruler-project", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build ngx-ruler --configuration production", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "lernaHelperPublishPath": "./dist/ngx-ruler", 13 | "dependencies": { 14 | "@angular/animations": "~13.3.0", 15 | "@angular/common": "~13.3.0", 16 | "@angular/compiler": "~13.3.0", 17 | "@angular/core": "~13.3.0", 18 | "@angular/forms": "~13.3.0", 19 | "@angular/platform-browser": "~13.3.0", 20 | "@angular/platform-browser-dynamic": "~13.3.0", 21 | "@angular/router": "~13.3.0", 22 | "@scena/ruler": "~0.20.0", 23 | "rxjs": "~7.5.0", 24 | "tslib": "^2.3.0", 25 | "zone.js": "~0.11.4" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "~13.3.9", 29 | "@angular/cli": "~13.3.9", 30 | "@angular/compiler-cli": "~13.3.0", 31 | "@types/jasmine": "~3.10.0", 32 | "@types/node": "^12.11.1", 33 | "jasmine-core": "~4.0.0", 34 | "karma": "~6.3.0", 35 | "karma-chrome-launcher": "~3.1.0", 36 | "karma-coverage": "~2.1.0", 37 | "karma-jasmine": "~4.0.0", 38 | "karma-jasmine-html-reporter": "~1.7.0", 39 | "ng-packagr": "^13.0.0", 40 | "typescript": "^4.5.0 <4.6.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/preact-ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | import builder from "@daybrush/builder"; 2 | const preact = require("rollup-plugin-preact"); 3 | 4 | 5 | const defaultOptions = { 6 | tsconfig: "tsconfig.build.json", 7 | external: { 8 | "@daybrush/utils": "utils", 9 | "@daybrush/drag": "Dragger", 10 | "preact": "Preact", 11 | "preact/compat": "Preact", 12 | "preact-compat": "preact-compat", 13 | "framework-utils": "framework-utils", 14 | "react-css-styled": "preact-css-styled", 15 | "@egjs/agent": "eg.Agent", 16 | "@egjs/children-differ": "eg.ChildrenDiffer", 17 | }, 18 | exports: "named", 19 | plugins: [ 20 | preact({ 21 | noPropTypes: false, 22 | noEnv: false, 23 | noReactIs: false, 24 | usePreactX: true, 25 | aliasModules: { 26 | "react-css-styled": "preact-css-styled", 27 | }, 28 | }), 29 | ], 30 | }; 31 | 32 | export default builder([ 33 | { 34 | ...defaultOptions, 35 | input: "src/preact-ruler/index.esm.ts", 36 | output: "./dist/ruler.esm.js", 37 | format: "es", 38 | exports: "named", 39 | }, 40 | { 41 | ...defaultOptions, 42 | input: "src/preact-ruler/index.umd.ts", 43 | output: "./dist/ruler.cjs.js", 44 | format: "cjs", 45 | exports: "default", 46 | }, 47 | ]); 48 | -------------------------------------------------------------------------------- /packages/preact-ruler/src/demo/App.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Component, h } from "preact"; 3 | import "./App.css"; 4 | import Ruler from "../preact-ruler"; 5 | import { ref } from "framework-utils"; 6 | 7 | export default class App extends Component<{}> { 8 | private ruler1!: Ruler; 9 | private ruler2!: Ruler; 10 | private ruler3!: Ruler; 11 | private ruler4!: Ruler; 12 | public render() { 13 | return (
14 | 16 | 18 | 20 | 22 |
23 | ); 24 | } 25 | public componentDidMount() { 26 | let scrollX = 0; 27 | let scrollY = 0; 28 | window.addEventListener("wheel", e => { 29 | 30 | scrollX += e.deltaX; 31 | scrollY += e.deltaY; 32 | 33 | this.ruler1.scroll(scrollX); 34 | this.ruler2.scroll(scrollX); 35 | this.ruler3.scroll(scrollY); 36 | this.ruler4.scroll(scrollY); 37 | }); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | import builder from "@daybrush/builder"; 3 | import compat from "rollup-plugin-react-compat"; 4 | 5 | 6 | const reactCompat = compat({ 7 | useCroact: true, 8 | aliasModules: { 9 | "@scena/react-ruler": "croact-ruler", 10 | }, 11 | }); 12 | const resolveReactCompat = compat({ 13 | useCroact: true, 14 | resolveCompat: true, 15 | }); 16 | 17 | const external = { 18 | "croact": "croact", 19 | "croact-ruler": "croact-ruler", 20 | "@egjs/component": "@egjs/component", 21 | "@daybrush/utils": "@daybrush/utils", 22 | "@daybrush/drag": "@daybrush/drag", 23 | "framework-utils": "framework-utils", 24 | "@egjs/agent": "eg.Agent", 25 | "@egjs/children-differ": "eg.ChildrenDiffer", 26 | }; 27 | export default builder([ 28 | { 29 | name: "Ruler", 30 | input: "src/index.umd.ts", 31 | output: "./dist/ruler.js", 32 | plugins: [resolveReactCompat], 33 | 34 | }, 35 | { 36 | name: "Ruler", 37 | input: "src/index.umd.ts", 38 | output: "./dist/ruler.min.js", 39 | plugins: [resolveReactCompat], 40 | uglify: true, 41 | }, 42 | { 43 | input: "src/index.esm.ts", 44 | output: "./dist/ruler.esm.js", 45 | exports: "named", 46 | format: "es", 47 | plugins: [reactCompat], 48 | external, 49 | }, 50 | { 51 | input: "src/index.umd.ts", 52 | output: "./dist/ruler.cjs.js", 53 | exports: "default", 54 | format: "cjs", 55 | plugins: [reactCompat], 56 | external, 57 | }, 58 | ]); 59 | -------------------------------------------------------------------------------- /packages/ngx-ruler/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, './coverage/ngx-ruler-project'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | jasmine: { 17 | // you can add configuration options for Jasmine here 18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html 19 | // for example, you can disable the random execution with `random: false` 20 | // or set a specific seed with `seed: 4321` 21 | }, 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | jasmineHtmlReporter: { 25 | suppressAll: true // removes the duplicated traces 26 | }, 27 | coverageReporter: { 28 | dir: require('path').join(__dirname, '../../coverage/ngx-ruler'), 29 | subdir: '.', 30 | reporters: [ 31 | { type: 'html' }, 32 | { type: 'text-summary' } 33 | ] 34 | }, 35 | reporters: ['progress', 'kjhtml'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false, 42 | restartOnFileChange: true 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /packages/ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@scena/ruler", 3 | "version": "0.20.0", 4 | "description": "A Vanilla Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "start": "rollup -c -w", 11 | "build": "rollup -c && npm run declaration && print-sizes ./dist", 12 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json" 13 | }, 14 | "keywords": [ 15 | "scene", 16 | "scenejs", 17 | "scene.js", 18 | "scena", 19 | "ruler", 20 | "scroller" 21 | ], 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/daybrush/ruler.git" 25 | }, 26 | "files": [ 27 | "README.md", 28 | "package.json", 29 | "dist/*", 30 | "declaration/*" 31 | ], 32 | "author": "Daybrush", 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/daybrush/ruler/issues" 36 | }, 37 | "homepage": "https://github.com/daybrush/ruler#readme", 38 | "devDependencies": { 39 | "@daybrush/builder": "^0.1.2", 40 | "@types/react-dom": "^16.9.4", 41 | "print-sizes": "0.0.4", 42 | "pvu": "^0.5.1", 43 | "react": "^16.12.0", 44 | "react-dom": "^16.12.0", 45 | "rollup-plugin-react-compat": "^0.1.1", 46 | "tslint": "^5.18.0", 47 | "typescript": "^4.5.0 <4.6.0" 48 | }, 49 | "dependencies": { 50 | "croact": "^1.0.3", 51 | "croact-ruler": "~0.18.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /packages/react-ruler/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 26 |
27 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /packages/svelte-ruler/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import livereload from 'rollup-plugin-livereload'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import rollup_start_dev from './rollup_start_dev'; 7 | import { preprocess } from "@pyoner/svelte-ts-preprocess"; 8 | 9 | const production = !process.env.ROLLUP_WATCH; 10 | 11 | export default { 12 | input: 'src/main.js', 13 | output: { 14 | sourcemap: true, 15 | format: 'iife', 16 | name: 'app', 17 | file: 'public/bundle.js' 18 | }, 19 | plugins: [ 20 | svelte({ 21 | // enable run-time checks when not in production 22 | dev: !production, 23 | // we'll extract any component CSS out into 24 | // a separate file — better for performance 25 | css: css => { 26 | css.write('public/bundle.css'); 27 | }, 28 | preprocess: preprocess(), 29 | }), 30 | 31 | // If you have external dependencies installed from 32 | // npm, you'll most likely need these plugins. In 33 | // some cases you'll need additional configuration — 34 | // consult the documentation for details: 35 | // https://github.com/rollup/rollup-plugin-commonjs 36 | resolve({ 37 | browser: true, 38 | dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/') 39 | }), 40 | commonjs(), 41 | 42 | // In dev mode, call `npm run start:dev` once 43 | // the bundle has been generated 44 | !production && rollup_start_dev, 45 | 46 | // Watch the `public` directory and refresh the 47 | // browser on changes when not in production 48 | !production && livereload('public'), 49 | 50 | // If we're building for production (npm run build 51 | // instead of npm run dev), minify 52 | production && terser() 53 | ], 54 | watch: { 55 | clearScreen: false 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /packages/vue-ruler/src/components/Ruler.vue: -------------------------------------------------------------------------------- 1 | 4 | 66 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/src/lib/ngx-ruler.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core'; 2 | import Ruler, { PROPERTIES } from '@scena/ruler'; 3 | import { NgxRulerInterface } from './ngx-ruler.interface'; 4 | import { ANGULAR_RULER_INPUTS } from './consts'; 5 | 6 | @Component({ 7 | selector: 'ngx-ruler', 8 | template: ` 9 | 10 | `, 11 | styles: [], 12 | inputs: ANGULAR_RULER_INPUTS, 13 | }) 14 | export class NgxRulerComponent extends NgxRulerInterface implements AfterViewInit, OnChanges, OnDestroy { 15 | 16 | @ViewChild('rulerRef', { static: false }) private rulerRef!: ElementRef; 17 | 18 | ngOnChanges(changes: SimpleChanges): void { 19 | const ruler = this.ruler; 20 | 21 | if (!ruler) { 22 | return; 23 | } 24 | for (const name in changes) { 25 | const { previousValue, currentValue } = changes[name]; 26 | 27 | if (previousValue === currentValue) { 28 | continue; 29 | } 30 | if (name === 'style') { 31 | this.setStyle(); 32 | } else { 33 | (ruler as any)[name] = currentValue; 34 | } 35 | } 36 | } 37 | ngAfterViewInit() { 38 | const el = this.rulerRef.nativeElement; 39 | const options: Record = {}; 40 | 41 | PROPERTIES.forEach(name => { 42 | if (name === 'style') { 43 | return; 44 | } 45 | (options as any)[name] = (this as any)[name]; 46 | }); 47 | 48 | options['warpSelf'] = true; 49 | this.ruler = new Ruler(el, options); 50 | this.setStyle(); 51 | } 52 | ngOnDestroy() { 53 | this.ruler.destroy(); 54 | } 55 | setStyle() { 56 | const el = this.rulerRef.nativeElement; 57 | const elStyle = el.style; 58 | const style = this.style; 59 | 60 | for (const name in style) { 61 | if (elStyle[name] === style[name]) { 62 | continue; 63 | } 64 | elStyle[name] = style[name]; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /packages/preact-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "preact-ruler", 3 | "version": "0.19.0", 4 | "description": "A Preact Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "lint": "tslint -c tslint.json 'src/**/*.ts'", 11 | "start": "open ./demo/index.html && rollup -c rollup.config.demo.js -w", 12 | "build": "rollup -c && npm run declaration && print-sizes ./dist ", 13 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && npm run declaration:cp", 14 | "declaration:cp": "cp src/preact-ruler/Ruler.d.ts declaration/Ruler.d.ts" 15 | }, 16 | "keywords": [ 17 | "scene", 18 | "scenejs", 19 | "scene.js", 20 | "scena", 21 | "ruler", 22 | "scroller", 23 | "preact" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/daybrush/ruler/blob/master/packages/preact-ruler" 28 | }, 29 | "author": "Daybrush", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/daybrush/ruler/issues" 33 | }, 34 | "files": [ 35 | "README.md", 36 | "package.json", 37 | "dist/*", 38 | "src/*", 39 | "declaration/*" 40 | ], 41 | "homepage": "https://daybrush.com/ruler", 42 | "devDependencies": { 43 | "@daybrush/builder": "^0.1.0", 44 | "@scenejs/effects": "^1.0.1", 45 | "keycon": "^0.3.0", 46 | "preact": "^10.0.0", 47 | "print-sizes": "^0.1.0", 48 | "rollup-plugin-css-bundle": "^1.0.4", 49 | "rollup-plugin-preact": "^0.5.2", 50 | "scenejs": "^1.1.4", 51 | "shape-svg": "^0.3.3", 52 | "tslint": "^5.16.0", 53 | "typescript": "^4.5.0 <4.6.0" 54 | }, 55 | "dependencies": { 56 | "@scena/react-ruler": "~0.19.0" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /packages/svelte-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-ruler", 3 | "version": "0.19.0", 4 | "description": "A Svelte Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "svelte": "./src/index.js", 8 | "types": "src/index.d.ts", 9 | "sideEffects": false, 10 | "keywords": [ 11 | "scene", 12 | "scenejs", 13 | "scene.js", 14 | "scena", 15 | "ruler", 16 | "scroller", 17 | "svelte" 18 | ], 19 | "files": [ 20 | "README.md", 21 | "package.json", 22 | "dist/*", 23 | "src/*", 24 | "declaration/*" 25 | ], 26 | "repository": { 27 | "type": "git", 28 | "url": "git+https://github.com/daybrush/ruler.git" 29 | }, 30 | "author": "Daybrush", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/daybrush/ruler/issues" 34 | }, 35 | "homepage": "https://github.com/daybrush/ruler#readme", 36 | "devDependencies": { 37 | "@daybrush/builder": "^0.1.2", 38 | "@pyoner/svelte-ts-preprocess": "^1.2.1", 39 | "keycon": "^0.6.0", 40 | "rollup": "^1.12.0", 41 | "rollup-plugin-commonjs": "^10.0.0", 42 | "rollup-plugin-livereload": "^1.0.4", 43 | "rollup-plugin-node-resolve": "^5.2.0", 44 | "rollup-plugin-svelte": "^7.1.0", 45 | "rollup-plugin-terser": "^5.2.0", 46 | "scenejs": "^1.1.5", 47 | "sirv-cli": "^0.4.4", 48 | "svelte": "^3.0.0", 49 | "svelte-preprocess": "^3.2.2", 50 | "tslib": "^1.10.0", 51 | "typescript": "^4.5.0 <4.6.0" 52 | }, 53 | "dependencies": { 54 | "@scena/ruler": "~0.20.0" 55 | }, 56 | "scripts": { 57 | "build": "rollup -c rollup.build.config.js", 58 | "dev": "rollup -c -w", 59 | "start": "sirv public --single", 60 | "start:dev": "sirv public --single --dev", 61 | "build:dev": "rollup -c" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /packages/croact-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "croact-ruler", 3 | "version": "0.18.0", 4 | "description": "A React Compat Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "lint": "tslint -c tslint.json 'src/**/*.ts'", 11 | "start": "open ./demo/index.html && rollup -c rollup.config.demo.js -w", 12 | "build": "rollup -c && npm run declaration && print-sizes ./dist ", 13 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json" 14 | }, 15 | "keywords": [ 16 | "scene", 17 | "scenejs", 18 | "scene.js", 19 | "scena", 20 | "ruler", 21 | "scroller", 22 | "react", 23 | "compat" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/daybrush/ruler/blob/master/packages/croact-ruler" 28 | }, 29 | "files": [ 30 | "README.md", 31 | "package.json", 32 | "dist/*", 33 | "src/*", 34 | "declaration/*" 35 | ], 36 | "author": "Daybrush", 37 | "license": "MIT", 38 | "bugs": { 39 | "url": "https://github.com/daybrush/ruler/issues" 40 | }, 41 | "homepage": "https://daybrush.com/ruler", 42 | "devDependencies": { 43 | "@daybrush/builder": "^0.1.0", 44 | "@scenejs/effects": "^1.0.1", 45 | "@types/react": "^16.9.17", 46 | "croact": "^1.0.3", 47 | "keycon": "^0.3.0", 48 | "preact": "^10.0.0", 49 | "print-sizes": "^0.1.0", 50 | "pvu": "^0.5.1", 51 | "rollup-plugin-css-bundle": "^1.0.4", 52 | "rollup-plugin-react-compat": "^0.1.1", 53 | "scenejs": "^1.1.4", 54 | "shape-svg": "^0.3.3", 55 | "tslint": "^5.16.0", 56 | "typescript": "^4.5.0 <4.6.0" 57 | }, 58 | "dependencies": { 59 | "@scena/react-ruler": "~0.19.0" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/react-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@scena/react-ruler", 3 | "version": "0.19.0", 4 | "description": "A React Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "sideEffects": false, 8 | "types": "declaration/index.d.ts", 9 | "scripts": { 10 | "lint": "tslint -c tslint.json 'src/**/*.ts'", 11 | "start": "react-scripts start", 12 | "build": "rollup -c && npm run declaration && print-sizes ./dist ", 13 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json" 14 | }, 15 | "keywords": [ 16 | "scene", 17 | "scenejs", 18 | "scene.js", 19 | "scena", 20 | "ruler", 21 | "scroller", 22 | "react" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "https://github.com/daybrush/ruler/blob/master/packages/react-ruler" 27 | }, 28 | "author": "Daybrush", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/daybrush/ruler/issues" 32 | }, 33 | "files": [ 34 | "README.md", 35 | "package.json", 36 | "dist/*", 37 | "src/*", 38 | "declaration/*" 39 | ], 40 | "homepage": "https://github.com/daybrush/ruler#readme", 41 | "devDependencies": { 42 | "@daybrush/builder": "^0.1.0", 43 | "@scenejs/effects": "^1.0.1", 44 | "@types/react": "^16.8.18", 45 | "@types/react-color": "^3.0.1", 46 | "@types/react-dom": "^16.8.4", 47 | "print-sizes": "0.0.4", 48 | "pvu": "^0.5.1", 49 | "react": "^16.8.6", 50 | "react-dom": "^16.8.6", 51 | "react-scripts": "^3.0.1", 52 | "shape-svg": "^0.3.3", 53 | "tslint": "^5.16.0", 54 | "typescript": "^4.5.0 <4.6.0" 55 | }, 56 | "dependencies": { 57 | "@daybrush/utils": "^1.11.0", 58 | "framework-utils": "^1.1.0" 59 | }, 60 | "browserslist": { 61 | "production": [ 62 | ">0.2%", 63 | "not dead", 64 | "not op_mini all" 65 | ], 66 | "development": [ 67 | "last 1 chrome version", 68 | "last 1 firefox version", 69 | "last 1 safari version" 70 | ] 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /packages/vue-ruler/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@scena/vue-ruler", 3 | "version": "0.18.0", 4 | "description": "A Vue Ruler component that can draw grids and scroll infinitely.", 5 | "main": "./dist/ruler.cjs.js", 6 | "module": "./dist/ruler.esm.js", 7 | "types": "declaration/Ruler.d.ts", 8 | "sideEffects": false, 9 | "keywords": [ 10 | "scene", 11 | "scenejs", 12 | "scene.js", 13 | "scena", 14 | "ruler", 15 | "scroller", 16 | "vue" 17 | ], 18 | "repository": { 19 | "type": "git", 20 | "url": "git+https://github.com/daybrush/ruler.git" 21 | }, 22 | "author": "Daybrush", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/daybrush/ruler/issues" 26 | }, 27 | "homepage": "https://github.com/daybrush/ruler#readme", 28 | "scripts": { 29 | "serve": "vue-cli-service serve", 30 | "build": "rollup -c && npm run declaration", 31 | "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json && cp ./src/components/Ruler.vue.d.ts ./declaration/" 32 | }, 33 | "dependencies": { 34 | "@scena/ruler": "~0.20.0" 35 | }, 36 | "files": [ 37 | "README.md", 38 | "package.json", 39 | "dist/*", 40 | "src/*", 41 | "declaration/*" 42 | ], 43 | "devDependencies": { 44 | "@daybrush/builder": "^0.1.2", 45 | "@vue/cli-plugin-typescript": "~4.5.0", 46 | "@vue/cli-service": "~4.5.0", 47 | "@vue/compiler-sfc": "^2.7.0", 48 | "@vue/composition-api": "^1.2.4", 49 | "@vue/eslint-config-airbnb": "^5.0.2", 50 | "@vue/eslint-config-prettier": "^6.0.0", 51 | "@vue/eslint-config-typescript": "^5.0.2", 52 | "@vue/test-utils": "^1.0.3", 53 | "babel-eslint": "^10.1.0", 54 | "babel-loader": "^8.2.2", 55 | "eslint": "^5.16.0", 56 | "eslint-plugin-vue": "^5.0.0", 57 | "rollup-plugin-vue": "^5.1.9", 58 | "typescript": "^4.5.0 <4.6.0", 59 | "vue": "^2.6.12", 60 | "vue-class-component": "^7.2.6", 61 | "vue-property-decorator": "^9.1.2", 62 | "vue-template-compiler": "^2.6.12" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /demo/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap"); 2 | @import url("https://fonts.googleapis.com/css?family=Roboto:100&display=swap"); 3 | html, body { 4 | font-family: "Open Sans", sans-serif; 5 | position: relative; 6 | margin: 0; 7 | padding: 0; 8 | height: 100%; 9 | color: #333; 10 | letter-spacing: 1px; 11 | background: #f5f5f5; 12 | font-weight: 300; 13 | touch-action: manipulation; 14 | } 15 | a { 16 | text-decoration: none; 17 | color: #333; 18 | } 19 | .ruler { 20 | position:absolute; 21 | top: 0; 22 | left: 0; 23 | } 24 | .ruler.horizontal { 25 | left: 30px; 26 | width: calc(100% - 30px); 27 | height: 30px; 28 | } 29 | .ruler.vertical { 30 | top: 30px; 31 | width: 30px; 32 | height: calc(100% - 30px); 33 | 34 | } 35 | 36 | .box { 37 | position: relative; 38 | width: 30px; 39 | height: 30px; 40 | background: #444; 41 | box-sizing: border-box; 42 | z-index: 21; 43 | } 44 | .box:before, .box:after { 45 | position: absolute; 46 | content: ""; 47 | background: #777; 48 | } 49 | .box:before { 50 | width: 1px; 51 | height: 100%; 52 | left: 100%; 53 | } 54 | .box:after { 55 | height: 1px; 56 | width: 100%; 57 | top: 100%; 58 | } 59 | 60 | .container { 61 | position: relative; 62 | top: 50%; 63 | left: 50%; 64 | transform: translate(-50%, -50%); 65 | text-align: center; 66 | max-width: calc(100% - 60px); 67 | width: 100%; 68 | } 69 | 70 | .badges { 71 | padding: 10px; 72 | } 73 | .badges img { 74 | height: 20px; 75 | } 76 | .buttons { 77 | text-align: center; 78 | margin: 0; 79 | padding: 10px; 80 | } 81 | .buttons a { 82 | margin: 0; 83 | position: relative; 84 | text-decoration: none; 85 | color: #333; 86 | border: 1px solid #333; 87 | padding: 12px 30px; 88 | min-width: 140px; 89 | text-align: center; 90 | display: inline-block; 91 | box-sizing: border-box; 92 | margin: 5px; 93 | transition: all ease 0.5s; 94 | } 95 | .buttons a:hover { 96 | background: #333; 97 | color: #fff; 98 | } 99 | 100 | p { 101 | padding: 0; 102 | margin: 0; 103 | } 104 | 105 | .dragit { 106 | font-weight: bold; 107 | } 108 | -------------------------------------------------------------------------------- /packages/ngx-ruler/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including 12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** 22 | * By default, zone.js will patch all possible macroTask and DomEvents 23 | * user can disable parts of macroTask/DomEvents patch by setting following flags 24 | * because those flags need to be set before `zone.js` being loaded, and webpack 25 | * will put import in the top of bundle, so user need to create a separate file 26 | * in this directory (for example: zone-flags.ts), and put the following flags 27 | * into that file, and then add the following code before importing zone.js. 28 | * import './zone-flags'; 29 | * 30 | * The flags allowed in zone-flags.ts are listed here. 31 | * 32 | * The following flags will work for all browsers. 33 | * 34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 37 | * 38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 40 | * 41 | * (window as any).__Zone_enable_cross_context_check = true; 42 | * 43 | */ 44 | 45 | /*************************************************************************************************** 46 | * Zone JS is required by default for Angular itself. 47 | */ 48 | import 'zone.js'; // Included with Angular CLI. 49 | 50 | 51 | /*************************************************************************************************** 52 | * APPLICATION IMPORTS 53 | */ 54 | -------------------------------------------------------------------------------- /packages/preact-ruler/demo/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/ruler/src/Ruler.tsx: -------------------------------------------------------------------------------- 1 | import { ref, Properties } from "framework-utils"; 2 | import * as React from "react"; 3 | import { PROPERTIES } from "./consts"; 4 | import { DrawRulerOptions, RulerInterface, RulerProps } from "@scena/react-ruler/declaration/types"; 5 | import InnerRuler from "./InnerRuler"; 6 | import { ContainerProvider, renderSelf } from "croact"; 7 | 8 | 9 | /** 10 | * A Ruler component that can draw grids and scroll infinitely. 11 | * @sort 1 12 | * @implements Ruler.RulerInterface 13 | */ 14 | @Properties(PROPERTIES, (prototype, property) => { 15 | Object.defineProperty(prototype, property, { 16 | get() { 17 | return this.getRuler().props[property]; 18 | }, 19 | set(value) { 20 | this.innerRuler.setState({ 21 | [property]: value, 22 | }); 23 | }, 24 | enumerable: true, 25 | configurable: true, 26 | }); 27 | }) 28 | class Ruler implements RulerInterface { 29 | private containerProvider: ContainerProvider | null = null; 30 | private selfElement: HTMLElement | null = null; 31 | private _warp = false; 32 | private innerRuler!: InnerRuler; 33 | /** 34 | * @param - container 35 | * @param {$ts:Partial} options - options 36 | */ 37 | constructor(parentElement: HTMLElement, options: Partial = {}) { 38 | let selfElement!: HTMLElement; 39 | 40 | if (options.warpSelf) { 41 | delete options.warpSelf; 42 | this._warp = true; 43 | selfElement = parentElement; 44 | } else { 45 | selfElement = document.createElement("canvas"); 46 | parentElement.appendChild(selfElement); 47 | } 48 | renderSelf( 49 | , 51 | selfElement, 52 | ); 53 | } 54 | public scroll(scrollPos: number) { 55 | this.getRuler().scroll(scrollPos); 56 | } 57 | public resize() { 58 | this.getRuler().resize(); 59 | } 60 | public getScrollPos() { 61 | return this.getRuler().getScrollPos(); 62 | } 63 | public draw(options: DrawRulerOptions) { 64 | this.getRuler().draw(options); 65 | } 66 | /** 67 | * Remove Ruler 68 | */ 69 | public destroy() { 70 | const selfElement = this.selfElement!; 71 | 72 | renderSelf( 73 | null, 74 | selfElement!, 75 | this.containerProvider, 76 | ); 77 | if (!this._warp) { 78 | selfElement?.parentElement?.removeChild(selfElement); 79 | } 80 | this.selfElement = null; 81 | this.innerRuler = null; 82 | } 83 | private getRuler() { 84 | return this.innerRuler.ruler; 85 | } 86 | } 87 | 88 | export default Ruler; 89 | -------------------------------------------------------------------------------- /packages/react-ruler/src/demo/App.css: -------------------------------------------------------------------------------- 1 | html,body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | overscroll-behavior: none; 6 | } 7 | html, 8 | body, 9 | #root { 10 | position: relative; 11 | height: 100%; 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | .page1 { 17 | position: relative; 18 | min-height: 300px; 19 | height: 100%; 20 | text-align: center; 21 | } 22 | .page1 .startAnimation { 23 | will-change: transform; 24 | -webkit-backface-visibility: hidden; 25 | -webkit-perspective: 1000; 26 | } 27 | .page { 28 | font-size: 0; 29 | } 30 | .container { 31 | position: relative; 32 | width: 100%; 33 | height: 100%; 34 | min-width: 300px; 35 | min-height: 600px; 36 | } 37 | .page1 .logo { 38 | position: absolute; 39 | top: 50%; 40 | left: 50%; 41 | transform: translate(-50%, -50%); 42 | width: 300px; 43 | height: 300px; 44 | overflow: hidden; 45 | } 46 | 47 | .logo .clapper { 48 | position: absolute; 49 | width: 200px; 50 | height: 110px; 51 | top: 50%; 52 | left: 50%; 53 | transform: translate(-50%, -50%) translateY(30px); 54 | } 55 | 56 | .logo .svg_circle { 57 | position: absolute; 58 | } 59 | 60 | .logo svg circle { 61 | stroke-dasharray: 0 1000; 62 | stroke-dashoffset: 0; 63 | } 64 | 65 | .logo .play-btn { 66 | width: 40px; 67 | position: absolute; 68 | top: 50%; 69 | left: 50%; 70 | transform: translate(-50%, -50%) translate(5px); 71 | transition: width ease 0.2s; 72 | z-index: 2; 73 | } 74 | 75 | .logo .background { 76 | position: absolute; 77 | top: 50%; 78 | left: 50%; 79 | width: 200px; 80 | height: 110px; 81 | border-radius: 5px; 82 | transform: translate(-50%, -50%); 83 | } 84 | 85 | .play-circle { 86 | position: absolute; 87 | top: 50%; 88 | left: 50%; 89 | width: 70px; 90 | height: 70px; 91 | background: #fff; 92 | border-radius: 50%; 93 | transform: translate(-50%, -50%); 94 | z-index: 1; 95 | } 96 | 97 | .clapper .stick { 98 | position: absolute; 99 | box-sizing: border-box; 100 | width: 200px; 101 | height: 32px; 102 | font-size: 0; 103 | overflow: hidden; 104 | white-space: nowrap; 105 | padding: 5px 8px; 106 | text-align: center; 107 | background: #333; 108 | } 109 | 110 | .clapper .stick1 { 111 | transform-origin: 0% 100%; 112 | border-radius: 5px 5px 0px 0px; 113 | top: -60px; 114 | } 115 | .clapper .stick2 { 116 | top: -30px; 117 | } 118 | 119 | .clapper .rect { 120 | position: relative; 121 | display: inline-block; 122 | height: 100%; 123 | width: 20px; 124 | background: white; 125 | vertical-align: top; 126 | margin: 0px 5px 0px; 127 | border-radius: 5px; 128 | } 129 | 130 | .clapper .stick1 .rect { 131 | transform: skew(15deg); 132 | } 133 | 134 | .clapper .stick2 .rect { 135 | transform: skew(-15deg); 136 | } 137 | .logo .bottom { 138 | position: absolute; 139 | top: 0; 140 | left: 0; 141 | width: 100%; 142 | height: 100%; 143 | background: #333; 144 | box-sizing: border-box; 145 | border-radius: 0px 0px 5px 5px; 146 | } 147 | .logo .shadow { 148 | position: absolute; 149 | box-sizing: border-box; 150 | background: #D6D6D6; 151 | margin-top: 10px; 152 | margin-left: 10px; 153 | z-index: -1; 154 | } 155 | 156 | .dash-line { 157 | position: absolute; 158 | width: 0px; 159 | height: 100%; 160 | top: 0; 161 | left: 40px; 162 | border-left: 3px dashed #4af; 163 | transform-origin: 110px 50%; 164 | } 165 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ruler-root", 3 | "private": true, 4 | "description": "A Vanilla Ruler component that can draw grids and scroll infinitely.", 5 | "keywords": [ 6 | "scene", 7 | "scenejs", 8 | "scene.js", 9 | "scena", 10 | "ruler", 11 | "scroller" 12 | ], 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/daybrush/ruler.git" 16 | }, 17 | "author": "Daybrush", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/daybrush/ruler/issues" 21 | }, 22 | "homepage": "https://github.com/daybrush/ruler#readme", 23 | "scripts": { 24 | "build": "npm run build --prefix ./packages/ruler", 25 | "packages:update": "lerna-helper version && npm run update-type-consts", 26 | "update-type-consts": "node ./config/update-type-consts.js", 27 | "packages:build": "npm run build --prefix packages/react-ruler && npm run update-type-consts && lerna run build --ignore ngx-ruler --ignore @scena/react-ruler", 28 | "packages:publish": "lerna-helper publish --ignore ngx-ruler --commit 'chore: publish packages'", 29 | "demo:build": "npm run packages:build && npm run doc", 30 | "changelog": "lerna-helper changelog --type all --base @scena/ruler", 31 | "changelog:root": "lerna-helper changelog --type root --base @scena/ruler", 32 | "doc": "rm -rf ./doc && jsdoc -c jsdoc.json", 33 | "predeploy": "lerna-helper deploy --base @scena/ruler --pre", 34 | "deploy": "lerna-helper deploy --base @scena/ruler", 35 | "release": "lerna-helper release --base @scena/ruler" 36 | }, 37 | "devDependencies": { 38 | "@daybrush/jsdoc": "^0.4.3", 39 | "@daybrush/release": "^0.7.0", 40 | "cpx": "1.5.0", 41 | "daybrush-jsdoc-template": "^1.10.0", 42 | "gh-pages": "^2.0.1", 43 | "intercept-stdout": "0.1.2", 44 | "lerna": "^4.0.0", 45 | "lerna-changelog": "2.2.0", 46 | "typescript": "^4.5.0 <4.6.0" 47 | }, 48 | "workspaces": { 49 | "nohoist": [ 50 | "**/@daybrush/builder", 51 | "**/@daybrush/builder/**", 52 | "**/rollup-plugin-vue", 53 | "**/rollup-plugin-vue/**", 54 | "**/karma", 55 | "**/karma/**", 56 | "**/karma-*", 57 | "**/karma-*/**", 58 | "**/@tyoes/chai", 59 | "**/@tyoes/chai/**", 60 | "**/@types/karma-chai", 61 | "**/@types/karma-chai/**", 62 | "**/@types/mocha", 63 | "**/@types/mocha/**", 64 | "**/@vue/*", 65 | "**/@vue/*/**", 66 | "**/vue", 67 | "**/vue/**" 68 | ], 69 | "packages": [ 70 | "packages/*", 71 | "packages/ngx-ruler/projects/ngx-ruler" 72 | ] 73 | }, 74 | "resolutions": { 75 | "@daybrush/utils": "^1.11.0", 76 | "@types/react": "^16.9.17", 77 | "typescript": "^4.5.0 <4.6.0", 78 | "@egjs/agent": "^2.2.1", 79 | "@egjs/children-differ": "^1.0.1", 80 | "@scena/dragscroll": "^1.2.0", 81 | "@scena/matrix": "^1.1.1", 82 | "css-to-mat": "^1.0.3", 83 | "framework-utils": "^1.1.0", 84 | "gesto": "^1.12.2", 85 | "overlap-area": "^1.1.0", 86 | "tslib": "^2.3.0" 87 | }, 88 | "overrides": { 89 | "@daybrush/utils": "^1.11.0", 90 | "@types/react": "^16.9.17", 91 | "typescript": "^4.5.0 <4.6.0", 92 | "@egjs/agent": "^2.2.1", 93 | "@egjs/children-differ": "^1.0.1", 94 | "@scena/dragscroll": "^1.2.0", 95 | "@scena/matrix": "^1.1.1", 96 | "css-to-mat": "^1.0.3", 97 | "framework-utils": "^1.1.0", 98 | "gesto": "^1.12.2", 99 | "overlap-area": "^1.1.0", 100 | "tslib": "^2.3.0" 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /packages/ngx-ruler/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-ruler-project": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:application": { 10 | "strict": true 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/ngx-ruler-project", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "assets": [ 26 | "src/favicon.ico", 27 | "src/assets" 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kb", 40 | "maximumError": "1mb" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kb", 45 | "maximumError": "4kb" 46 | } 47 | ], 48 | "fileReplacements": [ 49 | { 50 | "replace": "src/environments/environment.ts", 51 | "with": "src/environments/environment.prod.ts" 52 | } 53 | ], 54 | "outputHashing": "all" 55 | }, 56 | "development": { 57 | "buildOptimizer": false, 58 | "optimization": false, 59 | "vendorChunk": true, 60 | "extractLicenses": false, 61 | "sourceMap": true, 62 | "namedChunks": true 63 | } 64 | }, 65 | "defaultConfiguration": "production" 66 | }, 67 | "serve": { 68 | "builder": "@angular-devkit/build-angular:dev-server", 69 | "configurations": { 70 | "production": { 71 | "browserTarget": "ngx-ruler-project:build:production" 72 | }, 73 | "development": { 74 | "browserTarget": "ngx-ruler-project:build:development" 75 | } 76 | }, 77 | "defaultConfiguration": "development" 78 | }, 79 | "extract-i18n": { 80 | "builder": "@angular-devkit/build-angular:extract-i18n", 81 | "options": { 82 | "browserTarget": "ngx-ruler-project:build" 83 | } 84 | }, 85 | "test": { 86 | "builder": "@angular-devkit/build-angular:karma", 87 | "options": { 88 | "main": "src/test.ts", 89 | "polyfills": "src/polyfills.ts", 90 | "tsConfig": "tsconfig.spec.json", 91 | "karmaConfig": "karma.conf.js", 92 | "assets": [ 93 | "src/favicon.ico", 94 | "src/assets" 95 | ], 96 | "styles": [ 97 | "src/styles.css" 98 | ], 99 | "scripts": [] 100 | } 101 | } 102 | } 103 | }, 104 | "ngx-ruler": { 105 | "projectType": "library", 106 | "root": "projects/ngx-ruler", 107 | "sourceRoot": "projects/ngx-ruler/src", 108 | "prefix": "lib", 109 | "architect": { 110 | "build": { 111 | "builder": "@angular-devkit/build-angular:ng-packagr", 112 | "options": { 113 | "project": "projects/ngx-ruler/ng-package.json" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "tsConfig": "projects/ngx-ruler/tsconfig.lib.prod.json" 118 | }, 119 | "development": { 120 | "tsConfig": "projects/ngx-ruler/tsconfig.lib.json" 121 | } 122 | }, 123 | "defaultConfiguration": "production" 124 | }, 125 | "test": { 126 | "builder": "@angular-devkit/build-angular:karma", 127 | "options": { 128 | "main": "projects/ngx-ruler/src/test.ts", 129 | "tsConfig": "projects/ngx-ruler/tsconfig.spec.json", 130 | "karmaConfig": "projects/ngx-ruler/karma.conf.js" 131 | } 132 | } 133 | } 134 | } 135 | }, 136 | "defaultProject": "ngx-ruler-project" 137 | } 138 | -------------------------------------------------------------------------------- /packages/svelte-ruler/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

Svelte Ruler

5 |

6 | npm version 7 | 8 | 9 | React 10 | Preact 11 | Angular 12 | Vue 15 | Vue 18 |

19 |

A Svelte Ruler component that can draw grids and scroll infinitely.

20 |

21 | Demo / 22 | API / 23 | Guides / 24 | Main Project 25 |

26 | 27 | 28 | ## ⚙️ Installation 29 | ### npm 30 | ```sh 31 | $ npm i svelte-ruler 32 | ``` 33 | 34 | ## 🚀 How to use 35 | ```html 36 | 50 |
51 | 52 |
53 | 54 | ``` 55 | 56 | 57 | 58 | ## ⚙️ Developments 59 | ### `npm run dev` 60 | 61 | Runs the app in the development mode.
62 | Open [http://localhost:5000](http://localhost:5000) to view it in the browser. 63 | 64 | The page will reload if you make edits.
65 | You will also see any lint errors in the console. 66 | 67 | 68 | 69 | ## ⭐️ Show Your Support 70 | Please give a ⭐️ if this project helped you! 71 | 72 | ## 👏 Contributing 73 | 74 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 75 | 76 | ## 🐞 Bug Report 77 | 78 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 79 | 80 | 81 | ## 📝 License 82 | 83 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 84 | 85 | ``` 86 | MIT License 87 | 88 | Copyright (c) 2019 Daybrush 89 | 90 | Permission is hereby granted, free of charge, to any person obtaining a copy 91 | of this software and associated documentation files (the "Software"), to deal 92 | in the Software without restriction, including without limitation the rights 93 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 94 | copies of the Software, and to permit persons to whom the Software is 95 | furnished to do so, subject to the following conditions: 96 | 97 | The above copyright notice and this permission notice shall be included in all 98 | copies or substantial portions of the Software. 99 | 100 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 101 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 102 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 103 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 104 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 105 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 106 | SOFTWARE. 107 | ``` 108 | -------------------------------------------------------------------------------- /packages/vue-ruler/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

Vue Ruler

5 |

6 | npm version 7 | 8 | 9 | React 10 | Preact 11 | Angular 12 | Vue 15 | Vue 18 |

19 |

A Vue Ruler component that can draw grids and scroll infinitely.

20 |

21 | Demo / 22 | API / 23 | Guides / 24 | Main Project 25 |

26 | 27 | 28 | ## ⚙️ Installation 29 | ### npm 30 | ```sh 31 | $ npm i @scena/vue-ruler 32 | ``` 33 | 34 | ## 🚀 How to use 35 | ```html 36 | 41 | 56 | ``` 57 | 58 | 59 | ## ⚙️ Developments 60 | ### `npm run serve` 61 | 62 | Runs the app in the development mode.
63 | Open [http://localhost:8080](http://localhost:8080) to view it in the browser. 64 | 65 | The page will reload if you make edits.
66 | You will also see any lint errors in the console. 67 | 68 | 69 | 70 | ## ⭐️ Show Your Support 71 | Please give a ⭐️ if this project helped you! 72 | 73 | ## 👏 Contributing 74 | 75 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 76 | 77 | ## 🐞 Bug Report 78 | 79 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 80 | 81 | 82 | ## 📝 License 83 | 84 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 85 | 86 | ``` 87 | MIT License 88 | 89 | Copyright (c) 2019 Daybrush 90 | 91 | Permission is hereby granted, free of charge, to any person obtaining a copy 92 | of this software and associated documentation files (the "Software"), to deal 93 | in the Software without restriction, including without limitation the rights 94 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 95 | copies of the Software, and to permit persons to whom the Software is 96 | furnished to do so, subject to the following conditions: 97 | 98 | The above copyright notice and this permission notice shall be included in all 99 | copies or substantial portions of the Software. 100 | 101 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 102 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 103 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 104 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 105 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 106 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 107 | SOFTWARE. 108 | ``` 109 | 110 | -------------------------------------------------------------------------------- /packages/preact-ruler/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

Preact Ruler

5 |

6 | npm version 7 | 8 | 9 | React 10 | Preact 11 | Angular 12 | Vue 15 | Vue 18 |

19 |

A Preact Ruler component that can draw grids and scroll infinitely.

20 |

21 | Demo / 22 | API / 23 | Guides / 24 | Main Project 25 |

26 | 27 | 28 | ## ⚙️ Installation 29 | ### npm 30 | ```sh 31 | $ npm i preact-ruler 32 | ``` 33 | 34 | ## 🚀 How to use 35 | ```tsx 36 | 37 | import * as Peact from "preact"; 38 | import Ruler from "preact-ruler"; 39 | 40 | export default class App extends Peact.Component { 41 | render() { 42 | return ( { 43 | this.ruler = e; 44 | }}/>); 45 | } 46 | componentDidMount() { 47 | this.ruler.resize(); 48 | 49 | window.addEventListener("resize", () => { 50 | this.ruler.resize(); 51 | }); 52 | } 53 | } 54 | 55 | export interface RulerInterface { 56 | scroll(scrollPos: number): any; 57 | resize(): any; 58 | } 59 | export interface RulerProps { 60 | type?: "horizontal" | "vertical"; 61 | width?: number; 62 | height?: number; 63 | unit?: number; 64 | zoom?: number; 65 | direction?: "start" | "end"; 66 | style?: IObject; 67 | backgroundColor?: string; 68 | lineColor?: string; 69 | textColor?: string; 70 | textFormat?: (scale: number) => string; 71 | } 72 | 73 | ``` 74 | 75 | 76 | 77 | ## ⚙️ Developments 78 | ### `npm start` 79 | 80 | Runs the app in the development mode.
81 | Open `demo/index.html` file. 82 | 83 | 84 | ## ⭐️ Show Your Support 85 | Please give a ⭐️ if this project helped you! 86 | 87 | ## 👏 Contributing 88 | 89 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 90 | 91 | ## 🐞 Bug Report 92 | 93 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 94 | 95 | 96 | ## 📝 License 97 | 98 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 99 | 100 | ``` 101 | MIT License 102 | 103 | Copyright (c) 2019 Daybrush 104 | 105 | Permission is hereby granted, free of charge, to any person obtaining a copy 106 | of this software and associated documentation files (the "Software"), to deal 107 | in the Software without restriction, including without limitation the rights 108 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 109 | copies of the Software, and to permit persons to whom the Software is 110 | furnished to do so, subject to the following conditions: 111 | 112 | The above copyright notice and this permission notice shall be included in all 113 | copies or substantial portions of the Software. 114 | 115 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 116 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 117 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 118 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 119 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 120 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 121 | SOFTWARE. 122 | ``` 123 | -------------------------------------------------------------------------------- /packages/ruler/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Ruler

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Vue 17 |

18 |

A Ruler component that can draw grids and scroll infinitely.

19 |

20 | Demo / 21 | API / 22 | Guides / 23 | Main Project 24 |

25 | 26 | 27 | ## ⚙️ Installation 28 | ### npm 29 | ```sh 30 | $ npm i @scena/ruler 31 | ``` 32 | 33 | ### scripts 34 | ```html 35 | 36 | ``` 37 | 38 | 39 | ## 🚀 How to use 40 | ```ts 41 | import Ruler from "@scena/ruler"; 42 | 43 | const ruler = new Ruler(document.body, { 44 | type: "horizontal", 45 | }); 46 | 47 | 48 | window.addEventListener("resize", () => { 49 | ruler.resize(); 50 | }); 51 | 52 | export interface RulerInterface { 53 | scroll(scrollPos: number): any; 54 | resize(): any; 55 | } 56 | export interface RulerProps { 57 | type?: "horizontal" | "vertical"; 58 | width?: number; 59 | height?: number; 60 | unit?: number; 61 | zoom?: number; 62 | direction?: "start" | "end"; 63 | style?: IObject; 64 | backgroundColor?: string; 65 | lineColor?: string; 66 | textColor?: string; 67 | textFormat?: (scale: number) => string; 68 | } 69 | ``` 70 | ### Ruler Units 71 | 72 | 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: 73 | 74 | * 1px (Default) 75 | * zoom: 1 76 | * unit: 50 (every 50px) 77 | * 1cm = 37.7952px 78 | * zoom: 37.7952 79 | * unit: 1 (every 1cm) 80 | * 1in = 96px = 2.54cm 81 | * zoom: 96 82 | * unit: 1 (every 1in) 83 | 84 | ## ⭐️ Show Your Support 85 | Please give a ⭐️ if this project helped you! 86 | 87 | ## 👏 Contributing 88 | 89 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 90 | 91 | ## 🐞 Bug Report 92 | 93 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 94 | 95 | 96 | ## 📝 License 97 | 98 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 99 | 100 | ``` 101 | MIT License 102 | 103 | Copyright (c) 2019 Daybrush 104 | 105 | Permission is hereby granted, free of charge, to any person obtaining a copy 106 | of this software and associated documentation files (the "Software"), to deal 107 | in the Software without restriction, including without limitation the rights 108 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 109 | copies of the Software, and to permit persons to whom the Software is 110 | furnished to do so, subject to the following conditions: 111 | 112 | The above copyright notice and this permission notice shall be included in all 113 | copies or substantial portions of the Software. 114 | 115 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 116 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 117 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 118 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 119 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 120 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 121 | SOFTWARE. 122 | ``` 123 | -------------------------------------------------------------------------------- /packages/ngx-ruler/projects/ngx-ruler/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.19.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.18.0...ngx-ruler@0.19.0) (2023-06-02) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * publish packages ([6cb44f9](https://github.com/daybrush/ruler/commit/6cb44f944747a2ff008011bae638fa52cc860c93)) 12 | 13 | 14 | 15 | ## [0.18.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.6...ngx-ruler@0.18.0) (2023-06-01) 16 | 17 | 18 | ### :mega: Other 19 | 20 | * publish packages ([2628b3d](https://github.com/daybrush/ruler/commit/2628b3db856e066d8ede8eaca3281de61c10c27b)) 21 | 22 | 23 | 24 | ## [0.17.6](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.5...ngx-ruler@0.17.6) (2023-05-15) 25 | 26 | 27 | ### :mega: Other 28 | 29 | * update croact version ([852caef](https://github.com/daybrush/ruler/commit/852caef635a0cacf95b4702cd4c72fb6cac516c2)) 30 | 31 | 32 | 33 | ## [0.17.5](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.3...ngx-ruler@0.17.5) (2023-05-15) 34 | 35 | 36 | ### :bug: Bug Fix 37 | 38 | * update dependency modules ([e2f4602](https://github.com/daybrush/ruler/commit/e2f4602432d64f316a2c41bb9421b7665f72d7f6)) 39 | 40 | 41 | ### :mega: Other 42 | 43 | * update croact veresion ([f252b98](https://github.com/daybrush/ruler/commit/f252b9872924ad02e3d1efdf012bf6c55933408b)) 44 | 45 | 46 | 47 | ## [0.17.3](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.2...ngx-ruler@0.17.3) (2023-04-11) 48 | 49 | 50 | ### :bug: Bug Fix 51 | 52 | * fix createElement canvas #40 ([8fe015c](https://github.com/daybrush/ruler/commit/8fe015ce7c6258c718f74747b6bc0431fcd22842)) 53 | 54 | 55 | 56 | ## [0.17.2](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.1...ngx-ruler@0.17.2) (2023-04-10) 57 | 58 | 59 | ### :mega: Other 60 | 61 | * update packages ([c9ffdbb](https://github.com/daybrush/ruler/commit/c9ffdbb6524f80ed5213ff778dafa62f4a1f9353)) 62 | 63 | 64 | 65 | ## [0.17.1](https://github.com/daybrush/ruler/compare/ngx-ruler@0.17.0...ngx-ruler@0.17.1) (2023-04-08) 66 | 67 | 68 | ### :mega: Other 69 | 70 | * publish packages ([2c6bfa0](https://github.com/daybrush/ruler/commit/2c6bfa0cda3df3a361f48163d9a7f1ada6cccb59)) 71 | 72 | 73 | 74 | ## [0.17.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.16.0...ngx-ruler@0.17.0) (2023-04-08) 75 | 76 | 77 | ### :mega: Other 78 | 79 | * publish packages ([65c88e8](https://github.com/daybrush/ruler/commit/65c88e87316850f2cd0cd56a1c4a7f9d1131355b)) 80 | 81 | 82 | 83 | ## [0.16.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.15.0...ngx-ruler@0.16.0) (2023-04-06) 84 | 85 | 86 | ### :rocket: New Features 87 | 88 | * add croact-ruler ([2d0361e](https://github.com/daybrush/ruler/commit/2d0361e403c0b51f135558add86296a509e3ec9b)) 89 | 90 | 91 | ### :mega: Other 92 | 93 | * publish packages ([9775d43](https://github.com/daybrush/ruler/commit/9775d43ce6b04033141c394aa8c7ca3288238588)) 94 | 95 | 96 | 97 | ## [0.15.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.14.2...ngx-ruler@0.15.0) (2023-03-04) 98 | 99 | 100 | ### :mega: Other 101 | 102 | * publish packages ([80d6f11](https://github.com/daybrush/ruler/commit/80d6f1176e755cce1b4bcc044b4e6574b8118c01)) 103 | 104 | 105 | 106 | ## [0.14.2](https://github.com/daybrush/ruler/compare/ngx-ruler@0.14.1...ngx-ruler@0.14.2) (2023-01-27) 107 | 108 | 109 | ### :mega: Other 110 | 111 | * publish packages ([c9e29b5](https://github.com/daybrush/ruler/commit/c9e29b51d433abd63c4b684cab25c5319a0c4273)) 112 | 113 | 114 | 115 | ## [0.14.1](https://github.com/daybrush/ruler/compare/ngx-ruler@0.14.0...ngx-ruler@0.14.1) (2023-01-20) 116 | 117 | 118 | ### :mega: Other 119 | 120 | * publish packages ([2d2d96a](https://github.com/daybrush/ruler/commit/2d2d96ac218d45278ebfecdd52424a60a2da1ec9)) 121 | 122 | 123 | 124 | ## [0.14.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.13.0...ngx-ruler@0.14.0) (2023-01-20) 125 | 126 | 127 | ### :mega: Other 128 | 129 | * publish packages ([b7f8d2a](https://github.com/daybrush/ruler/commit/b7f8d2a3041202dd89c3da14a7e93cd6ace206bb)) 130 | 131 | 132 | 133 | ## [0.13.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.12.2...ngx-ruler@0.13.0) (2023-01-12) 134 | 135 | 136 | ### :mega: Other 137 | 138 | * publish packages ([6e41e5f](https://github.com/daybrush/ruler/commit/6e41e5f910f84f68b8db80b493a8c683ab755381)) 139 | 140 | 141 | 142 | ## [0.12.2](https://github.com/daybrush/ruler/compare/ngx-ruler@0.12.0...ngx-ruler@0.12.2) (2022-11-12) 143 | 144 | 145 | ### :mega: Other 146 | 147 | * publish packages ([3334cf1](https://github.com/daybrush/ruler/commit/3334cf1ad0f2bdd66d4a1a6fc26202f026077671)) 148 | * publish packages ([4ceff62](https://github.com/daybrush/ruler/commit/4ceff62e5224779578e61a4e3b0362f6597feecf)) 149 | 150 | 151 | 152 | ## [0.12.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.11.0...ngx-ruler@0.12.0) (2022-11-06) 153 | 154 | 155 | ### :mega: Other 156 | 157 | * publish packages ([de112ef](https://github.com/daybrush/ruler/commit/de112ef49f2b4063a0b8e810abff0d646da5c3d1)) 158 | 159 | 160 | 161 | ## [0.11.0](https://github.com/daybrush/ruler/compare/ngx-ruler@0.10.0...ngx-ruler@0.11.0) (2022-09-21) 162 | 163 | 164 | ### :mega: Other 165 | 166 | * publish packages ([9dc9493](https://github.com/daybrush/ruler/commit/9dc9493020206310eb807d7c6d52e9b683f23723)) 167 | -------------------------------------------------------------------------------- /packages/react-ruler/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 |

React Ruler

5 |

6 | npm version 7 | 8 | 9 | React 10 | Preact 11 | Angular 12 | Vue 15 | Vue 18 |

19 |

A React Ruler component that can draw grids and scroll infinitely.

20 |

21 | Demo / 22 | API / 23 | Guides / 24 | Main Project 25 |

26 | 27 | 28 | ## ⚙️ Installation 29 | ### npm 30 | ```sh 31 | $ npm i @scena/react-ruler 32 | ``` 33 | 34 | ## 🚀 How to use 35 | ```tsx 36 | 37 | import * as React from "react"; 38 | import Ruler from "@scena/react-ruler"; 39 | 40 | export default class App extends React.Component { 41 | render() { 42 | return ( { 43 | this.ruler = e; 44 | }}/>); 45 | } 46 | componentDidMount() { 47 | this.ruler.resize(); 48 | 49 | window.addEventListener("resize", () => { 50 | this.ruler.resize(); 51 | }); 52 | } 53 | } 54 | 55 | export interface RulerInterface { 56 | scroll(scrollPos: number): any; 57 | resize(): any; 58 | } 59 | export interface RulerProps { 60 | type?: "horizontal" | "vertical"; 61 | width?: number; 62 | height?: number; 63 | unit?: number; 64 | zoom?: number; 65 | direction?: "start" | "end"; 66 | style?: IObject; 67 | backgroundColor?: string; 68 | lineColor?: string; 69 | textColor?: string; 70 | textFormat?: (scale: number) => string; 71 | } 72 | 73 | 74 | ``` 75 | 76 | 77 | 78 | ## ⚙️ Developments 79 | ### `npm run start` 80 | 81 | Runs the app in the development mode.
82 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 83 | 84 | The page will reload if you make edits.
85 | You will also see any lint errors in the console. 86 | 87 | 88 | 89 | ## ⭐️ Show Your Support 90 | Please give a ⭐️ if this project helped you! 91 | 92 | ## 👏 Contributing 93 | 94 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 95 | 96 | ## 🐞 Bug Report 97 | 98 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 99 | 100 | 101 | ## 📝 License 102 | 103 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 104 | 105 | ``` 106 | MIT License 107 | 108 | Copyright (c) 2019 Daybrush 109 | 110 | Permission is hereby granted, free of charge, to any person obtaining a copy 111 | of this software and associated documentation files (the "Software"), to deal 112 | in the Software without restriction, including without limitation the rights 113 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 114 | copies of the Software, and to permit persons to whom the Software is 115 | furnished to do so, subject to the following conditions: 116 | 117 | The above copyright notice and this permission notice shall be included in all 118 | copies or substantial portions of the Software. 119 | 120 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 121 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 122 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 123 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 124 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 125 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 126 | SOFTWARE. 127 | ``` 128 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 |

Ruler

4 |

5 | npm version 6 | 7 | 8 | React 9 | Preact 10 | Angular 11 | Vue 14 | Vue 17 |

18 |

A Ruler component that can draw grids and scroll infinitely.

19 |

20 | Demo / 21 | API / 22 | Guides / 23 | Main Project 24 |

25 | 26 | 27 | ## ⚙️ Installation 28 | ### npm 29 | ```sh 30 | $ npm i @scena/ruler 31 | ``` 32 | 33 | ### scripts 34 | ```html 35 | 36 | ``` 37 | 38 | 39 | ## 🚀 How to use 40 | ```ts 41 | import Ruler from "@scena/ruler"; 42 | 43 | const ruler = new Ruler(document.body, { 44 | type: "horizontal", 45 | }); 46 | 47 | 48 | window.addEventListener("resize", () => { 49 | ruler.resize(); 50 | }); 51 | 52 | export interface RulerInterface { 53 | scroll(scrollPos: number): any; 54 | resize(): any; 55 | } 56 | export interface RulerProps { 57 | type?: "horizontal" | "vertical"; 58 | width?: number; 59 | height?: number; 60 | unit?: number; 61 | zoom?: number; 62 | direction?: "start" | "end"; 63 | style?: IObject; 64 | backgroundColor?: string; 65 | lineColor?: string; 66 | textColor?: string; 67 | textFormat?: (scale: number) => string; 68 | } 69 | ``` 70 | ### Ruler Units 71 | 72 | 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: 73 | 74 | * 1px (Default) 75 | * zoom: 1 76 | * unit: 50 (every 50px) 77 | * 1cm = 37.7952px 78 | * zoom: 37.7952 79 | * unit: 1 (every 1cm) 80 | * 1in = 96px = 2.54cm 81 | * zoom: 96 82 | * unit: 1 (every 1in) 83 | 84 | 85 | 86 | ## ⚙️ Developments 87 | The `ruler` repo is managed as a [monorepo](https://github.com/lerna/lerna) with `yarn`. 88 | 89 | ```sh 90 | yarn config set registry https://registry.npmjs.org/ 91 | ``` 92 | 93 | ## ⭐️ Show Your Support 94 | Please give a ⭐️ if this project helped you! 95 | 96 | ## 👏 Contributing 97 | 98 | If you have any questions or requests or want to contribute to `ruler` or other packages, please write the [issue](https://github.com/daybrush/ruler/issues) or give me a Pull Request freely. 99 | 100 | ## 🐞 Bug Report 101 | 102 | If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/ruler/issues) on GitHub. 103 | 104 | 105 | ## 📝 License 106 | 107 | This project is [MIT](https://github.com/daybrush/ruler/blob/master/LICENSE) licensed. 108 | 109 | ``` 110 | MIT License 111 | 112 | Copyright (c) 2019 Daybrush 113 | 114 | Permission is hereby granted, free of charge, to any person obtaining a copy 115 | of this software and associated documentation files (the "Software"), to deal 116 | in the Software without restriction, including without limitation the rights 117 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 118 | copies of the Software, and to permit persons to whom the Software is 119 | furnished to do so, subject to the following conditions: 120 | 121 | The above copyright notice and this permission notice shall be included in all 122 | copies or substantial portions of the Software. 123 | 124 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 125 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 126 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 127 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 128 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 129 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 130 | SOFTWARE. 131 | ``` 132 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | A Ruler component that can draw grids and scroll infinitely. 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 | 28 |
29 | ruler 30 |

Drag Screen!

31 |

32 | 33 | npm version 35 | 36 | 37 | 38 | 39 | 40 | 41 | 43 | 44 | React 47 | Preact 50 | Angular 53 | Vue 55 | Svelte 58 |

59 |

A Ruler component that can draw grids and scroll infinitely.

60 |
61 | API 62 | Download 63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 | 93 | 94 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /packages/svelte-ruler/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src/**/*"], 3 | "exclude": ["node_modules/*"], 4 | "compilerOptions": { 5 | /* Basic Options */ 6 | "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 7 | "module": "ESNEXT", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 8 | // "lib": [], /* Specify library files to be included in the compilation. */ 9 | // "allowJs": true, /* Allow javascript files to be compiled. */ 10 | // "checkJs": true, /* Report errors in .js files. */ 11 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 12 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 13 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 14 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 15 | // "outFile": "./", /* Concatenate and emit output to single file. */ 16 | // "outDir": "./", /* Redirect output structure to the directory. */ 17 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 18 | // "composite": true, /* Enable project compilation */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | "types": ["svelte"], /* Type declaration files to be included in compilation. */ 48 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | 52 | /* Source Map Options */ 53 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 54 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 55 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 56 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 57 | 58 | /* Experimental Options */ 59 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 60 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /packages/svelte-ruler/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.19.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.18.0...svelte-ruler@0.19.0) (2023-06-02) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * publish packages ([6cb44f9](https://github.com/daybrush/ruler/commit/6cb44f944747a2ff008011bae638fa52cc860c93)) 12 | 13 | 14 | 15 | ## [0.18.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.6...svelte-ruler@0.18.0) (2023-06-01) 16 | 17 | 18 | ### :rocket: New Features 19 | 20 | * support svelte types ([4498bc5](https://github.com/daybrush/ruler/commit/4498bc548ac2baa3eaca619b4e3d10463030abc3)) 21 | 22 | 23 | ### :mega: Other 24 | 25 | * publish packages ([2628b3d](https://github.com/daybrush/ruler/commit/2628b3db856e066d8ede8eaca3281de61c10c27b)) 26 | 27 | 28 | 29 | ## [0.17.6](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.5...svelte-ruler@0.17.6) (2023-05-15) 30 | 31 | 32 | ### :mega: Other 33 | 34 | * update croact version ([852caef](https://github.com/daybrush/ruler/commit/852caef635a0cacf95b4702cd4c72fb6cac516c2)) 35 | 36 | 37 | 38 | ## [0.17.5](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.3...svelte-ruler@0.17.5) (2023-05-15) 39 | 40 | 41 | ### :bug: Bug Fix 42 | 43 | * update dependency modules ([e2f4602](https://github.com/daybrush/ruler/commit/e2f4602432d64f316a2c41bb9421b7665f72d7f6)) 44 | 45 | 46 | ### :mega: Other 47 | 48 | * update croact veresion ([f252b98](https://github.com/daybrush/ruler/commit/f252b9872924ad02e3d1efdf012bf6c55933408b)) 49 | 50 | 51 | 52 | ## [0.17.3](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.2...svelte-ruler@0.17.3) (2023-04-11) 53 | 54 | 55 | ### :bug: Bug Fix 56 | 57 | * fix createElement canvas #40 ([8fe015c](https://github.com/daybrush/ruler/commit/8fe015ce7c6258c718f74747b6bc0431fcd22842)) 58 | 59 | 60 | 61 | ## [0.17.2](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.1...svelte-ruler@0.17.2) (2023-04-10) 62 | 63 | 64 | ### :mega: Other 65 | 66 | * update packages ([c9ffdbb](https://github.com/daybrush/ruler/commit/c9ffdbb6524f80ed5213ff778dafa62f4a1f9353)) 67 | 68 | 69 | 70 | ## [0.17.1](https://github.com/daybrush/ruler/compare/svelte-ruler@0.17.0...svelte-ruler@0.17.1) (2023-04-08) 71 | 72 | 73 | ### :mega: Other 74 | 75 | * publish packages ([2c6bfa0](https://github.com/daybrush/ruler/commit/2c6bfa0cda3df3a361f48163d9a7f1ada6cccb59)) 76 | 77 | 78 | 79 | ## [0.17.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.16.0...svelte-ruler@0.17.0) (2023-04-08) 80 | 81 | 82 | ### :mega: Other 83 | 84 | * publish packages ([65c88e8](https://github.com/daybrush/ruler/commit/65c88e87316850f2cd0cd56a1c4a7f9d1131355b)) 85 | 86 | 87 | 88 | ## [0.16.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.15.0...svelte-ruler@0.16.0) (2023-04-06) 89 | 90 | 91 | ### :rocket: New Features 92 | 93 | * add croact-ruler ([2d0361e](https://github.com/daybrush/ruler/commit/2d0361e403c0b51f135558add86296a509e3ec9b)) 94 | 95 | 96 | ### :mega: Other 97 | 98 | * publish packages ([9775d43](https://github.com/daybrush/ruler/commit/9775d43ce6b04033141c394aa8c7ca3288238588)) 99 | 100 | 101 | 102 | ## [0.15.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.14.2...svelte-ruler@0.15.0) (2023-03-04) 103 | 104 | 105 | ### :mega: Other 106 | 107 | * publish packages ([80d6f11](https://github.com/daybrush/ruler/commit/80d6f1176e755cce1b4bcc044b4e6574b8118c01)) 108 | 109 | 110 | 111 | ## [0.14.2](https://github.com/daybrush/ruler/compare/svelte-ruler@0.14.1...svelte-ruler@0.14.2) (2023-01-27) 112 | 113 | 114 | ### :mega: Other 115 | 116 | * publish packages ([c9e29b5](https://github.com/daybrush/ruler/commit/c9e29b51d433abd63c4b684cab25c5319a0c4273)) 117 | 118 | 119 | 120 | ## [0.14.1](https://github.com/daybrush/ruler/compare/svelte-ruler@0.14.0...svelte-ruler@0.14.1) (2023-01-20) 121 | 122 | 123 | ### :mega: Other 124 | 125 | * publish packages ([2d2d96a](https://github.com/daybrush/ruler/commit/2d2d96ac218d45278ebfecdd52424a60a2da1ec9)) 126 | 127 | 128 | 129 | ## [0.14.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.13.0...svelte-ruler@0.14.0) (2023-01-20) 130 | 131 | 132 | ### :mega: Other 133 | 134 | * publish packages ([b7f8d2a](https://github.com/daybrush/ruler/commit/b7f8d2a3041202dd89c3da14a7e93cd6ace206bb)) 135 | 136 | 137 | 138 | ## [0.13.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.12.2...svelte-ruler@0.13.0) (2023-01-12) 139 | 140 | 141 | ### :mega: Other 142 | 143 | * publish packages ([6e41e5f](https://github.com/daybrush/ruler/commit/6e41e5f910f84f68b8db80b493a8c683ab755381)) 144 | 145 | 146 | 147 | ## [0.12.2](https://github.com/daybrush/ruler/compare/svelte-ruler@0.12.0...svelte-ruler@0.12.2) (2022-11-12) 148 | 149 | 150 | ### :bug: Bug Fix 151 | 152 | * fix comments, files property ([d8bc095](https://github.com/daybrush/ruler/commit/d8bc095c5e25e630d720c7b255cf4b42ada6c582)) 153 | 154 | 155 | ### :mega: Other 156 | 157 | * publish packages ([3334cf1](https://github.com/daybrush/ruler/commit/3334cf1ad0f2bdd66d4a1a6fc26202f026077671)) 158 | * publish packages ([4ceff62](https://github.com/daybrush/ruler/commit/4ceff62e5224779578e61a4e3b0362f6597feecf)) 159 | 160 | 161 | 162 | ## [0.12.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.11.0...svelte-ruler@0.12.0) (2022-11-06) 163 | 164 | 165 | ### :mega: Other 166 | 167 | * publish packages ([de112ef](https://github.com/daybrush/ruler/commit/de112ef49f2b4063a0b8e810abff0d646da5c3d1)) 168 | 169 | 170 | 171 | ## [0.11.0](https://github.com/daybrush/ruler/compare/svelte-ruler@0.10.0...svelte-ruler@0.11.0) (2022-09-21) 172 | 173 | 174 | ### :mega: Other 175 | 176 | * publish packages ([9dc9493](https://github.com/daybrush/ruler/commit/9dc9493020206310eb807d7c6d52e9b683f23723)) 177 | -------------------------------------------------------------------------------- /packages/svelte-ruler/src/App.svelte: -------------------------------------------------------------------------------- 1 | 34 | 149 |
150 |
151 |
152 | 153 |
154 | ruler 155 |

Drag Screen!

156 |

157 | 158 | npm version 160 | 161 | 162 | 163 | 164 | 165 | 166 | 168 | 169 | React 171 | Preact 173 | Angular 175 | Vue 177 | Svelte 179 |

180 |

A Ruler component that can draw grids and scroll infinitely.

181 |
182 | Download 183 | 184 |
185 |
186 | -------------------------------------------------------------------------------- /packages/vue-ruler/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.18.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.17.0...@scena/vue-ruler@0.18.0) (2023-06-02) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * publish packages ([6cb44f9](https://github.com/daybrush/ruler/commit/6cb44f944747a2ff008011bae638fa52cc860c93)) 12 | 13 | 14 | 15 | ## [0.17.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.6...@scena/vue-ruler@0.17.0) (2023-06-01) 16 | 17 | 18 | ### :mega: Other 19 | 20 | * publish packages ([2628b3d](https://github.com/daybrush/ruler/commit/2628b3db856e066d8ede8eaca3281de61c10c27b)) 21 | 22 | 23 | 24 | ## [0.16.6](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.5...@scena/vue-ruler@0.16.6) (2023-05-15) 25 | 26 | 27 | ### :mega: Other 28 | 29 | * update croact version ([852caef](https://github.com/daybrush/ruler/commit/852caef635a0cacf95b4702cd4c72fb6cac516c2)) 30 | 31 | 32 | 33 | ## [0.16.5](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.3...@scena/vue-ruler@0.16.5) (2023-05-15) 34 | 35 | 36 | ### :bug: Bug Fix 37 | 38 | * update dependency modules ([e2f4602](https://github.com/daybrush/ruler/commit/e2f4602432d64f316a2c41bb9421b7665f72d7f6)) 39 | 40 | 41 | ### :mega: Other 42 | 43 | * update croact veresion ([f252b98](https://github.com/daybrush/ruler/commit/f252b9872924ad02e3d1efdf012bf6c55933408b)) 44 | 45 | 46 | 47 | ## [0.16.3](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.2...@scena/vue-ruler@0.16.3) (2023-04-11) 48 | 49 | 50 | ### :bug: Bug Fix 51 | 52 | * fix createElement canvas #40 ([8fe015c](https://github.com/daybrush/ruler/commit/8fe015ce7c6258c718f74747b6bc0431fcd22842)) 53 | 54 | 55 | 56 | ## [0.16.2](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.1...@scena/vue-ruler@0.16.2) (2023-04-10) 57 | 58 | 59 | ### :mega: Other 60 | 61 | * update packages ([c9ffdbb](https://github.com/daybrush/ruler/commit/c9ffdbb6524f80ed5213ff778dafa62f4a1f9353)) 62 | 63 | 64 | 65 | ## [0.16.1](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.16.0...@scena/vue-ruler@0.16.1) (2023-04-08) 66 | 67 | 68 | ### :mega: Other 69 | 70 | * publish packages ([2c6bfa0](https://github.com/daybrush/ruler/commit/2c6bfa0cda3df3a361f48163d9a7f1ada6cccb59)) 71 | 72 | 73 | 74 | ## [0.16.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.15.0...@scena/vue-ruler@0.16.0) (2023-04-08) 75 | 76 | 77 | ### :mega: Other 78 | 79 | * publish packages ([65c88e8](https://github.com/daybrush/ruler/commit/65c88e87316850f2cd0cd56a1c4a7f9d1131355b)) 80 | 81 | 82 | 83 | ## [0.15.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.14.0...@scena/vue-ruler@0.15.0) (2023-04-06) 84 | 85 | 86 | ### :rocket: New Features 87 | 88 | * add croact-ruler ([2d0361e](https://github.com/daybrush/ruler/commit/2d0361e403c0b51f135558add86296a509e3ec9b)) 89 | 90 | 91 | ### :mega: Other 92 | 93 | * publish packages ([9775d43](https://github.com/daybrush/ruler/commit/9775d43ce6b04033141c394aa8c7ca3288238588)) 94 | 95 | 96 | 97 | ## [0.14.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.13.2...@scena/vue-ruler@0.14.0) (2023-03-04) 98 | 99 | 100 | ### :mega: Other 101 | 102 | * publish packages ([80d6f11](https://github.com/daybrush/ruler/commit/80d6f1176e755cce1b4bcc044b4e6574b8118c01)) 103 | 104 | 105 | 106 | ## [0.13.2](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.13.1...@scena/vue-ruler@0.13.2) (2023-01-27) 107 | 108 | 109 | ### :mega: Other 110 | 111 | * publish packages ([c9e29b5](https://github.com/daybrush/ruler/commit/c9e29b51d433abd63c4b684cab25c5319a0c4273)) 112 | 113 | 114 | 115 | ## [0.13.1](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.13.0...@scena/vue-ruler@0.13.1) (2023-01-20) 116 | 117 | 118 | ### :mega: Other 119 | 120 | * publish packages ([2d2d96a](https://github.com/daybrush/ruler/commit/2d2d96ac218d45278ebfecdd52424a60a2da1ec9)) 121 | 122 | 123 | 124 | ## [0.13.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.12.0...@scena/vue-ruler@0.13.0) (2023-01-20) 125 | 126 | 127 | ### :mega: Other 128 | 129 | * publish packages ([b7f8d2a](https://github.com/daybrush/ruler/commit/b7f8d2a3041202dd89c3da14a7e93cd6ace206bb)) 130 | 131 | 132 | 133 | ## [0.12.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.11.2...@scena/vue-ruler@0.12.0) (2023-01-12) 134 | 135 | 136 | ### :mega: Other 137 | 138 | * publish packages ([6e41e5f](https://github.com/daybrush/ruler/commit/6e41e5f910f84f68b8db80b493a8c683ab755381)) 139 | 140 | 141 | 142 | ## [0.11.2](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.11.0...@scena/vue-ruler@0.11.2) (2022-11-12) 143 | 144 | 145 | ### :bug: Bug Fix 146 | 147 | * fix comments, files property ([d8bc095](https://github.com/daybrush/ruler/commit/d8bc095c5e25e630d720c7b255cf4b42ada6c582)) 148 | * fix files field in package.json #33 ([0cd0888](https://github.com/daybrush/ruler/commit/0cd0888f667621af308fa9f3e3f1b51aadac3a29)) 149 | 150 | 151 | ### :mega: Other 152 | 153 | * publish packages ([3334cf1](https://github.com/daybrush/ruler/commit/3334cf1ad0f2bdd66d4a1a6fc26202f026077671)) 154 | * publish packages ([4ceff62](https://github.com/daybrush/ruler/commit/4ceff62e5224779578e61a4e3b0362f6597feecf)) 155 | 156 | 157 | 158 | ## [0.11.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.10.0...@scena/vue-ruler@0.11.0) (2022-11-06) 159 | 160 | 161 | ### :mega: Other 162 | 163 | * publish packages ([de112ef](https://github.com/daybrush/ruler/commit/de112ef49f2b4063a0b8e810abff0d646da5c3d1)) 164 | 165 | 166 | 167 | ## [0.10.0](https://github.com/daybrush/ruler/compare/@scena/vue-ruler@0.9.0...@scena/vue-ruler@0.10.0) (2022-09-21) 168 | 169 | 170 | ### :mega: Other 171 | 172 | * publish packages ([9dc9493](https://github.com/daybrush/ruler/commit/9dc9493020206310eb807d7c6d52e9b683f23723)) 173 | -------------------------------------------------------------------------------- /packages/react-ruler/src/demo/serviceWorker.ts: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === "localhost" || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === "[::1]" || 17 | // 127.0.0.1/8 is considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/, 20 | ), 21 | ); 22 | 23 | interface Config { 24 | onSuccess?: (registration: ServiceWorkerRegistration) => void; 25 | onUpdate?: (registration: ServiceWorkerRegistration) => void; 26 | } 27 | 28 | export function register(config?: Config) { 29 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { 30 | // The URL constructor is available in all browsers that support SW. 31 | const publicUrl = new URL( 32 | (process as { env: { [key: string]: string } }).env.PUBLIC_URL, 33 | window.location.href, 34 | ); 35 | if (publicUrl.origin !== window.location.origin) { 36 | // Our service worker won't work if PUBLIC_URL is on a different origin 37 | // from what our page is served on. This might happen if a CDN is used to 38 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 39 | return; 40 | } 41 | 42 | window.addEventListener("load", () => { 43 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 44 | 45 | if (isLocalhost) { 46 | // This is running on localhost. Let's check if a service worker still exists or not. 47 | checkValidServiceWorker(swUrl, config); 48 | 49 | // Add some additional logging to localhost, pointing developers to the 50 | // service worker/PWA documentation. 51 | navigator.serviceWorker.ready.then(() => { 52 | console.log( 53 | "This web app is being served cache-first by a service " + 54 | "worker. To learn more, visit https://bit.ly/CRA-PWA", 55 | ); 56 | }); 57 | } else { 58 | // Is not localhost. Just register service worker 59 | registerValidSW(swUrl, config); 60 | } 61 | }); 62 | } 63 | } 64 | 65 | function registerValidSW(swUrl: string, config?: Config) { 66 | navigator.serviceWorker 67 | .register(swUrl) 68 | .then(registration => { 69 | registration.onupdatefound = () => { 70 | const installingWorker = registration.installing; 71 | if (installingWorker == null) { 72 | return; 73 | } 74 | installingWorker.onstatechange = () => { 75 | if (installingWorker.state === "installed") { 76 | if (navigator.serviceWorker.controller) { 77 | // At this point, the updated precached content has been fetched, 78 | // but the previous service worker will still serve the older 79 | // content until all client tabs are closed. 80 | console.log( 81 | "New content is available and will be used when all " + 82 | "tabs for this page are closed. See https://bit.ly/CRA-PWA.", 83 | ); 84 | 85 | // Execute callback 86 | if (config && config.onUpdate) { 87 | config.onUpdate(registration); 88 | } 89 | } else { 90 | // At this point, everything has been precached. 91 | // It's the perfect time to display a 92 | // "Content is cached for offline use." message. 93 | console.log("Content is cached for offline use."); 94 | 95 | // Execute callback 96 | if (config && config.onSuccess) { 97 | config.onSuccess(registration); 98 | } 99 | } 100 | } 101 | }; 102 | }; 103 | }) 104 | .catch(error => { 105 | console.error("Error during service worker registration:", error); 106 | }); 107 | } 108 | 109 | function checkValidServiceWorker(swUrl: string, config?: Config) { 110 | // Check if the service worker can be found. If it can't reload the page. 111 | fetch(swUrl) 112 | .then(response => { 113 | // Ensure service worker exists, and that we really are getting a JS file. 114 | const contentType = response.headers.get("content-type"); 115 | if ( 116 | response.status === 404 || 117 | (contentType != null && contentType.indexOf("javascript") === -1) 118 | ) { 119 | // No service worker found. Probably a different app. Reload the page. 120 | navigator.serviceWorker.ready.then(registration => { 121 | registration.unregister().then(() => { 122 | window.location.reload(); 123 | }); 124 | }); 125 | } else { 126 | // Service worker found. Proceed as normal. 127 | registerValidSW(swUrl, config); 128 | } 129 | }) 130 | .catch(() => { 131 | console.log( 132 | "No internet connection found. App is running in offline mode.", 133 | ); 134 | }); 135 | } 136 | 137 | export function unregister() { 138 | if ("serviceWorker" in navigator) { 139 | navigator.serviceWorker.ready.then(registration => { 140 | registration.unregister(); 141 | }); 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /packages/ruler/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.20.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.19.0...@scena/ruler@0.20.0) (2023-06-02) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * publish packages ([6cb44f9](https://github.com/daybrush/ruler/commit/6cb44f944747a2ff008011bae638fa52cc860c93)) 12 | 13 | 14 | 15 | ## [0.19.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.6...@scena/ruler@0.19.0) (2023-06-01) 16 | 17 | 18 | ### :mega: Other 19 | 20 | * publish packages ([2628b3d](https://github.com/daybrush/ruler/commit/2628b3db856e066d8ede8eaca3281de61c10c27b)) 21 | 22 | 23 | 24 | ## [0.18.6](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.5...@scena/ruler@0.18.6) (2023-05-15) 25 | 26 | 27 | ### :mega: Other 28 | 29 | * update croact version ([852caef](https://github.com/daybrush/ruler/commit/852caef635a0cacf95b4702cd4c72fb6cac516c2)) 30 | 31 | 32 | 33 | ## [0.18.5](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.3...@scena/ruler@0.18.5) (2023-05-15) 34 | 35 | 36 | ### :bug: Bug Fix 37 | 38 | * update dependency modules ([e2f4602](https://github.com/daybrush/ruler/commit/e2f4602432d64f316a2c41bb9421b7665f72d7f6)) 39 | 40 | 41 | ### :mega: Other 42 | 43 | * update croact veresion ([f252b98](https://github.com/daybrush/ruler/commit/f252b9872924ad02e3d1efdf012bf6c55933408b)) 44 | 45 | 46 | 47 | ## [0.18.3](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.2...@scena/ruler@0.18.3) (2023-04-11) 48 | 49 | 50 | ### :bug: Bug Fix 51 | 52 | * fix createElement canvas #40 ([8fe015c](https://github.com/daybrush/ruler/commit/8fe015ce7c6258c718f74747b6bc0431fcd22842)) 53 | 54 | 55 | 56 | ## [0.18.2](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.1...@scena/ruler@0.18.2) (2023-04-10) 57 | 58 | 59 | ### :bug: Bug Fix 60 | 61 | * fix module name #40 ([c36f6fe](https://github.com/daybrush/ruler/commit/c36f6fe9c5b4eb04b3e0dbeca78dbaf126289178)) 62 | 63 | 64 | ### :mega: Other 65 | 66 | * update packages ([c9ffdbb](https://github.com/daybrush/ruler/commit/c9ffdbb6524f80ed5213ff778dafa62f4a1f9353)) 67 | 68 | 69 | 70 | ## [0.18.1](https://github.com/daybrush/ruler/compare/@scena/ruler@0.18.0...@scena/ruler@0.18.1) (2023-04-08) 71 | 72 | 73 | ### :mega: Other 74 | 75 | * publish packages ([2c6bfa0](https://github.com/daybrush/ruler/commit/2c6bfa0cda3df3a361f48163d9a7f1ada6cccb59)) 76 | 77 | 78 | 79 | ## [0.18.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.17.0...@scena/ruler@0.18.0) (2023-04-08) 80 | 81 | 82 | ### :rocket: New Features 83 | 84 | * add defaultScrollPos prop ([abd585b](https://github.com/daybrush/ruler/commit/abd585bda548be8384a644cd251e6678635fa8b4)) 85 | 86 | 87 | ### :mega: Other 88 | 89 | * publish packages ([65c88e8](https://github.com/daybrush/ruler/commit/65c88e87316850f2cd0cd56a1c4a7f9d1131355b)) 90 | 91 | 92 | 93 | ## [0.17.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.16.0...@scena/ruler@0.17.0) (2023-04-06) 94 | 95 | 96 | ### :rocket: New Features 97 | 98 | * add croact-ruler ([2d0361e](https://github.com/daybrush/ruler/commit/2d0361e403c0b51f135558add86296a509e3ec9b)) 99 | 100 | 101 | ### :mega: Other 102 | 103 | * publish packages ([9775d43](https://github.com/daybrush/ruler/commit/9775d43ce6b04033141c394aa8c7ca3288238588)) 104 | 105 | 106 | 107 | ## [0.16.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.15.2...@scena/ruler@0.16.0) (2023-03-04) 108 | 109 | 110 | ### :mega: Other 111 | 112 | * publish packages ([80d6f11](https://github.com/daybrush/ruler/commit/80d6f1176e755cce1b4bcc044b4e6574b8118c01)) 113 | 114 | 115 | 116 | ## [0.15.2](https://github.com/daybrush/ruler/compare/@scena/ruler@0.15.1...@scena/ruler@0.15.2) (2023-01-27) 117 | 118 | 119 | ### :mega: Other 120 | 121 | * publish packages ([c9e29b5](https://github.com/daybrush/ruler/commit/c9e29b51d433abd63c4b684cab25c5319a0c4273)) 122 | 123 | 124 | 125 | ## [0.15.1](https://github.com/daybrush/ruler/compare/@scena/ruler@0.15.0...@scena/ruler@0.15.1) (2023-01-20) 126 | 127 | 128 | ### :mega: Other 129 | 130 | * publish packages ([2d2d96a](https://github.com/daybrush/ruler/commit/2d2d96ac218d45278ebfecdd52424a60a2da1ec9)) 131 | 132 | 133 | 134 | ## [0.15.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.14.0...@scena/ruler@0.15.0) (2023-01-20) 135 | 136 | 137 | ### :mega: Other 138 | 139 | * publish packages ([b7f8d2a](https://github.com/daybrush/ruler/commit/b7f8d2a3041202dd89c3da14a7e93cd6ace206bb)) 140 | 141 | 142 | 143 | ## [0.14.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.12.2...@scena/ruler@0.14.0) (2023-01-12) 144 | 145 | 146 | ### :mega: Other 147 | 148 | * publish packages ([6e41e5f](https://github.com/daybrush/ruler/commit/6e41e5f910f84f68b8db80b493a8c683ab755381)) 149 | 150 | 151 | 152 | ## [0.12.2](https://github.com/daybrush/ruler/compare/@scena/ruler@0.12.0...@scena/ruler@0.12.2) (2022-11-12) 153 | 154 | 155 | ### :bug: Bug Fix 156 | 157 | * fix comments, files property ([d8bc095](https://github.com/daybrush/ruler/commit/d8bc095c5e25e630d720c7b255cf4b42ada6c582)) 158 | * fix files field in package.json #33 ([0cd0888](https://github.com/daybrush/ruler/commit/0cd0888f667621af308fa9f3e3f1b51aadac3a29)) 159 | 160 | 161 | ### :mega: Other 162 | 163 | * publish packages ([3334cf1](https://github.com/daybrush/ruler/commit/3334cf1ad0f2bdd66d4a1a6fc26202f026077671)) 164 | * publish packages ([4ceff62](https://github.com/daybrush/ruler/commit/4ceff62e5224779578e61a4e3b0362f6597feecf)) 165 | 166 | 167 | 168 | ## [0.12.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.11.0...@scena/ruler@0.12.0) (2022-11-06) 169 | 170 | 171 | ### :mega: Other 172 | 173 | * publish packages ([de112ef](https://github.com/daybrush/ruler/commit/de112ef49f2b4063a0b8e810abff0d646da5c3d1)) 174 | 175 | 176 | 177 | ## [0.11.0](https://github.com/daybrush/ruler/compare/@scena/ruler@0.10.0...@scena/ruler@0.11.0) (2022-09-21) 178 | 179 | 180 | ### :mega: Other 181 | 182 | * publish packages ([9dc9493](https://github.com/daybrush/ruler/commit/9dc9493020206310eb807d7c6d52e9b683f23723)) 183 | -------------------------------------------------------------------------------- /packages/preact-ruler/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.19.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.18.0...preact-ruler@0.19.0) (2023-06-02) 7 | 8 | 9 | ### :mega: Other 10 | 11 | * publish packages ([6cb44f9](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/6cb44f944747a2ff008011bae638fa52cc860c93)) 12 | 13 | 14 | 15 | ## [0.18.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.1...preact-ruler@0.18.0) (2023-06-01) 16 | 17 | 18 | ### :mega: Other 19 | 20 | * publish packages ([2628b3d](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/2628b3db856e066d8ede8eaca3281de61c10c27b)) 21 | 22 | 23 | 24 | ## [0.17.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.1...preact-ruler@0.17.1) (2023-05-15) 25 | 26 | **Note:** Version bump only for package preact-ruler 27 | 28 | 29 | 30 | 31 | 32 | ## [0.17.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.1...preact-ruler@0.17.1) (2023-05-15) 33 | 34 | **Note:** Version bump only for package preact-ruler 35 | 36 | 37 | 38 | 39 | 40 | ## [0.17.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.1...preact-ruler@0.17.1) (2023-04-11) 41 | 42 | **Note:** Version bump only for package preact-ruler 43 | 44 | 45 | 46 | 47 | 48 | ## [0.17.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.1...preact-ruler@0.17.1) (2023-04-10) 49 | 50 | **Note:** Version bump only for package preact-ruler 51 | 52 | 53 | 54 | 55 | 56 | ## [0.17.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.17.0...preact-ruler@0.17.1) (2023-04-08) 57 | 58 | 59 | ### :mega: Other 60 | 61 | * publish packages ([2c6bfa0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/2c6bfa0cda3df3a361f48163d9a7f1ada6cccb59)) 62 | 63 | 64 | 65 | ## [0.17.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.16.0...preact-ruler@0.17.0) (2023-04-08) 66 | 67 | 68 | ### :mega: Other 69 | 70 | * publish packages ([65c88e8](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/65c88e87316850f2cd0cd56a1c4a7f9d1131355b)) 71 | 72 | 73 | 74 | ## [0.16.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.15.0...preact-ruler@0.16.0) (2023-04-06) 75 | 76 | 77 | ### :mega: Other 78 | 79 | * publish packages ([9775d43](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/9775d43ce6b04033141c394aa8c7ca3288238588)) 80 | 81 | 82 | 83 | ## [0.15.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.14.2...preact-ruler@0.15.0) (2023-03-04) 84 | 85 | 86 | ### :mega: Other 87 | 88 | * publish packages ([80d6f11](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/80d6f1176e755cce1b4bcc044b4e6574b8118c01)) 89 | 90 | 91 | 92 | ## [0.14.2](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.14.1...preact-ruler@0.14.2) (2023-01-27) 93 | 94 | 95 | ### :mega: Other 96 | 97 | * publish packages ([c9e29b5](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/c9e29b51d433abd63c4b684cab25c5319a0c4273)) 98 | 99 | 100 | 101 | ## [0.14.1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.14.0...preact-ruler@0.14.1) (2023-01-20) 102 | 103 | 104 | ### :mega: Other 105 | 106 | * publish packages ([2d2d96a](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/2d2d96ac218d45278ebfecdd52424a60a2da1ec9)) 107 | 108 | 109 | 110 | ## [0.14.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.13.0...preact-ruler@0.14.0) (2023-01-20) 111 | 112 | 113 | ### :mega: Other 114 | 115 | * publish packages ([b7f8d2a](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/b7f8d2a3041202dd89c3da14a7e93cd6ace206bb)) 116 | 117 | 118 | 119 | ## [0.13.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.12.2...preact-ruler@0.13.0) (2023-01-12) 120 | 121 | 122 | ### :mega: Other 123 | 124 | * publish packages ([6e41e5f](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/6e41e5f910f84f68b8db80b493a8c683ab755381)) 125 | 126 | 127 | 128 | ## [0.12.2](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.12.0...preact-ruler@0.12.2) (2022-11-12) 129 | 130 | 131 | ### :bug: Bug Fix 132 | 133 | * fix comments, files property ([d8bc095](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/d8bc095c5e25e630d720c7b255cf4b42ada6c582)) 134 | * fix files field in package.json #33 ([0cd0888](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/0cd0888f667621af308fa9f3e3f1b51aadac3a29)) 135 | 136 | 137 | ### :mega: Other 138 | 139 | * publish packages ([3334cf1](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/3334cf1ad0f2bdd66d4a1a6fc26202f026077671)) 140 | * publish packages ([4ceff62](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/4ceff62e5224779578e61a4e3b0362f6597feecf)) 141 | 142 | 143 | 144 | ## [0.12.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.11.0...preact-ruler@0.12.0) (2022-11-06) 145 | 146 | 147 | ### :mega: Other 148 | 149 | * publish packages ([de112ef](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/de112ef49f2b4063a0b8e810abff0d646da5c3d1)) 150 | 151 | 152 | 153 | ## [0.11.0](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/compare/preact-ruler@0.10.0...preact-ruler@0.11.0) (2022-09-21) 154 | 155 | 156 | ### :mega: Other 157 | 158 | * publish packages ([9dc9493](https://github.com/daybrush/ruler/blob/master/packages/preact-ruler/commit/9dc9493020206310eb807d7c6d52e9b683f23723)) 159 | -------------------------------------------------------------------------------- /packages/react-ruler/src/react-ruler/types.ts: -------------------------------------------------------------------------------- 1 | import { IObject } from "@daybrush/utils"; 2 | 3 | /** 4 | * @typedef 5 | * @memberof Ruler 6 | */ 7 | export interface RulerInterface { 8 | /** 9 | * Scroll to that location. It can be used when the scrollPos prop is not used. 10 | * @param - scroll position 11 | */ 12 | scroll(scrollPos: number): void; 13 | /** 14 | * Recalculate the style of the ruler. 15 | */ 16 | resize(): void; 17 | /** 18 | * Gets the scroll position of the ruler. 19 | */ 20 | getScrollPos(): number; 21 | /** 22 | * draw a ruler 23 | */ 24 | draw(options?: DrawRulerOptions): void; 25 | } 26 | 27 | export interface DrawRulerOptions { 28 | scrollPos?: number; 29 | zoom?: number; 30 | selectedRanges?: number[][]; 31 | marks?: number[]; 32 | unit?: number; 33 | segment?: number; 34 | } 35 | 36 | /** 37 | * @typedef 38 | * @memberof Ruler 39 | */ 40 | export interface RulerProps { 41 | /** 42 | * ruler's direction 43 | * @default "horizontal" 44 | */ 45 | type?: "horizontal" | "vertical"; 46 | /** 47 | * ruler's width 48 | * @default target's offsetWidth 49 | */ 50 | width?: number; 51 | /** 52 | * ruler's height 53 | * @default target's offsetHeight 54 | */ 55 | height?: number; 56 | /** 57 | * main scale unit 58 | * @default 50 59 | * @example 60 | * ``` 61 | * 1px (Default) zoom: 1, unit: 50 (every 50px) 62 | * 1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm) 63 | * 1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in) 64 | * ``` 65 | */ 66 | unit?: number; 67 | /** 68 | * zoom 69 | * @default 1 70 | * @example 71 | * ``` 72 | * 1px (Default) zoom: 1, unit: 50 (every 50px) 73 | * 1cm = 37.7952px zoom: 37.7952 unit: 1 (every 1cm) 74 | * 1in = 96px = 2.54cm zoom: 9 unit: 1 (every 1in) 75 | * ``` 76 | */ 77 | zoom?: number; 78 | /** 79 | * line's direction (align) 80 | * @default "end" 81 | */ 82 | direction?: "start" | "center" | "end"; 83 | /** 84 | * text align 85 | * @default "start" 86 | */ 87 | textAlign?: "left" | "center" | "right"; 88 | /** 89 | * font and size 90 | * @default "10px sans-serif" 91 | */ 92 | font?: string; 93 | /** 94 | * Number of areas to divide between two main lines 95 | * @default 10 96 | */ 97 | segment?: number; 98 | /** 99 | * main line size 100 | * @default "100%" 101 | */ 102 | mainLineSize?: string | number; 103 | /** 104 | * long line size 105 | * @default 10 106 | */ 107 | longLineSize?: string | number; 108 | /** 109 | * short line size 110 | * @default 7 111 | */ 112 | shortLineSize?: string | number; 113 | /** 114 | * line's position offset 115 | * @default [0, 0] 116 | */ 117 | lineOffset?: number[]; 118 | /** 119 | * text's position offset 120 | * @default [0, 0] 121 | */ 122 | textOffset?: number[]; 123 | /** 124 | * Whether to display the ruler in the negative direction. 125 | * @default true 126 | */ 127 | negativeRuler?: boolean; 128 | /** 129 | * The range to show the ruler's scales 130 | * @default [-Infinity, Infinity] 131 | */ 132 | range?: [number, number]; 133 | /** 134 | * you can set scroll position by prop. 135 | * If you use the scrollPos prop, you can't use the scroll method. 136 | * @default undefined 137 | */ 138 | scrollPos?: number; 139 | /** 140 | * you can set scroll position by prop for init. 141 | * don't use `scrollPos` prop 142 | * @default 0 143 | */ 144 | defaultScrollPos?: number; 145 | /** 146 | * ruler canvas style 147 | */ 148 | style?: IObject; 149 | /** 150 | * ruler's background color 151 | * @default "#333333" 152 | */ 153 | backgroundColor?: string; 154 | /** 155 | * background color within range in ruler 156 | * @default "transparent" 157 | */ 158 | rangeBackgroundColor?: string; 159 | /** 160 | * ruler's line color 161 | * @default "#777777" 162 | */ 163 | lineColor?: string; 164 | /** 165 | * ruler's text color 166 | * @default "#ffffff" 167 | */ 168 | textColor?: string; 169 | /** 170 | * The background color that wraps the text 171 | * @default "transparent" 172 | */ 173 | textBackgroundColor?: string; 174 | /** 175 | * text foramt 176 | * @default ownself 177 | */ 178 | textFormat?: (scale: number) => string; 179 | /** 180 | * positions to mark 181 | * @default [] 182 | */ 183 | marks?: number[]; 184 | /** 185 | * @default "#f55" 186 | * 187 | */ 188 | markColor?: string; 189 | /** 190 | * Ruler's line width 191 | * @default 1 192 | */ 193 | lineWidth?: number; 194 | /** 195 | * Whether to warp self 196 | */ 197 | warpSelf?: boolean; 198 | /** 199 | * You can paint the selected area(selectedranges) with the `selectedBackgroundColor` color. 200 | */ 201 | selectedRanges?: number[][]; 202 | /** 203 | * background color within selected range in ruler with `selectedRanges` area 204 | * @default "#555555" 205 | */ 206 | selectedBackgroundColor?: string; 207 | /** 208 | * Text is displayed in the selected ranges. If it overlaps existing text, only the selected range text is visible. 209 | * @since 0.16.0 210 | * @default false 211 | */ 212 | selectedRangesText?: boolean; 213 | /** 214 | * Position offset of text in selected ranges 215 | * @since 0.16.0 216 | * @default "0, 0" 217 | */ 218 | selectedRangesTextOffset?: number[]; 219 | /** 220 | * Color of text in selected ranges 221 | * @since 0.16.0 222 | * @default "#44aaff" 223 | */ 224 | selectedRangesTextColor?: string; 225 | /** 226 | * Scale value of canvase when device high density is 1. 227 | * Less than 2 may cause pixels to blur. 228 | * If device high density is greater than 1, it is forcibly set to 3. 229 | * @default 2 230 | */ 231 | defaultPixelScale?: number; 232 | /** 233 | * Whether to use the resize observer. When the size changes, the resize method is automatically called. 234 | */ 235 | useResizeObserver?: boolean; 236 | } 237 | --------------------------------------------------------------------------------