Any angle polygon. - Githubissues

Skip to content Search or jump to…

Pull requests Issues Marketplace Explore

@nitish332 daybrush / moveable 65 5.5k289 Code Issues 94 Pull requests 1 Discussions Actions Projects Wiki Security Insights feat: add svelte component (#95)

feat: init svelte-moveable
fix: fix svelte config
fix: fix types
fix: fix dispatch event
feat: Add onEvent for all events
demo: fix demo
chore: Update moveable
demo: fix demo
demo: add clickGroup
demo: add dragGroup events
demo: add scaleGroup events
fix: update moveable
fix: fix event return value
demo: fix svelte demo
chore: Update moveable
fix: fix portal for parentElement
feat: add svelte component master (#95) 0.24.5 … 0.10.4 @daybrush daybrush committed on Nov 12, 2019 1 parent 8fe6b54 commit c67c4426be44022e359a0ee6b8890d7506173708 Showing with 4,014 additions and 13 deletions. 6 .editorconfig @@ -12,4 +12,8 @@ trim_trailing_whitespace = true

[{package.json,.travis.yml}] indent_style = space indent_size = 4 indent_size = 4

[*.svelte] indent_style = space indent_size = 2 2 README.md @@ -13,6 +13,7 @@ <img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&color=3fb984">

Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable

@@ -216,6 +217,7 @@ moveable.on("pinchStart", ({ target, clientX, clientY }) => { * [**react-moveable**](https://github.com/daybrush/moveable/blob/master/packages/react-moveable): A React Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable. * [**preact-moveable**](https://github.com/daybrush/moveable/blob/master/packages/preact-moveable): A Preact Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable. * [**ngx-moveable**](https://github.com/daybrush/moveable/blob/master/packages/ngx-moveable): An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable. * [**svelte-moveable**](https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable): A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable. * [**vue-moveable**(@probil)](https://github.com/probil/vue-moveable): A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable. 2 package.json @@ -1,6 +1,6 @@ { "name": "moveable", "version": "0.10.2", "version": "0.10.3", "description": "Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.", "main": "./dist/moveable.cjs.js", "module": "./dist/moveable.esm.js", 7 packages/ngx-moveable/README.md @@ -13,6 +13,7 @@

An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.

@@ -147,9 +148,9 @@ export class AppModule { } (rotateEnd)="onRotateEnd($event)" [warpable]="false" (warpStart)="onRotateStart($event)" (warp)="onRotate($event)" (warpEnd)="onRotateEnd($event)" (warpStart)="onWarpStart($event)" (warp)="onWarp($event)" (warpEnd)="onWarpEnd($event)" [pinchable]="false" (pinchStart)="onPinchStart($event)" 6 packages/ngx-moveable/projects/ngx-moveable/package-lock.json Some generated files are not rendered by default. Learn more. 2 packages/ngx-moveable/projects/ngx-moveable/package.json @@ -44,6 +44,6 @@ }, "dependencies": { "framework-utils": "^0.2.1", "moveable": "^0.10.2" "moveable": "^0.10.3" } } 3 packages/svelte-moveable/.gitignore @@ -0,0 +1,3 @@ .DS_Store node_modules public/bundle.* 194 packages/svelte-moveable/README.md @@ -0,0 +1,194 @@

Svelte Moveable

A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.

Demo / Handbook / API / Main Project

Moveable
Draggable	Resizable	Scalable	Rotatable

Warpable	Pinchable	Groupable	Snappable

## 🔥 Features * **Draggable** refers to the ability to drag and move targets. * **Resizable** indicates whether the target's width and height can be increased or decreased. * **Scalable** indicates whether the target's x and y can be scale of transform. * **Rotatable** indicates whether the target can be rotated. * **Warpable** indicates whether the target can be warped(distorted, bented). * **Pinchable** indicates whether the target can be pinched with draggable, resizable, scalable, rotatable. * **Groupable** indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable. * **Snappable** indicates whether to snap to the guideline. * Support SVG Elements (svg, path, line, ellipse, g, rect, ...etc) * Support Major Browsers * Support 3d Transform ## ⚙️ Installation ```sh $ npm i svelte-moveable ``` ## 📄 Documents * [**Moveable Handbook**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md) * [**How to use Group**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-group) * [**How to use custom CSS**](https://github.com/daybrush/moveable/blob/master/handbook/handbook.md#toc-custom-css) * [API Documentation](https://daybrush.com/moveable/release/latest/doc/) ## 🚀 How to use ```html ``` ```jsx onDragStart(detail)} on:drag={({ detail }) => onDrag(detail)} on:dragEnd={({ detail }) => onDragEnd(detail)} keepRatio={false} renderDirections={["nw", "ne", "sw", "se", "n", "w", "s", "e"]} resizable={false} throttleResize={0} on:resizeStart={({ detail }) => onResizeStart(detail)} on:resize={({ detail }) => onResize(detail)} on:resizeEnd={({ detail }) => onResizeEnd(detail)} scalable={false} throttleScale={0} on:scaleStart={({ detail }) => onScaleStart(detail)} on:scale={({ detail }) => onScale(detail)} on:scaleEnd={({ detail }) => onScaleEnd(detail)} rotatable={false} throttleRotate={0} on:rotateStart={({ detail }) => onRotateStart(detail)} on:rotate={({ detail }) => onRotate(detail)} on:rotateEnd={({ detail }) => onRotateEnd(detail)} warpable={false} on:warpStart={({ detail }) => onWarpStart(detail)} on:warp={({ detail }) => onWarp(detail)} on:warpEnd={({ detail }) => onWarpEnd(detail)} pinchable="false" on:pinchStart={({ detail }) => onPinchStart(detail)} on:pinch={({ detail }) => onPinch(detail)} on:pinchEnd={({ detail }) => onPinchEnd(detail)} /> ``` ## ⚙️ Developments ### `npm run dev` Runs the app in the development mode.
Open [http://localhost:5000](http://localhost:5000) to view it in the browser. The page will reload if you make edits.
You will also see any lint errors in the console. ## ⭐️ Show Your Support Please give a ⭐️ if this project helped you! ## 👏 Contributing If you have any questions or requests or want to contribute to `moveable` or other packages, please write the [issue](https://github.com/daybrush/moveable/issues) or give me a Pull Request freely. ## 🐞 Bug Report If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/moveable/issues) on GitHub. ## 📝 License This project is [MIT](https://github.com/daybrush/moveable/blob/master/LICENSE) licensed. ``` MIT License Copyright (c) 2019 Daybrush Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` 2,909 packages/svelte-moveable/package-lock.json Large diffs are not rendered by default. 71 packages/svelte-moveable/package.json @@ -0,0 +1,71 @@ { "name": "svelte-moveable", "version": "0.1.0", "description": "A Svelte Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable.", "main": "./dist/moveable.cjs.js", "module": "./dist/moveable.esm.js", "types": "src/index.d.ts", "sideEffects": false, "keywords": [ "moveable", "resizable", "scalable", "draggable", "rotatable", "warpable", "pinchable", "groupable", "snappable", "movable", "throttle", "ratio", "dom", "resize", "scale", "drag", "move", "rotate", "svelte", "warp", "snap", "pinch" ], "repository": { "type": "git", "url": "https://github.com/daybrush/moveable/blob/master/packages/svelte-moveable" }, "author": "Daybrush", "license": "MIT", "bugs": { "url": "https://github.com/daybrush/moveable/issues" }, "homepage": "https://daybrush.com/moveable", "devDependencies": { "@daybrush/builder": "^0.1.2", "@pyoner/svelte-ts-preprocess": "^1.2.1", "keycon": "^0.6.0", "rollup": "^1.12.0", "rollup-plugin-commonjs": "^10.0.0", "rollup-plugin-livereload": "^1.0.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^5.1.2", "scenejs": "^1.1.5", "sirv-cli": "^0.4.4", "svelte": "^3.0.0", "svelte-guides": "^0.1.2", "svelte-preprocess": "^3.2.2", "tslib": "^1.10.0", "typescript": "^3.6.4" }, "dependencies": { "moveable": "^0.10.2" }, "scripts": { "build": "rollup -c rollup.build.config.js", "dev": "rollup -c -w", "start": "sirv public --single", "start:dev": "sirv public --single --dev", "build:dev": "rollup -c" } } BIN +3.05 KB packages/svelte-moveable/public/favicon.png Binary file not shown. 62 packages/svelte-moveable/public/global.css @@ -0,0 +1,62 @@ html, body { position: relative; width: 100%; height: 100%; } body { color: #333; margin: 0; padding: 8px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } a { color: rgb(0,100,200); text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: rgb(0,80,160); } label { display: block; } input, button, select, textarea { font-family: inherit; font-size: inherit; padding: 0.4em; margin: 0 0 0.5em 0; box-sizing: border-box; border: 1px solid #ccc; border-radius: 2px; } input:disabled { color: #ccc; } input[type="range"] { height: 0; } button { color: #333; background-color: #f4f4f4; outline: none; } button:active { background-color: #ddd; } button:focus { border-color: #666; } 18 packages/svelte-moveable/public/index.html @@ -0,0 +1,18 @@ Svelte app 29 packages/svelte-moveable/rollup.build.config.js @@ -0,0 +1,29 @@ import buildHelper from "@daybrush/builder"; import svelte from 'rollup-plugin-svelte'; import { preprocess } from "@pyoner/svelte-ts-preprocess"; const defaultOptions = { tsconfig: "", input: './src/Moveable.svelte', commonjs: true, external: { "svelte": "svelte", }, plugins: [ svelte({ preprocess: preprocess(), }), ], } export default buildHelper([ { ...defaultOptions, output: "dist/moveable.cjs.js", format: "cjs", }, { ...defaultOptions, output: "dist/moveable.esm.js", format: "es", }, ]); 57 packages/svelte-moveable/rollup.config.js @@ -0,0 +1,57 @@ import svelte from 'rollup-plugin-svelte'; import resolve from 'rollup-plugin-node-resolve'; import commonjs from 'rollup-plugin-commonjs'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import rollup_start_dev from './rollup_start_dev'; import { preprocess } from "@pyoner/svelte-ts-preprocess"; const production = !process.env.ROLLUP_WATCH; export default { input: 'src/main.js', output: { sourcemap: true, format: 'iife', name: 'app', file: 'public/bundle.js' }, plugins: [ svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component CSS out into // a separate file — better for performance css: css => { css.write('public/bundle.css'); }, preprocess: preprocess(), }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In // some cases you'll need additional configuration — // consult the documentation for details: // https://github.com/rollup/rollup-plugin-commonjs resolve({ browser: true, dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/') }), commonjs(), // In dev mode, call `npm run start:dev` once // the bundle has been generated !production && rollup_start_dev, // Watch the `public` directory and refresh the // browser on changes when not in production !production && livereload('public'), // If we're building for production (npm run build // instead of npm run dev), minify production && terser() ], watch: { clearScreen: false } }; 12 packages/svelte-moveable/rollup_start_dev.js @@ -0,0 +1,12 @@ import * as child_process from 'child_process'; let running_dev_server = false; export default { writeBundle() { if (!running_dev_server) { running_dev_server = true; child_process.spawn('npm', ['run', 'start:dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true }); } } }; 449 packages/svelte-moveable/src/App.svelte Large diffs are not rendered by default. 85 packages/svelte-moveable/src/Moveable.svelte @@ -0,0 +1,85 @@ 27 packages/svelte-moveable/src/index.d.ts @@ -0,0 +1,27 @@ import { MoveableInterface } from "moveable"; interface ComponentOptions { target: HTMLElement; anchor?: HTMLElement | null; props?: {}; hydrate?: boolean; intro?: boolean; } interface MoveableComponent extends MoveableInterface { new(options: ComponentOptions): any; // client-side methods $set(props: {}): void; $on(event: string, callback: (event: CustomEvent) => void): void; $destroy(): void; // server-side methods render(props?: {}): { html: string; css: { code: string; map: string | null }; head?: string; }; } export default MoveableComponent; export * from "moveable"; 10 packages/svelte-moveable/src/main.js @@ -0,0 +1,10 @@ import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; 5 packages/svelte-moveable/svelte.config.js @@ -0,0 +1,5 @@ const sveltePreprocess = require('svelte-preprocess'); module.exports = { preprocess: sveltePreprocess(), }; 62 packages/svelte-moveable/tsconfig.json @@ -0,0 +1,62 @@ { "include": ["src/**/*"], "exclude": ["node_modules/*"], "compilerOptions": { /* Basic Options */ "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "module": "ESNEXT", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ // "lib": [], /* Specify library files to be included in the compilation. */ // "allowJs": true, /* Allow javascript files to be compiled. */ // "checkJs": true, /* Report errors in .js files. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ // "outDir": "./", /* Redirect output structure to the directory. */ // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /* Enable project compilation */ // "removeComments": true, /* Do not emit comments to output. */ // "noEmit": true, /* Do not emit outputs. */ // "importHelpers": true, /* Import emit helpers from 'tslib'. */ // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ /* Strict Type-Checking Options */ "strict": true, /* Enable all strict type-checking options. */ // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ // "strictNullChecks": true, /* Enable strict null checks. */ // "strictFunctionTypes": true, /* Enable strict checking of function types. */ // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ /* Additional Checks */ // "noUnusedLocals": true, /* Report errors on unused locals. */ // "noUnusedParameters": true, /* Report errors on unused parameters. */ // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ /* Module Resolution Options */ "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ // "typeRoots": [], /* List of folders to include type definitions from. */ "types": ["svelte"], /* Type declaration files to be included in compilation. */ "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ /* Source Map Options */ // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ /* Experimental Options */ // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ } } 2 src/InnerMoveable.tsx @@ -11,6 +11,6 @@ export default class InnerMoveable extends Component { this.state = this.props; } public render() { return createPortal(, this.props.parentElement); return createPortal(, this.state.parentElement); } } 0 comments on commit c67c442 @nitish332 Leave a comment No file chosen Attach files by dragging & dropping, selecting or pasting them. You’re not receiving notifications from this thread. © 2021 GitHub, Inc. Terms Privacy Security Status Docs Contact GitHub Pricing API Training Blog About

nitish332 / solid-edge

Any angle polygon. #3

Svelte Moveable