demo: add mouse enter leave demo

.gitignore

@@ -19,4 +19,5 @@ statistics/
 .scene_cache
 *.mp4
 demo/storybook
+demo/storybook2
 dist/

packages/react-moveable/package.json

@@ -9,9 +9,9 @@
     "scripts": {
         "lint": "eslint ./src/ --ext .ts,.tsx",
         "storybook": "start-storybook -p 6006",
-        "build:storybook": "build-storybook -o ../../demo/storybook",
         "start": "react-scripts start",
         "build": "npm run lint && rollup -c && npm run declaration && print-sizes ./dist ",
+        "build:storybook": "build-storybook -o ../../demo/storybook2",
         "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
         "test": "karma start",
         "test:chrome": "karma start --chrome",

packages/react-moveable/stories/6-CustomAble/0-CustomAble.stories.tsx

@@ -5,3 +5,4 @@ export default {
 export * from "./1-DimensionViewable.stories";
 export * from "./2-Editable.stories";
 export * from "./3-CustomRotatable.stories";
+export * from "./4-MouseEnterLeave.stories";

packages/react-moveable/stories/6-CustomAble/4-MouseEnterLeave.stories.tsx

@@ -0,0 +1,29 @@
+import { DEFAULT_REACT_CODESANDBOX } from "storybook-addon-preview";
+import "../templates/default.css";
+import App from "./apps/MouseEnterLeaveApp";
+import RawApp from "!!raw-loader!./apps/MouseEnterLeaveApp";
+import { DEFAULT_CSS_TEMPLATE } from "@/stories/templates/default";
+import { convertReactTemplate, convertPath } from "../utils";
+
+
+export const MouseEnterLeave = App as any;
+
+MouseEnterLeave.storyName = "Mouse Enter & Leave";
+MouseEnterLeave.argTypes = {};
+MouseEnterLeave.args = {};
+
+MouseEnterLeave.parameters = {
+    preview: [
+        {
+            tab: "React",
+            template: convertReactTemplate(convertPath(RawApp)),
+            codesandbox: DEFAULT_REACT_CODESANDBOX(["react-moveable", "moveable-helper"]),
+            language: "tsx",
+        },
+        {
+            tab: "CSS",
+            template: DEFAULT_CSS_TEMPLATE,
+            language: "css",
+        },
+    ],
+};

packages/react-moveable/stories/6-CustomAble/apps/MouseEnterLeaveApp.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import Moveable, { makeAble, MoveableManagerInterface } from "@/react-moveable";
+
+const MouseEnterLeaveAble = makeAble("enterLeave", {
+    mouseEnter(moveable: MoveableManagerInterface) {
+        if (moveable.moveables) {
+            // group
+            moveable.moveables.forEach(child => {
+                child.state.target!.style.backgroundColor = "#e55";
+            });
+        } else {
+            // single
+            moveable.state.target!.style.backgroundColor = "#e55";
+        }
+    },
+    mouseLeave(moveable: MoveableManagerInterface) {
+        if (moveable.moveables) {
+            // group
+            moveable.moveables.forEach(child => {
+                child.state.target!.style.backgroundColor = "";
+            });
+        } else {
+            // single
+            moveable.state.target!.style.backgroundColor = "";
+        }
+    },
+});
+
+export default function App() {
+    const targetRef = React.useRef<HTMLDivElement>(null);
+    return <div className="container">
+        <div className="target target1">Target1</div>
+        <div className="target target2">Target2</div>
+        <div className="target target3" ref={targetRef}>Target3</div>
+        <Moveable
+            target={targetRef}
+            ables={[MouseEnterLeaveAble]}
+            origin={false}
+            props={{
+                enterLeave: true,
+            }}
+            draggable={true}
+            onDrag={e => {
+                e.target.style.transform = e.transform;
+            }}
+        />
+        <Moveable
+            target={[".target1", ".target2"]}
+            ables={[MouseEnterLeaveAble]}
+            origin={false}
+            props={{
+                enterLeave: true,
+            }}
+            draggable={true}
+            onDragGroup={e => {
+                e.events.forEach(ev => {
+                    ev.target.style.transform = ev.transform;
+                });
+            }}
+        />
+    </div>;
+}