30 |
34 | );
35 | };
36 |
37 | export default TodoContainer;
38 |
--------------------------------------------------------------------------------
/playgrounds/dflex-next-playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dflex-next-playground",
3 | "version": "0.1.4",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev -p 3002",
7 | "build": "next build",
8 | "start": "next start -p 3002",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@dflex/dnd": "workspace:^3.9.10",
13 | "@types/node": "^20.8.10",
14 | "@types/react": "^18.2.34",
15 | "@types/react-dom": "^18.2.14",
16 | "autoprefixer": "10.4.16",
17 | "classnames": "^2.3.2",
18 | "next": "14.0.1",
19 | "postcss": "8.4.31",
20 | "react": "^18.2.0",
21 | "react-dom": "^18.2.0",
22 | "tailwindcss": "3.3.5",
23 | "typescript": "^5.2.2"
24 | },
25 | "devDependencies": {
26 | "dflex-e2e-utils": "workspace:^1.0.3",
27 | "eslint": "^8.52.0",
28 | "eslint-config-dflex-react": "workspace:*"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/playgrounds/dflex-next-playground/src/pages/from-to/index.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-array-index-key */
2 | import React from "react";
3 | import { TodoItem, TodoContainer, ClickableBox } from "../../components";
4 |
5 | const SymmetricList = () => {
6 | const tasks = Array.from({ length: 4 });
7 |
8 | return (
9 | -
31 | {children}
32 |
10 |
11 | {tasks.map((_, i) => (
12 |
18 | {`main-list-${i}`}
19 |
20 | ))}
21 |
22 |
24 | );
25 | };
26 |
27 | export default SymmetricList;
28 |
--------------------------------------------------------------------------------
/packages/dflex-utils/src/environment/updateDOMAttr.ts:
--------------------------------------------------------------------------------
1 | function updateDOMAttr
18 |
19 |
20 | {tasks.map(({ task, id }) => (
21 |
22 | {task}
23 |
24 | ))}
25 |
26 |
27 | );
28 | };
29 |
30 | export default SymmetricList;
31 |
--------------------------------------------------------------------------------
/playgrounds/dflex-e2e-utils/src/DFlexPageTest.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import { test as base, expect } from "@playwright/test";
3 |
4 | export const DFlexPageTest = base.extend({
5 | page: async ({ page }, use) => {
6 | const messages: string[] = [];
7 |
8 | // Listen for console errors.
9 | page.on("console", (msg) => {
10 | // Ignore regular log messages; we are only interested in errors.
11 | if (msg.type() === "error") {
12 | messages.push(`[${msg.type()}] ${msg.text()}`);
13 | }
14 | });
15 |
16 | // Listen for page errors.
17 | // Uncaught (in promise) TypeError + friends are page errors.
18 | page.on("pageerror", (error) => {
19 | messages.push(`[${error.name}] ${error.message}`);
20 | });
21 |
22 | await use(page);
23 |
24 | // Fail the test if there are any console errors.
25 | expect(messages).toStrictEqual([]);
26 | },
27 | });
28 |
29 | export default DFlexPageTest;
30 |
--------------------------------------------------------------------------------
/playgrounds/dflex-next-playground/src/pages/list/transformation.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-array-index-key */
2 | import React from "react";
3 | import { TodoItem, TodoContainer } from "../../components";
4 |
5 | const TransformationPage = () => {
6 | const tasks = [
7 | { id: "trans-clean", task: "Clean the house" },
8 | {
9 | id: "trans-shop",
10 | task: "Grocery shopping",
11 | },
12 | { id: "trans-gym", task: "Hit the gym" },
13 | ];
14 |
15 | return (
16 |
12 |
31 | );
32 | };
33 |
34 | export default ScrollablePage;
35 |
--------------------------------------------------------------------------------
/packages/dflex-dnd/src/utils/constants.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/prefer-default-export */
2 | import type { DefaultDndOpts } from "../types";
3 |
4 | export const defaultOpts: DefaultDndOpts = Object.freeze({
5 | containersTransition: {
6 | enable: true,
7 | margin: 10,
8 | },
9 |
10 | threshold: {
11 | vertical: 60,
12 | horizontal: 60,
13 | },
14 |
15 | restrictions: {
16 | self: {
17 | allowLeavingFromTop: true,
18 | allowLeavingFromBottom: true,
19 | allowLeavingFromLeft: true,
20 | allowLeavingFromRight: true,
21 | },
22 | container: {
23 | allowLeavingFromTop: true,
24 | allowLeavingFromBottom: true,
25 | allowLeavingFromLeft: true,
26 | allowLeavingFromRight: true,
27 | },
28 | },
29 |
30 | scroll: {
31 | enable: true,
32 | initialSpeed: 10,
33 | threshold: {
34 | vertical: 15,
35 | horizontal: 15,
36 | },
37 | },
38 |
39 | commit: {
40 | enableAfterEndingDrag: true,
41 | },
42 | });
43 |
--------------------------------------------------------------------------------
/packages/dflex-dnd/src/Listeners/notifications.ts:
--------------------------------------------------------------------------------
1 | import { DFLEX_LISTENERS_CAT } from "./constants";
2 |
3 | import {
4 | DFlexLayoutStateNotification,
5 | DFlexMutationNotification,
6 | } from "./types";
7 |
8 | import type DFlexListeners from "./DFlexListeners";
9 |
10 | const { LAYOUT_CAT, MUTATION_CAT } = DFLEX_LISTENERS_CAT;
11 |
12 | function notifyLayoutStateListeners(
13 | listeners: ReturnType
13 |
30 | -
14 | {Array.from({ length: 4 }).map((_, i) => (
15 |
10 |
11 | {tasks.map((_, i) => (
12 |
23 | {`sub-list-${i}`}
24 |
25 | ))}
26 |
27 |
29 | );
30 | };
31 |
32 | export default AsymmetricPage;
33 |
--------------------------------------------------------------------------------
/.github/workflows/size-limit.yml:
--------------------------------------------------------------------------------
1 | name: "size"
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - main
7 |
8 | jobs:
9 | size-limit:
10 | runs-on: ubuntu-latest
11 | if: github.repository_owner == 'dflex-js' && github.event.pull_request.draft != true
12 | steps:
13 | - name: Check out repository
14 | uses: actions/checkout@v4
15 |
16 | - name: Cache pnpm modules
17 | uses: actions/cache@v4
18 | with:
19 | path: ~/.pnpm-store
20 | key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
21 | restore-keys: |
22 | ${{ runner.os }}-
23 |
24 | - uses: pnpm/action-setup@v4.0.0
25 | with:
26 | version: ^8.0.0
27 | run_install: true
28 |
29 | - uses: andresz1/size-limit-action@94bc357df29c36c8f8d50ea497c3e225c3c95d1d
30 | with:
31 | github_token: ${{ secrets.GITHUB_TOKEN }}
32 | package_manager: pnpm
33 | build_script: "build --production --release --minify"
34 |
--------------------------------------------------------------------------------
/playgrounds/dflex-vue-playground/src/components/icons/IconTooling.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/dflex-dnd/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as store } from "./exportedStoreSingleton";
2 |
3 | export { default as DnD } from "./DnD";
4 |
5 | export type { DFlexDnDOpts } from "./types";
6 |
7 | export { DFLEX_LISTENERS_CAT } from "./Listeners";
8 |
9 | export type {
10 | DFlexLayoutStateNotification,
11 | DFlexMutationNotification,
12 | DFlexListenerNotifications,
13 | } from "./Listeners";
14 |
15 | export { DFLEX_EVENTS, DFLEX_EVENTS_CAT, DFLEX_ATTRS } from "./Events";
16 |
17 | export type {
18 | DFlexDraggedEvent,
19 | DFlexInteractivityEvent,
20 | DFlexSiblingsEvent,
21 | DFlexEvents,
22 | DFlexEventNames,
23 | } from "./Events";
24 |
25 | export type {
26 | DFlexScrollContainer,
27 | DFlexSerializedElement,
28 | DFlexDOMGenOrder,
29 | } from "@dflex/core-instance";
30 |
31 | export type { RegisterInputOpts, DFlexGlobalConfig } from "@dflex/store";
32 |
33 | export type {
34 | AxesPoint,
35 | AbstractBoxRect as BoxRectAbstract,
36 | PointNum,
37 | AbstractBox,
38 | Dimensions,
39 | } from "@dflex/utils";
40 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/src/components/gap/bigGap.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import DFlexDnDComponent from "../DFlexDnDComponent";
4 |
5 | const BigGap = () => {
6 | const tasks = [
7 | { id: "mtg", msg: "Meet with Laura" },
8 | { id: "org", msg: "Organize weekly meetup" },
9 |
10 | { id: "gym", msg: "Hit the gym" },
11 | ];
12 |
13 | return (
14 |
15 |
35 | );
36 | };
37 |
38 | export default BigGap;
39 |
--------------------------------------------------------------------------------
/packages/dflex-utils/src/Point/PointNum.ts:
--------------------------------------------------------------------------------
1 | import Point from "./Point";
2 | import type AxesPoint from "./AxesPoint";
3 | import { AbstractBox, BoxNum } from "../Box";
4 | import type { Axis } from "../types";
5 |
6 | class PointNum extends Point
16 |
34 | -
17 | {tasks.map(({ msg, id }) => (
18 |
24 | {title} 25 | 26 | -> 27 | 28 |
29 |{desc}
30 | 31 | ); 32 | } 33 | 34 | export default ClickableBox; 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Jalal Maskoun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 10 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 11 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 12 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 13 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 14 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 15 | -------------------------------------------------------------------------------- /playgrounds/dflex-dnd-playground/src/components/todo/TodoListWithEvents.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import DFlexDnDComponent from "../DFlexDnDComponent"; 4 | 5 | const TodoListWithEvents = () => { 6 | const tasks = [ 7 | { id: "mtg", msg: "Meet with Laura" }, 8 | { id: "org", msg: "Organize weekly meetup" }, 9 | 10 | { id: "gym", msg: "Hit the gym" }, 11 | ]; 12 | 13 | return ( 14 |
15 |
35 | );
36 | };
37 |
38 | export default TodoListWithEvents;
39 |
--------------------------------------------------------------------------------
/playgrounds/dflex-vue-playground/src/components/icons/IconCommunity.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/playgrounds/dflex-next-playground/src/pages/list/asymmetric.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-array-index-key */
2 | import React from "react";
3 | import { TodoItem, TodoContainer } from "../../components";
4 |
5 | const AsymmetricPage = () => {
6 | const tasks = [
7 | {
8 | id: "async-meeting-laura",
9 | task: "Meet with Laura",
10 | style: { height: "3rem" },
11 | },
12 | {
13 | id: "async-weekly-meetup",
14 | task: "Organize the weekly meetup",
15 | style: { height: "6rem" },
16 | },
17 | {
18 | id: "async-project-work",
19 | task: "Work on the project",
20 | style: { height: "4rem" },
21 | },
22 | {
23 | id: "async-gym-session",
24 | task: "Go to the gym",
25 | style: { height: "3.5rem" },
26 | },
27 | ];
28 |
29 | return (
30 |
16 |
34 | -
17 | {tasks.map(({ msg, id }) => (
18 |
20 |
40 | );
41 | };
42 |
43 | export default TodoListWithEvents;
44 |
--------------------------------------------------------------------------------
/packages/dflex-utils/src/environment/DFlexCreateEvent.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line no-unused-vars
2 | type EventCallback = (event: Event) => void;
3 |
4 | interface EventInstance {
5 | eventName: string;
6 | eventCallback: EventCallback;
7 | }
8 |
9 | export type EventCleanup = () => void;
10 |
11 | const eventInstances: EventInstance[] = [];
12 |
13 | function DFlexCreateEvent(
14 | eventName: string,
15 | callback: EventCallback,
16 | ): EventCleanup {
17 | function eventHandler(event: Event): void {
18 | callback(event);
19 | }
20 |
21 | window.addEventListener(eventName, eventHandler);
22 |
23 | const instance: EventInstance = {
24 | eventName,
25 | eventCallback: eventHandler,
26 | };
27 |
28 | eventInstances.push(instance);
29 |
30 | function cleanup(): void {
31 | window.removeEventListener(eventName, eventHandler);
32 | const index = eventInstances.indexOf(instance);
33 | if (index !== -1) {
34 | eventInstances.splice(index, 1);
35 | }
36 | }
37 |
38 | return cleanup;
39 | }
40 |
41 | function autoCleanupAllEvents(): void {
42 | eventInstances.forEach(({ eventName, eventCallback }) => {
43 | window.removeEventListener(eventName, eventCallback);
44 | });
45 |
46 | eventInstances.length = 0;
47 | }
48 |
49 | export { DFlexCreateEvent, autoCleanupAllEvents };
50 |
--------------------------------------------------------------------------------
/packages/dflex-draggable/test/__snapshots__/draggableStore.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Draggable Store Registers element and initiates translateX,Y 1`] = `
4 | Map {
5 | "id-0" => DFlexElement {
6 | "DOMGrid": PointNum {
7 | "x": 0,
8 | "y": 0,
9 | },
10 | "DOMOrder": {
11 | "parent": 0,
12 | "self": 0,
13 | },
14 | "VDOMOrder": {
15 | "parent": 0,
16 | "self": 0,
17 | },
18 | "_CSSTransform": null,
19 | "_RAF": [Function],
20 | "_animation": {
21 | "duration": "dynamic",
22 | "easing": "ease-in",
23 | },
24 | "_computedDimensions": null,
25 | "_hasPendingTransform": false,
26 | "_initialPosition": PointNum {
27 | "x": 0,
28 | "y": 0,
29 | },
30 | "_isVisible": true,
31 | "_translateHistory": undefined,
32 | "depth": 0,
33 | "id": "id-0",
34 | "keys": {
35 | "BK": "dflex_bk_0",
36 | "CHK": null,
37 | "PK": "dflex_ky_1_0",
38 | "SK": "dflex_sk_0_0",
39 | },
40 | "readonly": false,
41 | "rect": BoxRect {
42 | "bottom": 0,
43 | "height": 0,
44 | "left": 0,
45 | "right": 0,
46 | "top": 0,
47 | "width": 0,
48 | },
49 | "translate": PointNum {
50 | "x": 0,
51 | "y": 0,
52 | },
53 | },
54 | }
55 | `;
56 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/src/components/scroll/multiLists.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-array-index-key */
2 | import React from "react";
3 |
4 | import DFlexDnDComponent from "../DFlexDnDComponent";
5 |
6 | const MultiLists = () => {
7 | const tasks1 = [];
8 | const tasks2 = [];
9 | const tasks3 = [];
10 |
11 | for (let i = 1; i <= 20; i += 1) {
12 | const id = `scroll-c1-${i}`;
13 | tasks1.push({ id, key: id, task: `c1-${i}` });
14 | }
15 |
16 | for (let i = 1; i <= 100; i += 1) {
17 | const id = `scroll-c2-${i}`;
18 | tasks2.push({ id, key: id, task: `c2-${i}` });
19 | }
20 |
21 | for (let i = 1; i <= 10; i += 1) {
22 | const id = `scroll-c3-${i}`;
23 | tasks3.push({ id, key: id, task: `c3-${i}` });
24 | }
25 |
26 | return (
27 |
21 |
39 | -
22 | {tasks.map(({ msg, id, style }) => (
23 |
28 | {[{ tasks: tasks1 }, { tasks: tasks2 }, { tasks: tasks3 }].map(
29 | ({ tasks }, i) => (
30 |
44 | );
45 | };
46 |
47 | export default MultiLists;
48 |
--------------------------------------------------------------------------------
/packages/dflex-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@dflex/utils",
3 | "version": "3.10.6",
4 | "description": "Utility package for DFlex",
5 | "author": "Jalal Maskoun",
6 | "main": "./dist/dflex-utils.js",
7 | "module": "./dist/dflex-utils.mjs",
8 | "types": "./types/index.d.ts",
9 | "exports": {
10 | ".": {
11 | "development": {
12 | "import": "./dist/dev.mjs",
13 | "require": "./dist/dev.js"
14 | },
15 | "require": "./dist/dflex-utils.js",
16 | "import": "./dist/dflex-utils.mjs",
17 | "types": "./types/index.d.ts"
18 | },
19 | "./dist/*": "./dist/*"
20 | },
21 | "scripts": {
22 | "clean": "rimraf ./dist ./types tsconfig.tsbuildinfo",
23 | "emit": "tsc --emitDeclarationOnly"
24 | },
25 | "repository": "https://github.com/dflex-js/dflex",
26 | "homepage": "https://github.com/dflex-js/dflex/tree/main/packages/dflex-utils",
27 | "license": "MIT",
28 | "files": [
29 | "dist",
30 | "types",
31 | "LICENSE"
32 | ],
33 | "keywords": [
34 | "drag-drop",
35 | "dnd",
36 | "sortable",
37 | "reorder",
38 | "drag",
39 | "drop",
40 | "DOM",
41 | "@dflex",
42 | "@dflex/dom-gen",
43 | "@dflex/store",
44 | "@dflex/core-instance",
45 | "@dflex/draggable",
46 | "@dflex/dnd"
47 | ],
48 | "publishConfig": {
49 | "registry": "https://registry.npmjs.org/",
50 | "access": "public"
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/dflex-utils/src/Box/BoxBool.ts:
--------------------------------------------------------------------------------
1 | import type { Axis, Direction } from "../types";
2 | import Box from "./Box";
3 |
4 | class BoxBool extends Box-
31 | {tasks.map(({ task, id, key }) => (
32 |
35 |
55 | );
56 | };
57 | export default TodoListWithReadonly;
58 |
--------------------------------------------------------------------------------
/packages/dflex-core-instance/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@dflex/core-instance",
3 | "version": "3.10.6",
4 | "description": "Core instance is a DFlex package for interactive DOM element",
5 | "author": "Jalal Maskoun",
6 | "main": "./dist/dflex-core.js",
7 | "module": "./dist/dflex-core.mjs",
8 | "types": "./types/index.d.ts",
9 | "exports": {
10 | ".": {
11 | "development": {
12 | "import": "./dist/dev.mjs",
13 | "require": "./dist/dev.js"
14 | },
15 | "require": "./dist/dflex-core.js",
16 | "import": "./dist/dflex-core.mjs",
17 | "types": "./types/index.d.ts"
18 | },
19 | "./dist/*": "./dist/*"
20 | },
21 | "scripts": {
22 | "clean": "rimraf ./dist ./types tsconfig.tsbuildinfo",
23 | "emit": "tsc --emitDeclarationOnly"
24 | },
25 | "repository": "https://github.com/dflex-js/dflex",
26 | "homepage": "https://github.com/dflex-js/dflex/tree/main/packages/dflex-core-instance",
27 | "license": "MIT",
28 | "files": [
29 | "dist",
30 | "types",
31 | "LICENSE"
32 | ],
33 | "devDependencies": {
34 | "@dflex/utils": "workspace:^3.10.6"
35 | },
36 | "keywords": [
37 | "drag-drop",
38 | "dnd",
39 | "sortable",
40 | "reorder",
41 | "drag",
42 | "drop",
43 | "DOM",
44 | "@dflex",
45 | "@dflex/dom-gen",
46 | "@dflex/store",
47 | "@dflex/core-instance",
48 | "@dflex/draggable",
49 | "@dflex/dnd"
50 | ],
51 | "publishConfig": {
52 | "registry": "https://registry.npmjs.org/",
53 | "access": "public"
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/playgrounds/dflex-draggable-playground/src/DraggableHandler/HandlerSVG.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | // eslint-disable-next-line no-unused-vars
4 | const HandlerSVG = (props: { onMouseDown: (e: React.MouseEvent) => void }) => (
5 |
29 | );
30 |
31 | export default HandlerSVG;
32 |
--------------------------------------------------------------------------------
/playgrounds/dflex-next-playground/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { ClickableBox } from "../components";
3 |
4 | export default function Home() {
5 | return (
6 |
36 |
54 | -
37 | {tasks.map(({ msg, id, readonly, style }) => (
38 |
11 |
42 |
3 |
4 |
13 |
14 |
15 |
88 |
--------------------------------------------------------------------------------
/docs/draggable/examples.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Draggable Example
3 | description: "DFlex draggable button example built with React triggered by moue event"
4 | ---
5 |
6 | Create draggable button with React.
7 |
8 | ```jsx
9 | import { store, draggable } from "@dflex/dnd";
10 |
11 | let dflexDraggable: Draggable;
12 |
13 | const id = "DFlex-draggable-btn";
14 |
15 | const DraggableButton = () => {
16 | const ref = React.createRef() as React.MutableRefObject
7 |
8 |
10 |
12 |
8 |
10 |
2 |
3 | 
6 |
7 |
8 |
9 | DFlex DOM Store
10 | 11 |
12 |
13 | 
36 |
37 |
38 | 
2 |
3 |
6 |
7 |
8 |
9 | DFlex Utilities
10 | 11 |
12 |
13 |
36 |
37 |
38 |
2 |
3 |
6 |
7 |
8 |
9 | DFlex Core Instance
10 | 11 |
12 |
13 |
36 |
37 |
38 |
2 |
3 |
6 |
7 |
8 |
9 | DFlex DOM Relations Generator Algorithm
10 | 11 |
12 |
13 |
36 |
37 |
38 |
61 | {isDragged ? Being dragged! : Drag me!}
62 |
64 | );
65 | };
66 |
67 | export default DraggableHandler;
68 |
--------------------------------------------------------------------------------
/playgrounds/dflex-draggable-playground/src/DraggableSolo/DraggableSolo.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | import React from "react";
4 |
5 | import { store, Draggable } from "@dflex/draggable";
6 |
7 | // shared dragged event
8 | let dflexDraggable: Draggable;
9 |
10 | const id = "DFlex-draggable-solo";
11 |
12 | const DraggableSolo = () => {
13 | const [isDragged, setIsDragged] = React.useState(false);
14 |
15 | React.useEffect(() => {
16 | store.register(id);
17 |
18 | return () => {
19 | store.unregister(id);
20 | };
21 | }, []);
22 |
23 | const onMouseMove = (e: MouseEvent) => {
24 | if (dflexDraggable) {
25 | const { clientX, clientY } = e;
26 |
27 | // Drag when mouse is moving!
28 | dflexDraggable.dragAt(clientX, clientY);
29 | }
30 | };
31 |
32 | const onMouseUp = () => {
33 | if (dflexDraggable) {
34 | dflexDraggable.endDragging();
35 |
36 | document.removeEventListener("mouseup", onMouseUp);
37 | document.removeEventListener("mousemove", onMouseMove);
38 |
39 | setIsDragged(false);
40 | }
41 | };
42 |
43 | const onMouseDown = (e: React.MouseEvent) => {
44 | const { button, clientX, clientY } = e;
45 |
46 | // Avoid right mouse click and ensure id
47 | if (typeof button === "number" && button === 0) {
48 | if (id) {
49 | dflexDraggable = new Draggable(id, { x: clientX, y: clientY });
50 |
51 | document.addEventListener("mouseup", onMouseUp);
52 | document.addEventListener("mousemove", onMouseMove);
53 |
54 | setIsDragged(true);
55 | }
56 | }
57 | };
58 |
59 | return (
60 |
69 | );
70 | };
71 |
72 | export default DraggableSolo;
73 |
--------------------------------------------------------------------------------
/playgrounds/dflex-draggable-playground/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
9 | DFlex Draggable Playground
10 | 11 |
12 |
13 |
36 |
37 |
38 |
35 |
63 | );
64 | };
65 |
66 | export default AllRestrictedContainer;
67 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/src/components/stream/StreamInterval.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import DFlexDnDComponent from "../DFlexDnDComponent";
4 |
5 | const NUM_INTERVAL = 4;
6 |
7 | const rowMap = {
8 | 0: 5,
9 | 1: 10,
10 | 2: 15,
11 | 3: 20,
12 | 4: 25,
13 | };
14 |
15 | const StreamInterval = () => {
16 | const [todo, updateTodo] = React.useState<
17 | {
18 | msg: string;
19 | id: string;
20 | key: string;
21 | }[]
22 | >([{ msg: "1", id: "1", key: "1" }]);
23 |
24 | const intervalID = React.useRef
36 |
62 | -
37 | {items.map(({ id, style, item }) => (
38 |
62 |
76 | );
77 | };
78 |
79 | export default StreamInterval;
80 |
--------------------------------------------------------------------------------
/playgrounds/dflex-vue-playground/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/dflex-dnd/src/Mechanism/DFlexScrollTransition.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Axis,
3 | Direction,
4 | DFlexCreateRAF,
5 | getStartingPointByAxis,
6 | } from "@dflex/utils";
7 |
8 | import type { DFlexScrollContainer } from "@dflex/core-instance";
9 |
10 | // eslint-disable-next-line no-unused-vars
11 | type Accelerator = (progress: number) => number;
12 |
13 | export type ScrollTransitionAbort = () => void;
14 |
15 | function DFlexScrollTransition(
16 | scroll: DFlexScrollContainer,
17 | axis: Axis,
18 | direction: Direction,
19 | duration: number | null,
20 | accelerator: Accelerator,
21 | onComplete: () => void,
22 | onAbort: () => void,
23 | ): ScrollTransitionAbort {
24 | let startScroll: number;
25 | let distance: number;
26 |
27 | let calculatedDuration = duration || 0;
28 |
29 | let startTime: number;
30 | let aborted = false;
31 |
32 | const [RAF, cancelRAF] = DFlexCreateRAF();
33 |
34 | const step = (timestamp: number) => {
35 | if (!startTime) {
36 | startTime = timestamp;
37 | startScroll = scroll.totalScrollRect[getStartingPointByAxis(axis)];
38 | distance = scroll.calculateDistance(axis, direction);
39 |
40 | calculatedDuration = calculatedDuration || Math.sqrt(distance) * 75;
41 | }
42 |
43 | const elapsed = timestamp - startTime;
44 | const progress = Math.min(elapsed / calculatedDuration, 1);
45 |
46 | const easedProgress = accelerator(progress);
47 |
48 | const scrollPosition = startScroll + direction * (distance * easedProgress);
49 |
50 | if (axis === "x") {
51 | scroll.scrollTo(scrollPosition, -1);
52 | } else {
53 | scroll.scrollTo(-1, scrollPosition);
54 | }
55 |
56 | if (!aborted && progress < 1) {
57 | RAF(step, false);
58 | } else if (onComplete) {
59 | onComplete();
60 | }
61 | };
62 |
63 | const abortScroll = () => {
64 | aborted = true;
65 | cancelRAF();
66 | onAbort();
67 | };
68 |
69 | RAF(step, false);
70 |
71 | return abortScroll;
72 | }
73 |
74 | export default DFlexScrollTransition;
75 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/tests/features/zIndexVisualTest.spec.ts:
--------------------------------------------------------------------------------
1 | import {
2 | expect,
3 | Page,
4 | Locator,
5 | BrowserContext,
6 | Browser,
7 | } from "@playwright/test";
8 |
9 | import {
10 | DFlexPageTest as test,
11 | // assertChildrenOrderIDs,
12 | // assertConsoleMsg,
13 | // assertDefaultChildrenIndex,
14 | // DraggedRect,
15 | getDraggedRect,
16 | initialize,
17 | // invokeKeyboardAndAssertEmittedMsg,
18 | moveDragged,
19 | } from "dflex-e2e-utils";
20 |
21 | test.describe("DOM Mirror element is above both containers", async () => {
22 | let page: Page;
23 | let context: BrowserContext;
24 | let activeBrowser: Browser;
25 |
26 | // Second container.
27 | // let elmAParent: Locator;
28 | let elmBParent: Locator;
29 | let elmA1: Locator;
30 |
31 | test.skip(
32 | ({ browserName }) => browserName !== "chromium",
33 | "No need to test it for multiple browsers.",
34 | );
35 |
36 | test.skip(
37 | process.platform === "darwin" || process.platform === "linux",
38 | "Skip the test on Mac and Linux devices.",
39 | );
40 |
41 | test.beforeAll(async ({ browser, browserName }) => {
42 | activeBrowser = browser;
43 |
44 | context = await activeBrowser.newContext();
45 | page = await context.newPage();
46 | initialize(page, browserName, 50);
47 | await page.goto("/windowed-dual-list");
48 |
49 | [, elmA1, elmBParent] = await Promise.all([
50 | page.locator("#dflex_id_0"),
51 | page.locator("#list-a-1"),
52 | page.locator("#dflex_id_1"),
53 | ]);
54 | });
55 |
56 | test.afterAll(async () => {
57 | await page.close();
58 | await context.close();
59 | // await activeBrowser.close();
60 | });
61 |
62 | test("Move elm1 outside its container to the (b) container", async () => {
63 | await getDraggedRect(elmA1);
64 | await moveDragged(-1, 230);
65 | await moveDragged(450, -1);
66 | });
67 |
68 | test("dragged is above parent (b) container", async () => {
69 | await expect(elmBParent).toHaveScreenshot("parent-b.png");
70 | });
71 | });
72 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/tests/stabilizer/stabilizer.scroll.spec.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Page,
3 | Locator,
4 | BrowserContext,
5 | Browser,
6 | expect,
7 | } from "@playwright/test";
8 |
9 | import {
10 | DFlexPageTest as test,
11 | getDraggedRect,
12 | initialize,
13 | moveDragged,
14 | } from "dflex-e2e-utils";
15 |
16 | test.describe("Stabilizer with scroll", async () => {
17 | let page: Page;
18 | let context: BrowserContext;
19 | let activeBrowser: Browser;
20 |
21 | let elm1: Locator;
22 | let elm2: Locator;
23 |
24 | test.beforeAll(async ({ browser, browserName }) => {
25 | activeBrowser = browser;
26 |
27 | context = await activeBrowser.newContext();
28 | page = await context.newPage();
29 | initialize(page, browserName, 50);
30 | await page.goto("/scrollable-page");
31 |
32 | [elm1, elm2] = await Promise.all([
33 | page.locator("#id_0"),
34 | page.locator("#id_1"),
35 | ]);
36 | });
37 |
38 | test.afterAll(async () => {
39 | await page.close();
40 | await context.close();
41 | // await activeBrowser.close();
42 | });
43 |
44 | test("Scroll the page in Y axis", async () => {
45 | await page.evaluate(() => {
46 | window.scrollBy(0, 20);
47 | });
48 | });
49 |
50 | test("Move elm1 into elm2 position", async () => {
51 | await getDraggedRect(elm1);
52 | await moveDragged(-1, 50);
53 | });
54 |
55 | test("elm2 transformed into elm1 position", async () => {
56 | // Due to variations in scroll behavior across different machines and browsers,
57 | // it's challenging to predict the exact transformation value.
58 | // Therefore, we cannot reliably determine the specific transformation value.
59 | await expect(elm2).not.toHaveCSS("transform", "matrix(1, 0, 0, 1, 0, 0)");
60 | });
61 |
62 | test("Move elm1 back into its position", async () => {
63 | await moveDragged(-1, 0);
64 | });
65 |
66 | test("stabilizer doesn't prevent elm2 from returning into its position", async () => {
67 | await expect(elm2).toHaveCSS("transform", "matrix(1, 0, 0, 1, 0, 0)");
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/playgrounds/dflex-dnd-playground/src/components/scroll/ExtendedList.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-array-index-key */
2 | import React from "react";
3 |
4 | import { store } from "@dflex/dnd";
5 | import DFlexDnDComponent from "../DFlexDnDComponent";
6 |
7 | /**
8 | * Extended List Component
9 | *
10 | * A list with overflow and a hundred elements. This playground is intended to:
11 | * 1- Check elements visibility while scrolling.
12 | * 2- Check the scroll performance for a list with an unusual amount of elements.
13 | */
14 | const ExtendedList = () => {
15 | const tasks = [];
16 |
17 | for (let i = 1; i <= 100; i += 1) {
18 | const uni = `${i}-extended`;
19 |
20 | tasks.push({ id: uni, key: uni, task: `${i}` });
21 | }
22 |
23 | const handleKeyPress = (e: KeyboardEvent) => {
24 | if (e.key === "g" || e.key === "G") {
25 | // Pick random id from the list.
26 | const siblings = store.getSiblingsByID(`${1}-extended`);
27 |
28 | const serializedElms = siblings.map((id) =>
29 | store.getSerializedElement(id),
30 | );
31 |
32 | // Log the serialized elements as a table
33 | // eslint-disable-next-line no-console
34 | console.log(serializedElms);
35 | }
36 | };
37 |
38 | React.useEffect(() => {
39 | document.addEventListener("keydown", handleKeyPress);
40 |
41 | return () => {
42 | document.removeEventListener("keydown", handleKeyPress);
43 | };
44 | }, [handleKeyPress]);
45 |
46 | return (
47 |
63 |
75 | -
64 | {todo.map(({ msg, id, key }) => (
65 |
48 |
67 | );
68 | };
69 |
70 | export default ExtendedList;
71 |
--------------------------------------------------------------------------------
49 |
66 | -
50 | {tasks.map(({ task, id, key }) => (
51 |