Vue 3 Diagram Editor: click and drag

[ulissepress]

Environments

• Framework name: Vue
• Framework version: 3.x
• Moveable Component version: 0.4.8
• Testable Address(optional): https://codesandbox.io/s/nifty-euclid-8niqo1

Description

I'm creating a Vue 3 diagram editor: user can add different node types (shapes, lines, images ,and virtually any Vue component can be a node). Users can also add interactively connections between 2 nodes, etc.

When I have to 'interact' (move, resize, rotate, etc.) I have first to click the node (to select it) and then doing the move/resize/rotate action I want.

How can i click and immediately drag the node? I linked a codesandbox so you can play with the real app.

https://codesandbox.io/s/nifty-euclid-8niqo1

[daybrush]

@ulissepress

use dragStart with mousedown event

@mousedown="selectItem(item, $event)"

selectItem(item, e) {
    target = ...;
    nextTick(() => {
        moveable.dragStart(e);
    });
}

https://codesandbox.io/s/wonderful-satoshi-pw61k0?file=/src/components/diagram-editor/DiagramEditor.vue

[ulissepress]

Thank you @daybrush, it is working fine!!

I have Another question about the resize: if you resize using the top-middle handle you see that is a bit 'strange' the way the resize is happening (at least not the way you expect, i.e., the Y position should change together with the shape height). During the resizing there is a way to know which handle is using the user to resize the shape, so I can adjust x/y/w/h accordingly ?

[daybrush]

@ulissepress

this is like a bug It will be fixed in the next release.

[ulissepress]

ok thank you for your reply, any plan when this new release will be available?

[daybrush]

@ulissepress

Maybe this week.

[daybrush]

@ulissepress

• lit-moveable 0.8.0
• moveable 0.31.0
• preact-moveable 0.33.0
• react-compat-moveable 0.19.0
• react-moveable 0.34.0
• svelte-moveable 0.23.0
• vue-moveable 2.0.0-beta.22
• vue3-moveable 0.6.0
• ngx-moveable 0.28.0

moveable's new version is released.

stopped mousedown propagation.

[ulissepress]

Hello @daybrush, thank you for the update.

When I upgraded the vue3-moveable to 0.6.0 I am getting this Vite error:

 The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/vue3-moveable/dist/moveable.esm.js:9:70:
      9 │ import VanillaMoveable__default, { METHODS, PROPERTIES, EVENTS } from 'moveable';
        ╵                                                                       ~~~~~~~~~~

23:05:31 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:10: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "moveable". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "moveable". The package may have incorrect main/module/exports specified in its package.json.

Before the upgrade these was the packages I was using:

    "vue-guides": "^0.17.1",
    "vue3-infinite-viewer": "^0.3.0",
    "vue3-moveable": "^0.4.8"

after the upgrade:

    "vue-guides": "^0.17.2",
    "vue3-infinite-viewer": "^0.3.1",
    "vue3-moveable": "^0.6.0"

Globally I am also using Vue 3 (v. 3.2.25) and VueUse (v 8.6.0).

I also tried to remove completely the node_modules folder and install all from scratch... but I got the same error.

NOTE: checking the node_modules/moveable folder I see that there is not 'dist' folder inside... just the 'src' one, this is why Vite is not able to resolve anymore the moveable module., while in the related packages.json you are referencing ./dist/* files...:

 "name": "moveable",
  "version": "0.31.0",
  "description": "Moveable is ...",
  "main": "./dist/moveable.cjs.js",
  "module": "./dist/moveable.esm.js",
  "sideEffects": false,
  "types": "declaration/index.d.ts",

I also noted that the 'declaration' folder is not there as well.

[ulissepress]

Solved the issues after several iterations. Here the details: #700