├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE.md └── workflows │ └── run-e2e.yml ├── .gitignore ├── .yarnrc ├── CHANGELOG-1.0.0.md ├── CHANGELOG.md ├── LICENSE ├── README.md ├── config └── update-type-consts.js ├── custom_css.md ├── demo ├── images │ ├── 256x256.png │ ├── 512x512.png │ ├── clippable.gif │ ├── control.png │ ├── css.png │ ├── draggable.gif │ ├── element_guidelines.png │ ├── groupable.gif │ ├── guideline_css.png │ ├── guidelines.png │ ├── line.png │ ├── logo.png │ ├── moveable1920x1080.png │ ├── origindraggable.gif │ ├── pinchable.gif │ ├── resizable.gif │ ├── rotatable.gif │ ├── roundable.gif │ ├── scalable.gif │ ├── selecto.gif │ ├── snappable.gif │ └── warpable.gif ├── index.html └── static │ ├── css │ ├── main.5b0258e1.chunk.css │ └── main.5b0258e1.chunk.css.map │ └── js │ ├── 2.8e0d6703.chunk.js │ ├── 2.8e0d6703.chunk.js.LICENSE.txt │ ├── 2.8e0d6703.chunk.js.map │ ├── main.4efc5ba5.chunk.js │ ├── main.4efc5ba5.chunk.js.map │ ├── runtime-main.b494567c.js │ └── runtime-main.b494567c.js.map ├── groupable.md ├── handbook └── handbook.md ├── jsdoc.json ├── lerna.json ├── package.json ├── packages ├── croact-moveable │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── index.ts │ │ └── index.umd.ts │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ └── tslint.json ├── helper │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── global.d.ts │ ├── jest.config.js │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── GroupManager.ts │ │ ├── groups.ts │ │ ├── index.cjs.ts │ │ ├── index.ts │ │ ├── index.umd.ts │ │ └── types.ts │ ├── test │ │ └── unit │ │ │ ├── GroupManager.spec.ts │ │ │ └── utils.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ └── tsconfig.json ├── lit-moveable │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── demo │ │ ├── dist │ │ │ ├── index.js │ │ │ └── index.js.map │ │ ├── index.html │ │ └── index.ts │ ├── package.json │ ├── rollup.config.js │ ├── rollup.demo.config.js │ ├── src │ │ ├── LitMoveable.ts │ │ ├── index.ts │ │ └── types.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ └── tsconfig.json ├── moveable │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── InnerMoveable.tsx │ │ ├── Moveable.tsx │ │ ├── MoveableManager.tsx │ │ ├── consts.ts │ │ ├── index.cjs.ts │ │ ├── index.ts │ │ ├── index.umd.ts │ │ ├── types.ts │ │ └── utils.ts │ ├── test │ │ └── manual │ │ │ ├── css.html │ │ │ ├── custom │ │ │ ├── changeTarget.html │ │ │ ├── custom-child.js │ │ │ └── custom-parent.js │ │ │ ├── dragapi.html │ │ │ ├── fixed.html │ │ │ ├── fixedgroup.html │ │ │ ├── groupDragTarget.html │ │ │ ├── groupandsnappable.html │ │ │ ├── iframe.html │ │ │ ├── input.html │ │ │ ├── resizable.html │ │ │ ├── selecto.html │ │ │ ├── snappable.html │ │ │ ├── text.html │ │ │ ├── updateSelecgtors.html │ │ │ └── updateSelecgtors2.html │ ├── tsconfig.declaration.json │ └── tsconfig.json ├── ngx-moveable │ ├── .browserslistrc │ ├── .editorconfig │ ├── .gitignore │ ├── .npmignore │ ├── .prettierrc │ ├── README.md │ ├── angular.json │ ├── karma.conf.js │ ├── package.json │ ├── projects │ │ └── ngx-moveable │ │ │ ├── CHANGELOG.md │ │ │ ├── README.md │ │ │ ├── karma.conf.js │ │ │ ├── ng-package.json │ │ │ ├── package.json │ │ │ ├── src │ │ │ ├── consts.ts │ │ │ ├── ngx-moveable.component.ts │ │ │ ├── ngx-moveable.interface.ts │ │ │ ├── ngx-moveable.legacy.component.ts │ │ │ ├── ngx-moveable.module.ts │ │ │ ├── public-api.ts │ │ │ ├── test.ts │ │ │ └── types.ts │ │ │ ├── tsconfig.lib.json │ │ │ ├── tsconfig.lib.prod.json │ │ │ ├── tsconfig.spec.json │ │ │ └── tslint.json │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.base.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── preact-moveable │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── demo │ │ ├── dist │ │ │ ├── index.css │ │ │ └── index.js │ │ ├── index.html │ │ └── logo.svg │ ├── groupable.md │ ├── package.json │ ├── rollup.config.demo.js │ ├── rollup.config.js │ ├── src │ │ ├── demo │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ └── index.tsx │ │ └── preact-moveable │ │ │ ├── Moveable.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ └── tslint.json ├── react-moveable │ ├── .eslintignore │ ├── .eslintrc │ ├── .gitignore │ ├── .npmignore │ ├── .storybook │ │ ├── main.js │ │ ├── manager.js │ │ ├── preview-head.html │ │ ├── preview.jsx │ │ ├── readme.js │ │ └── test-runner.js │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── croffle.config.js │ ├── global.d.ts │ ├── groupable.md │ ├── karma.conf.js │ ├── mocha.opts │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── EventManager.ts │ │ ├── InitialMoveable.tsx │ │ ├── Moveable.tsx │ │ ├── MoveableGroup.tsx │ │ ├── MoveableIndividualGroup.tsx │ │ ├── MoveableManager.tsx │ │ ├── Snappable │ │ │ └── utils.ts │ │ ├── ables │ │ │ ├── AbleManager.ts │ │ │ ├── BeforeRenderable.ts │ │ │ ├── Clickable.ts │ │ │ ├── Clippable.tsx │ │ │ ├── Default.ts │ │ │ ├── DragArea.tsx │ │ │ ├── Draggable.tsx │ │ │ ├── Groupable.tsx │ │ │ ├── IndividualGroupable.tsx │ │ │ ├── Origin.tsx │ │ │ ├── OriginDraggable.tsx │ │ │ ├── Padding.tsx │ │ │ ├── Pinchable.ts │ │ │ ├── README.md │ │ │ ├── Renderable.ts │ │ │ ├── Resizable.ts │ │ │ ├── Rotatable.tsx │ │ │ ├── Roundable.tsx │ │ │ ├── Scalable.ts │ │ │ ├── Scrollable.ts │ │ │ ├── Snappable.tsx │ │ │ ├── Warpable.tsx │ │ │ ├── clippable │ │ │ │ └── utils.tsx │ │ │ ├── consts.ts │ │ │ ├── edgeDraggable.tsx │ │ │ ├── roundable │ │ │ │ └── borderRadius.tsx │ │ │ └── snappable │ │ │ │ ├── bounds.ts │ │ │ │ ├── getTotalGuidelines.ts │ │ │ │ ├── innerBounds.ts │ │ │ │ ├── names.ts │ │ │ │ ├── render.tsx │ │ │ │ ├── snap.ts │ │ │ │ ├── snapBounds.ts │ │ │ │ └── utils.ts │ │ ├── classNames.ts │ │ ├── consts.ts │ │ ├── externalTypes.ts │ │ ├── gesto │ │ │ ├── CustomGesto.ts │ │ │ ├── GestoData.ts │ │ │ ├── GestoUtils.ts │ │ │ └── getAbleGesto.ts │ │ ├── groupUtils.ts │ │ ├── index.esm.ts │ │ ├── index.ts │ │ ├── index.umd.ts │ │ ├── makeMoveable.ts │ │ ├── renderDirections.tsx │ │ ├── store │ │ │ └── Store.ts │ │ ├── types.ts │ │ ├── utils.tsx │ │ └── utils │ │ │ ├── calculateElementPosition.ts │ │ │ ├── calculateMatrixStack.ts │ │ │ ├── getElementInfo.ts │ │ │ ├── getFixedDirection.ts │ │ │ ├── getMatrixStackInfo.ts │ │ │ ├── getMoveableTargetInfo.ts │ │ │ └── persist.ts │ ├── stories │ │ ├── 1-Basic │ │ │ ├── 0-Basic.stories.tsx │ │ │ ├── ReactClippableApp.tsx │ │ │ ├── ReactDraggableApp.tsx │ │ │ ├── ReactOriginDraggableApp.tsx │ │ │ ├── ReactPinchableApp.tsx │ │ │ ├── ReactResizableApp.tsx │ │ │ ├── ReactRotatableApp.tsx │ │ │ ├── ReactRoundableApp.tsx │ │ │ ├── ReactScalableApp.tsx │ │ │ └── ReactWarpableApp.tsx │ │ ├── 2-Combination │ │ │ ├── 0-UseCSS.stories.tsx │ │ │ ├── ReactAllInOneApp.tsx │ │ │ ├── ReactDraggableOriginDraggableRotatableApp.tsx │ │ │ ├── ReactDraggableResizableRotatableApp.tsx │ │ │ └── ReactDraggableScalableRotatableApp.tsx │ │ ├── 3-Group │ │ │ ├── 0-Group.stories.tsx │ │ │ ├── ReactAllInOneApp.tsx │ │ │ ├── ReactDraggableResizableRotatableApp.tsx │ │ │ ├── ReactDraggableScalableRotatableApp.tsx │ │ │ ├── ReactFixedResizeGroupApp.tsx │ │ │ ├── ReactMultipleGroupApp.tsx │ │ │ └── ReactRoundableGroupApp.tsx │ │ ├── 3-IndiviualGroup │ │ │ ├── 0-Default.stories.tsx │ │ │ ├── ReactDraggableScalableRotatableApp.tsx │ │ │ └── ReactIndividualGroupablePropsApp.tsx │ │ ├── 4-Options │ │ │ ├── 0-Default.stories.tsx │ │ │ ├── ReactCheckInputApp.tsx │ │ │ ├── ReactControlPaddingApp.tsx │ │ │ ├── ReactDragFocusedInputApp.tsx │ │ │ ├── ReactDragTargetApp.tsx │ │ │ ├── ReactDragTargetSelfApp.tsx │ │ │ ├── ReactGroupPersistDataApp.tsx │ │ │ ├── ReactIndividualGroupPersistDataApp.tsx │ │ │ ├── ReactLinePaddingApp.tsx │ │ │ ├── ReactPaddingApp.tsx │ │ │ ├── ReactPersistDataApp.tsx │ │ │ ├── ReactRootContainerApp.tsx │ │ │ ├── ReactTransformedApp.tsx │ │ │ ├── ReactUseAccuratePositionApp.tsx │ │ │ ├── ReactUseMutationObserverApp.tsx │ │ │ ├── ReactUseResizeObserverApp.tsx │ │ │ ├── ReactUseResizeObserverGroupApp.tsx │ │ │ ├── ReactUseResizeObserverIndividualGroupApp.tsx │ │ │ ├── ReactViewContainerApp.tsx │ │ │ └── ReactZoomApp.tsx │ │ ├── 4-SVG │ │ │ ├── 0-SVG.stories.tsx │ │ │ ├── ReactOriginApp.tsx │ │ │ ├── ReactOriginFillboxApp.tsx │ │ │ ├── ReactPathApp.tsx │ │ │ ├── ReactSVGCircleApp.tsx │ │ │ ├── ReactSVGForeignObjectApp.tsx │ │ │ ├── ReactSVGForeignObjectInnerApp.tsx │ │ │ ├── ReactSVGGApp.tsx │ │ │ ├── ReactSVGGroupApp.tsx │ │ │ ├── ReactSVGLineApp.tsx │ │ │ ├── ReactSVGSVGApp.tsx │ │ │ └── ReactSVGTargetGApp.tsx │ │ ├── 5-Snap&Bound │ │ │ ├── 0-Snap&Bound.stories.tsx │ │ │ ├── ReactBoundResizableApp.tsx │ │ │ ├── ReactBoundRotatableApp.tsx │ │ │ ├── ReactBoundRotatableGroupApp.tsx │ │ │ ├── ReactBoundScalableApp.tsx │ │ │ ├── ReactInnerBoundResizableApp.tsx │ │ │ ├── ReactMaxSnapElementApp.tsx │ │ │ ├── ReactSnapContainerApp.tsx │ │ │ ├── ReactSnapElementsApp.tsx │ │ │ ├── ReactSnapElementsGroupApp.tsx │ │ │ ├── ReactSnapGridApp.tsx │ │ │ ├── ReactSnapGridGroupApp.tsx │ │ │ ├── ReactSnapGuidelinesApp.tsx │ │ │ └── ReactSnapRotationsApp.tsx │ │ ├── 5A-Advanced │ │ │ ├── 0-Moveable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ ├── ReactNoRelativeApp.tsx │ │ │ │ ├── ReactPositionFixedApp.tsx │ │ │ │ └── ReactSelectFormApp.tsx │ │ │ ├── 1-Draggable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ └── ReactEdgeDraggableWithEdgeApp.tsx │ │ │ ├── 2-Resizable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ ├── ReactFixedDirectionApp.tsx │ │ │ │ ├── ReactFlexApp.tsx │ │ │ │ ├── ReactGroupMinSizeApp.tsx │ │ │ │ └── ReactWithEdgeControlApp.tsx │ │ │ ├── 3-Scalable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ └── ReactScalableMinMaxApp.tsx │ │ │ ├── 4-Rotatable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ ├── ReactCustomOriginApp.tsx │ │ │ │ ├── ReactRotateWithControlsApp.tsx │ │ │ │ ├── ReactRotateWithResizeApp.tsx │ │ │ │ └── ReactSetRotationApp.tsx │ │ │ ├── 5-Snappable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ ├── ReactCustomElementGuidelinesApp.tsx │ │ │ │ └── ReactCustomGuidelinesApp.tsx │ │ │ └── 9-Clippable │ │ │ │ ├── Deafult.stories.tsx │ │ │ │ ├── ReactClipSnapApp.tsx │ │ │ │ ├── ReactClippableApp.tsx │ │ │ │ ├── ReactClippableResizableKeepRatioApp.tsx │ │ │ │ └── ReactClippedAreaApp.tsx │ │ ├── 6-CustomAble │ │ │ ├── 0-CustomAble.stories.tsx │ │ │ ├── ReactCustomRotatableApp.tsx │ │ │ ├── ReactDimensionViewableApp.tsx │ │ │ ├── ReactDragTargetAbleApp.tsx │ │ │ ├── ReactEditableApp.tsx │ │ │ └── ReactMouseEnterLeaveApp.tsx │ │ ├── 7-Request │ │ │ ├── 0-Request.stories.tsx │ │ │ ├── ReactAlignApp.tsx │ │ │ ├── ReactDraggableApp.tsx │ │ │ ├── ReactDraggableSnappableApp.tsx │ │ │ ├── ReactResizableApp.tsx │ │ │ ├── ReactResizableDeltaApp.tsx │ │ │ ├── ReactResizableGroupApp.tsx │ │ │ └── ReactResizableSnappableApp.tsx │ │ ├── 8-TreeShaking │ │ │ ├── 0-TreeShaking.stories.tsx │ │ │ └── TreeShakingApp.tsx │ │ ├── 9-Scrolling │ │ │ ├── 0-Scrollable.stories.tsx │ │ │ └── ReactScrollableApp.tsx │ │ ├── 99-Tests │ │ │ ├── Deafult.stories.tsx │ │ │ ├── ReactATagApp.tsx │ │ │ ├── ReactAccuracyApp.tsx │ │ │ ├── ReactAccurateElementGuideline2App.tsx │ │ │ ├── ReactAccurateElementGuidelineApp.tsx │ │ │ ├── ReactChangeTargetsOnClickApp.tsx │ │ │ ├── ReactChangingSnapContainerApp.tsx │ │ │ ├── ReactClickApp.tsx │ │ │ ├── ReactCustomElementApp.tsx │ │ │ ├── ReactCustomElementBoundsApp.tsx │ │ │ ├── ReactDragAPIApp.tsx │ │ │ ├── ReactDragStartGroupApp.tsx │ │ │ ├── ReactDragTargetApp.tsx │ │ │ ├── ReactFixedSnapApp.tsx │ │ │ ├── ReactFlexApp.tsx │ │ │ ├── ReactGroupDragAreaApp.tsx │ │ │ ├── ReactGroupPaddingApp.tsx │ │ │ ├── ReactHandleLargeNumberApp.tsx │ │ │ ├── ReactIframeApp.tsx │ │ │ ├── ReactInputApp.tsx │ │ │ ├── ReactLargeZoomElementGuidelinesApp.tsx │ │ │ ├── ReactNestedSVGApp.tsx │ │ │ ├── ReactNestedTargetApp.tsx │ │ │ ├── ReactNoTargetApp.tsx │ │ │ ├── ReactOverflowApp.tsx │ │ │ ├── ReactRequestBoundsApp.tsx │ │ │ ├── ReactRotateClippableApp.tsx │ │ │ ├── ReactSafariApp.tsx │ │ │ ├── ReactScalableKeepRatioApp.tsx │ │ │ ├── ReactStopDragApp.tsx │ │ │ ├── ReactTRSTargetApp.tsx │ │ │ ├── ReactTranslate50App.tsx │ │ │ ├── ReactWillChangeApp.tsx │ │ │ ├── ReactZoomedCursorApp.tsx │ │ │ ├── ReactZoomedSnapApp.tsx │ │ │ ├── ReactZoomedTargetApp.tsx │ │ │ ├── safari.css │ │ │ └── snap.css │ │ ├── 9A-Components │ │ │ ├── 0-Components.stories.tsx │ │ │ ├── ReactInfiniteViewerApp.tsx │ │ │ ├── ReactSelectoApp.tsx │ │ │ ├── ReactSelectoMultipleGroupApp.tsx │ │ │ ├── ReactSelectoMultipleGroupUngroupApp.tsx │ │ │ └── ReactSelectoNestedGroupApp.tsx │ │ ├── common.css │ │ ├── controls │ │ │ ├── default.ts │ │ │ └── group.ts │ │ ├── templates │ │ │ ├── default.css │ │ │ └── default.ts │ │ ├── tests │ │ │ └── GestoHelper.ts │ │ ├── utils.ts │ │ └── utils │ │ │ ├── story.tsx │ │ │ └── testing.tsx │ ├── tests │ │ └── types.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ ├── tsconfig.test.json │ └── types │ │ ├── index.js │ │ └── package.json ├── snappable │ ├── .eslintrc │ ├── jest.config.js │ ├── manual │ │ └── index.html │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── BoundLine.ts │ │ ├── Snappable.ts │ │ ├── types.ts │ │ └── utils.ts │ ├── test │ │ └── bounds.spec.ts │ ├── tsconfig.build.json │ ├── tsconfig.declaration.json │ ├── tsconfig.json │ └── tsconfig.test.json ├── svelte-moveable │ ├── .gitignore │ ├── .npmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── app.d.ts │ │ ├── app.html │ │ ├── lib │ │ │ ├── Moveable.svelte │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── index.umd.js │ │ └── routes │ │ │ └── +page.svelte │ ├── svelte.config.js │ ├── tsconfig.json │ └── vite.config.ts ├── vue-moveable │ ├── .browserslistrc │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── demo │ │ ├── App.vue │ │ ├── index.ts │ │ └── shims-vue.d.ts │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── rollup.config.js │ ├── src │ │ ├── Moveable.vue │ │ ├── Moveable.vue.d.ts │ │ ├── global.d.ts │ │ ├── index.ts │ │ └── index.umd.ts │ ├── tsconfig.declaration.json │ └── tsconfig.json └── vue3-moveable │ ├── .browserslistrc │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── App.vue │ ├── components │ │ ├── Moveable.vue │ │ ├── index.ts │ │ └── index.umd.ts │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── static └── scripts │ └── custom.js ├── storybook ├── .gitignore ├── .storybook │ ├── frameworkStories.js │ ├── main.js │ ├── manager.js │ ├── preview-head.html │ ├── preview.jsx │ ├── readme.js │ └── test-runner.js ├── croffle.config.cjs ├── package.json ├── public │ └── vite.svg ├── stories │ ├── 1-Basic │ │ ├── react-Basic.stories.tsx │ │ └── react │ │ │ ├── ReactClippableApp.tsx │ │ │ ├── ReactDraggableApp.tsx │ │ │ ├── ReactOriginDraggableApp.tsx │ │ │ ├── ReactPinchableApp.tsx │ │ │ ├── ReactResizableApp.tsx │ │ │ ├── ReactRotatableApp.tsx │ │ │ ├── ReactRoundableApp.tsx │ │ │ ├── ReactScalableApp.tsx │ │ │ └── ReactWarpableApp.tsx │ ├── 2-Combination │ │ ├── react-UseCSS.stories.tsx │ │ └── react │ │ │ ├── ReactAllInOneApp.tsx │ │ │ ├── ReactDraggableOriginDraggableRotatableApp.tsx │ │ │ ├── ReactDraggableResizableRotatableApp.tsx │ │ │ └── ReactDraggableScalableRotatableApp.tsx │ ├── 3-Group │ │ ├── react-Group.stories.tsx │ │ └── react │ │ │ ├── ReactAllInOneApp.tsx │ │ │ ├── ReactDraggableResizableRotatableApp.tsx │ │ │ ├── ReactDraggableScalableRotatableApp.tsx │ │ │ ├── ReactMultipleGroupApp.tsx │ │ │ └── ReactRoundableGroupApp.tsx │ ├── 3-IndiviualGroup │ │ ├── react-Default.stories.tsx │ │ └── react │ │ │ ├── ReactDraggableScalableRotatableApp.tsx │ │ │ └── ReactIndividualGroupablePropsApp.tsx │ ├── 4-Options │ │ ├── react-Default.stories.tsx │ │ └── react │ │ │ ├── ReactCheckInputApp.tsx │ │ │ ├── ReactControlPaddingApp.tsx │ │ │ ├── ReactDragFocusedInputApp.tsx │ │ │ ├── ReactDragTargetApp.tsx │ │ │ ├── ReactGroupPersistDataApp.tsx │ │ │ ├── ReactIndividualGroupPersistDataApp.tsx │ │ │ ├── ReactLinePaddingApp.tsx │ │ │ ├── ReactPaddingApp.tsx │ │ │ ├── ReactPersistDataApp.tsx │ │ │ ├── ReactTransformedApp.tsx │ │ │ ├── ReactUseAccuratePositionApp.tsx │ │ │ ├── ReactUseMutationObserverApp.tsx │ │ │ ├── ReactUseResizeObserverApp.tsx │ │ │ ├── ReactUseResizeObserverGroupApp.tsx │ │ │ ├── ReactUseResizeObserverIndividualGroupApp.tsx │ │ │ ├── ReactViewContainerApp.tsx │ │ │ └── ReactZoomApp.tsx │ ├── 4-SVG │ │ ├── react-SVG.stories.tsx │ │ └── react │ │ │ ├── ReactOriginApp.tsx │ │ │ ├── ReactOriginFillboxApp.tsx │ │ │ ├── ReactPathApp.tsx │ │ │ ├── ReactSVGCircleApp.tsx │ │ │ ├── ReactSVGGApp.tsx │ │ │ ├── ReactSVGGroupApp.tsx │ │ │ ├── ReactSVGLineApp.tsx │ │ │ ├── ReactSVGSVGApp.tsx │ │ │ └── ReactSVGTargetGApp.tsx │ ├── common.css │ ├── controls │ │ ├── default.ts │ │ └── group.ts │ ├── templates │ │ ├── default.css │ │ └── default.ts │ ├── tests │ │ └── GestoHelper.ts │ ├── utils.ts │ └── utils │ │ ├── story.tsx │ │ ├── testing.tsx │ │ └── wrapper.tsx ├── tsconfig.json ├── vite.config.js └── yarn.lock ├── test ├── index.html ├── jsdoc.js ├── portal.html ├── publish.d.ts └── publish.js └── yarn.lock /.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 = 120 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 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: daybrush # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: moveable # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Environments 2 | * Framework name: 3 | * Framework version: 4 | * Moveable Component version: 5 | * Testable Address(optional): 6 | 7 | ## Description 8 | 9 | -------------------------------------------------------------------------------- /.github/workflows/run-e2e.yml: -------------------------------------------------------------------------------- 1 | name: Storybook Tests 2 | on: [push, pull_request] 3 | jobs: 4 | test: 5 | timeout-minutes: 60 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v3 9 | - uses: actions/setup-node@v3 10 | with: 11 | node-version: '16' 12 | cache: 'yarn' 13 | - name: restore lerna 14 | uses: actions/cache@v3 15 | id: cache-lerna 16 | with: 17 | path: | 18 | **/node_modules 19 | ~/.cache/ms-playwright 20 | key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} 21 | - name: Install dependencies 22 | if: steps.cache-lerna.outputs.cache-hit != 'true' 23 | run: yarn --frozen-lockfile 24 | - name: Run Storybook tests 25 | run: yarn test:ci 26 | working-directory: ./packages/react-moveable 27 | - name: Run Original Storybok 28 | if: ${{ failure() }} 29 | run: yarn test:fail-ci 30 | working-directory: ./packages/react-moveable 31 | - name: Archive Failed Artifact 32 | if: ${{ failure() }} 33 | uses: actions/upload-artifact@v2 34 | with: 35 | name: failed snapshot 36 | path: packages/react-moveable/__snapshots__ 37 | 38 | 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | *.DS_Store 3 | .DS_Store 4 | doc/ 5 | 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 | lerna-debug.log 22 | demo/storybook 23 | demo/storybook2 24 | dist/ 25 | *.lerna_backup 26 | test.js 27 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | workspaces-experimental true 2 | -------------------------------------------------------------------------------- /CHANGELOG-1.0.0.md: -------------------------------------------------------------------------------- 1 | 2 | ## [1.0.0] - 2022 3 | * `moveable` 1.0.0 4 | * `react-moveable` 1.0.0 5 | * `preact-moveable` 1.0.0 6 | * `ngx-moveable` 1.0.0 7 | * `svelte-moveable` 1.0.0 8 | 9 | ### Added 10 | * Support Original Transform 11 | * Add `onBeforeRenderStart`, `onBeforeRender`, `onBeforeRenderEnd` events. 12 | * Add `onBeforeRenderGroupStart`, `onBeforeRenderGroup`, `onBeforeRenderGroupEnd` events. 13 | * Add `setTransform`, `setTransformIndex` event properties. 14 | * Expand the functions of `translate` and `rotate` properties. 15 | 16 | -------------------------------------------------------------------------------- /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. -------------------------------------------------------------------------------- /config/update-type-consts.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { convertProperties } = require("@daybrush/release/angular"); 3 | const { MOVEABLE_PROPS, MOVEABLE_EVENTS } = require("../packages/react-moveable/dist/moveable.cjs"); 4 | 5 | convertProperties( 6 | { 7 | "ANGULAR_MOVEABLE_INPUTS": MOVEABLE_PROPS, 8 | "ANGULAR_MOVEABLE_OUTPUTS": MOVEABLE_EVENTS, 9 | }, 10 | [ 11 | path.resolve(__dirname, "../packages/ngx-moveable/projects/ngx-moveable/src/public-api.ts"), 12 | ], 13 | ); 14 | -------------------------------------------------------------------------------- /demo/images/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/256x256.png -------------------------------------------------------------------------------- /demo/images/512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/512x512.png -------------------------------------------------------------------------------- /demo/images/clippable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/clippable.gif -------------------------------------------------------------------------------- /demo/images/control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/control.png -------------------------------------------------------------------------------- /demo/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/css.png -------------------------------------------------------------------------------- /demo/images/draggable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/draggable.gif -------------------------------------------------------------------------------- /demo/images/element_guidelines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/element_guidelines.png -------------------------------------------------------------------------------- /demo/images/groupable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/groupable.gif -------------------------------------------------------------------------------- /demo/images/guideline_css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/guideline_css.png -------------------------------------------------------------------------------- /demo/images/guidelines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/guidelines.png -------------------------------------------------------------------------------- /demo/images/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/line.png -------------------------------------------------------------------------------- /demo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/logo.png -------------------------------------------------------------------------------- /demo/images/moveable1920x1080.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/moveable1920x1080.png -------------------------------------------------------------------------------- /demo/images/origindraggable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/origindraggable.gif -------------------------------------------------------------------------------- /demo/images/pinchable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/pinchable.gif -------------------------------------------------------------------------------- /demo/images/resizable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/resizable.gif -------------------------------------------------------------------------------- /demo/images/rotatable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/rotatable.gif -------------------------------------------------------------------------------- /demo/images/roundable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/roundable.gif -------------------------------------------------------------------------------- /demo/images/scalable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/scalable.gif -------------------------------------------------------------------------------- /demo/images/selecto.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/selecto.gif -------------------------------------------------------------------------------- /demo/images/snappable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/snappable.gif -------------------------------------------------------------------------------- /demo/images/warpable.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/demo/images/warpable.gif -------------------------------------------------------------------------------- /demo/static/css/main.5b0258e1.chunk.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:100&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}#root,.app,.editor,body,html{position:relative;width:100%;height:100%;-ms-scroll-chaining:none;overscroll-behavior:none}.bottom{position:absolute;bottom:20px;left:50%;transform:translate(-50%);padding:5px;background:#222;text-align:center}.bottom,.bottom a{box-sizing:border-box}.bottom a{position:relative;display:inline-block;color:#fff;font-weight:700;font-size:13px;padding:15px 20px}.badges img{padding:2px}.badgets a{margin:2px} 2 | /*# sourceMappingURL=main.5b0258e1.chunk.css.map */ -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "packages": [ 5 | "packages/*", 6 | "packages/ngx-moveable/projects/ngx-moveable" 7 | ], 8 | "version": "independent", 9 | "lernaHelperOptions": { 10 | "deployFileMap": [ 11 | { 12 | "basePath": "packages/moveable/dist", 13 | "dists": [ 14 | "demo/release/{{version}}/dist", 15 | "demo/release/latest/dist" 16 | ] 17 | }, 18 | { 19 | "basePath": "packages/helper/dist", 20 | "dists": [ 21 | "demo/helper/release/{{version}}/dist", 22 | "demo/helper/release/latest/dist" 23 | ] 24 | }, 25 | { 26 | "basePath": "doc", 27 | "dists": [ 28 | "demo/release/{{version}}/doc", 29 | "demo/release/latest/doc" 30 | ] 31 | } 32 | ], 33 | "beforeReleaseScripts": [ 34 | "npm run packages:build", 35 | "npm run demo:build", 36 | "npm run deploy" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/croact-moveable/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-moveable/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/packages/croact-moveable/README.md -------------------------------------------------------------------------------- /packages/croact-moveable/src/index.ts: -------------------------------------------------------------------------------- 1 | import Moveable from "react-moveable"; 2 | export default Moveable; 3 | export * from "react-moveable"; 4 | -------------------------------------------------------------------------------- /packages/croact-moveable/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from "./index"; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | module.exports = Moveable; 8 | export * from "./index"; 9 | export default Moveable; 10 | -------------------------------------------------------------------------------- /packages/croact-moveable/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": true, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/croact-moveable/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/croact-moveable/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/helper/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.js -------------------------------------------------------------------------------- /packages/helper/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /packages/helper/.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 23 | storybook/ 24 | src/ 25 | public/ 26 | groupable.md 27 | test/ 28 | src/ 29 | public/ 30 | stories/ 31 | .storybook 32 | -------------------------------------------------------------------------------- /packages/helper/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | declare module "*.svg" { 6 | const content: string; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /packages/helper/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "roots": [ 3 | "", 4 | ], 5 | "transform": { 6 | "^.+\\.tsx?$": "ts-jest", 7 | }, 8 | "testMatch": ["/test/**/*.spec.ts"], 9 | // "testRegex": "spec\\.ts$", 10 | "moduleFileExtensions": [ 11 | "ts", 12 | "tsx", 13 | "js", 14 | "jsx", 15 | "json", 16 | "node", 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /packages/helper/rollup.config.js: -------------------------------------------------------------------------------- 1 | const builder = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | typescript2: true, 5 | tsconfig: "tsconfig.build.json", 6 | }; 7 | 8 | module.exports = builder([ 9 | { 10 | ...defaultOptions, 11 | input: "src/index.ts", 12 | output: "./dist/helper.esm.js", 13 | visualizer: true, 14 | format: "es", 15 | exports: "named", 16 | }, 17 | { 18 | ...defaultOptions, 19 | input: "src/index.cjs.ts", 20 | output: "./dist/helper.cjs.js", 21 | format: "cjs", 22 | exports: "named", 23 | }, 24 | { 25 | ...defaultOptions, 26 | input: "src/index.umd.ts", 27 | output: "./dist/helper.js", 28 | format: "umd", 29 | exports: "default", 30 | resolve: true, 31 | name: "MoveableHelper", 32 | }, 33 | { 34 | ...defaultOptions, 35 | input: "src/index.umd.ts", 36 | output: "./dist/helper.min.js", 37 | format: "umd", 38 | exports: "default", 39 | resolve: true, 40 | uglify: true, 41 | name: "MoveableHelper", 42 | }, 43 | ]); 44 | -------------------------------------------------------------------------------- /packages/helper/src/index.cjs.ts: -------------------------------------------------------------------------------- 1 | import * as modules from "./index"; 2 | 3 | 4 | module.exports = modules; 5 | export * from "./index"; 6 | export default modules; 7 | -------------------------------------------------------------------------------- /packages/helper/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./groups"; 2 | export * from "./GroupManager"; 3 | export * from "./types"; 4 | -------------------------------------------------------------------------------- /packages/helper/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import * as modules from "./index"; 2 | 3 | export default modules; 4 | -------------------------------------------------------------------------------- /packages/helper/src/types.ts: -------------------------------------------------------------------------------- 1 | import { ArrayChild, SingleChild } from "./groups"; 2 | 3 | export type TargetGroupWithId = { groupId: string; children: TargetGroupsObject }; 4 | export type TargetRef = { current: HTMLElement | SVGElement | null }; 5 | export type TargetGroupsObject 6 | = Array; 7 | export type TargetGroupsType = Array; 8 | export type GroupChild = SingleChild | ArrayChild; 9 | 10 | export interface TargetList { 11 | raw(): GroupChild[]; 12 | flatten(): Array; 13 | targets(): TargetGroupsType; 14 | } 15 | -------------------------------------------------------------------------------- /packages/helper/test/unit/GroupManager.spec.ts: -------------------------------------------------------------------------------- 1 | import { createElements } from "./utils"; 2 | import { GroupManager } from "../../src/"; 3 | 4 | describe("test GroupManager", () => { 5 | describe("test groups [[0, 1], 2], 3", () => { 6 | const elements = createElements(4); 7 | const manager = new GroupManager([ 8 | [[elements[0], elements[1]], elements[2]], 9 | ], elements); 10 | 11 | it("selectCompletedChilds [0, 1]", () => { 12 | const list = manager.selectCompletedChilds([], [elements[1]], []); 13 | 14 | expect(list.flatten()).toStrictEqual([elements[0], elements[1], elements[2]]); 15 | }); 16 | it("selectCompletedChilds 2 => [0, 1]", () => { 17 | // element[2]가 선택된 상태에서 elements[0]을 선택 18 | const list = manager.selectCompletedChilds([elements[2]], [elements[0]], [elements[2]]); 19 | 20 | expect(list.flatten()).toStrictEqual([elements[0], elements[1]]); 21 | }); 22 | }); 23 | 24 | }); 25 | -------------------------------------------------------------------------------- /packages/helper/test/unit/utils.ts: -------------------------------------------------------------------------------- 1 | export function createElements(count: number) { 2 | const elements: HTMLElement[] = []; 3 | 4 | for (let i = 0; i < count; ++i) { 5 | const div = document.createElement("div"); 6 | div.innerHTML = `${i}`; 7 | 8 | (div as any).eid = i; 9 | elements.push(div); 10 | } 11 | 12 | return elements; 13 | } 14 | -------------------------------------------------------------------------------- /packages/helper/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/helper/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/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/helper/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./outjs/", 4 | "esModuleInterop": false, 5 | "sourceMap": true, 6 | "module": "esnext", 7 | "target": "es5", 8 | "downlevelIteration": true, 9 | "experimentalDecorators": true, 10 | "skipLibCheck": true, 11 | "moduleResolution": "node", 12 | "jsx": "preserve", 13 | "lib": [ 14 | "es2019", 15 | "es2015", 16 | "dom" 17 | ], 18 | "allowJs": true, 19 | "allowSyntheticDefaultImports": true, 20 | "strict": true, 21 | "strictNullChecks": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "resolveJsonModule": true, 24 | "isolatedModules": false, 25 | "noEmit": true, 26 | "baseUrl": "." 27 | }, 28 | "include": [ 29 | "./src/**/*.ts", 30 | "./src/**/*.tsx" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /packages/lit-moveable/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 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. 22 | -------------------------------------------------------------------------------- /packages/lit-moveable/demo/index.html: -------------------------------------------------------------------------------- 1 | 38 | 39 | 40 |
41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /packages/lit-moveable/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | input: "./src/index.ts", 5 | tsconfig: "tsconfig.build.json", 6 | sourcemap: true, 7 | }; 8 | module.exports = buildHelper([ 9 | { 10 | ...defaultOptions, 11 | format: "es", 12 | output: "./dist/moveable.esm.js", 13 | exports: "named", 14 | }, 15 | { 16 | ...defaultOptions, 17 | format: "cjs", 18 | output: "./dist/moveable.cjs.js", 19 | exports: "named", 20 | }, 21 | { 22 | ...defaultOptions, 23 | format: "umd", 24 | name: "UMD", 25 | output: "./dist/moveable.umd.js", 26 | exports: "named", 27 | resolve: true, 28 | }, 29 | ]); 30 | -------------------------------------------------------------------------------- /packages/lit-moveable/rollup.demo.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | input: "./demo/index.ts", 5 | tsconfig: "tsconfig.build.json", 6 | sourcemap: true, 7 | }; 8 | module.exports = buildHelper([ 9 | { 10 | ...defaultOptions, 11 | format: "iife", 12 | output: "./demo/dist/index.js", 13 | resolve: true, 14 | exports: "named", 15 | }, 16 | ]); 17 | -------------------------------------------------------------------------------- /packages/lit-moveable/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LitMoveable"; 2 | export * from "moveable"; 3 | -------------------------------------------------------------------------------- /packages/lit-moveable/src/types.ts: -------------------------------------------------------------------------------- 1 | import { MoveableOptions } from "moveable"; 2 | 3 | export interface LitMoveableOptions extends Pick> { 4 | /** 5 | * @deprecated 6 | * use `litDraggable` prop 7 | */ 8 | mvDraggable?: boolean; 9 | litDraggable?: boolean; 10 | } 11 | -------------------------------------------------------------------------------- /packages/lit-moveable/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "target": "es2015", 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/lit-moveable/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/lit-moveable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "target": "es2015", 5 | "lib": [ 6 | "dom", 7 | "dom.iterable", 8 | "esnext" 9 | ], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": false, 15 | "forceConsistentCasingInFileNames": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /packages/moveable/.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 23 | storybook/ 24 | -------------------------------------------------------------------------------- /packages/moveable/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/moveable/src/InnerMoveable.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "react-moveable"; 3 | import { ref } from "framework-utils"; 4 | 5 | export default class InnerMoveable extends React.Component { 6 | public state: any = {}; 7 | public moveable!: Moveable; 8 | constructor(props: any) { 9 | super(props); 10 | this.state = this.props; 11 | } 12 | public render(): React.ReactNode { 13 | return ; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/moveable/src/Moveable.tsx: -------------------------------------------------------------------------------- 1 | import MoveableManager from "./MoveableManager"; 2 | 3 | export default class Moveable extends MoveableManager {} 4 | -------------------------------------------------------------------------------- /packages/moveable/src/consts.ts: -------------------------------------------------------------------------------- 1 | import { 2 | MOVEABLE_PROPS, 3 | MOVEABLE_METHODS, 4 | MOVEABLE_EVENTS, 5 | } from "react-moveable"; 6 | 7 | export const PROPERTIES: string[] = MOVEABLE_PROPS; 8 | export const METHODS: string[] = MOVEABLE_METHODS; 9 | export const EVENTS: string[] = MOVEABLE_EVENTS; 10 | -------------------------------------------------------------------------------- /packages/moveable/src/index.cjs.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from "./index"; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | module.exports = Moveable; 8 | export * from "./index"; 9 | export default Moveable; 10 | -------------------------------------------------------------------------------- /packages/moveable/src/index.ts: -------------------------------------------------------------------------------- 1 | import Moveable from "./Moveable"; 2 | 3 | export * from "./types"; 4 | export * from "./consts"; 5 | export * from "./utils"; 6 | 7 | export default Moveable; 8 | 9 | -------------------------------------------------------------------------------- /packages/moveable/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from "./index"; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | export default Moveable; 8 | -------------------------------------------------------------------------------- /packages/moveable/src/types.ts: -------------------------------------------------------------------------------- 1 | import { 2 | MoveableEvents, 3 | } from "react-moveable/types"; 4 | 5 | export interface WithEventStop { 6 | stop: () => any; 7 | } 8 | export type MoveableEventsParameters = { 9 | [key in keyof MoveableEvents]: MoveableEvents[key] & WithEventStop; 10 | }; 11 | export * from "react-moveable/types"; 12 | -------------------------------------------------------------------------------- /packages/moveable/src/utils.ts: -------------------------------------------------------------------------------- 1 | import { Able, DefaultProps } from "react-moveable/types"; 2 | import { getElementInfo as getElementInfoFunction, makeAble as makeAbleFunction } from "react-moveable"; 3 | 4 | export function getElementInfo( 5 | target: SVGElement | HTMLElement, 6 | container?: SVGElement | HTMLElement | null, 7 | rootContainer?: SVGElement | HTMLElement | null | undefined, 8 | ) { 9 | return getElementInfoFunction(target, container, rootContainer); 10 | }; 11 | export function makeAble< 12 | Name extends string, 13 | AbleObject extends Partial>, 14 | >(name: Name, able: AbleObject) { 15 | return makeAbleFunction(name, able); 16 | } 17 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/custom/custom-child.js: -------------------------------------------------------------------------------- 1 | class CustomChildren extends HTMLElement { 2 | styleText = ` 3 | .container { 4 | width: 100%; 5 | height: 100%; 6 | } 7 | `; 8 | 9 | constructor() { 10 | super(); 11 | this.shadow = this.attachShadow({ mode: 'open' }); 12 | const style = document.createElement('style'); 13 | const div = document.createElement('div'); 14 | div.classList.add('container'); 15 | style.textContent = this.styleText; 16 | this.shadow.appendChild(style); 17 | this.shadow.appendChild(div); 18 | } 19 | } 20 | customElements.define('custom-children', CustomChildren); 21 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/custom/custom-parent.js: -------------------------------------------------------------------------------- 1 | class CustomParent extends HTMLElement { 2 | styleText = ` 3 | .card { 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | .card-header { 9 | width:100%; 10 | height: 80px; 11 | background-color: #3794FF; 12 | } 13 | 14 | .card-content { 15 | width: 100%; 16 | height: calc(100% - 80px); 17 | background-color: #EDF0F3; 18 | position: relative; 19 | } 20 | `; 21 | 22 | constructor() { 23 | super(); 24 | this.shadow = this.attachShadow({ mode: 'open' }); 25 | const style = document.createElement('style'); 26 | const div = document.createElement('div'); 27 | div.classList.add('card'); 28 | div.innerHTML = ` 29 |
30 |
31 | 32 |
33 | `; 34 | style.textContent = this.styleText; 35 | this.shadow.appendChild(style); 36 | this.shadow.appendChild(div); 37 | } 38 | } 39 | customElements.define('custom-parent', CustomParent); 40 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 23 | 24 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/snappable.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/text.html: -------------------------------------------------------------------------------- 1 | aa 2 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /packages/moveable/test/manual/updateSelecgtors.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 | 6 | 15 | 16 | 29 | 30 | -------------------------------------------------------------------------------- /packages/moveable/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/**/*" 14 | ], 15 | } 16 | -------------------------------------------------------------------------------- /packages/moveable/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 | "allowJs": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "strictNullChecks": true, 16 | "forceConsistentCasingInFileNames": true, 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "baseUrl": ".", 21 | "importHelpers": true, 22 | "lib": [ 23 | "es2015", 24 | "dom" 25 | ], 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /packages/ngx-moveable/.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 | not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line. 18 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 19 | -------------------------------------------------------------------------------- /packages/ngx-moveable/.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 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /packages/ngx-moveable/.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 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | 48 | .angular 49 | -------------------------------------------------------------------------------- /packages/ngx-moveable/.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-moveable/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } 4 | -------------------------------------------------------------------------------- /packages/ngx-moveable/README.md: -------------------------------------------------------------------------------- 1 | # ngx-moveable 2 | 3 | See [readme](./projects/ngx-moveable/README.md) for more info. 4 | -------------------------------------------------------------------------------- /packages/ngx-moveable/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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/ngx-moveable-app'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/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-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage/ngx-moveable'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-moveable", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | }, 7 | "allowedNonPeerDependencies": [ 8 | "framework-utils", 9 | "moveable", 10 | "react-moveable" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-moveable", 3 | "version": "0.50.0", 4 | "description": "An Angular Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/daybrush/moveable/tree/master/packages/ngx-moveable" 8 | }, 9 | "keywords": [ 10 | "moveable", 11 | "resizable", 12 | "scalable", 13 | "draggable", 14 | "rotatable", 15 | "warpable", 16 | "pinchable", 17 | "groupable", 18 | "movable", 19 | "snappable", 20 | "throttle", 21 | "ratio", 22 | "dom", 23 | "resize", 24 | "scale", 25 | "drag", 26 | "move", 27 | "rotate", 28 | "warp", 29 | "pinch", 30 | "snap", 31 | "angular", 32 | "ngx", 33 | "ng" 34 | ], 35 | "author": "Daybrush", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/daybrush/moveable/issues" 39 | }, 40 | "homepage": "https://daybrush.com/moveable", 41 | "peerDependencies": { 42 | "@angular/common": ">=8", 43 | "@angular/core": ">=8" 44 | }, 45 | "devDependencies": { 46 | "tslib": "^2.3.1" 47 | }, 48 | "dependencies": { 49 | "framework-utils": "^1.1.0", 50 | "moveable": "~0.53.0" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.interface.ts: -------------------------------------------------------------------------------- 1 | import Moveable, { 2 | MoveableInterface, 3 | METHODS, 4 | MoveableProperties, 5 | } from 'moveable'; 6 | import { MethodInterface, withMethods } from 'framework-utils'; 7 | 8 | import { NgxMoveableEvents } from './types'; 9 | 10 | export class NgxMoveableInterface { 11 | @withMethods(METHODS, { dragStart: 'ngDragStart' }) 12 | protected moveable!: Moveable; 13 | } 14 | 15 | export interface NgxMoveableInterface 16 | extends NgxMoveableEvents, 17 | MoveableProperties, 18 | MethodInterface< 19 | MoveableInterface, 20 | Moveable, 21 | NgxMoveableInterface, 22 | { 23 | dragStart: 'ngDragStart'; 24 | } 25 | > {} 26 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/src/ngx-moveable.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { NgxLegacyMoveableComponent } from './ngx-moveable.legacy.component'; 4 | 5 | @NgModule({ 6 | declarations: [NgxLegacyMoveableComponent], 7 | exports: [NgxLegacyMoveableComponent], 8 | }) 9 | export class NgxMoveableModule {} 10 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ngx-moveable 3 | */ 4 | 5 | export * from './ngx-moveable.component'; 6 | export * from './ngx-moveable.legacy.component'; 7 | export * from './ngx-moveable.module'; 8 | export * from 'moveable'; 9 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/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/ngx-moveable/projects/ngx-moveable/src/types.ts: -------------------------------------------------------------------------------- 1 | import { MoveableEventsParameters, MoveableOptions } from 'moveable'; 2 | import { EventEmitter } from '@angular/core'; 3 | 4 | export type RequiredMoveableOptions = Required; 5 | export type NgxMoveableEvents = { 6 | [key in keyof MoveableEventsParameters]: EventEmitter; 7 | }; 8 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | }, 11 | "angularCompilerOptions": { 12 | "skipTemplateCodegen": true, 13 | "strictMetadataEmit": true, 14 | "enableResourceInlining": true 15 | }, 16 | "exclude": [ 17 | "src/test.ts", 18 | "**/*.spec.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/ngx-moveable/projects/ngx-moveable/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "forin": false, 5 | "no-output-native": false, 6 | "directive-selector": [ 7 | true, 8 | "attribute", 9 | "", 10 | "camelCase" 11 | ], 12 | "component-selector": [ 13 | true, 14 | "element", 15 | "", 16 | "kebab-case" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/ngx-moveable/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/packages/ngx-moveable/src/app/app.component.css -------------------------------------------------------------------------------- /packages/ngx-moveable/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | 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.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'ngx-moveable-app'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('ngx-moveable-app'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-moveable-app!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/ngx-moveable/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { NgxMoveableModule } from '../../projects/ngx-moveable/src/ngx-moveable.module'; 4 | // import { NgxMoveableModule } from 'ngx-moveable'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | ], 11 | imports: [ 12 | BrowserModule, 13 | NgxMoveableModule, 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /packages/ngx-moveable/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /packages/ngx-moveable/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` 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/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /packages/ngx-moveable/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/packages/ngx-moveable/src/favicon.ico -------------------------------------------------------------------------------- /packages/ngx-moveable/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ngx-moveable-app 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/ngx-moveable/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-moveable/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-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: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /packages/ngx-moveable/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/ngx-moveable/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "strict": true, 8 | "declaration": false, 9 | "module": "es2020", 10 | "moduleResolution": "node", 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "skipLibCheck": false, 16 | "target": "es2015", 17 | "lib": ["esnext", "dom"], 18 | "paths": { 19 | "ngx-moveable": ["projects/ngx-moveable/src/public-api.ts"] 20 | } 21 | }, 22 | "angularCompilerOptions": { 23 | "strictTemplates": false, 24 | "strictInjectionParameters": true, 25 | "fullTemplateTypeCheck": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/ngx-moveable/tsconfig.json: -------------------------------------------------------------------------------- 1 | // This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. 2 | // It is not intended to be used to perform a compilation. 3 | { 4 | "files": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | }, 12 | { 13 | "path": "./projects/ngx-moveable/tsconfig.lib.json" 14 | }, 15 | { 16 | "path": "./projects/ngx-moveable/tsconfig.spec.json" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/ngx-moveable/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 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/preact-moveable/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/preact-moveable/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/preact-moveable/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Preact App 6 | 7 | 8 | 9 | 10 |
11 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /packages/preact-moveable/rollup.config.demo.js: -------------------------------------------------------------------------------- 1 | const builder = require("@daybrush/builder"); 2 | const css = require("rollup-plugin-css-bundle"); 3 | const preact = require("rollup-plugin-preact"); 4 | 5 | 6 | 7 | 8 | modulex.exports = 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/preact-moveable/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-moveable/src/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import { render, h } from "preact"; 2 | import App from "./App"; 3 | 4 | render(, document.getElementById("root")!); 5 | -------------------------------------------------------------------------------- /packages/preact-moveable/src/preact-moveable/Moveable.ts: -------------------------------------------------------------------------------- 1 | import Moveable from "react-moveable"; 2 | import Preact from "preact"; 3 | import { PreactMoveableInterface } from "./types"; 4 | 5 | export default Moveable as any as new (...args: any[]) => PreactMoveableInterface; 6 | -------------------------------------------------------------------------------- /packages/preact-moveable/src/preact-moveable/index.ts: -------------------------------------------------------------------------------- 1 | import Moveable from "./Moveable"; 2 | 3 | export * from "react-moveable/types"; 4 | export * from "./types"; 5 | export default Moveable; 6 | -------------------------------------------------------------------------------- /packages/preact-moveable/src/preact-moveable/types.ts: -------------------------------------------------------------------------------- 1 | import { MoveableProps, MoveableState, MoveableInterface } from "react-moveable/types"; 2 | import { Component } from "preact"; 3 | 4 | export type PreactMoveableInterface = { 5 | [key in Exclude]: MoveableInterface[key] 6 | } & Component; 7 | -------------------------------------------------------------------------------- /packages/preact-moveable/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "jsxFactory": "h", 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /packages/preact-moveable/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "allowJs": false, 5 | "noEmit": false, 6 | "isolatedModules": false, 7 | "removeComments": true, 8 | "declaration": true, 9 | "emitDeclarationOnly": true, 10 | "declarationDir": "declaration" 11 | }, 12 | "include": [ 13 | "./src/preact-moveable/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/preact-moveable/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 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/preact-moveable/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/react-moveable/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.js -------------------------------------------------------------------------------- /packages/react-moveable/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | stories/**/vue3/ 25 | stories/**/vue2/ 26 | stories/**/svelte/ 27 | stories/**/script/ 28 | stories/**/lit/ 29 | stories/**/angular/ 30 | .nyc_output 31 | test-static 32 | __snapshots__ 33 | *.stories.mdx 34 | -------------------------------------------------------------------------------- /packages/react-moveable/.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 23 | storybook/ 24 | src/ 25 | public/ 26 | groupable.md 27 | test/ 28 | src/ 29 | public/ 30 | stories/ 31 | .storybook 32 | -------------------------------------------------------------------------------- /packages/react-moveable/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | // showRoots: false, 5 | panelPosition: "right", 6 | }); 7 | 8 | 9 | window.STORYBOOK_GA_ID = "G-TRBNXHQ0ZF" 10 | window.STORYBOOK_REACT_GA_OPTIONS = {} 11 | -------------------------------------------------------------------------------- /packages/react-moveable/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /packages/react-moveable/.storybook/readme.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | 4 | const readmeText = fs.readFileSync(path.resolve(__dirname, "../../../README.md"), { 5 | encoding: "utf-8", 6 | }); 7 | 8 | fs.mkdirSync(path.resolve(__dirname, "../stories/0-Introduction"), { 9 | recursive: true, 10 | }); 11 | fs.writeFileSync(path.resolve(__dirname, "../stories/0-Introduction/readme.stories.mdx"), ` 12 | import { Meta } from "@storybook/addon-docs"; 13 | 14 | 15 | 16 | ${readmeText}`, { 17 | encoding: "utf-8", 18 | }); 19 | -------------------------------------------------------------------------------- /packages/react-moveable/.storybook/test-runner.js: -------------------------------------------------------------------------------- 1 | const customSnapshotsDir = `${process.cwd()}/__snapshots__`; 2 | 3 | module.exports = { 4 | async postRender(page, context) { 5 | if (!process.env.SKIP_TEST) { 6 | return; 7 | } 8 | // If you want to take screenshot of multiple browsers, use 9 | // page.context().browser().browserType().name() to get the browser name to prefix the file name 10 | await page.screenshot({ path: `${customSnapshotsDir}/${context.id}.png` }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /packages/react-moveable/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/react-moveable/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "!!raw-loader!*" { 2 | const content: string; 3 | export default content; 4 | } 5 | declare module "*.svg" { 6 | const content: string; 7 | export default content; 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-moveable/karma.conf.js: -------------------------------------------------------------------------------- 1 | const tester = require("@daybrush/tester"); 2 | 3 | tester.setFiles([ 4 | "./src/**/*.ts", 5 | "./src/**/*.tsx", 6 | "./test/**/*.ts", 7 | "./test/**/*.tsx", 8 | ]); 9 | 10 | module.exports = tester.karmaConfig; 11 | -------------------------------------------------------------------------------- /packages/react-moveable/mocha.opts: -------------------------------------------------------------------------------- 1 | --timeout 10000 2 | -------------------------------------------------------------------------------- /packages/react-moveable/rollup.config.js: -------------------------------------------------------------------------------- 1 | const builder = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | tsconfig: "tsconfig.build.json", 5 | typescript2: true, 6 | }; 7 | 8 | module.exports = builder([ 9 | { 10 | ...defaultOptions, 11 | input: "src/index.ts", 12 | output: "./dist/moveable.esm.js", 13 | visualizer: true, 14 | format: "es", 15 | exports: "named", 16 | }, 17 | { 18 | ...defaultOptions, 19 | input: "src/index.umd.ts", 20 | output: "./dist/moveable.cjs.js", 21 | format: "cjs", 22 | exports: "named", 23 | }, 24 | ]); 25 | -------------------------------------------------------------------------------- /packages/react-moveable/src/EventManager.ts: -------------------------------------------------------------------------------- 1 | import { Able, MoveableManagerInterface } from "./types"; 2 | 3 | export default class EventManager { 4 | private ables: Able[] = []; 5 | constructor( 6 | private target: HTMLElement | SVGElement | null, 7 | private moveable: MoveableManagerInterface | null, 8 | private eventName: string, 9 | ) { 10 | target!.addEventListener(eventName.toLowerCase(), this._onEvent); 11 | } 12 | public setAbles(ables: Able[]) { 13 | this.ables = ables; 14 | } 15 | public destroy() { 16 | this.target!.removeEventListener(this.eventName.toLowerCase(), this._onEvent); 17 | this.target = null; 18 | this.moveable = null; 19 | } 20 | private _onEvent = (e: Event) => { 21 | const eventName = this.eventName; 22 | const moveable = this.moveable!; 23 | 24 | if (moveable.state.disableNativeEvent) { 25 | return; 26 | } 27 | this.ables.forEach(able => { 28 | (able as any)[eventName](moveable, { 29 | inputEvent: e, 30 | }); 31 | }); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/react-moveable/src/Moveable.tsx: -------------------------------------------------------------------------------- 1 | import { MoveableProps, Able } from "./types"; 2 | import { MOVEABLE_ABLES } from "./ables/consts"; 3 | import { InitialMoveable } from "./InitialMoveable"; 4 | 5 | export default class Moveable extends InitialMoveable { 6 | public static defaultAbles: Able[] = MOVEABLE_ABLES as any; 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-moveable/src/Snappable/utils.ts: -------------------------------------------------------------------------------- 1 | export function solveConstantsDistance( 2 | [a, b, c]: [number, number, number], 3 | pos: number[], 4 | ) { 5 | return (a * pos[0] + b * pos[1] + c) / Math.sqrt(a * a + b * b); 6 | } 7 | 8 | export function solveC( 9 | [a, b]: [number, number], 10 | pos: number[], 11 | ) { 12 | // ax + by + c = 0 13 | // -ax -by; 14 | return -a * pos[0] - b * pos[1]; 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-moveable/src/ables/AbleManager.ts: -------------------------------------------------------------------------------- 1 | import { Able } from "../types"; 2 | 3 | export function makeAble< 4 | Name extends string, 5 | AbleObject extends Partial>, 6 | >(name: Name, able: AbleObject) { 7 | return { 8 | events: [] as AbleObject["events"] extends readonly any[] ? AbleObject["events"] : readonly [], 9 | props: [] as AbleObject["props"] extends readonly any[] ? AbleObject["props"] : readonly [], 10 | name, 11 | ...able, 12 | } as const; 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-moveable/src/ables/Default.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "", 3 | props: [ 4 | "target", 5 | "dragTargetSelf", 6 | "dragTarget", 7 | "dragContainer", 8 | "container", 9 | "warpSelf", 10 | "rootContainer", 11 | "useResizeObserver", 12 | "useMutationObserver", 13 | "zoom", 14 | "dragFocusedInput", 15 | "transformOrigin", 16 | "ables", 17 | "className", 18 | "pinchThreshold", 19 | "pinchOutside", 20 | "triggerAblesSimultaneously", 21 | "checkInput", 22 | "cspNonce", 23 | "translateZ", 24 | "hideDefaultLines", 25 | "props", 26 | "flushSync", 27 | "stopPropagation", 28 | "preventClickEventOnDrag", 29 | "preventClickDefault", 30 | "viewContainer", 31 | "persistData", 32 | "useAccuratePosition", 33 | "firstRenderState", 34 | "linePadding", 35 | "controlPadding", 36 | "preventDefault", 37 | "preventRightClick", 38 | "preventWheelClick", 39 | "requestStyles", 40 | ] as const, 41 | events: [ 42 | "changeTargets", 43 | ] as const, 44 | }; 45 | -------------------------------------------------------------------------------- /packages/react-moveable/src/ables/IndividualGroupable.tsx: -------------------------------------------------------------------------------- 1 | export default { 2 | name: "individualGroupable", 3 | props: [ 4 | "individualGroupable", 5 | "individualGroupableProps", 6 | ] as const, 7 | events: [] as const, 8 | } as const; 9 | -------------------------------------------------------------------------------- /packages/react-moveable/src/ables/snappable/names.ts: -------------------------------------------------------------------------------- 1 | export const NAME_snapRotationThreshold = "snapRotationThreshold"; 2 | export const NAME_snapRotationDegrees = "snapRotationDegrees"; 3 | export const NAME_snapHorizontalThreshold = "snapHorizontalThreshold"; 4 | export const NAME_snapVerticalThreshold = "snapVerticalThreshold"; 5 | -------------------------------------------------------------------------------- /packages/react-moveable/src/classNames.ts: -------------------------------------------------------------------------------- 1 | import { prefix } from "./utils"; 2 | 3 | export const AREA_PIECES = /*#__PURE__*/prefix("area-pieces"); 4 | export const AREA_PIECE = /*#__PURE__*/prefix("area-piece"); 5 | export const AVOID = /*#__PURE__*/prefix("avoid"); 6 | export const VIEW_DRAGGING = prefix("view-dragging"); 7 | -------------------------------------------------------------------------------- /packages/react-moveable/src/externalTypes.ts: -------------------------------------------------------------------------------- 1 | export * from "./types"; 2 | export type { MoveableElementMatrixInfo } from "./utils/calculateMatrixStack"; 3 | export type { MoveableElementInfo } from "./utils/getElementInfo"; 4 | export type { MoveableTargetInfo } from "./utils/getMoveableTargetInfo"; 5 | -------------------------------------------------------------------------------- /packages/react-moveable/src/gesto/GestoData.ts: -------------------------------------------------------------------------------- 1 | import { MoveableManagerInterface } from "../types"; 2 | 3 | export function getGestoData(moveable: MoveableManagerInterface, ableName: string) { 4 | const targetGesto = moveable.targetGesto; 5 | const controlGesto = moveable.controlGesto; 6 | let data!: Record; 7 | 8 | if (targetGesto?.isFlag()) { 9 | data = targetGesto.getEventData()[ableName]; 10 | } 11 | 12 | if (!data && controlGesto?.isFlag()) { 13 | data = controlGesto.getEventData()[ableName]; 14 | } 15 | 16 | return data || {}; 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-moveable/src/index.ts: -------------------------------------------------------------------------------- 1 | import Moveable from "./index.esm"; 2 | 3 | export * from "./types"; 4 | export * from "./index.esm"; 5 | export default Moveable; 6 | -------------------------------------------------------------------------------- /packages/react-moveable/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from "./index.esm"; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | module.exports = Moveable; 8 | export * from "./index.esm"; 9 | export default Moveable; 10 | -------------------------------------------------------------------------------- /packages/react-moveable/src/makeMoveable.ts: -------------------------------------------------------------------------------- 1 | import { Able } from "./types"; 2 | import { InitialMoveable } from "./InitialMoveable"; 3 | 4 | export function makeMoveable = {}>( 5 | ables: Array>, 6 | ): typeof InitialMoveable & (new (...args: any[]) => InitialMoveable) { 7 | return class Moveable extends InitialMoveable { 8 | public static defaultAbles = ables; 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-moveable/src/utils/persist.ts: -------------------------------------------------------------------------------- 1 | import { minus } from "@scena/matrix"; 2 | import { getMinMaxs } from "overlap-area"; 3 | import { MoveableManagerState, PersistRectData } from "../types"; 4 | 5 | 6 | export function getPersistState(rect: PersistRectData): Partial | null { 7 | let { 8 | pos1, 9 | pos2, 10 | pos3, 11 | pos4, 12 | } = rect; 13 | if (!pos1 || !pos2 || !pos3 || !pos4) { 14 | return null; 15 | } 16 | const minPos = getMinMaxs([pos1!, pos2!, pos3!, pos4!]); 17 | const posDelta = [minPos.minX, minPos.minY]; 18 | const origin = minus(rect.origin!, posDelta); 19 | 20 | pos1 = minus(pos1, posDelta); 21 | pos2 = minus(pos2, posDelta); 22 | pos3 = minus(pos3, posDelta); 23 | pos4 = minus(pos4, posDelta); 24 | return { 25 | ...rect, 26 | left: rect.left, 27 | top: rect.top, 28 | posDelta, 29 | pos1, 30 | pos2, 31 | pos3, 32 | pos4, 33 | origin, 34 | beforeOrigin: origin, 35 | // originalBeforeOrigin: origin, 36 | isPersisted: true, 37 | }; 38 | } 39 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactDraggableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 19 | e.target.style.transform = e.transform; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactOriginDraggableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 17 | e.target.style.transform = e.transform; 18 | }} 19 | onDragOrigin={e => { 20 | e.target.style.transformOrigin = e.transformOrigin; 21 | e.target.style.transform = e.drag.transform; 22 | }} 23 | onRotate={e => { 24 | e.target.style.transform = e.drag.transform; 25 | }} 26 | /> 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactPinchableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |

Pinch the target with two fingers on a touch-capable device.

9 |

Drag, Scale and Rotate are possible.

10 |
Target
11 | { 19 | e.target.style.cssText += e.cssText; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactResizableApp.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from "react"; 3 | import Moveable from "@/react-moveable"; 4 | 5 | export default function App(props: Record) { 6 | const targetRef = React.useRef(null); 7 | 8 | return ( 9 |
10 |
11 |
Target
17 | { 24 | e.target.style.width = `${e.width}px`; 25 | e.target.style.height = `${e.height}px`; 26 | e.target.style.transform = e.drag.transform; 27 | }} 28 | /> 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactRotatableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
13 | { 19 | e.target.style.transform = e.drag.transform; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactScalableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 18 | e.target.style.transform = e.drag.transform; 19 | }} 20 | /> 21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/1-Basic/ReactWarpableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 16 | e.target.style.transform = e.transform; 17 | }} 18 | /> 19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/3-Group/ReactMultipleGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const moveableRef = React.useRef(null); 6 | return (
7 | 10 |
Target1
13 |
Target2
14 |
Target3
17 | { 24 | e.events.forEach(ev => { 25 | ev.target.style.transform = ev.transform; 26 | }); 27 | }} 28 | /> 29 |
); 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/3-Group/ReactRoundableGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target1
11 |
Target2
12 |
Target3
13 | { 23 | e.events.forEach(ev => { 24 | ev.target.style.cssText += ev.cssText; 25 | }); 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/3-IndiviualGroup/0-Default.stories.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | DEFAULT_ROTATABLE_CONTROLS, 3 | DEFAULT_DRAGGABLE_CONTROLS, 4 | DEFAULT_SCALABLE_CONTROLS, 5 | } from "../controls/default"; 6 | import { add } from "../utils/story"; 7 | 8 | 9 | export default { 10 | title: "Individual Group", 11 | }; 12 | 13 | export const IndividualGroupDraggableScalableRotatable = add("Draggable & Scalable & Rotatable", { 14 | app: require("./ReactDraggableScalableRotatableApp").default, 15 | path: require.resolve("./ReactDraggableScalableRotatableApp"), 16 | argsTypes: { 17 | ...DEFAULT_SCALABLE_CONTROLS, 18 | ...DEFAULT_ROTATABLE_CONTROLS, 19 | ...DEFAULT_DRAGGABLE_CONTROLS, 20 | }, 21 | }); 22 | 23 | export const IndividualGroupGroupableProps = add("Use Individual Groupable Props", { 24 | app: require("./ReactIndividualGroupablePropsApp").default, 25 | path: require.resolve("./ReactIndividualGroupablePropsApp"), 26 | }); 27 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/3-IndiviualGroup/ReactIndividualGroupablePropsApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target1
9 |
Target2
10 |
Target3
11 | { 18 | if (element!.classList.contains("target2")) { 19 | return { 20 | resizable: false, 21 | }; 22 | } 23 | }} 24 | onRender={e => { 25 | e.target.style.cssText += e.cssText; 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactCheckInputApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |

checkInput (false)

7 | 8 |

checkInput (true)

9 | 10 | { 14 | e.target.style.cssText += e.cssText; 15 | }} 16 | /> 17 | { 22 | e.target.style.cssText += e.cssText; 23 | }} 24 | /> 25 |
; 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactControlPaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return
6 |
7 | { 16 | e.target.style.cssText += e.cssText; 17 | }} 18 | /> 19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactDragTargetApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Drag
10 |
11 | { 18 | e.target.style.cssText += e.cssText; 19 | }} 20 | /> 21 |
; 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactDragTargetSelfApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Drag
10 |
11 | { 19 | e.target.style.cssText += e.cssText; 20 | }} 21 | /> 22 |
; 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactLinePaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return
6 |
7 | { 14 | e.target.style.cssText += e.cssText; 15 | }} 16 | /> 17 |
; 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactPaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
7 | { 19 | e.target.style.cssText += e.cssText; 20 | }} 21 | /> 22 |
; 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactTransformedApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return ( 6 |
10 |
11 |
15 |
Target
18 | { 24 | e.target.style.cssText += e.cssText; 25 | }} 26 | > 27 |
28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactViewContainerApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |

8 | * When you drag, the class name `${`{ableName}`}-view-dragging` is added to the viewContainer. 9 |

10 |
Target
11 | { 18 | e.target.style.cssText += e.cssText; 19 | }} 20 | /> 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-Options/ReactZoomApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
10 | { 16 | e.target.style.cssText += e.cssText; 17 | }} 18 | /> 19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-SVG/ReactSVGCircleApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
12 |
16 | 21 | 22 | 23 | { 29 | e.target.style.cssText += e.cssText; 30 | }} 31 | > 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-SVG/ReactSVGForeignObjectApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 | 9 | 10 |
Hi
11 | 12 | 13 | { 17 | e.target.style.cssText += e.cssText; 18 | }} 19 | /> 20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-SVG/ReactSVGForeignObjectInnerApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 | 9 | 10 |
Hi
11 | 12 | 13 | { 17 | e.target.style.cssText += e.cssText; 18 | }} 19 | /> 20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/4-SVG/ReactSVGGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return (
6 | 9 | 10 | 11 | 14 | 15 | 16 | { 20 | e.target.style.transform = e.transform; 21 | }} 22 | /> 23 |
); 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5-Snap&Bound/ReactSnapElementsGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return ( 6 |
7 |
14 |
Target 1
15 |
Target 2
16 |
Target 3
17 | { 25 | e.events.forEach(ev => { 26 | ev.target.style.cssText += ev.cssText; 27 | }); 28 | }} 29 | /> 30 |
31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5-Snap&Bound/ReactSnapRotationsApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
12 |
Target
16 | { 25 | e.target.style.cssText += e.cssText; 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/0-Moveable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | export default { 4 | title: "Advanced Moveable Settings", 5 | }; 6 | 7 | export const AdancedMoveablePositionFixed = add("Target with position: fixed;", { 8 | app: require("./ReactPositionFixedApp").default, 9 | path: require.resolve("./ReactPositionFixedApp"), 10 | }); 11 | 12 | export const AdancedMoveableSelectForm = add("Select Form", { 13 | app: require("./ReactSelectFormApp").default, 14 | path: require.resolve("./ReactSelectFormApp"), 15 | }); 16 | 17 | export const AdancedMoveableNoRelative = add("Static Body", { 18 | app: require("./ReactNoRelativeApp").default, 19 | path: require.resolve("./ReactNoRelativeApp"), 20 | }); 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/0-Moveable/ReactSelectFormApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const [target, setTarget] = React.useState(); 6 | 7 | React.useEffect(() => { 8 | setTarget(document.querySelector("select")!); 9 | }, []); 10 | 11 | return ( 12 |
13 | 22 | { 26 | e.target.style.transform = e.transform; 27 | }} 28 | /> 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/1-Draggable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | 4 | export default { 5 | title: "advanced Draggable", 6 | }; 7 | 8 | export const AdvancedDraggableEdgeDraggable = add("edgeDraggable with edge", { 9 | app: require("./ReactEdgeDraggableWithEdgeApp").default, 10 | path: require.resolve("./ReactEdgeDraggableWithEdgeApp"), 11 | }); 12 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/1-Draggable/ReactEdgeDraggableWithEdgeApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
Target
8 | { 15 | e.target.style.transform = e.transform; 16 | }} 17 | onResize={e => { 18 | e.target.style.width = `${e.width}px`; 19 | e.target.style.height = `${e.height}px`; 20 | e.target.style.transform = e.drag.transform; 21 | }} 22 | /> 23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/2-Resizable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | 4 | export default { 5 | title: "Advacned Resizable", 6 | }; 7 | 8 | export const AdvancedResizableFixedDirection = add("Resizable & Scalable with fixed direction", { 9 | app: require("./ReactFixedDirectionApp").default, 10 | path: require.resolve("./ReactFixedDirectionApp"), 11 | }); 12 | 13 | export const AdvancedResizableFlex = add("Resizable with display: flex", { 14 | app: require("./ReactFlexApp").default, 15 | path: require.resolve("./ReactFlexApp"), 16 | }); 17 | 18 | export const AdvancedResizableGroupMinSize = add("Limit Sizes with Group", { 19 | app: require("./ReactGroupMinSizeApp").default, 20 | path: require.resolve("./ReactGroupMinSizeApp"), 21 | }); 22 | 23 | export const AdvancedResizableEdgeControl = add("Using Edges and Controls with Draggable, Resizable, and Scalable", { 24 | app: require("./ReactWithEdgeControlApp").default, 25 | path: require.resolve("./ReactWithEdgeControlApp"), 26 | }); 27 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/2-Resizable/ReactWithEdgeControlApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Target1
7 | { 22 | e.target.style.cssText += `transform: ${e.transform}`; 23 | }} 24 | onResize={e => { 25 | e.target.style.cssText += `width: ${e.boundingWidth}px;` 26 | + `height: ${e.boundingHeight}px;` 27 | + `transform: ${e.drag.transform}`; 28 | }} 29 | onScale={e => { 30 | e.target.style.cssText += `transform: ${e.drag.transform}`; 31 | }} 32 | /> 33 |
; 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/3-Scalable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | 4 | export default { 5 | title: "Advacned Scalable", 6 | }; 7 | 8 | export const AdvancedScalableMinMax = add("Scalable with min, max size", { 9 | app: require("./ReactScalableMinMaxApp").default, 10 | path: require.resolve("./ReactScalableMinMaxApp"), 11 | }); 12 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/3-Scalable/ReactScalableMinMaxApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Target
7 | { 12 | e.setMinScaleSize([100, 100]); 13 | e.setMaxScaleSize([500, 500]); 14 | }} 15 | onRender={e => { 16 | e.target.style.cssText += e.cssText; 17 | }} 18 | /> 19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactCustomOriginApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
Target
8 | { 12 | e.setFixedDirection([-0.5, -0.5]); 13 | }} 14 | onRotate={e => { 15 | e.target.style.transform = e.drag.transform; 16 | }} 17 | /> 18 |
19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithControlsApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable, { DIRECTIONS } from "@/react-moveable"; 3 | import { useKeycon } from "react-keycon"; 4 | 5 | export default function App() { 6 | const { isKeydown } = useKeycon({ 7 | keys: ["meta"], 8 | }); 9 | 10 | return ( 11 |
12 |
Target
13 | { 23 | e.target.style.cssText += e.cssText; 24 | }} 25 | onRotateStart={e => { 26 | e.setFixedDirection([-0.5, -0.5]); 27 | }} 28 | onRotate={e => { 29 | e.target.style.cssText += e.cssText; 30 | }} 31 | /> 32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/4-Rotatable/ReactRotateWithResizeApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable, { DIRECTIONS} from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
Target
10 | { 24 | e.target.style.cssText += e.cssText; 25 | 26 | }} 27 | /> 28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/5-Snappable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | 4 | export default { 5 | title: "Advanced Snappable", 6 | }; 7 | 8 | export const AdvancedSnappableCustomGuidelines = add("Guidelines with custom styles", { 9 | app: require("./ReactCustomGuidelinesApp").default, 10 | path: require.resolve("./ReactCustomGuidelinesApp"), 11 | }); 12 | 13 | export const AdvancedSnappableCustomElementGuidelines = add("Element Guidelines with custom styles", { 14 | app: require("./ReactCustomElementGuidelinesApp").default, 15 | path: require.resolve("./ReactCustomElementGuidelinesApp"), 16 | }); 17 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/9-Clippable/Deafult.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../../utils/story"; 2 | 3 | 4 | export default { 5 | title: "Adavanced Clippable", 6 | }; 7 | 8 | export const AdvancedClippable = add("Clippable with Drag, Resize, Rotate", { 9 | app: require("./ReactClippableApp").default, 10 | path: require.resolve("./ReactClippableApp"), 11 | }); 12 | 13 | 14 | export const AdvancedClippableClippedArea = add("Drag, Resize, Rotate with Clipped Area (Testing)", { 15 | app: require("./ReactClippedAreaApp").default, 16 | path: require.resolve("./ReactClippedAreaApp"), 17 | }); 18 | 19 | 20 | export const AdvancedClippableClipSnap = add("Clip & Snap", { 21 | app: require("./ReactClipSnapApp").default, 22 | path: require.resolve("./ReactClipSnapApp"), 23 | }); 24 | 25 | export const AdvancedClippableResizableKeepRatio = add("keepRatio for both clippable and resizeable", { 26 | app: require("./ReactClippableResizableKeepRatioApp").default, 27 | path: require.resolve("./ReactClippableResizableKeepRatioApp"), 28 | }); 29 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
16 | { 24 | e.target.style.cssText += e.cssText; 25 | }} 26 | /> 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/5A-Advanced/9-Clippable/ReactClippedAreaApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
16 | { 25 | e.target.style.cssText += e.cssText; 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/6-CustomAble/0-CustomAble.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../utils/story"; 2 | 3 | export default { 4 | title: "Make Custom Able", 5 | }; 6 | 7 | export const CustomAbleDimensionViewable = add("DimensionViewable", { 8 | app: require("./ReactDimensionViewableApp").default, 9 | path: require.resolve("./ReactDimensionViewableApp"), 10 | }); 11 | 12 | export const CustomAbleEditable = add("Editable", { 13 | app: require("./ReactEditableApp").default, 14 | path: require.resolve("./ReactEditableApp"), 15 | }); 16 | 17 | export const CustomAbleRotatble = add("Custom Rotatable", { 18 | app: require("./ReactCustomRotatableApp").default, 19 | path: require.resolve("./ReactCustomRotatableApp"), 20 | }); 21 | 22 | export const CustomAbleMouseEnterLeave = add("Mouse Enter & Leave", { 23 | app: require("./ReactMouseEnterLeaveApp").default, 24 | path: require.resolve("./ReactMouseEnterLeaveApp"), 25 | }); 26 | 27 | 28 | export const CustomAbleDragTarget = add("DragTarget", { 29 | app: require("./ReactDragTargetAbleApp").default, 30 | path: require.resolve("./ReactDragTargetAbleApp"), 31 | }); 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/8-TreeShaking/0-TreeShaking.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../utils/story"; 2 | 3 | 4 | 5 | export default { 6 | title: "Support Tree Shaking", 7 | }; 8 | 9 | 10 | export const TreeShaking = add("Use only Draggable, Resizable, Rotatable", { 11 | app: require("./TreeShakingApp").default, 12 | path: require.resolve("./TreeShakingApp"), 13 | }); 14 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/8-TreeShaking/TreeShakingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | DraggableProps, makeMoveable, ResizableProps, 4 | RotatableProps, Rotatable, Draggable, Resizable, 5 | } from "@/react-moveable"; 6 | 7 | 8 | const Moveable = makeMoveable([ 9 | Draggable, 10 | Resizable, 11 | Rotatable, 12 | ]); 13 | 14 | export default function App() { 15 | const targetRef = React.useRef(null); 16 | return
17 |

Use only Draggable, Resizable, Rotatable (30% size reduction)

18 |
Target
19 | { 25 | e.target.style.cssText += e.cssText; 26 | }} 27 | /> 28 |
; 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/9-Scrolling/0-Scrollable.stories.tsx: -------------------------------------------------------------------------------- 1 | import { DEFAULT_SCROLLABLE_CONTROLS } from "../controls/default"; 2 | import { add } from "../utils/story"; 3 | 4 | export default { 5 | title: "Support Scroll", 6 | }; 7 | 8 | export const ScrollingScrollable = add("Use Scrollable", { 9 | app: require("./ReactScrollableApp").default, 10 | path: require.resolve("./ReactScrollableApp"), 11 | argsTypes: { 12 | ...DEFAULT_SCROLLABLE_CONTROLS, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/9-Scrolling/ReactScrollableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return (
6 |
7 |
Target
8 | { 21 | e.target.style.cssText += e.cssText; 22 | }} 23 | onScroll={({ scrollContainer, direction }) => { 24 | scrollContainer.scrollBy(direction[0] * 10, direction[1] * 10); 25 | }} 26 | > 27 |
28 |
); 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactATagApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 | 7 | { 12 | e.target.style.transform = e.transform; 13 | }} 14 | /> 15 |
; 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactAccuracyApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const spanRef = React.useRef(null); 6 | 7 | return
8 | Position 9 |
17 |
Target
22 |
23 | { 33 | e.target.style.transform = e.transform; 34 | 35 | spanRef.current!.innerHTML = `${e.translate[0]} x ${e.translate[1]}`; 36 | }} 37 | /> 38 |
; 39 | } 40 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactClickApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | const moveableRef = React.useRef(null); 7 | 8 | return ( 9 |
10 |
{ 13 | console.log("Click"); 14 | }} onMouseDown={() => { 15 | console.log("MouseDown"); 16 | }}> 17 |
Target
18 | { 25 | e.target.style.transform = e.transform; 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactFlexApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
16 | { 21 | e.target.style.transform = e.transform; 22 | }} 23 | /> 24 |
; 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactGroupDragAreaApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const [targets, setTargets] = React.useState(".target"); 6 | 7 | React.useEffect(() => { 8 | setTimeout(() => { 9 | setTargets(document.querySelectorAll(".target, .moveable-area")); 10 | // setTargets(".target, .moveable-area"); 11 | }, 100); 12 | }, []); 13 | return
14 |
Target1
15 |
Target2
16 |
Target3
17 | { 21 | events.forEach(ev => { 22 | ev.target.style.transform = ev.transform; 23 | }); 24 | }} 25 | onDragGroupEnd={({ events }) => { 26 | console.log(events); 27 | }} 28 | /> 29 |
; 30 | } 31 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactGroupPaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target1
11 |
Target2
12 |
Target3
13 | { 20 | e.events.forEach(ev => { 21 | ev.target.style.cssText += ev.cssText; 22 | }); 23 | }} 24 | /> 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactHandleLargeNumberApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const arr: number[] = []; 6 | 7 | for (let i = 0; i < 300; ++i) { 8 | arr.push(i); 9 | } 10 | return ( 11 |
12 |
13 | {arr.map((i) => { 14 | return <> 15 |
Target
16 | { 20 | e.target.style.cssText += e.cssText; 21 | }} 22 | /> 23 | ; 24 | })} 25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactIframeApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { createPortal } from "react-dom"; 3 | import Moveable from "@/react-moveable"; 4 | 5 | function Iframe(props: Record) { 6 | const [ref, setRef] = React.useState(); 7 | const container = ref?.contentWindow?.document?.body; 8 | 9 | return ( 10 | 13 | ); 14 | } 15 | 16 | export default function App() { 17 | const targetRef = React.useRef(null); 18 | 19 | return ( 20 |
21 |
22 | 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactInputApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 | 7 | { 11 | e.target.style.transform = e.transform; 12 | }} 13 | /> 14 |
; 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactNestedSVGApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 | 11 | 16 | 23 | 24 | 25 | { 30 | e.target.style.transform = e.transform; 31 | }} 32 | /> 33 |
; 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactNestedTargetApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | 6 | return ( 7 |
8 |
9 |
10 | Target 11 |
12 | Target 13 | 14 |
15 |
16 | { 21 | e.target.style.transform = e.transform; 22 | }} 23 | /> 24 | { 29 | e.target.style.transform = e.transform; 30 | }} 31 | /> 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactNoTargetApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Target1
7 | { 12 | e.target.style.transform = e.transform; 13 | }} 14 | /> 15 |
; 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactOverflowApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const moveableRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
12 |
{ 15 | moveableRef.current?.updateRect(); 16 | }}> 17 |
21 |
22 | { 29 | e.target.style.transform = e.transform; 30 | }} 31 | /> 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactRequestBoundsApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const moveableRef = React.useRef(null); 6 | 7 | return ( 8 |
9 | 16 |
Target
17 | 18 | { 30 | e.target.style.cssText += e.cssText; 31 | }} 32 | /> 33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactSafariApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | import "./safari.css"; 4 | 5 | export default function App() { 6 | return
7 |
8 |
9 |
10 | { 14 | e.target.style.transform = e.transform; 15 | }} 16 | /> 17 |
18 |
19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactScalableKeepRatioApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Target1
9 | { 14 | e.setRatio(1); 15 | }} 16 | onScale={e => { 17 | // console.log(e.scale); 18 | e.target.style.cssText += e.cssText; 19 | }} 20 | /> 21 |
; 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactTRSTargetApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return ( 6 |
9 |
10 |
14 |
Target
20 |
21 | { 28 | e.target.style.cssText += e.cssText; 29 | }} 30 | > 31 |
32 |
33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactTranslate50App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target
11 | { 17 | console.log(e.dist); 18 | }} 19 | onRender={e => { 20 | e.target.style.cssText += e.cssText; 21 | }} 22 | /> 23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactWillChangeApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
7 | {/*
*/} 8 |
Target1
9 | {/*
*/} 10 |
11 | { 16 | e.target.style.transform = e.transform; 17 | }} 18 | /> 19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/ReactZoomedCursorApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return ( 6 |
7 |
11 |
Target
12 | { 17 | e.target.style.cssText += e.cssText; 18 | }} 19 | /> 20 |
21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/safari.css: -------------------------------------------------------------------------------- 1 | .safari-canvas { 2 | margin-top: 125px; 3 | overflow: inherit; 4 | height: 1000px; 5 | margin-left: 120px; 6 | padding: 4rem 10rem; 7 | position: relative; 8 | background: #eee; 9 | } 10 | 11 | .safari-pages { 12 | transform: scale(1.45); 13 | transform-origin: center top 0px; 14 | height: 1726.35px; 15 | } 16 | 17 | .safari-target { 18 | border: 1px solid red; 19 | min-height: 50px; 20 | max-width: 100px; 21 | width: 100px; 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/99-Tests/snap.css: -------------------------------------------------------------------------------- 1 | .snapGrid { 2 | background: green; 3 | margin-top: 20px; 4 | min-height: 300px; 5 | width: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/9A-Components/0-Components.stories.tsx: -------------------------------------------------------------------------------- 1 | import { add } from "../utils/story"; 2 | 3 | 4 | export default { 5 | title: "Combination with Other Components", 6 | }; 7 | 8 | export const ComponentsSelecto = add("Use Selecto", { 9 | app: require("./ReactSelectoApp").default, 10 | path: require.resolve("./ReactSelectoApp"), 11 | }); 12 | 13 | export const ComponentsSelectoWithMultipleGroup = add("Use Selecto with Multiple Group", { 14 | app: require("./ReactSelectoMultipleGroupApp").default, 15 | path: require.resolve("./ReactSelectoMultipleGroupApp"), 16 | }); 17 | 18 | export const ComponentsSelectoWithGroupUngroup = add("Use Selecto with Group & Ungroup", { 19 | app: require("./ReactSelectoMultipleGroupUngroupApp").default, 20 | path: require.resolve("./ReactSelectoMultipleGroupUngroupApp"), 21 | }); 22 | 23 | 24 | export const ComponentsSelectoWithNestedGroup = add("Use Selecto with Nested Group", { 25 | app: require("./ReactSelectoNestedGroupApp").default, 26 | path: require.resolve("./ReactSelectoNestedGroupApp"), 27 | }); 28 | 29 | 30 | 31 | 32 | 33 | export const ComponentsInfiniteViewer = add("Use Infinite Viewer", { 34 | app: require("./ReactInfiniteViewerApp").default, 35 | path: require.resolve("./ReactInfiniteViewerApp"), 36 | }); 37 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/common.css: -------------------------------------------------------------------------------- 1 | .dark { 2 | color: white; 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-moveable/stories/templates/default.ts: -------------------------------------------------------------------------------- 1 | import DEFAULT_CSS_TEMPLATE from "!!raw-loader!./default.css"; 2 | 3 | export { DEFAULT_CSS_TEMPLATE }; 4 | -------------------------------------------------------------------------------- /packages/react-moveable/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-moveable/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/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-moveable/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "noEmit": true 6 | }, 7 | "include": [ 8 | "./tests/**/*.ts", 9 | "./tests/**/*.tsx" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-moveable/types/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/packages/react-moveable/types/index.js -------------------------------------------------------------------------------- /packages/react-moveable/types/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-moveable/types", 3 | "private": true, 4 | "main": "./index.js", 5 | "module": "./index.js", 6 | "typings": "../declaration/externalTypes.d.ts", 7 | "types": "../declaration/externalTypes.d.ts", 8 | "sideEffects": false 9 | } 10 | -------------------------------------------------------------------------------- /packages/snappable/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "roots": [ 3 | "", 4 | ], 5 | "transform": { 6 | "^.+\\.tsx?$": "ts-jest", 7 | }, 8 | "testMatch": ["/test/**/*.spec.ts"], 9 | // "testRegex": "spec\\.ts$", 10 | "moduleFileExtensions": [ 11 | "ts", 12 | "tsx", 13 | "js", 14 | "jsx", 15 | "json", 16 | "node", 17 | ], 18 | }; 19 | -------------------------------------------------------------------------------- /packages/snappable/rollup.config.js: -------------------------------------------------------------------------------- 1 | const builder = require("@daybrush/builder"); 2 | 3 | const defaultOptions = { 4 | tsconfig: "tsconfig.build.json", 5 | typescript2: true, 6 | }; 7 | 8 | module.exports = builder([{ 9 | ...defaultOptions, 10 | input: "src/index.ts", 11 | output: "./dist/snappable.esm.js", 12 | format: "es", 13 | exports: "named", 14 | }, 15 | { 16 | ...defaultOptions, 17 | input: "src/index.umd.ts", 18 | output: "./dist/snappable.esm.js", 19 | format: "es", 20 | exports: "default", 21 | name: "Snappable", 22 | }, 23 | { 24 | ...defaultOptions, 25 | input: "src/index.umd.ts", 26 | output: "./dist/snappable.cjs.js", 27 | format: "cjs", 28 | exports: "default", 29 | }, 30 | ]); 31 | -------------------------------------------------------------------------------- /packages/snappable/src/BoundLine.ts: -------------------------------------------------------------------------------- 1 | import { SnappableLine } from "./types"; 2 | import { solveConstantsOffset, solveLineConstants } from "./utils"; 3 | 4 | 5 | export class BoundLine { 6 | private _constants!: [number, number, number]; 7 | constructor(public type: "up" | "down", public line: SnappableLine) {} 8 | public get a() { 9 | return this[0]; 10 | } 11 | public get b() { 12 | return this[1]; 13 | } 14 | public get c() { 15 | return this[2]; 16 | } 17 | public get slope() { 18 | return -this.a / this.b; 19 | } 20 | public get 0() { 21 | return this.constants[0]; 22 | } 23 | public get 1() { 24 | return this.constants[1]; 25 | } 26 | public get 2() { 27 | return this.constants[2]; 28 | } 29 | public get constants() { 30 | if (!this._constants) { 31 | this._constants = solveLineConstants(this.line); 32 | } 33 | return this._constants; 34 | } 35 | public getOffset(pos: number[]) { 36 | return solveConstantsOffset(this.constants, pos); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/snappable/src/Snappable.ts: -------------------------------------------------------------------------------- 1 | import { BoundLine } from "./BoundLine"; 2 | import { SnappableBoundLine, SnappableLine } from "./types"; 3 | import { groupBy, solveConstantsOffset, solveLineConstants } from "./utils"; 4 | 5 | export class Snappable { 6 | private _snaps: SnappableLine[] = []; 7 | private _bounds: BoundLine[] = []; 8 | private _innerBounds: SnappableLine[] = []; 9 | constructor() { 10 | 11 | } 12 | public move(lines: SnappableLine[], dist: number[]) { 13 | 14 | } 15 | public addBoundLine(lines: SnappableBoundLine[]) { 16 | lines.forEach(line => { 17 | this._bounds.push(line); 18 | }) 19 | } 20 | public checkBounds(lines: SnappableLine[]) { 21 | const bounds = this._bounds; 22 | 23 | 24 | groupBy(bounds, boundLine => boundLine.slope).forEach(boundLines => { 25 | boundLines.forEach(boundLine => { 26 | const type = boundLine.type; 27 | const isIncrease = type === "up" 28 | 29 | lines.forEach(line => { 30 | [line.point1, line.point2].forEach(point => { 31 | const offset = boundLine.getOffset(point); 32 | }); 33 | }); 34 | }); 35 | }); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/snappable/src/types.ts: -------------------------------------------------------------------------------- 1 | export interface SnappableOptions { 2 | 3 | } 4 | 5 | export interface SnappableLine { 6 | point1: number[]; 7 | point2: number[]; 8 | } 9 | 10 | export interface SnappableBoundLine extends SnappableLine { 11 | /** 12 | * "up" if above or to the left of the line's slope, 13 | * "down" if below or to the right of the line 14 | */ 15 | type: "up" | "down"; 16 | } 17 | -------------------------------------------------------------------------------- /packages/snappable/test/bounds.spec.ts: -------------------------------------------------------------------------------- 1 | import { Snappable } from "src/Snappable"; 2 | import { } from "overlap-area"; 3 | describe("aa", () => { 4 | it("aa", () => { 5 | const points1 = [ 6 | [0, 0], 7 | ] 8 | getOverlapPoints 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /packages/snappable/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "jsx": "react" 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /packages/snappable/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/**/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/snappable/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 | "es2019", 14 | "es2015", 15 | "dom" 16 | ], 17 | "allowJs": true, 18 | "allowSyntheticDefaultImports": true, 19 | "strict": true, 20 | "strictNullChecks": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "resolveJsonModule": true, 23 | "isolatedModules": false, 24 | "noEmit": true, 25 | "baseUrl": ".", 26 | }, 27 | "include": [ 28 | "./src/**/*.ts", 29 | "./src/**/*.tsx", 30 | "./test/**/*.ts", 31 | "./test/**/*.tsx" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /packages/snappable/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "jsx": "react", 7 | "types": [ 8 | "karma-chai", 9 | "mocha" 10 | ], 11 | "strict": false, 12 | "strictNullChecks": false, 13 | "forceConsistentCasingInFileNames": false, 14 | "resolveJsonModule": false, 15 | "isolatedModules": false, 16 | "noEmit": false, 17 | "allowUnreachableCode": true, 18 | "allowUnusedLabels": true 19 | }, 20 | "include": [ 21 | "./src/**/*.ts", 22 | "./test/**/*.ts", 23 | "./test/**/*.tsx" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /packages/svelte-moveable/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /dist 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | vite.config.js.timestamp-* 11 | vite.config.ts.timestamp-* 12 | -------------------------------------------------------------------------------- /packages/svelte-moveable/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | resolution-mode=highest 3 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/lib/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { SvelteComponentTyped } from "svelte"; 3 | import { MoveableInterface, MoveableOptions, MoveableEvents } from "moveable"; 4 | 5 | export type SvelteMoveableEvents = { 6 | [key in keyof MoveableEvents]: CustomEvent; 7 | } 8 | export default class MoveableComponent extends SvelteComponentTyped< 9 | MoveableOptions & T, 10 | SvelteMoveableEvents 11 | > { } 12 | 13 | export default interface MoveableComponent extends MoveableInterface { 14 | } 15 | export * from "moveable"; 16 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/lib/index.js: -------------------------------------------------------------------------------- 1 | import Moveable from "./Moveable.svelte"; 2 | import { METHODS } from "moveable"; 3 | 4 | export default /*#__PURE__*/ (() => { 5 | const prototype = Moveable.prototype; 6 | 7 | if (!prototype) { 8 | return Moveable; 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 Moveable; 23 | })(); 24 | 25 | export * from "moveable"; 26 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/lib/index.umd.js: -------------------------------------------------------------------------------- 1 | import Moveable from "./index.js"; 2 | import * as modules from "moveable"; 3 | 4 | for (const name in modules) { 5 | Moveable[name] = modules[name]; 6 | } 7 | 8 | export default Moveable; 9 | -------------------------------------------------------------------------------- /packages/svelte-moveable/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
Target
14 | 15 |
16 | -------------------------------------------------------------------------------- /packages/svelte-moveable/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /packages/svelte-moveable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "target": "ESNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/svelte-moveable/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()] 6 | }); 7 | -------------------------------------------------------------------------------- /packages/vue-moveable/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /packages/vue-moveable/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /packages/vue-moveable/demo/index.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | 5 | new Vue({ 6 | render: (h: any) => h(App), 7 | }).$mount('#app'); 8 | -------------------------------------------------------------------------------- /packages/vue-moveable/demo/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue-moveable/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-moveable/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/daybrush/moveable/75069102f30c88cd89ecaaa8ca7e5f7434e54807/packages/vue-moveable/public/favicon.ico -------------------------------------------------------------------------------- /packages/vue-moveable/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-moveable 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /packages/vue-moveable/rollup.config.js: -------------------------------------------------------------------------------- 1 | const buildHelper = require("@daybrush/builder"); 2 | const vuePlugin = require("rollup-plugin-vue"); 3 | 4 | const defaultOptions = { 5 | sourcemap: true, 6 | input: "./src/index.ts", 7 | exports: "named", 8 | external: true, 9 | plugins: [ 10 | vuePlugin(), 11 | ], 12 | outputOptions: { 13 | interop: "auto", 14 | }, 15 | }; 16 | module.exports = buildHelper([ 17 | { 18 | ...defaultOptions, 19 | format: "es", 20 | output: "./dist/moveable.esm.js", 21 | }, 22 | { 23 | ...defaultOptions, 24 | format: "cjs", 25 | input: "./src/index.umd.ts", 26 | exports: "default", 27 | output: "./dist/moveable.cjs.js", 28 | }, 29 | ]); 30 | -------------------------------------------------------------------------------- /packages/vue-moveable/src/Moveable.vue.d.ts: -------------------------------------------------------------------------------- 1 | import { MethodInterface } from "framework-utils"; 2 | import VanillaMoveable, { MoveableProperties, MoveableInterface } from "moveable"; 3 | 4 | interface VueMoveableInterface 5 | extends MoveableProperties, MoveableInterface { 6 | $el: HTMLElement; 7 | $_moveable: VanillaMoveable; 8 | $props: MoveableProperties; 9 | } 10 | 11 | declare const VueMoveable: VueMoveableInterface; 12 | type VueMoveable = VueMoveableInterface; 13 | 14 | export default VueMoveable; 15 | -------------------------------------------------------------------------------- /packages/vue-moveable/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /packages/vue-moveable/src/index.ts: -------------------------------------------------------------------------------- 1 | // import VueMoveable from './VueMoveable'; 2 | import Moveable from './Moveable.vue'; 3 | 4 | export default Moveable; 5 | export { Moveable as VueMoveable }; 6 | export * from "moveable"; 7 | 8 | -------------------------------------------------------------------------------- /packages/vue-moveable/src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from './index'; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | export default Moveable; 8 | -------------------------------------------------------------------------------- /packages/vue-moveable/tsconfig.declaration.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "removeComments": true, 5 | "declaration": true, 6 | "emitDeclarationOnly": true, 7 | "declarationDir": "declaration" 8 | }, 9 | "include": [ 10 | "src/**/*.ts", 11 | "src/**/*.tsx", 12 | "src/**/*.vue" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/vue-moveable/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/vue3-moveable/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /packages/vue3-moveable/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /packages/vue3-moveable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/vue3-moveable/src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 15 | 16 | 38 | -------------------------------------------------------------------------------- /packages/vue3-moveable/src/components/index.ts: -------------------------------------------------------------------------------- 1 | import Moveable from './Moveable.vue'; 2 | 3 | 4 | export { Moveable as VueMoveable }; 5 | export * from 'moveable'; 6 | export default Moveable; 7 | -------------------------------------------------------------------------------- /packages/vue3-moveable/src/components/index.umd.ts: -------------------------------------------------------------------------------- 1 | import Moveable, * as modules from './index'; 2 | 3 | for (const name in modules) { 4 | (Moveable as any)[name] = (modules as any)[name]; 5 | } 6 | 7 | export default Moveable; 8 | -------------------------------------------------------------------------------- /packages/vue3-moveable/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /packages/vue3-moveable/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/vue3-moveable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": [ 7 | "ES2020", 8 | "DOM", 9 | "DOM.Iterable" 10 | ], 11 | "skipLibCheck": true, 12 | /* Bundler mode */ 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "preserve", 17 | "noEmit": true, 18 | "declaration": true, 19 | "outDir": "dist", 20 | "declarationDir": "dist", 21 | "baseUrl": ".", 22 | /* Linting */ 23 | "strict": true, 24 | "noUnusedLocals": true, 25 | "noUnusedParameters": true, 26 | "noFallthroughCasesInSwitch": true 27 | }, 28 | "include": [ 29 | "src/components/**/*.ts", 30 | "src/components/**/*.d.ts", 31 | "src/components/**/*.tsx", 32 | "src/components/**/*.vue" 33 | ], 34 | "references": [ 35 | { 36 | "path": "./tsconfig.node.json" 37 | } 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /packages/vue3-moveable/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /packages/vue3-moveable/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | import { defineConfig } from "vite"; 3 | import vue from "@vitejs/plugin-vue"; 4 | import dts from "vite-plugin-dts"; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | build: { 9 | lib: { 10 | // Could also be a dictionary or array of multiple entry points 11 | entry: resolve(__dirname, 'src/components/index.ts'), 12 | name: 'Moveable', 13 | formats: ["cjs", "es"], 14 | // the proper extensions will be added 15 | fileName: 'moveable', 16 | }, 17 | rollupOptions: { 18 | external: ["vue", "moveable", "@daybrush/utils", "framework-utils"], 19 | output: { 20 | // Provide global variables to use in the UMD build 21 | // Add external deps here 22 | globals: { 23 | vue: "Vue", 24 | }, 25 | }, 26 | }, 27 | minify: false, 28 | }, 29 | plugins: [ 30 | vue(), 31 | dts() 32 | ], 33 | }) 34 | -------------------------------------------------------------------------------- /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-TRBNXHQ0Z"; 10 | 11 | document.body.appendChild(script); 12 | })(); 13 | -------------------------------------------------------------------------------- /storybook/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | stories/**/vue3/ 25 | stories/**/vue2/ 26 | stories/**/svelte/ 27 | stories/**/script/ 28 | stories/**/lit/ 29 | stories/**/angular/ 30 | stories/**/script-*.stories.tsx 31 | stories/**/vue3-*.stories.tsx 32 | stories/**/svelte-*.stories.tsx 33 | stories/**/angular-*.stories.tsx 34 | .nyc_output 35 | test-static 36 | __snapshots__ 37 | *.stories.mdx 38 | -------------------------------------------------------------------------------- /storybook/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from "@storybook/addons"; 2 | 3 | addons.setConfig({ 4 | // showRoots: false, 5 | panelPosition: "right", 6 | }); 7 | 8 | 9 | window.STORYBOOK_GA_ID = "G-TRBNXHQ0ZF" 10 | window.STORYBOOK_REACT_GA_OPTIONS = {} 11 | -------------------------------------------------------------------------------- /storybook/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 26 | -------------------------------------------------------------------------------- /storybook/.storybook/readme.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const fs = require("fs"); 3 | 4 | const readmeText = fs.readFileSync(path.resolve(__dirname, "../../../README.md"), { 5 | encoding: "utf-8", 6 | }); 7 | 8 | fs.mkdirSync(path.resolve(__dirname, "../stories/0-Introduction"), { 9 | recursive: true, 10 | }); 11 | fs.writeFileSync(path.resolve(__dirname, "../stories/0-Introduction/readme.stories.mdx"), ` 12 | import { Meta } from "@storybook/addon-docs"; 13 | 14 | 15 | 16 | ${readmeText}`, { 17 | encoding: "utf-8", 18 | }); 19 | -------------------------------------------------------------------------------- /storybook/.storybook/test-runner.js: -------------------------------------------------------------------------------- 1 | const customSnapshotsDir = `${process.cwd()}/__snapshots__`; 2 | 3 | module.exports = { 4 | async postRender(page, context) { 5 | if (!process.env.SKIP_TEST) { 6 | return; 7 | } 8 | // If you want to take screenshot of multiple browsers, use 9 | // page.context().browser().browserType().name() to get the browser name to prefix the file name 10 | await page.screenshot({ path: `${customSnapshotsDir}/${context.id}.png` }); 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactDraggableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 19 | e.target.style.transform = e.transform; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactOriginDraggableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 17 | e.target.style.transform = e.transform; 18 | }} 19 | onDragOrigin={e => { 20 | e.target.style.transformOrigin = e.transformOrigin; 21 | e.target.style.transform = e.drag.transform; 22 | }} 23 | onRotate={e => { 24 | e.target.style.transform = e.drag.transform; 25 | }} 26 | /> 27 |
28 |
29 | ); 30 | } 31 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactPinchableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |

Pinch the target with two fingers on a touch-capable device.

9 |

Drag, Scale and Rotate are possible.

10 |
Target
11 | { 19 | e.target.style.cssText += e.cssText; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactResizableApp.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from "react"; 3 | import Moveable from "@/react-moveable"; 4 | 5 | export default function App(props: Record) { 6 | const targetRef = React.useRef(null); 7 | 8 | return ( 9 |
10 |
11 |
Target
17 | { 24 | e.target.style.width = `${e.width}px`; 25 | e.target.style.height = `${e.height}px`; 26 | e.target.style.transform = e.drag.transform; 27 | }} 28 | /> 29 |
30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactRotatableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
13 | { 19 | e.target.style.transform = e.drag.transform; 20 | }} 21 | /> 22 |
23 |
24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactScalableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 18 | e.target.style.transform = e.drag.transform; 19 | }} 20 | /> 21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /storybook/stories/1-Basic/react/ReactWarpableApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
9 |
10 |
Target
11 | { 16 | e.target.style.transform = e.transform; 17 | }} 18 | /> 19 |
20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /storybook/stories/3-Group/react/ReactMultipleGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | const moveableRef = React.useRef(null); 6 | return (
7 | 10 |
Target1
13 |
Target2
14 |
Target3
17 | { 24 | e.events.forEach(ev => { 25 | ev.target.style.transform = ev.transform; 26 | }); 27 | }} 28 | /> 29 |
); 30 | } 31 | -------------------------------------------------------------------------------- /storybook/stories/3-Group/react/ReactRoundableGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target1
11 |
Target2
12 |
Target3
13 | { 23 | e.events.forEach(ev => { 24 | ev.target.style.cssText += ev.cssText; 25 | }); 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /storybook/stories/3-IndiviualGroup/react-Default.stories.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | DEFAULT_ROTATABLE_CONTROLS, 3 | DEFAULT_DRAGGABLE_CONTROLS, 4 | DEFAULT_SCALABLE_CONTROLS, 5 | } from "../controls/default"; 6 | import { makeGroup } from "../utils/story"; 7 | 8 | 9 | export default { 10 | title: "Individual Group", 11 | }; 12 | 13 | 14 | const { add } = makeGroup("3-IndividualGroup"); 15 | 16 | 17 | export const IndividualGroupDraggableScalableRotatable = add("Draggable & Scalable & Rotatable", { 18 | appName: "ReactDraggableScalableRotatableApp", 19 | app: require("./react/ReactDraggableScalableRotatableApp").default, 20 | argsTypes: { 21 | ...DEFAULT_SCALABLE_CONTROLS, 22 | ...DEFAULT_ROTATABLE_CONTROLS, 23 | ...DEFAULT_DRAGGABLE_CONTROLS, 24 | }, 25 | }); 26 | 27 | export const IndividualGroupGroupableProps = add("Use Individual Groupable Props", { 28 | appName: "ReactIndividualGroupablePropsApp", 29 | app: require("./react/ReactIndividualGroupablePropsApp").default, 30 | }); 31 | -------------------------------------------------------------------------------- /storybook/stories/3-IndiviualGroup/react/ReactIndividualGroupablePropsApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |
8 |
Target1
9 |
Target2
10 |
Target3
11 | { 18 | if (element!.classList.contains("target2")) { 19 | return { 20 | resizable: false, 21 | }; 22 | } 23 | }} 24 | onRender={e => { 25 | e.target.style.cssText += e.cssText; 26 | }} 27 | /> 28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactCheckInputApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |

checkInput (false)

7 | 8 |

checkInput (true)

9 | 10 | { 14 | e.target.style.cssText += e.cssText; 15 | }} 16 | /> 17 | { 22 | e.target.style.cssText += e.cssText; 23 | }} 24 | /> 25 |
; 26 | } 27 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactControlPaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return
6 |
7 | { 16 | e.target.style.cssText += e.cssText; 17 | }} 18 | /> 19 |
; 20 | } 21 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactDragTargetApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
Drag
10 |
11 | { 18 | e.target.style.cssText += e.cssText; 19 | }} 20 | /> 21 |
; 22 | } 23 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactLinePaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return
6 |
7 | { 14 | e.target.style.cssText += e.cssText; 15 | }} 16 | /> 17 |
; 18 | } 19 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactPaddingApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return
6 |
7 | { 19 | e.target.style.cssText += e.cssText; 20 | }} 21 | /> 22 |
; 23 | } 24 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactTransformedApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | return ( 6 |
10 |
11 |
15 |
Target
18 | { 24 | e.target.style.cssText += e.cssText; 25 | }} 26 | > 27 |
28 |
29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /storybook/stories/4-Options/react/ReactViewContainerApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return ( 6 |
7 |

8 | * When you drag, the class name `${`{ableName}`}-view-dragging` is added to the viewContainer. 9 |

10 |
Target
11 | { 18 | e.target.style.cssText += e.cssText; 19 | }} 20 | /> 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /storybook/stories/4-SVG/react/ReactSVGCircleApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
12 |
16 | 21 | 22 | 23 | { 29 | e.target.style.cssText += e.cssText; 30 | }} 31 | > 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /storybook/stories/4-SVG/react/ReactSVGGroupApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App() { 5 | return (
6 | 9 | 10 | 11 | 14 | 15 | 16 | { 20 | e.target.style.transform = e.transform; 21 | }} 22 | /> 23 |
); 24 | } 25 | -------------------------------------------------------------------------------- /storybook/stories/4-SVG/react/ReactSVGLineApp.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import Moveable from "@/react-moveable"; 3 | 4 | export default function App(props: Record) { 5 | const targetRef = React.useRef(null); 6 | 7 | return ( 8 |
12 |
16 | 21 | 22 | 23 | { 29 | e.target.style.cssText += e.cssText; 30 | }} 31 | > 32 |
33 |
34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /storybook/stories/common.css: -------------------------------------------------------------------------------- 1 | .dark { 2 | color: white; 3 | } 4 | -------------------------------------------------------------------------------- /storybook/stories/templates/default.ts: -------------------------------------------------------------------------------- 1 | import DEFAULT_CSS_TEMPLATE from "./default.css?raw"; 2 | 3 | export { DEFAULT_CSS_TEMPLATE }; 4 | -------------------------------------------------------------------------------- /test/publish.d.ts: -------------------------------------------------------------------------------- 1 | export interface TypeDefInterface { 2 | kind: "typedef"; 3 | name: string; 4 | longname: string; 5 | properties: { [key: string]: PropertyInterface }; 6 | } 7 | export interface PropertyInterface { 8 | name: string; 9 | types: string[]; 10 | description: string; 11 | optional: boolean; 12 | } 13 | 14 | export interface FunctionInterface { 15 | kind: "function", 16 | name: string; 17 | longname: string; 18 | description: string; 19 | params: ParamInterface[]; 20 | returns: ReturnInterface[]; 21 | } 22 | 23 | export interface ParamInterface { 24 | name: string; 25 | description: string; 26 | types: string[]; 27 | } 28 | export interface ReturnInterface { 29 | description: string; 30 | types: string[]; 31 | } 32 | 33 | export interface MemberInterface { 34 | kind: "member"; 35 | name: string; 36 | longname: string; 37 | scope: string; 38 | description: string; 39 | types: string[]; 40 | } 41 | 42 | export interface EventInterface { 43 | kind: "event"; 44 | name: string; 45 | longname: string; 46 | description: string; 47 | params: ParamInterface[]; 48 | } 49 | 50 | export interface NamespaceInterface { 51 | kind: "namespace"; 52 | name: string; 53 | longname: string; 54 | description: string; 55 | } 56 | --------------------------------------------------------------------------------