A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

Overview

Dflex logo

JavaScript Project to Manipulate DOM Elements

Dflex build status number of opened pull requests number of opened issues Dflex welcomes pull request

DFlex

A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements.

Features

  • Dynamic architecture.
  • Traverse DOM without calling browser API.
  • Transform elements instead of reordering the DOM tree.
  • Animated movement from point-x to point-y.
  • Prevent drag and drop layout shift.
  • Isolated from data flow.
  • Headless as it is just functions that do manipulation.
  • Event driven API.
  • Targeting each DOM node individually.
  • Extensible using JSON tree instead of flat recursion.

Project Content 🔥

Drag & Drop

A Simple, lightweight Solution for a Drag & Drop App based on enhanced DOM store algorithm. You can achieve a drag and drop with three steps only with mouse/touch event.

Draggable

High-performance draggable elements written in pure JS works for Web and Mobile.

Utils/DOM Generator

DOM relations generator algorithm. Generate relations between DOM elements based on element depth without a browser.

Utils/DOM Store

The only Store that allows you to traverse through the DOM tree using element id without reading from the browser.

Documentation 📖

Visit DFlex site for more https://www.dflex.dev/

Installation 📦

Packages are decoupled and work separately. Each package has it own universe including test and playground. For more info take a look at contribution guide.

License 🤝

DFlex is MIT License since version 3.0.0 and above.

Contribution 🌎

PRs welcome!

Comments
  • Add Vue template for DnD

    Add Vue template for DnD

    This issue is dedicated to creating a template for the Vue framework.

    I used create-react-app to create react playgrounds which I usually use to develop DFlex. But looking to publish a template for Vue, something like this repo: https://github.com/dflex-js/react-draggable-starter.

    For the sake of productivity, creating a starter form scratch can be simpler than open PR directly to this rep. Both, of course, are welcomed 🎉🎉🎉

    help wanted good first issue 
    opened by jalal246 9
  • Add integration test configuration

    Add integration test configuration

    Yet, another attempt. Sounds more complicated than it looks. Even thinking to migrate to Cypress entirely which seems a better alternative to multiple config mess. But it's too late and going to consume time that I need the most to develop.

    Should:

    • [x] Add separate config files.
    • [x] Fix targeting pattern according to the type (unit vs integration).
    • [x] Update eslint rules for integration.
    • [x] Set up testing server.

    What's unknown is how to do test coverage. And If integration should somehow run in CI.

    enhancement 
    opened by jalal246 4
  • Update actions/cache requirement to v2.1.4

    Update actions/cache requirement to v2.1.4

    Updates the requirements on actions/cache to permit the latest version.

    Release notes

    Sourced from actions/cache's releases.

    v2.1.4

    • Make caching more verbose #650
    • Use GNU tar on macOS if available #701
    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    wontfix dependencies github_actions 
    opened by dependabot[bot] 3
  • v3.6.0 Draggable throws Error `can't access property

    v3.6.0 Draggable throws Error `can't access property "x", translate is undefined`

    Some basic vue example:

    <template>
      <div
        :id="id"
        ref="elRoot"
        class="DragAndDrop"
        @mousedown.stop.prevent="onMouseDown"
      ></div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, onMounted } from 'vue'
    import { Draggable, store } from '@dflex/draggable'
    import cuid from 'cuid'
    
    export default defineComponent({
      name: 'DragAndDrop',
      components: {},
    
      setup() {
        const id = `draggable-button.${cuid.slug()}`
        let draggedEvent: Draggable
        const elRoot = ref()
    
        const onMouseDown = (event: MouseEvent) => {
          draggedEvent = new Draggable(id, { x: event.clientX, y: event.clientY })
    
          document.addEventListener('mouseup', onMouseUp)
          document.addEventListener('mousemove', onMouseMove)
        }
    
        const onMouseMove = (event: MouseEvent) => {
          if (!draggedEvent) return
    
          draggedEvent.dragAt(event.clientX, event.clientY)
        }
    
        const onMouseUp = () => {
          if (draggedEvent) {
            draggedEvent.endDragging()
    
            document.removeEventListener('mouseup', onMouseUp)
            document.removeEventListener('mousemove', onMouseMove)
          }
        }
    
        onMounted(() => {
          store.register(id)
        })
    
        return {
          id,
          elRoot,
          onMouseDown,
          onMouseMove,
        }
      },
    })
    </script>
    
    <style lang="scss">
    .DragAndDrop {
      $block: &;
    
      width: 200px;
      height: 100px;
      border: 2px solid fuchsia;
      border-radius: 10px;
      background-color: rgba(fuchsia, 0.1);
    }
    </style>
    

    As soon as the onMouseDown is fired, there is an error:

    can't access property "x", translate is undefined
    

    It happens with 3.6.0 but works fine with 3.5.4. I was trying to create a reproduction on Codesandbox but for some reason I can't add @dflex/draggable as a dependency there…

    bug 
    opened by thomasaull 2
  • Bump lerna from 3.22.1 to 4.0.0

    Bump lerna from 3.22.1 to 4.0.0

    Bumps lerna from 3.22.1 to 4.0.0.

    Release notes

    Sourced from lerna's releases.

    v4.0.0

    4.0.0 (2021-02-10)

    Notable Changes

    • Node v6.x & v8.x are no longer supported. The minimum supported version is now v10.18.0 (LTS Dubnium).
    • Dependencies updated across the board, should no longer trigger audit warnings.
    • Lots of JSDoc type annotations were added. Maybe they're helpful?

    Nothing was newly deprecated, nothing previously deprecated was removed. Migrating to v4 should be straightforward.

    Bug Fixes

    • version: Ensure --create-release environment variables are present during initialization (2d0a97a)
    • Improve accuracy of JSDoc type annotations (1ec69f0)
    • create: Use main as default Github branch (1a951e9)
    • import: Better handling of "Patch is empty" (#2588) (0497bc7)

    Code Refactoring

    • describe-ref: Add JSDoc types, remove test-only export (e5cf30c)
    • package: Move Package.lazy() to static method (e52108e)

    Features

    • child-process: Add JSDoc types (1840492)
    • collect-uncommitted: Remove figgy-pudding (621b382)
    • collect-updates: Add JSDoc type annotations to primary export (a4e7c78)
    • conventional-commits: Add JSDoc types to named exports (81a591c)
    • deps: @evocateur/libnpmaccess -> libnpmaccess@^4.0.1 (7974b35)
    • deps: @evocateur/libnpmpublish -> libnpmpublish@^4.0.0 (341146e)
    • deps: @evocateur/npm-registry-fetch -> npm-registry-fetch@^9.0.0 (6df42f2)
    • deps: @evocateur/pacote -> pacote@^11.1.13 (99b4217)
    • deps: @octokit/rest@^18.0.9 (f064a55)
    • deps: @zkochan/cmd-shim -> cmd-shim@^4.0.2 (179e2c3)
    • deps: Bump dependencies (affed1c)
    • deps: byte-size@^7.0.0 (a1b2555)
    • deps: camelcase -> yargs-parser/camelCase (d966e8b)
    • deps: chalk@^4.1.0 (d2a9ed5)
    • deps: conventional-changelog-core@^4.2.1 (54e2b98)
    • deps: conventional-recommended-bump@^6.0.11 (4ff481c)
    • deps: cosmiconfig@^7.0.0 (2958fe6)
    • deps: dot-prop@^6.0.0 (5f31d3b)
    • deps: execa@^4.1.0 (9051dca)
    • deps: execa@^5.0.0 (d8100fd)
    • deps: fs-extra@^9.0.1 (2f6f4e0)
    • deps: get-port@^5.1.1 (b1b2275)
    • deps: get-stream@^6.0.0 (ddf2ab5)

    ... (truncated)

    Changelog

    Sourced from lerna's changelog.

    4.0.0 (2021-02-10)

    Features

    • Consume named exports of sibling modules (63499e3)
    • deps: import-local@^3.0.2 (e0e74d4)
    • Drop support for Node v6.x & v8.x (ff4bb4d)

    BREAKING CHANGES

    • Node v6.x & v8.x are no longer supported. Please upgrade to the latest LTS release.

    Here's the gnarly one-liner I used to make these changes:

    npx lerna exec --concurrency 1 --stream -- 'json -I -f package.json -e '"'"'this.engines=this.engines||{};this.engines.node=">= 10.18.0"'"'"
    

    (requires npm i -g json beforehand)

    Commits
    • 4582c47 chore(release): v4.0.0
    • 1f17e0c chore(lerna): Set top-level package tag -> next
    • 63499e3 feat: Consume named exports of sibling modules
    • e0e74d4 feat(deps): import-local@^3.0.2
    • 1500d31 chore(dev-deps): Prettier 2
    • ff4bb4d feat: Drop support for Node v6.x & v8.x
    • 5ef6364 docs: master -> main
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump @docusaurus/core from 2.0.0-alpha.70 to 2.0.0-alpha.71

    Bump @docusaurus/core from 2.0.0-alpha.70 to 2.0.0-alpha.71

    Bumps @docusaurus/core from 2.0.0-alpha.70 to 2.0.0-alpha.71.

    Release notes

    Sourced from @​docusaurus/core's releases.

    2.0.0-alpha.71 (2021-03-09)

    :rocket: New Feature

    • docusaurus-init, docusaurus-mdx-loader, docusaurus-utils, docusaurus
    • docusaurus-theme-live-codeblock
    • docusaurus-theme-classic
    • docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-search-algolia
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus
      • #4295 feat(v2): Add Interpolate / interpolate APIs + complete theme translations (@​slorber)
    • docusaurus-mdx-loader
      • #4278 feat(v2): ability to "escape" JSX in MDX files as code blocks (@​slorber)
    • docusaurus-plugin-content-blog, docusaurus-plugin-content-docs
    • docusaurus-1.x, docusaurus-init, docusaurus-mdx-loader, docusaurus-migrate, docusaurus-plugin-client-redirects, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-google-analytics, docusaurus-plugin-google-gtag, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-plugin-sitemap, docusaurus-preset-bootstrap, docusaurus-preset-classic, docusaurus-remark-plugin-npm2yarn, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-search-algolia, docusaurus
    • docusaurus-theme-classic, docusaurus-types, docusaurus-utils, docusaurus
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-common
    • docusaurus
    • docusaurus-theme-classic, docusaurus-theme-live-codeblock, docusaurus
      • #4168 feat(v2): Extract/translate hardcoded labels from classic theme (@​slorber)
    • docusaurus-init
      • #4098 feat(v2): improve templates, use JSDoc type annotation, improve docusaurus.config.js autocompletion (@​LittleboyHarry)
    • docusaurus-init, docusaurus-migrate
    • docusaurus-plugin-content-docs
      • #3949 feat(v2): new docs edit options: editCurrentVersion + editLocalizedDocs (@​slorber)

    ... (truncated)

    Changelog

    Sourced from @​docusaurus/core's changelog.

    2.0.0-alpha.71 (2021-03-09)

    :rocket: New Feature

    • docusaurus-init, docusaurus-mdx-loader, docusaurus-utils, docusaurus
    • docusaurus-theme-live-codeblock
    • docusaurus-theme-classic
    • docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-search-algolia
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus
      • #4295 feat(v2): Add Interpolate / interpolate APIs + complete theme translations (@​slorber)
    • docusaurus-mdx-loader
      • #4278 feat(v2): ability to "escape" JSX in MDX files as code blocks (@​slorber)
    • docusaurus-plugin-content-blog, docusaurus-plugin-content-docs
    • docusaurus-1.x, docusaurus-init, docusaurus-mdx-loader, docusaurus-migrate, docusaurus-plugin-client-redirects, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-google-analytics, docusaurus-plugin-google-gtag, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-plugin-sitemap, docusaurus-preset-bootstrap, docusaurus-preset-classic, docusaurus-remark-plugin-npm2yarn, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-search-algolia, docusaurus
    • docusaurus-theme-classic, docusaurus-types, docusaurus-utils, docusaurus
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-common
    • docusaurus
    • docusaurus-theme-classic, docusaurus-theme-live-codeblock, docusaurus
      • #4168 feat(v2): Extract/translate hardcoded labels from classic theme (@​slorber)
    • docusaurus-init
      • #4098 feat(v2): improve templates, use JSDoc type annotation, improve docusaurus.config.js autocompletion (@​LittleboyHarry)
    • docusaurus-init, docusaurus-migrate
    • docusaurus-plugin-content-docs
      • #3949 feat(v2): new docs edit options: editCurrentVersion + editLocalizedDocs (@​slorber)

    ... (truncated)

    Commits
    • 3aec8af v2.0.0-alpha.71
    • e6261af refactor(v2): remove duplicated lodash dependencies and import only what need...
    • 25489b4 fix(v2): align installed core-js version with babel config (#4366)
    • 36dc206 perf(v2): improve blog mdx-loader and postcss loader (#4355)
    • 96e7fce feat(v2): add ability to set custom heading id (#4222)
    • 6fc6cfe fix(v2): always extract translations from site/src (#4345)
    • 43c53df chore(v2): bump clean-css to 5.1.1 (#4342)
    • 364d4db fix(v2): fix bad theme pluralization rules for some labels (#4304)
    • f46adff feat(v2): add --config option to CLI (#4308)
    • 1734975 feat(v2): Add Interpolate / interpolate APIs + complete theme translations (#...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump @docusaurus/preset-classic from 2.0.0-alpha.70 to 2.0.0-alpha.71

    Bump @docusaurus/preset-classic from 2.0.0-alpha.70 to 2.0.0-alpha.71

    Bumps @docusaurus/preset-classic from 2.0.0-alpha.70 to 2.0.0-alpha.71.

    Release notes

    Sourced from @​docusaurus/preset-classic's releases.

    2.0.0-alpha.71 (2021-03-09)

    :rocket: New Feature

    • docusaurus-init, docusaurus-mdx-loader, docusaurus-utils, docusaurus
    • docusaurus-theme-live-codeblock
    • docusaurus-theme-classic
    • docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-search-algolia
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus
      • #4295 feat(v2): Add Interpolate / interpolate APIs + complete theme translations (@​slorber)
    • docusaurus-mdx-loader
      • #4278 feat(v2): ability to "escape" JSX in MDX files as code blocks (@​slorber)
    • docusaurus-plugin-content-blog, docusaurus-plugin-content-docs
    • docusaurus-1.x, docusaurus-init, docusaurus-mdx-loader, docusaurus-migrate, docusaurus-plugin-client-redirects, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-google-analytics, docusaurus-plugin-google-gtag, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-plugin-sitemap, docusaurus-preset-bootstrap, docusaurus-preset-classic, docusaurus-remark-plugin-npm2yarn, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-search-algolia, docusaurus
    • docusaurus-theme-classic, docusaurus-types, docusaurus-utils, docusaurus
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-common
    • docusaurus
    • docusaurus-theme-classic, docusaurus-theme-live-codeblock, docusaurus
      • #4168 feat(v2): Extract/translate hardcoded labels from classic theme (@​slorber)
    • docusaurus-init
      • #4098 feat(v2): improve templates, use JSDoc type annotation, improve docusaurus.config.js autocompletion (@​LittleboyHarry)
    • docusaurus-init, docusaurus-migrate
    • docusaurus-plugin-content-docs
      • #3949 feat(v2): new docs edit options: editCurrentVersion + editLocalizedDocs (@​slorber)

    ... (truncated)

    Changelog

    Sourced from @​docusaurus/preset-classic's changelog.

    2.0.0-alpha.71 (2021-03-09)

    :rocket: New Feature

    • docusaurus-init, docusaurus-mdx-loader, docusaurus-utils, docusaurus
    • docusaurus-theme-live-codeblock
    • docusaurus-theme-classic
    • docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-search-algolia
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus
      • #4295 feat(v2): Add Interpolate / interpolate APIs + complete theme translations (@​slorber)
    • docusaurus-mdx-loader
      • #4278 feat(v2): ability to "escape" JSX in MDX files as code blocks (@​slorber)
    • docusaurus-plugin-content-blog, docusaurus-plugin-content-docs
    • docusaurus-1.x, docusaurus-init, docusaurus-mdx-loader, docusaurus-migrate, docusaurus-plugin-client-redirects, docusaurus-plugin-content-blog, docusaurus-plugin-content-docs, docusaurus-plugin-content-pages, docusaurus-plugin-debug, docusaurus-plugin-google-analytics, docusaurus-plugin-google-gtag, docusaurus-plugin-ideal-image, docusaurus-plugin-pwa, docusaurus-plugin-sitemap, docusaurus-preset-bootstrap, docusaurus-preset-classic, docusaurus-remark-plugin-npm2yarn, docusaurus-theme-classic, docusaurus-theme-common, docusaurus-theme-live-codeblock, docusaurus-theme-search-algolia, docusaurus
    • docusaurus-theme-classic, docusaurus-types, docusaurus-utils, docusaurus
    • docusaurus-module-type-aliases, docusaurus-theme-classic, docusaurus-types, docusaurus
    • docusaurus-theme-classic, docusaurus-theme-common
    • docusaurus
    • docusaurus-theme-classic, docusaurus-theme-live-codeblock, docusaurus
      • #4168 feat(v2): Extract/translate hardcoded labels from classic theme (@​slorber)
    • docusaurus-init
      • #4098 feat(v2): improve templates, use JSDoc type annotation, improve docusaurus.config.js autocompletion (@​LittleboyHarry)
    • docusaurus-init, docusaurus-migrate
    • docusaurus-plugin-content-docs
      • #3949 feat(v2): new docs edit options: editCurrentVersion + editLocalizedDocs (@​slorber)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump @babel/preset-env from 7.12.11 to 7.13.9

    Bump @babel/preset-env from 7.12.11 to 7.13.9

    Bumps @babel/preset-env from 7.12.11 to 7.13.9.

    Release notes

    Sourced from @​babel/preset-env's releases.

    v7.13.9 (2021-03-01)

    Thanks @​saitonakamura for your first PR!

    :bug: Bug Fix

    :house: Internal

    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    Committers: 5

    v7.13.8 (2021-02-26)

    Thanks @​luxp and @​pigcan for your first PRs!

    :bug: Bug Fix

    • Other
    • babel-compat-data, babel-preset-env
    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    :nail_care: Polish

    • babel-helper-create-class-features-plugin

    :house: Internal

    • babel-core, babel-helper-transform-fixture-test-runner, babel-register
    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime

    :microscope: Output optimization

    • babel-plugin-proposal-object-rest-spread

    ... (truncated)

    Changelog

    Sourced from @​babel/preset-env's changelog.

    v7.13.9 (2021-03-01)

    :bug: Bug Fix

    :house: Internal

    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    v7.13.8 (2021-02-26)

    :bug: Bug Fix

    • Other
    • babel-compat-data, babel-preset-env
    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    :nail_care: Polish

    • babel-helper-create-class-features-plugin

    :house: Internal

    • babel-core, babel-helper-transform-fixture-test-runner, babel-register
    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime

    :microscope: Output optimization

    • babel-plugin-proposal-object-rest-spread

    v7.13.6 (2021-02-23)

    :bug: Bug Fix

    • babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime

    :house: Internal

    v7.13.5 (2021-02-23)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump cypress from 6.4.0 to 6.6.0

    Bump cypress from 6.4.0 to 6.6.0

    Bumps cypress from 6.4.0 to 6.6.0.

    Release notes

    Sourced from cypress's releases.

    6.6.0

    Released 2/18/2021

    Features:

    • Cypress now extracts and sends CodeFresh CI default variables when recording to the Dashboard. Addresses #4609

    Dependency Updates:

    • Upgraded ramda to version 0.27.1. Addressed in #14958.

    6.5.0

    Released 2/15/2021

    Performance:

    • Improved the startup time of cypress open and cypress run. Addresses #15075.

    Bugfixes:

    • Fixed an issue where tests would display as failed if an event (such as an XHR request) failed after the test was already completed. This only affects the display of the test and not what was reported in run mode, so it would not have had an effect on suites running in CI. Addresses #14978.
    • Fixed a regression introduced in 6.4.0 that caused Electron to crash when opening outside links in the Command Log. Addresses #14912.
    • Fixed an issue where browser paths with double backslashes would not work as expected on Windows. Addresses #14719.
    • Fixed Microsoft Edge browser detection when passing a path on Windows. Addresses #14716.
    • Fixed an issue where the types for Cypress.on did not support chaining. Addresses #14991.
    • Fixed an issue where, when installing two Cypress instances simulataneously, the downloaded .zip could become corrupted and break the install process. Addresses #4595.

    Misc:

    • Expanded search bar in desktop GUI to fill the entire width. Addresses #14830.
    • Added autoEnd to the types for LogConfig. Addresses #9590.

    Dependency Updates:

    • Upgraded electron to version 11.2.3. Addresses #15056.
    Commits
    • 5fb9ae6 release 6.6.0 (dev only) [skip ci]
    • 311cd4b chore: update ramda to 0.27.1 (#14958)
    • 47c9a19 Merge pull request #15131 from cypress-io/master-merge-up
    • de60d92 Merge branch 'develop' into master-merge-up
    • 4732937 build: avoid infininte rollup refresh on watch (#15132)
    • 585649c Merge branch 'develop' into master-merge-up
    • f6233af feat: send CI variables for CloudFresh (#15117)
    • 4aea5e4 chore: release @cypress/webpack-dev-server-v1.0.1
    • 7c831d7 chore: release @cypress/vue-v2.0.1
    • 35841e3 chore: release @cypress/vite-dev-server-v1.0.1
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump eslint-plugin-vue from 7.5.0 to 7.7.0

    Bump eslint-plugin-vue from 7.5.0 to 7.7.0

    Bumps eslint-plugin-vue from 7.5.0 to 7.7.0.

    Release notes

    Sourced from eslint-plugin-vue's releases.

    v7.7.0

    ✨ Enhancements

    Changes in Rules:

    • #1444 Added ignorePublicMembers option to vue/no-unused-properties rule.

    🐛 Bug Fixes

    • #1446 Fixed false negatives for member access with $ in vue/this-in-template rule.

    :gear: Updates

    • #1448 Upgrade vue-eslint-parser to v7.6.0.
      This makes the parser to case sensitive to the name used to determine the element when the file is SFC.

    All commits: v7.6.0 -> v7.7.0

    v7.6.0

    ✨ Enhancements

    New Rules:

    • #1001, #1432 Added vue/html-button-has-type rule.

    Other changes in Rules:

    • #1429 Added "SLOT" option to vue/attributes-order rule to specify v-slot order.
    • #1430 Changed the option schema for the following rules to be stricter. Incorrect options are reported as errors.
      • vue/attributes-order rule.
      • vue/component-tags-order rule.
      • vue/max-attributes-per-line rule.
      • vue/new-line-between-multi-line-property rule.
      • vue/no-bare-strings-in-template rule.
      • vue/no-duplicate-attributes rule.
      • vue/no-potential-component-option-typo rule.
      • vue/no-reserved-component-names rule.
      • vue/no-use-v-if-with-v-for rule.
      • vue/no-useless-mustaches rule.
      • vue/no-useless-v-bind rule.
      • vue/valid-v-slot rule.
    • #1436 Improved autofix of vue/no-deprecated-slot-attribute rule when slot name contains _.

    🐛 Bug Fixes

    • #1434 Fixed false negatives for v-bind="object" in vue/attributes-order rule.

    :gear: Updates

    ... (truncated)

    Commits
    • 3128c11 7.7.0
    • 3878fc4 Upgrade vue-eslint-parser to 7.6.0 (#1448)
    • 467ef96 Fix false negatives for member access with $ in vue/this-in-template rule...
    • 7099954 Add ignorePublicMembers option to vue/no-unused-properties rule (#1444)
    • 4ae9178 7.6.0
    • 43f76df Upgrade vue-eslint-parser to v7.5.0 (#1440)
    • 4b41399 Improved autofix of vue/no-deprecated-slot-attribute rule when slot name cont...
    • b978258 Fix false negatives for v-bind="object" in vue/attributes-order rule (#1434)
    • 5129cef Change vue/html-button-has-type rule (#1432)
    • 9a9461a New: vue/html-button-has-type rule (#1001)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
  • Bump eslint-config-prettier from 6.15.0 to 8.1.0

    Bump eslint-config-prettier from 6.15.0 to 8.1.0

    Bumps eslint-config-prettier from 6.15.0 to 8.1.0.

    Changelog

    Sourced from eslint-config-prettier's changelog.

    Version 8.1.0 (2021-02-24)

    • Added: [flowtype/object-type-curly-spacing].
    • Added: Dummy files for the configs removed in 8.0.0. The dummy files throw an error that try to guide you how to upgrade.

    Version 8.0.0 (2021-02-21)

    • Changed: All configs have been merged into one!

      To upgrade, change:

      {
        "extends": [
          "some-other-config-you-use",
          "prettier",
          "prettier/@typescript-eslint",
          "prettier/babel",
          "prettier/flowtype",
          "prettier/react",
          "prettier/standard",
          "prettier/unicorn",
          "prettier/vue"
        ]
      }
      

      Into:

      {
        "extends": [
          "some-other-config-you-use",
          "prettier"
        ]
      }
      

      The "prettier" config now includes not just ESLint core rules, but also rules from all plugins. Much simpler!

      So … what’s the catch? Why haven’t we done this earlier? Turns out it’s just a sad mistake. I (@​lydell) was confused when testing, and thought that turning off unknown rules in a config was an error. Thanks to Georgii Dolzhykov (@​thorn0) for pointing this out!

      If you use [eslint-plugin-prettier], all you need is [plugin:prettier/recommended]:

      {
        "extends": [
          "some-other-config-you-use",
      

    ... (truncated)

    Commits
    • d6c4297 eslint-config-prettier v8.1.0
    • 4e00e6d Add dummy legacy configs
    • abf3ba1 Update npm packages and add flowtype/object-type-curly-spacing
    • 0fd5734 Try to clarify eslint-plugin-prettier
    • 0dd2a7e eslint-config-prettier v8.0.0
    • 03c79b9 One config to rule them all (#175)
    • 72ce4d7 Update npm packages
    • aca15b5 eslint-config-prettier v7.2.0
    • 5a0c4a9 Update npm packages and add new rules
    • 6b4625e Bump node-notifier from 8.0.0 to 8.0.1 (#170)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies javascript 
    opened by dependabot[bot] 2
Releases(v3.7.0)
  • v3.7.0(Sep 9, 2022)

    Enable DOM reconciliation for transformed elements (#573)

    • Use abstract for axes point.

    • Move to the box model for more consistent geometry.

    • Add different positions for different types of dragging.

    • Support interactivity between scroll containers by allowing custom mirroring the dragged when necessary.

    • Update listener(s) allowing them to be attached to scroll containers with overflow even if they are not dynamic.

    • Initialize scroll threshold depending on the depth layer instead of the targeted container.

    • Flushing element indicators without checking the DOM state leaning more into DOM & VDOM instances.

    • Unify listeners system with payload and status.

    • Add keyboard listener to the playground app to enable commit for testing.

    • Add DFlex Cycle as a global migration holder inside the store.

    • Add DFlex Session to manage user interactivity with the DFlex app.

    • Manage reconciliation by using SK (containers key) inside Cycle. So the reconciliation only targets the affected container(s).

    • Add options for committing changes to the DOM. Users still have the ability to transform the elements indefinitely but in some cases, apps need to commit after each cycle. This feature is now enabled with embedded reconciliation that targets only affecting elements in their containers. This feature makes DFlex the first drag-and-drop framework with its own reconciler and the first one that gives the user multiple options for indefinite transformation or committing to the DOM when necessary.

    Source code(tar.gz)
    Source code(zip)
  • v3.6.2(Aug 1, 2022)

    Use viewport threshold percentage to control elements visibility (https://github.com/dflex-js/dflex/pull/566)

    • Remove all separate class interfaces in the utility classes. Use class as a type instead.

    • Enhance registration. All essential data will be assigned and registered even with DFlex being framework agnostic. Register functions still have the capability to create a DFlex-Node instance, along with its container, and scroll. This decreases the scripting time for the first interactive dragging without blocking the initial mount during registration https://github.com/dflex-js/dflex/pull/565.

    • Use different types for threshold. Previously all thresholds used were external thresholds. I added a new type internal to apply the threshold percentage correctly for the scroll. An internal threshold is a threshold that checks the dragged inside the given area and is always smaller than the working area.

    • Use essential geometry for Point<number>, Point<boolean> for scroll.

    • Add more indicators to enhance scrolling. DFlex can identify thresholds, calculate invisible areas,s and based on this information do scroll animation.

    • Bind scrolling data with scroll listeners. So when scrolling DFlexScrollContainer can do all the related calculations without reading from DOM.

    • Synchronously update element visibility when scrolling. Avoid any gap that may appear during the scroll. Also, still, the visible area is the scrolling area. Elements' position won't be updated if it's not visible. But the current approach updates visibility and then scrolls so visibility is calculated before taking action.

    • Thresholds are now direction-dependent. If drag is in the bottom but going up then the threshold is false.

    • Differentiate the mechanism from the container.

    Fix the wrong axis assignment caused by a typo (https://github.com/dflex-js/dflex/pull/569)

    Initiate scroll overflow even if the container is not dynamic (https://github.com/dflex-js/dflex/pull/570)

    Source code(tar.gz)
    Source code(zip)
  • v3.6.1(Jul 23, 2022)

  • v3.6.0(Jul 13, 2022)

    Add layout mutation, listeners, and custom events (#558)

    • Add playgrounds to the type checking.
    • Add custom events instead of the previous approach which depended on emitting events by functions provided by each interactive element. DFlex events has $ prefix.
    type DFlexEvents =
      | "$onDragOutContainer"
      | "$onDragOutThreshold"
      | "$onDragOver"
      | "$onDragLeave"
      | "$onLiftUpSiblings"
      | "$onMoveDownSiblings";
    

    Implementation like any other event:

    import type { DFlexEvents } from "@dflex/dnd";
    
    const onDFlexEvent = (e: DFlexEvents) => {
     // Do something, or just don't.
    };
    
    // Later you can remove the listener with `removeEventListener`
    document.addEventListener("$onDragLeave", onDFlexEvent);
    
    • Provide listeners a subscription approach to provide a universal state to the interactive applications. You can subscribe anywhere in the app instead of depending on the emitted events from draggable elements. Currently, DFlex supports subscriptions to LayoutState.
    interface DFlexLayoutStateEvent {
      type: "layoutState",
      layoutState: "pending" | "ready" | "dragging" | "dragEnd" | "dragCancel";
    }
    

    Implementation from anywhere inside the app:

    React.useEffect(() => {
      const unsubscribe = store.listeners.subscribe((e) => {
        console.info("new layout state", e);
      }, "layoutState");
    
      return () => {
        unsubscribe();
      };
    }, []);
    

    Remove parentID from registry input by checking branches internally (#564)

    interface RegisterInput{
      id: string;
      depth?: number;
      readonly?: boolean;
    };
    
    const { id, depth, readonly } = registerInput;
    
    React.useEffect(() => {
      if (ref.current) {
        store.register({ id, depth, readonly });
      }
    
      return () => {
        store.unregister(id);
      };
    }, [ref.current]);
    
    

    Complete migrating all core smoke test cases to Playwright (#557)

    Source code(tar.gz)
    Source code(zip)
  • v3.5.4(Jun 11, 2022)

    • Fix attaching element reference when passing id only (#553).
    • Upgrade to Cypress 10 (#554).
    • Enforce passing id and parentID for registered elements (#555).
    • Using playwright to cover core cases (#556).
    Source code(tar.gz)
    Source code(zip)
  • v3.5.3(May 30, 2022)

  • v3.5.2(May 30, 2022)

  • v3.5.1(May 21, 2022)

    Refactor meta extractor to distinguish between an empty and orphan case (#524)

    • Change margin when positioning from orphan to non-orphan container (#529)

    • Refactor test description for essential cases (#528)

    • Add unit test to meta extractor (#527)

    • Refactor unit test for DnD (#526)

    • Fix margin-bottom calculation taking into consideration the last occupied position (#525)

    • Upgrade to pnpm 7.

    Add essential cases for obliquity and continuity including from/to empty container (#531)

    • Remove unused instances and methods not used in the store and refactor related tests (#533).

    • Add origin length to determine when to restore and when the container is expanding (#533).

    • Refactor unit test for meta extractor (#533).

    • Fix continuity in extending orphan container (#534)

    extending orphan container

    • Fix last element preservation in the origin (#536)

    empty multiple then restore

    • Clear transition instances after each operation (#537)

    • Testing transform element to an into empty container (#538)

    Distribute then transform into empty one

    • Handle obliquity from multiple containers bottom-up

    Split multiple containers from bottom up

    • Handle obliquity from one container bottom-up

    Split one container bottom up

    • Handle obliquity from multiple containers up to bottom

    Split multiple containers up to bottom

    Enable transforming elements between containers (#539)

    • Add options for transforming elements between containers.
    interface ContainersTransition {
      /** Default=true */
      enable: boolean;
    
      /**
       * Support orphan to orphan transformation.
       * Default=10px
       * */
      margin: number;
    }
    
    • Keep the element transformed to the bottom instead of consider it out of the container and resettled it in its original position (#544).

    keep it at the bottom

    • Separate types from JavaScript dist files (#547).
    Source code(tar.gz)
    Source code(zip)
  • v3.5.0(May 10, 2022)

    Support Strict Transformation Between Containers

    Transformation depends on three cases:

    1. Crowded: Transform into a container with siblings more than 1.
    2. Empty: Transform into a container where there are no siblings.
    3. Orphan: Transform into a container where there is only one element there.

    Calculations are made to:

    1. Translate object {x,y} => update occupied-translate. These coordinates are relative and related to the connected index. E.g: If the element left its original container and got inserted at the destination container with index-3 then the translation should be based on the insertion index. (Not the same case for the position.)
    2. Position object {x,y} => update occupied-position. These coordinates are absolute. Calculating position affects the next element's movement. E.g: If element-last-one has to move down it will check the occupied-position because can't move based on its own position so this will kill dealing with different heights/widths. So it has to move to a post-defined point. For transformation inside the list itself, it's not a problem. But for migration to a new container then the calculated value should be done before triggering any transformation. It's not a step-by-step regular movement.

    Three different phases for execution:

    1. Calculate and assign position once the destination list/container is defined. Before knowing the insertion index.
    2. Calculating translation which should be done after detecting the insertion index before triggering the transformer otherwise we will calculate the next position instead of the current one.
    3. Assigning the translation after the transformer(move-down) is done. Otherwise, the dragged will be out-position= true.

    Roadmap:

    A- Handle the case where transformation between containers happens to the absent bottom (#493)

    • [x] Fix undo for draggable when it's inside the position threshold but triggered or shifted slightly. Now it does trigger the undo instead of treating this case as moved out.
    • [x] Fix dragged insertion inside the container when the breaking point is not detected. It enforces the dragged to be attached to the bottom right after the first cycle of iteration avoiding unnecessary function calls that led to the same result.
    • [x] Avoid unnecessary updating position/translate when appending to the bottom.
    • [x] Remove numberOfElementsTransformed and updateNumOfElementsTransformed from dragged and replace the use case with exicting indicators.
    • [x] Support transformation when dragged is migrated to the bottom of the destination container.
    • [x] Add test cases for transforming back and forth horizontally and vertically.

    backAndForthHorizontally

    B- Refactor utils to Core removing #getDiff (#494)

    interface INode extends ICore {
      isConnected(): boolean;
      isPositionedUnder(elmY: number): boolean;
      isPositionedLeft(elmX: number): boolean;
      getRectBottom(): number;
      getRectRight(): number;
      getRectDiff(elm: this, axis: Axis): number;
      getDisplacement(elm: this, axis: Axis): number;
      getDistance(elm: this, axis: Axis): number;
      getOffset(): RectDimensions;
      hasSamePosition(elm: this, axis: Axis): boolean;
    }
    

    C- Check the layout shift for vertically transforming elements with different heights inside the same container (#496)

    1. Outside the container then insert: a. The dragged is bigger than the targeted element - moving without releasing. b. The dragged is smaller than the targeted element - moving without releasing. c. The dragged is smaller than the targeted element - move and release with iteration.

    2. Inside the container: a. The dragged is bigger than the targeted element - moving without releasing. b. The dragged is bigger than the targeted element - move and release with iteration. c. The dragged is smaller than the targeted element - moving without releasing. d. The dragged is smaller than the targeted element - move and release with iteration.

    D- Enable transformation for containers orphaned by migration (#497)

    In this case, the origin container has two elements.

    1. One element transformed into another container. It has a solo element now.
    2. A new element is going to be transformed into it, the container which has one element.
    3. The insertion margin shouldn't cause any layout shift.

    To solve it, when the container is receiving a new element. DFlex restores the preserved last element position and calculates the margin to guarantee the given scenario where there is no shifting in positions.

    orphanedCase

    E- Enable transformation from origin higher than destination

    One of the calculations DFlex has is defining a threshold for each layout (#418). Threshold tells the transformers when dragged is in/out its position or the container strict boundaries. This strict definition of threshold helps to improve user experience and the physical sense of elements' interactivity. It also plays role in detecting the active container when an element migrates from one to another. This definition prevents the transformation from a container having bigger height/width into another container having smaller boundaries. When leaving the position and entering a new one the transformer can't tell if the element is inside the less-boundaries container or not. To tackle this issue each depth must have a unified transforming boundary. So when the element is dragged at the same level horizontally or vertically it can be settled into the destination container and attached to the bottom which has the highest weight.

    Steps to Solve it:

    • [x] Define insertion area threshold for layouts with the same depth to optimize transformation between containers (#500), (#513).
    • [x] Use shared utility in DOM-Gen to generate composed keys for layout depth + key (#501)
    • [x] Add a unified container dimension for each layout that belongs to the same depth (#503) So when checking where the dragged is located different heights and widths won't be a problem given when dragged is transforming all of them has the same dimensions. Still, this needs to be improved to become more dynamic since heights and widths are constantly changing or supposed to be so.
    • [x] Create a shared method for element insertion deals with all directions and is able to restore the positions if any (#508) and (#509)
    • [x] Create composed translate and position methods to structure getting insertion offset and margin (#510) and (#511).

    Transforn into smaller list

    F- Dealing with multiple transformations without settling into a new position (#519)

    This scenario requires checking all the containers that are affected by the transformation and rollback each last transformation accordingly. This is done by adding a unique id to the migration instance instead of a central one created for each clickable operation. E.g. The user clicks and transforms then one id is created for this operation. This allows to roll back each transformation connected to the same id. But to achieve multiple undo between containers the id is shifted into migration.

    interface MigrationPerContainer {
      /** Last known index for draggable before transitioning. */
      index: number;
      /** Transition siblings key. */
      SK: string;
      /** Transition unique id. */
      id: string;
    }
    

    undo-multi-container

    G- Enable multiple steps of transformation (#520)

    • [x] Translate from origin to destination. The destination is not an orphan, the margin is then calculated based on the space between the last two elements in the destination container.
    • [x] Translate from origin to destination. The destination is an orphan the margin is then calculated based on the space between the dragged and the next element in the origin container.
    • [x] Translate from one destination to another. The destination is an orphan, same as above.

    multi-steps

    H- Add the ability to extend the transformation area between containers (#521). This allows accumulating all registered elements in one container.

    extend horizontally

    Source code(tar.gz)
    Source code(zip)
  • v3.4.1(Apr 20, 2022)

    Add experimental API supporting transformation between containers

    Add synthetic offset for element insertion into a new container (#462)

    • Create a new synthetic offset for each container to deal with element migration. Taking into consideration multiple heights and widths. So, the insertion offset always matches the migrated element.
    • Element preservation offset now lives in the migration instance, supposedly grouping all related movement in one instance for maintaining purpose.
    • Refactor setDistanceIndicators calculations in one equation instead of if/else.

    Fix build:w and list length when migrated to a new container (#461)

    Add initial support for element transformation from one container to another (#463)

    • Fix element synthetic offset. One, unified for draggable element.
    • getDiff to calculate difference in the space for : "offset" | "occupiedPosition" | "currentPosition"
    • Refactor setDistanceIndicators to setDistanceBtwPositions

    Utilize the Core (#464):

    • Create a new class for Core Utilities. It inherits from core-instance and Abstract Core and has all the utility methods for the core.
    • Refactor naming for more clarity.
    interface ICoreUtils extends ICore {
      isPositionedUnder(elmY: number): boolean;
      isPositionedLeft(elmX: number): boolean;
      getRectBottom(): number;
      getRectRight(): number;
      hasSamePosition(elm: this, axis: Axis): boolean;
    }
    

    Handle insertion in the Store (#465)

    • Core instance has 1- initial element offset. The reason why is that we can always reset the movement to go back in time to the zero moment (feature will be introduced later). That leaves DFlex with another Rect option to keep the dimension on track. To do that efficiently it uses 2- CurrentPosition. Presumably, width and height stay the same but the position keeps changing. So, to get the current offset we need getOffset a new method introduced to the CoreUtils.
    • Migration has now instances used for transition periods. Wich defined as the moment where the insertion is detected to the moment where the insertion is completed. To do that we have insertionTransform and insertionOffset. We have also the prev method. Prev() and latest() returns easily the current and last migration instance. When migration is completed we set these instances to null.
    • Add handleElmMigration to the Store. It helps update the boundaries for both new and original lists.
    • Improve newElmOffset Check elmSyntheticOffset to detect the right insertion.

    Add Container/Depth instance (#470)

    Create Container Instance which is similar to Core. But with the current edition, we now have multiple instances each one representing a different role.

    1. Node: represents a single node in the DOM tree.
    2. Container: represents the container of nodes. Also known as siblings container since DFlex operates on the same depth following siblings approach.
    interface IContainer {
      /** Strict Rect for siblings containers. */
      readonly boundaries: RectBoundaries;
      /** Numbers of total columns and rows each container has.  */
      readonly grid: IPointNum;
      /** Container scroll instance.  */
      scroll: IScroll;
      setGrid(grid: IPointNum, rect: RectDimensions): void;
      setBoundaries(rect: RectDimensions): void;
    }
    
    1. Depth: represents the collection of containers keys grouped by the same depth. (Integrated into DOM-GEm #471)
    interface IDepth {
      /** Grouping containers in the same level. */
      readonly containers: {
        [depth: number]: string[];
      };
      add(SK: string, depth: number): void;
      getByDepth(depth: number): string[];
      removeByDepth(depth: number): void;
      removeAll(): void;
    }
    
    1. The store has a registry for nodes and Containers for each container instance. The registry with ids as keys while Contiers have a special key called SK generated by DOM-Gen.
    2. DnD store: operate both Nodes and Containers. A bridge between the two.

    Refactor element(s) registration (#473) to gaurantee non-blocking element registeration.

    Remove unused parent containers (#474)

    Add enableContainersTransition to opts with a new playground /migration (#475)

    Refactor e2e test to include transformation between containers (#476)

    Fix essential transformation for different heights (#478)

    Upgrade playground to React 18 (#479)

    Add changesets for versioning and npm publish (#483)

    Use build artifacts for e2e testing (#486), (#480)

    Add docs to the main repo (#477)

    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Apr 5, 2022)

    Use sibling registration to manage migration between containers (#449)

    Revert #446 approach Depends on getting parents/children for dragged migrations by enforcing parent registration if not exist in the store. It works fine but is not what it's intended to be.

    DFlex main approach in the essential design depends on a flat hierarchy. Instead of getting each element and connecting it to the parent. The store already has all elements on the same level.

    Supposed we have container -a and container-b. All elements in both containers are included in the registry. Both boundaries for siblings are calculated and can be added to the threshold instance since v3.3.1.

    Regular Scenario: user click -> get element -> find the parent -> matching the parent overlay recursively -> matching the children overlay recursively -> remove node/append new node to new parent.

    DFlex Implementation: user click -> get element -> matching siblings overlay -> add transformation for new positions.

    1. Avoid recursively looking for parents.

    2. Always allow elements from the same level to interact with each other.

    3. Control element migration map. Registered/same level (siblingDepth)

    4. Insertion inside the containers already shipped. The scenario dragged outside the container and then moved inside. It's already done by getting the siblings' key SK so it's somehow container agnostic.

    Adding Migration class (#450):

    • Replacing placeholders group them in one instance responsible for managing migration.
    • Ability to store the movement between containers. This means enabling undo multiple steps back when introducing the time travel feature.
    • Distinguish between position migration inside the same container and with different ones.
    interface IAbstract {
      index: number;
      key: string;
    }
    
    interface IMigration {
      /** Get the latest migrations instance */
      latest(): IAbstract;
    
      /**
       * We only update indexes considering migration definition when it happens
       * outside container but not moving inside it.
       * So we update an index but we add a key.
       */
      setIndex(index: number): void;
    
      /** When migration from one container to another. */
      add(index: number, key: string): void;
    }
    

    Create an array for branches even if there's one child in (#457) to allow migration and flexible add/remove elements. Enhance actions by adding timeout this will cut off Cypress when there's more than one failing case.

    Use direction and axis with each transformation instead global instances (#436):

    • Core updater receives one axis/direction instead of both matching the entire approach of one axis per transformation.
    • Remove setEffectedElemDirection and effectedElemDirection using the direction resulted in the update-element depending on the increase/decreas parameter.

    Enhance movement across the axis (#440):

    • Update both axes at once with x/y instance.
    • Remove axis parameter from the Undo method in the core.
    • Utilize Point instance.

    Refactor setPosition in the Core to include z axis (#443)

    Use bi-directional axes for undoing Cell position by (#442)

    Enhance element registration (#447):

    • Refactor Tracker to accept prefix and add it to the utils
    • Add private instance to generate id inside Store
    • Generate id for registered element instead of throwing err.

    Migrate DEV tools and package exports:

    • Export packages as ESM and CJS and bundle them with esbuild. (#459)
    • Migrate from yarn to pnpm . And Use Vite instead of CRA for playground. (#460)

    Full Changelog: https://github.com/dflex-js/dflex/compare/v3.3.2...v3.4.0

    Source code(tar.gz)
    Source code(zip)
  • v3.3.2(Mar 26, 2022)

    Fix mismatch version in Core package and refactor naming in Utils (#427)

    • Remove unused Lerna changelog.
    • Refactor AxesCoordinates to Point For more readability.
    • Use private hashes for Core and DOM-Gen.
    • Fix the Core mismatch version which caused using an external version instead of linking the development one.

    Update grid for Core and Dragged (#429)

    • Refactor transition history type.
    • Allow adding grid positions to the dataset.
    • Add a read-only prefix to the abstract core interface.
    • Add gridPlaceholder for Dragged and update it for Core.

    Reset columns for each row when calculating and positioning grid for siblings (#434)

    • Expand playground to include grid example.
    • Add new methods and instances to deal with grid containers.

    Migrate transformer to a grid-based controller (#431)

    Remove wrong direction flag in updateElement (#432)

    Update readme to include all project packages (#433)

    Remove isLeavingFromHead, public isLeavingFromTail and mousePoints (#435)

    More about V3 releases and DFlex roadmap.

    Source code(tar.gz)
    Source code(zip)
  • v3.3.1(Mar 19, 2022)

    Fix dragged siblings boundaries calculations (#421)

    • Fix dragged siblings' boundaries when it calculates width and height.
    • Fix isLeavingFromHead and strict index to zero.
    • Remove unnecessary conditions in isOutThreshold.
    • Change threshold to include bottom/right or four directions moving away from two points approach.

    Add grid position to each cell and use private hashes for util classes (#425)

    • Fix coordinates interface in the core.
    • Add a grid for each cell and one for each sibling.
    • Enhance Core interface documentation.
    • Use private hashes for util classes.

    Remove isDraggedOutPosition and isDraggedOutContainer (#419)

    Use SWC for Jest and remove Babel (#424)

    Source code(tar.gz)
    Source code(zip)
  • v3.3.0(Mar 14, 2022)

    Enhance Threshold for dragged and containers (#408)

    • Add Interface to Axes Coordinate.
    • Keep draggedOutPosition to dragged inside the parent container. Removing unnecessary flags.
    • Enhance threshold to have main object contains the main element threshold instead of the previous approach which included unclear properties. The new threshold has max and min for each defined point defined as follows:
    interface ThresholdPointInterface {
      max: number;
      min: number;
    }
    
    • Add utility class ThresholdPoint for each point.

    Use strict read-only flags for Draggable (#409)

    • More unified approach, refactoring siblingsBoundaries to type Rect
    • Enhance Draggable interface and strict flags to read-only
    • Enhance Axes class and extend it to a new type for boolean.

    Add a new dragging implementation for Interactive/Axes (#410)

    • A more unified approach, refactoring siblingsBoundaries to type Rect
    • Enhance Draggable interface and strict flags to read-only
    • Enhance Axes class and extend it to a new type for boolean.

    Add Threshold to Utils and group AxesCoordinates classes (#414)

    Remove mouse pointers from all position detectors (#416)

    Add threshold indicators to each active layout (#418)

    • Add a new class AxesFourCoordinatesBool for dealing with layout position in four directions.
    • Add the new direction instance to the threshold. Include all the position indicators in the threshold that has a store for threshold(thresholds)/indicators(isOut).
    • Enable position flags for dragged and the parent layout instead of depending on one set of flags for position detection.
    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(Mar 5, 2022)

    Use axes point to deal with current offset (top/left) (#403)

    Add both axes to transformers in the Core (#404)

    • Update seTranslate, setPosition and rollBack in the Core and all related classe to include both axes.
    • Add more types to the utils. As part of shared types/functions to include Axes and EffectedElemDirection.
    • Remove legacy current position updaters and use setAxes instead.
    • Replace TempOffset with AxesCoordinates

    Add attributes to dragged for out container and position (#405)

    • Add new attributes to dragged to include "dragged" | "out-position" | "out-container"
    • Add setAttribute, removeAttribute, and clearAttributes to abstract core.
    • Use the centralized transform method in the abstract core.
    • Refactor mouse direction flags to include both axes.

    Refactor Dragged instance and migrate playground to TS (#406)

    • Refactor dragged to use AxesCoordinates
    • Migrate dragged playground to TS

    Refactor attributes and dataset in the Core (#407)

    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Mar 2, 2022)

    Use TS with Cypress (#384)

    Extract event emitters as functions outside the main class (#390)

    Throttle dragged insertion when outside the parent container (#391)

    • Enhance CI jobs: Canclining running CI when updating the PR and adding types and path-ignore.
    • Use extract element visibility to a new function updateElementVisibility.
    • Add a draft new function detectNearestContainer that triggered when dragged is out of the parent container and check for possible new parents.
    • Expose siblingsContainer and setOfTransformedIdsin Draggable.
    • Extract isIDEligible and isIDEligible2Move as utils function outside the class.
    • Fix naming in cleanupDisconnectedElements and isAttachListener
    • Add animatedDraggedInsertionFrame to throttle dragged insertion into the parent container and refactor the tests adding more delay to cover the new throttle.

    Refactor comparison to the core instance and extend the mechanism to include both axes (#395)

    • Add a new playground for dealing with horizontal lists.
    • Refactor position comparison to core-instance for more usability. Add a new method isPositionedLeft to check horizontal position.
    • Add new utils to store getBranchHeadAndTail and avoid bugs caused by not checking the availability if there's only one element in the branch.
    • Extract distance calculations methods to a new class. So that calculating x and y can be done separately from the main droppable class.

    Refactor measuring distance between elements to include both axes (#396)

    Create a new package for shared utilities (#397)

    • Use generic type for axes points to extend the class usages to hold points history and any associated variables.
    • Create new shared utils for shared classes and functions across the project.
    • Refactor branch name to main

    Redesign the Store to be fully compatible with core-instance (#398)

    Fix Abstract Core interface (#402)

    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Jan 24, 2022)

  • v2.15.0(Sep 17, 2021)

    Add 5 different states for the layout: "pending" | "ready" | "dragging" | "dragEnd" | "dragCancel"

    • pending: when DnD is initiated but not activated yet.
    • ready: When clicking over the registered element. The element is ready but not being dragged.
    • dragging and dragEnd as expected.
    • dragCancel When releasing the drag without settling in the new position.

    Add 4 categories of events:

    • Drag events Events related to the dragged element. This event is fired with onDragOutContainer and onDragOutThreshold event listeners.
    • Interactivity events Events related to elements that interacted with the dragged. This event is fired with onDragOver and onDragLeave event listeners.
    • Sibling events Events related to the active list/branch: siblings. This event is fired with onLiftUpSiblings and onMoveDownSiblings event listeners.
    • LayoutStateEvent Events related to the layout state. It's fired with onStateChange

    Some internal patches:

    • Remove unnecessary instances from the Scroll.
    • Refactor auto-scroll to a manager method.
    • Refactor method naming and fix typo in register input

    PRs: (#343) and (#344). Docs

    Source code(tar.gz)
    Source code(zip)
  • 2.14.0(Sep 12, 2021)

    Handle invalid elements in the registry & elements accumulation to the same branch (#338)

    • Validate elements before creating draggable.
    • Throw an error when elements found in the branch are not connected when not in production.
    • Add cleanupUnconnectedElements for production usage.
    • Isolate indicators from adding a new element process. Open the room for more flexible add/remove when it comes to modifying existing branches. Done by adding accumulateIndicators.
    • Refactor native store to pass depth to the Core. (need depth when modifying branches).
    • Add new property parentID: string to match elements from the same branch for input in the registry.

    Fix creating parent node when reordering branches internally (#339)

    Add scroll dataset to the scroll container setting dynamic visibility as its value (#340)

    • Refactor initialize to attach (no need for separate method).
    • Add another reason for throwing an error when there's no parent-id.
    • Add scroll dataset when the scroll is the document. Previously, when not the document. Currently, add the dataset to the first div inside the body document. When to add the dataset? Only if the algorithm detects an overflow. (It's also so much easier for the test and debugging),

    Enhance cleaning up branches when elements are not connected (#341)

    • Detach elements ref when cleaning the branch.
    • Clear old reference when calling attach. There's a possibility of throwing an error while validating the new one without clearing the old one. Avoid any potential memory leaks.
    • Add a warning if not being able to add scroll dataset.
    • Refactor cleanupUnconnectedElements so we can dynamically clean connected/unconnected dom elements.

    Add lists unregistered and unsorted for further test cases (#342)

    Source code(tar.gz)
    Source code(zip)
  • v2.13.0(Sep 1, 2021)

    Add clear methods to DOM-Gen (#330)

    • Clear Scroll instance from Store with clearBranchesScroll to prevent a memory leak.
    • Upgrade to Typescript 4.4.
    • Remove unnecessary isElmSingleton from DOM Gen.
    • Add clear methods: removeElementIDFromBranch, destroyBranch, clearBranchesAndIndicator to DOM Gen.
    • Remove setElmBranch as it has not a clear role otherwise a direct assignment.
    • Remove element from the branch when unregister it from the store. This fixes a bug that causes branches to preserve elements even f they are deleted from the registry.
    • Add strict type to scrollEventCallback.
    • Add Unit Test to the new methods.

    Fix a bug of keeping scroll instance after clearing the entire elements branch (#331)

    • Define new errors when id is not registered or can't find siblings key (SK).
    • Add scroll and visibility initializing inside the Store instead of Draggable.
    • Reset the branch instances inside the Store when the branch is empty.

    Avoid a bug where there's an overflow in CSS but the container doesn't actually have a scroll (#332)

    Source code(tar.gz)
    Source code(zip)
  • 2.12.0(Aug 28, 2021)

    Fix draggable store validation and types (#307)

    Minimize E2E test time & remove all async undo (#313)

    • Fix an error message that appears when insert dragged inside the list.
    • Expand the test to include index and attribute.
    • Minimize test time.
    • Remove async undo.

    Add animated transformation to core (#314)

    Fix a bug causes wrong calculation for different heights (#316)

    Add three levels of restrictions (#318)

    Define three levels of restrictions. Each level is relevant to a different position. Add more flexibility, so each element can define its restricted area separately from another sibling.

    Available restrictions:

    1. Restricted area related to the parent container.
    2. Restricted area related to the viewport.
    3. Restricted area related to the position itself.

    Changes made to the playground:

    1. Redefine the old restricted to all - as all elements inside the list have the same restrictions rules.
    2. Add a new routing that reflects the new changes including more showcase.
    3. Add a new demo that shows how flexible each element can be for the same restrictions rule: parent.
    4. Add tests that cover all new cases related to the parent restrictions.
    5. Refactor the old test related to all elements restricted to the parent.

    restrictions-different

    Changes related to the API: Define new restrictions with types:

    interface Restrictions {
      self: {
        allowLeavingFromTop: boolean;
        allowLeavingFromBottom: boolean;
        allowLeavingFromLeft: boolean;
        allowLeavingFromRight: boolean;
      };
      container: {
        allowLeavingFromTop: boolean;
        allowLeavingFromBottom: boolean;
        allowLeavingFromLeft: boolean;
        allowLeavingFromRight: boolean;
      };
    }
    

    And the default values are:

    const restrictions= {
        self: {
          allowLeavingFromTop: true,
          allowLeavingFromBottom: true,
          allowLeavingFromLeft: true,
          allowLeavingFromRight: true,
        },
        container: {
          allowLeavingFromTop: true,
          allowLeavingFromBottom: true,
          allowLeavingFromLeft: true,
          allowLeavingFromRight: true,
        },
      },
    

    Of course, that's done with testing the new options and refactor Jest cases.

    Following that, the old API is changed to simplify the axes filter with just axesYFilter and axesXFilter.

    Fix a bug that causes wrong calculation for different heights (#316)

    Fix a bug in options and self-restriction area (#319)

    • Fix a bug in extraction options and update the test.
    • Fix a bug containing elements inside the self-restriction area.
    • Add horizontal/vertical test to the self-restriction area.

    Add test to the viewport restriction (#320)

    Fix a bug in pausing invisible elements (#321)

    Refactor scrollElement (#323)

    • Add isViewportRestricted flag to the filters
    • Add initialSpeed to the options instead of speed.
    • Use incremental speed for scrolling.
    • Add local instance to calculate scroll distance
    • Add scrollHeight to the store.
    • Refactor store method name (init makes more sense)

    Add Threshold class to use shared functionalities between Scroll/Draggable (#324)

    • Add Threshold class to use shared functionalities between Scroll/Draggable.
    • Merge Base class with Draggable class.
    • Move Tracker to the utils.
    • Refactor type names use more universal naming.
    • Refactor names of generated keys in DOM-Gen which created so much confusion in the past. Now, it's all capitalized.
    • Refactor tests & snaps.

    Refactor helper classes (#325)

    • Add helper classes to the Plugin folder instead of utils which now includes only functions.
    • Refactor Scroll to a separate class (separation of concerns).

    Add scroll instance to each sibling list (#326)

    • Refactor register to soft register. Remove the old burden, reduce the initial scripting time. All elements now are paused by default and can be not initialized if there's no ref passed. The earlier version threw an error then it was optional.
    • Change Scroll workflow. Every group of siblings has its own scroll instance. Allowing to change lists with scroll container.

    Enhance overflow indicators (#327)

    • Remove siblingsOverflow uses local instance from a Scroll instead.
    • Add threshold to active visibility controller. For small lists, activate all siblings if don't meet the threshold (isAllVisible: true).
    • Don't add a scroll listener if there's no overflow but keep the resize listener.
    • Refactor restriction to use scroll container instead of viewport.
    • Add changeToFixedStyleProps to Draggable with a method in the abstract that accepts a new style as an array to change the dragged style.

    Fix self-contained restrictions bug caused by calculating the wrong boundaries (#328)

    • Refactor loading and initiating siblings branch fixing a minor bug prevented initializing a solo element with no siblings.
    • Fix isElementVisibleViewportY/X depending on the Scroll container adding new methods to know the container boundaries.
    • Fix minor bug in calling back function triggered by the scroll event.
    • Fix minor bug in override options.

    Docs

    Source code(tar.gz)
    Source code(zip)
  • v2.11.0(Aug 1, 2021)

    Add essential Test for Firefox (#304)

    Add new core API with isInitialized, isPaused and isVisible (#303)

    • Add isPaused and isInitialized to the Core. This is going to add more flexibility to the API. When to resume and when to initialize. The current situation is core has multi-levels isInitialized, isPaused and isVisible.
    • Validate element reference from inside the Core. This step enables a more flexible attach/detach and it's more reliable to pass id without HTML reference. It's also consistent with the three new levels.
    • Element Reference is nullish when not passed to not hurt the runtime. Adding a reference is unavoidable.
    • Checking visibility depending on so-called parent flags.
    • To make it more reliable and less buggy, there's a resume function that checks if the instance is initialized or not.
    • Changing visibility is done inside the Core. Make it easier to debug any issue in the future.
    • Add strong types to Core input. Refactor old names to more clear names.
    • Check listeners' values and then update. Avoid unnecessary function trigger.
    • Fix a bug when updating visibility in the store.
    • Remove incoming reference validation from the store implementation in the DnD. (Legacy code).
    • Suspend id duplication validation for now. Need to be investigated more in the future.

    Remove siblings list reference from DnD and Draggable (#301)

    Connect the store immediately to the draggable instance in DnD (#302)

    Remove dragged style reference & add style props as static (#300)

    • Remove draggedStyleRef & Add draggedStyleProps as static.
    • Refactor Jest for draggable test.

    Add extended list test (#299)

    • Check visible elements transformation.
    • Check dataset order for all elements.
    • Check changing visibility, positions, and continuity.

    Reduce memory footprint (#297)

    • Accept element reference, id, or both when registration adding more flexibility to the Store registry.
    • Add an optional initializing flag to the abstract core. In this case, not all elements will be calculated even with draggable only.
    • Add the ability to pause element registration for DnD. Along with visibility. This way increases the isolation for long lists. Not just on visibility level but also in the core when it comes to dealing with the class instances.
    • Check for initializing before calculations. In this way dealing with 1k of rows is similar to 10 rows only.
    • Refactor the related mechanisms in Draggable and Droppable.
    • Remove unnecessary methods like deleteElm and getElmById. Reduce the maintainability burden as API grows.
    • Update unit test to suit the new cases.

    Add unregister and destroy to Store (#296)

    • Add a dragged attribute to draggable.
    • Add index dataset to dragged while dragging.
    • Add unregister method to the store to remove one element.
    • Add destroy method to clear the registry.

    Fix continuity & id validation bug (#295)

    Source code(tar.gz)
    Source code(zip)
  • v2.10.1(Jul 25, 2021)

    Add new support to SRR #294

    • Previously, DFlex yields an error when running in SSR. This release enables DFlex to check the environment before running and invokes listeners when running on the client-side.
    • Use translate3d instead of translate to enhance performance as it's recommended.
    • Add auto cleanup function to remove listeners and fix binding reference.
    • Add scroll values to elements offset and always use absolute position calculations.
    Source code(tar.gz)
    Source code(zip)
  • v2.10.0(Jul 23, 2021)

    Add ability to know transformation order related to elements' appearance on the screen

    Done with adding custom dataset data-index which refers to element order inside rendering list after the transform is calculated.

    We have now two orders:

    1. Original order: In the DOM tree. The original input order which appears when inspecting elements with dev tools. Stay the same.
    2. Visual order: happens after transformation. The order which appears on the screen. With data-index we can now know the order of elements in the visual list.

    order

    With the new attribute you know which order is now on the user screen:

    image

    Transformation is related to the element visibility

    Previously, the transformation scale was covering all affected elements. Worked fine with a limited amount of elements. But to enable dealing with a tremendous amount of elements, the transformation is now related to the viewport.

    Now, no matter how many elements are affected, DFlex only transforms elements on the screen. Elements outside the viewport are triggered to a new position when they are visible.

    visibileOnScreen

    To enhance interactivity performance, DFlex does all calculations related to element positions behind the scene and only apply them when elements are on the screen.

    Remove the selection from the entire document when starting dragging

    removeSelection

    You can see all changes in #293

    Source code(tar.gz)
    Source code(zip)
  • v2.9.1(Jul 17, 2021)

    Enhance verify positions #291:

    • [x] Fix checking for position to start from 0 instead of 1.
    • [x] Dynamically calls sibling boundaries inside Draggable instead of passing it as an argument.
    • [x] Verify with the value that existed in sibling boundaries to make sure the element is still inside without any layout shift.
    • [x] Verify without calling animation listener. Make it even faster, with a zero delay.
    Source code(tar.gz)
    Source code(zip)
  • v2.9.0(Jul 16, 2021)

    Add fallback to core-instance enforcing logical changes to the active list #285.

    A new mechanism to check incoming changes that could prevent undoing. This step allows more accurate calculations and contains errors to one process instead of the old approach which is led to cascading the errors.

    Verify positions before confirming operation final transition #288.

    Additional functionality check that's done before confirming the final transformation. Comparing the minimum - one value from the active list in the DFlex Store with the actual position as it's painting in the browser.

    Prevent unnecessary re-assigning position index #287.

    Miniro change restricts access to the core-instance when it's not necessary.

    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Jul 14, 2021)

    Add drag & loops animated frames (#284).

    Add 1k extended rows to DnD playground (#279).

    Unify Draggable opts with DnD (#285).

    Add description to packages (#278)

    Source code(tar.gz)
    Source code(zip)
  • v2.7.2(Jul 5, 2021)

    Update test dependencies with docs patches (#274)

    Add lerna changelog (#275)

    Refactor demo design & migrate to TS in dnd playground (#277)

    Fix DnD/Draggable input interface (#276)

    Source code(tar.gz)
    Source code(zip)
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Nested Sort is a JavaScript library which helps you to sort a nested list of items via drag and drop.

Nested Sort Nested Sort is a vanilla JavaScript library, without any dependencies, which helps you to sort a nested list of items via drag and drop. U

Hesam Bahrami 40 Dec 7, 2022
Drag and drop library for two-dimensional, resizable and responsive lists

DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional

Hootsuite 3.6k Dec 14, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
⚡️ Next-generation data transformation framework for TypeScript that puts developer experience first

TypeStream Next-generation data transformation framework for TypeScript that puts developer experience first Nowadays, almost every developer is worki

Scopas Technologies 53 Nov 26, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and easy to use it

Digispark_Overmaster Digispark Overmaster : free IDE TOOL allows to create and edit Digispark Scripts by the drag and drop technique,with cool GUI and

Yehia Elborma 5 Nov 14, 2022
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ Features Supports touch dev

SortableJS 26.1k Jan 5, 2023
Drag and drop Argo Workflows tool.

Visual Argo Workflows Live demo The goal of this project is to make it easier for everyone on a team to construct and run their own workflows. Workflo

Artem Golub 38 Dec 22, 2022
Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

null 92 Dec 26, 2022
Drag-and-drop editor for Docassemble interviews

GraphDoc Introduction GraphDoc is a web-application that has been developed on behalf of the Maastricht Law & Tech Lab, which is part of Maastricht Un

Maastricht Law & Tech Lab 16 Dec 28, 2022
🔖 A drag-and-drop form builder for Bootstrap 4.

Bootstrap v4 Form Builder A drag-and-drop form builder for Bootstrap 4. ❓ Get Help There are few ways to get help: Please post questions on Stack Over

Bloggify 107 Dec 22, 2022
A fast, safe and easy caching mechanism similar to Redis written in typescript

Viper Viper is a memory based caching mechanism which is aimed towards ease of use and speed. It's in a very early stage right now and not meant to us

Japroz Saini 1 Jan 24, 2022
Privacy preserving governance mechanism using zero knowledge for proof of merkle inclusion.

Zero Knowledge Private Voting V1 Motivation On-chain governance today is fully transparent at the cost of privacy. This means that every proposal and

Blockchain Capital 18 Dec 16, 2022
Privacy preserving governance mechanism using zero knowledge for proof of merkle inclusion.

Zero Knowledge Private Voting V1 Motivation On-chain governance today is fully transparent at the cost of privacy. This means that every proposal and

Blockchain Capital 11 Jun 7, 2022