cormacrelf/angular-skyhook

An implementation of react-dnd for Angular.

@angular-skyhook

react-dnd-style drag and drop for Angular, built on dnd-core.

examples: https://cormacrelf.github.io/angular-skyhook/examples/

Browse the documentation

core: https://cormacrelf.github.io/angular-skyhook

multi-backend: https://cormacrelf.github.io/angular-skyhook/multi-backend/

sortable: https://cormacrelf.github.io/angular-skyhook/sortable/

View the changelog

https://github.com/cormacrelf/angular-skyhook/blob/master/CHANGELOG.md

Did this project help you?

Consider donating.

angular-skyhook's Issues

Can skyhook support nested sortable lists

Hi! To be more precised about what I would like to accomplish here is an example made with dragula: https://codepen.io/anon/pen/RgBNje

I would want to have in my app a main list which will contain items. These items will be different angular components generated in a dynamic way based on the same js object (which is actually the object that will be parsed in the operations - add, remove, copy etc).

An important thing is that a component may have inside it more lists (2,3, or even 4 lists horizontally) of these dynamic components, like a button or an input field (a component with a list of components can't have another component with lists in it).

I would like to be able to drag items from any of the existing lists to any of the existing lists. (same rule applies: a component with a list in it, can't be dragged in a sub list of an another component, it can be just sorted within the big list where it belongs to). Also I will need to be able to drag new items or delete others.

I've read this thread which seems to match somehow mine but I would like an opinion for my particular case. #327

I have this working with ng2-dragula but I want to implement it with the skyhook because, as the docs say, makes almost no limiting choices and I would like to be able to extend more afterwards if it will be the case.

Is it possible with skyhook? Which of the possible solutions is the one I should go for? (NgRx, SimpleKanban(Sortable), basic-sortable(core) )

Thank you!

connectDragPreview: preview image broken in Microsoft Edge Browser

When looking at the examples (e. g. https://cormacrelf.github.io/angular-skyhook/examples/index.html#/html5/handles-previews), the preview image dosn't show up in Edge (v42.xxx) or is way too small (v44.xxx). This is unlike Angular CDK Drag and Drop (https://material.angular.io/cdk/drag-drop/overview) where everything seems to be working fine.

dnd-core v4 compatibility

Title says it all.

https://github.com/react-dnd/react-dnd/releases/tag/v3.0.0

inject() must be called from an injection context

Trying to use angular-skyhook for first time, and I have been fighting with this library for 3 days, triying to fix all the problems with the backend etc...
Now that I dont have problems importing the module in the app.module and on my lazy load modules, when I use the html code provided on the examples, I am having this error

Error: inject() must be called from an injection context
    at injectInjectorOnly (core.js:728)
    at Module.ɵɵinject (core.js:744)
    at DndDirective_Factory (angular-skyhook-core.js:1716)
    at NodeInjectorFactory.DropTargetDirective_Factory [as factory] (angular-skyhook-core.js:1787)
    at getNodeInjectable (core.js:5806)
    at instantiateAllDirectives (core.js:12860)
    at createDirectivesAndLocals (core.js:12230)
    at ɵɵelementStart (core.js:21529)
    at ContentComponent_Template (template.html:14)
    at executeTemplate (core.js:12178)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39688)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)```

doesnt matter if I use drag, drop or sorting.

Any idea?

Thank you!

 

Can skyhook be used for toolbox/designer app?

Hope its alright I use an issue to ask a question?

Inspired by the chess tutorial I am wondering if I could use skyhook to implement a drag-drop designer? I am trying to build a toolbox with items that can be dragged from to be placed/copied to a droppable design surface, and then read the relative coordinate of the dragged item from the drop element.

I have a more elaborate SO question that could help understand what I am searching for: https://stackoverflow.com/questions/52673690/angular-drag-drop-directives-with-visio-like-placement

Thx

Can the cursor be set to the default HTML5 cursor?

Is it possible to change the cursor while dragging to the default HTML cursor (cursor: default)? In the docs it calls out an interface to select the copy, move, link, or none cursors but not the default.

wrong offset in preview in chrome with win10 scaling on

I am experincing issues with the html5backend in Chrome that I only see on my laptop with a 4K display. The preview image is being rendered with an offset very close to the top left corner of the dragged image no matter where the offset was initially when drag started. I have tracked this down to the windows scaling which is on by default when using 4K monitors. When turning scaling off the behaviour in chrome is as expected, that the offset of the preview image is the same as where the cursor was initially when drag started.

In firefox everything works as expected with or without scaling turned on.

I am unsure if this is the proper place to report this, but had to start somewhere.

Tracking: sortable API

This is a tracking issue for the sortable functionality.

It won’t be part of the core package, it will be separate. At this stage I’m looking for feedback and comments on API design. Please 👍🏻 if you want to beta test the basic directive/component stuff.

What is it at the moment?

The best intro to the WIP functionality is reading the Kanban example source code. A quick rundown:

• It's currently called angular-skyhook-card-list, but this name is bad
• CardListDirective
  • Attach to DOM container element
  • Expects a list ID, a SortableSpec, and a DND type (like drag source / drop target types)
  • Expects you to render the list emitted by SortableSpec.getList inside it, each item having [cardRenderer]="cardList.contextFor(data, index)"
  • Expects you to attach the cardRenderer's source to the DOM
  • Handles empty list case
• CardListComponent
  • Extends the directive, but makes it a little easier by handling the ngFor and the cardRenderer context.
  • Accepts cardTemplate as a content child to facilitate this
• SortableSpec
  • DIY list reordering. You control everything, so you can use Immutable or NgRx or whatever.
  • kinda like DragSource + DropTarget, but gives you monitor.getItem directly, and only calls hover when you need to render the placeholder somewhere else.
• New: NgRxSortable + SortableAction (see below)

SortableSpec

The main factor to consider in decision-making is that implementing SortableSpec according to the needs of the library as it exists now is difficult. The library is fundamentally more flexible than the alternatives which all do at least some array work themselves (ex. Ng2-Dragula, 100% of it; Cdk-experimental, apparently the hover states are handled).

It probably isn't possible to handle all the hover states internally / simplify the spec to just confirmed moves. How would you do that while supporting arbitrary ngFor/deep children/some elements fixed? The relevant CDK code excludes some of these possibilities in its internal implementation — it just runs insertBefore with some prerendered Dom.

SortableSpec requires, currently:

1. trackBy should give unique outputs / be injective like a good trackByFn
2. Must produce a list with dragged element still present in beginDrag, or not output any change at all
3. Must handle multiple listIds, meaning there’s a minimum backing store complexity of { [k: string]: Data[] } or at least a list of lists (like the Kanban example)
4. Must be able to revert on endDrag
5. Must hover or drop in location described by hovering item, without losing 2
6. ANY modifications must be presented through an Observable (probably a BehaviorSubject or similar) producing a new value
7. Optional: Correctly handle items dragged from external sources.

2 means simple array mutations are out, and slice(0) is in. 6 is a hurdle because few people in the wild are comfortable enough with Rx to do this on their own. Nevertheless, every item can be tricky if you attack the problem blindly.

Copy/clone support

Should SortableSpec include copy/clone functionality? Currently those features appear to require internal support from the directives due to Chrome bugs. Needs a second look.

If you add copy/clone, there are actually three more requirements for SortableSpec implementations:

8. copy returns boolean, mainly a burden if you’re trying to be generic
9. clone(x) -> x’ returns x’ !== x, trackBy(x’)!==trackBy(x)
10. Hard part: Check if item.isCopy during beginDrag/hover/drop, and completely change behaviour. May be coalesced with external drags functionality, since it’s kinda similar. JIT strategy below makes this easier.

SortableSpec implementation strategies

There are two main strategies I’ve used so far.

Direct (not very good)

1. keep a canonical copy, call it beforeDrag
2. produce a new list each time by immutably moving the card from the beforeDrag structure to a new one on each hover. hover() { current = move(beforeDrag, ...) }
3. drop() { beforeDrag = move(beforeDrag, ...); }

Pros: no NgRx needed.
Cons: much more complicated to write, and difficult to get bug-free, especially when supporting externals and clones. Half of the moveCard function is in an if block.

Just-In-Time

Similar to react-sortable-tree. See Kanban again.

1. keep a canonical data store intact
2. Clone store + remove item in beginDrag, but keep a reference to the item
3. Re-add it on-demand ('JIT'), in a selector.

Pros: Simple hover implementation that just updates the item to be inserted later. Simple handling of externals and clones; just don’t delete the original and proceed as usual.
Cons: kinda need NgRx and all that baggage.

(Side note: could you do step 3 of JIT without requiring users to implement it themselves? Probably not. We want to support Immutable.js, for example, which doesn't have the same insert API as arrays.)

Shipping SortableSpec implementations?

As far as I can see, there are no satisfactory reasons for actually shipping any complex SortableSpec implementations. Any such implementation would need to be complete, dependency-free (manual immutables, no NgRx), and configurable (how? The directives I wrote to do this are really bad, and there’s no easy way to make a spec that updates a component variable without weird callbacks or subscriptions.). That would be a maintenance nightmare, and because the code would look really scary (see: the other requirements), users would make feature requests instead of building features themselves.

I also really don’t want people using whatever spec that’s available as an alternate data store. Sortable should work with your existing data. The Kanban example store is great because it takes existing data and builds a spec that simply interacts with that, and you have complete control.

On the other hand, people don't typically want to use more than one dnd library, as it has a cost on bundle size. There is a mid-point between extensibility and ease of use that might not be covered without any shipping specs that are easy to use.

SharedSortableSpec -- potential

The most promising spec to ship would be the ng2-dragula replacement, SharedSortableSpec. It would probably be rewritten to resemble a mini-NgRx with the JIT strategy, and the directive that applies it would be subsumed within CardListDirective so it wouldn't be nearly as hacky.

Pros: worthy replacement for ng2-dragula and approximately as simple as all the other solutions out there.
Cons: maintenance, non-extensibility, and feature creep. Basically, all the reasons why you wouldn't use other libraries. Because it's easier than using ngrx, people would choose it as the default, and wouldn't be able to add features.

NgRX helpers (edit: DONE)

I have one last idea for what to ship:

• An NgRx Action class, including the following
  • event type (beginDrag, hover, etc)
  • item type
  • DraggedItem object
  • (instead of the silly one class per event-itemtype!)
• A SortableSpec with customisable trackBy that takes a Store, and dispatches that action when the spec is called

This would remove about 50 lines of boilerplate from the kanban demo. More importantly, it would represent a focus on advanced NgRx-based use cases and not simple one-component lists, for which there are abundant easier alternatives.

Skyhook seems to be blocking a drop from the file system.

Thank you again in advanced for your time. After implementing Skyhook into the project im working on i noticed the in Chrome the File upload handler I had set up has stopped working I chrome. After a little bit of digging I found an open issue in react-dnd that seems to be discussing this from like 3 years ago issue 25 react-dnd/react-dnd-html5-backend#25. I'm hoping that there is some kind of workaround for this issue. Can I add a DropTarget that always allows the drop even if its not a Skyhook DragSource?

connectDragSource not working

Hi,
I'm trying to use connectDragSource instead of the DragSource directive and connectDropTarget instead of the DropTarget directive.

Using the example here:
https://github.com/cormacrelf/angular-skyhook/tree/master/packages/examples/src/app/basic-sortable/

I successfuly connected the target using the connectDropTarget by doing this:

    ngAfterViewInit() {
        if (this.elRef) {
            this.cardTarget.connectDropTarget(this.elRef.nativeElement);
        }
    }

and removing the dropTarget directive from the template and the example still works fine.

But when doing the same with the source the example stop working, I'm not able to drag and drop anything.

    ngAfterViewInit() {
        if (this.elRef) {
            this.cardTarget.connectDropTarget(this.elRef.nativeElement);
            this.cardSource.connectDragSource(this.elRef.nativeElement); // this doesn't work
        }
    }

Any idea?
Thanks!

SortableSpec canDrag not used

In using the sortable package, I notice the canDrag function of SortableSpec appears to do nothing (it never gets called when actually trying it out in a <skyhook-sortable-list>, and after looking at the package code I believe it's not actually being used).

Is there another method that should be used for this functionality (i.e. being able to specify if a given item in a list can be dragged or not), or is this just an oversight?

Using one DragSource / DropTarget object on multiple directives / DOM elements.

I guess this is a feature request though its possible I'm just doing it wrong.

The use case:
I have a component with an ngFor inside of it. I'd like to make the Element within this list draggable / droppable. They all need to do the same thing and they are quite simple or a Material2 component so I don't wan't to break them into my own component. I'd like to define one DragSource / DropTarget and have that work for all of them.

Current behavior:
It will work only on the last one in the list.

Now I understand that there are obvious workarounds ( make my own component for the items in the ngFor or make an array of DragSource / DropTarget and associate them with each Element ) so if this doesn't work with how your connections are set up I understand. Hopefully this is not a waist of your time but I'm trying to replace a simple Dnd implementation I made (That didn't run outside of the global zone So Its REALLY SLOW) with yours and I'm having to re-work a lot. This would have been helpful and my co-worker suggested I ask you what you think.

Thank you for you time.

Installing 1.2.0 using npm doesn't work

Skyhook ver 1.2.0 is available but it is impossible to install it via npm.

cs$.subscribe is not a function

Hi, I am getting the following error with a kanban-like layout.

ERROR TypeError: cs$.subscribe is not a function
at SkyhookSortable.push../node_modules/@angular-skyhook/sortable/fesm5/angular-skyhook-sortable.js.SkyhookSortable.updateSubscription (angular-skyhook-sortable.js:175)
at SkyhookSortable.push../node_modules/@angular-skyhook/sortable/fesm5/angular-skyhook-sortable.js.SkyhookSortable.ngOnChanges (angular-skyhook-sortable.js:284)
at checkAndUpdateDirectiveInline (core.js:21997)
at checkAndUpdateNodeInline (core.js:23265)
at checkAndUpdateNode (core.js:23227)
at debugCheckAndUpdateNode (core.js:23861)
at debugCheckDirectivesFn (core.js:23821)
at Object.eval [as updateDirectives] (TaskComponent.html:15)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813)
at checkAndUpdateView (core.js:23209)

TaskComponent.html is akin to the list component in the example, and looks like this:

<mat-card id='{{taskKey}}'
    *ngIf='task'
    class="task"
    [dragSource]="render?.source"
    [noHTML5Preview]="true"
    (click)="goToDetail($event);$event.stopPropagation()"
    [class.task--preview]="preview"
    [class.task--placeholder]="render?.isDragging$ | async"
    [class.mat-elevation-z6]="authrService.focused == taskKey">

    <mat-card-header fxLayoutAlign="space-around center">
      <mat-card-title>{{task.name}}</mat-card-title>
    </mat-card-header>

    <div *ngIf="render; else plain"
         class="therblig-container"
         ssSortable
         [ssSortableSpec]="authrService.therbligSpec"
         [ssSortableListId]="task.id"
         #clist="ssSortable">
        <therblig-item
            *ngFor="let therbligKey of task.therbligs;
                    let i = index;
                    trackBy: trackById"
            [therbligKey]="therbligKey"
            [ssRender]="clist.contextFor(therbligKey, i)"
            #render="ssRender"
            [placeholder]="render.isDragging$|async">
        </therblig-item>

    </div>
...

I'm not sure what might be happening here, since it is heavily based off the example. Any ideas would be greatly appreciated!

Changing style of preview while dragging

I am looking to change the style of a preview based on it's location to have the following behavior:

• When hovering over one of the green zones apply one opacity level
• When hovering in the middle white zone apply a different opacity level

I can get this behavior when hovering of the element that the original drag source is attached too (the dragging elements original location) but not when hovering over a different instance of the same element (each instance has a drag source defined).

Is there a way this can be done?

Marry Kanban reducer with HttpClient

Hi,

Could you please give me a hint, for how and where shall Http post requests ought to be made at your Kanban Board example, more specifically, how should initialState variable be populated by a database post/get request.

The obvious candidates are lists.ts and store.ts. BUT... The problem is that you chose to use export functions instead of Angular Services that come with DI.

If you have time, please help.

[Question] Dynamic DragSource

The docs say you can have a dynamic dragSource if you pass null as the type but don't say what to do after that. Would you mind pointing me in the right direction or providing an example to get this working ?

working with iframe?

hello,

i am trying to achieve a similar editor like Vvebjs in angular, this editor is written in jquery and uses iframes.
i have been going through ng-dragula where i read your comments that ng-dragula is now abandoned and no new work is happening.
i wish to know, if you can guide me for right documentations to work with iframes to achieve the same.

thank you

backend.backend is not a constructor

Just updated to version 1.3.2 of @angular-skyhook/multi-backend and 1.3.0 of @angular-skyhook/core and I am getting the following error:

ERROR TypeError: backend.backend is not a constructor
at MultiBackend.js:239
at Array.forEach ()
at new _default (MultiBackend.js:227)
at index.js:60
at angular-skyhook-multi-backend.js:45
at createDragDropManager (factories.js:4)
at angular-skyhook-core.js:1543
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Zone.run (zone-evergreen.js:124)
at NgZone.runOutsideAngular (core.js:39571)

Did I miss some breaking change between 1.2.1 and 1.3.0/1.3.2 ?

monitor.didDrop() always false and drop event not fires

I am implementing sortable according to the example in the repo.
The problem is that drop event never fires and didDrop returns false as a result.
If I bind (drop)="dropHandler()" directly to li.media-item, dropHandler fires.

item.pug

li.media-item(
    [dropTarget]="handleDrop", [dragSource]="handleDrag"
)

item.ts

...
    handleDrag = this.dnd.dragSource('MediaItem', {
        beginDrag: () => {

            this.beginDrag.emit();
            return {
                index: this.index
            };

        },
        endDrag: (monitor: DragSourceMonitor) => {

            console.log('VAS', monitor);
            const didDrop = monitor.didDrop();
            this.endDrag.emit(didDrop);

        }
    });

    handleDrop = this.dnd.dropTarget<MediaItem>('MediaItem', {
        drop: (monitor: DropTargetMonitor) => {
                  
                  console.log('Drop');

        },
        hover: (monitor: DropTargetMonitor) => {

            const dragIndex = (<MediaItem>monitor.getItem()).index;
            const hoverIndex = this.index;

            // Don't replace items with themselves
            if (dragIndex === hoverIndex) {

                return;

            }

            this.onMove.emit([dragIndex, hoverIndex]);
            (<MediaItem>monitor.getItem()).index = hoverIndex;

        }
    });
...

container.pug
item(*ngFor="let item of modelValue; let i = index", (beginDrag)="beginDrag($event)", (endDrag)="endDrag($event)", (onMove)="moveCard($event), [index]="i", [item]="item")

container.ts

...
    beginDrag () {

        this.prevModelValue = this.modelValue.slice(0);

    }

    endDrag (dropped: boolean) {

        if (!dropped) { // always false

            this.modelValue = [].concat(this.prevModelValue);

        }

    }

    moveCard ([dragIndex, hoverIndex]: [number, number]) {

        const dragItem = this.modelValue[dragIndex];
        this.modelValue.splice(dragIndex, 1);
        this.modelValue.splice(hoverIndex, 0, dragItem);

    }
...

error when ng serve with the aot switch

when serving my project with the aot switch (angular 6), I get this error when the component using skyhook is loaded:
ERROR TypeError: Cannot read property 'default' of null
at unpackBackendForEs5Users (angular-skyhook-core.js:1721)
at managerFactory (angular-skyhook-core.js:1738)
at _callFactory (core.js:8435)
at _createProviderInstance (core.js:8389)
at resolveNgModuleDep (core.js:8349)
at createClass (core.js:8416)
at createProviderInstance (core.js:8386)
at resolveNgModuleDep (core.js:8349)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:9057)
at resolveDep (core.js:9422)

Implementing multiple sortable containers from scratch (no ngRx)

After banging my head against ng2-dragula for days, I'm trying to use @angular-skyhook/sortable as a replacement. The basic functionality I'm looking for is multiple lists, with cards that can be dragged between them (and reordered). For better or for worse, I'm not using NgRx.

Everything was pretty straightforward, except I'm struggling to get good hover previews to work. Is the general idea (when not using NgRx) that I need to add logic to the hover() method that adds my card to a list, and removes it from other lists as well? It seems strange that hovering over one list would have to update the other lists, but I'm probably missing something.

I feel like this would be another good example to add (multiple simple lists without NgRx), and I'd be happy to add it myself if I can ever figure it out. Any guidance would be much appreciated.

Providing options is not working yet

Providing options in forRoot is not actually working yet. I'm about to push a fix, but if you're searching, you'll find this.

ERROR in node_modules/angular-skyhook-multi-backend/ambient.d.ts(26,47): error TS7031: Binding element 'boolean' implicitly has an 'any' type.

I am trying to integrate angular-skyhook into my angular project (based on https://github.com/ngx-rocket/starter-kit).

When I try to start my development server I get the following error:

ERROR in node_modules/angular-skyhook-multi-backend/ambient.d.ts(26,47): error TS7031: Binding element 'boolean' implicitly has an 'any' type.

I'm using the latest version of angular-skyhook (1.0.7).

My current workaround is setting "noImplicitAny": false in tsconfig.

module declaration:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BuilderComponent } from './builder.component';
import { BuilderRoutingModule } from '@app/builder/builder-routing.module';
import { TranslateModule } from '@ngx-translate/core';
import { CoreModule } from '@app/core';
import { SharedModule } from '@app/shared';
import {DndModule} from '@beyerleinf/ngx-dnd';
import {FormsModule} from '@angular/forms';
import {SkyhookDndModule} from 'angular-skyhook';
import { createDefaultMultiBackend} from 'angular-skyhook-multi-backend';
import { default as HTML5Backend } from 'react-dnd-html5-backend';
import { SortableComponent } from './sortable/sortable.component';
import {CardComponent, CardInnerDirective} from './card/card.component';




@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    CoreModule,
    SharedModule,
    FormsModule,
    BuilderRoutingModule,
    DndModule.forRoot(),
    // SkyhookDndModule.forRoot( {backend: HTML5Backend}),
    SkyhookDndModule.forRoot({ backendFactory: createDefaultMultiBackend }),
  ],
  declarations: [
    BuilderComponent,
    SortableComponent,
    CardInnerDirective,
    CardComponent
  ]
})
export class BuilderModule { }

ambient.d.ts:

declare module "dnd-multi-backend" {
    export interface Transition {
        event: string;
        check: (event: Event) => boolean;
    }
    export type Backend = any;
    export type BackendTransition = {
        backend: any;
        transition: Transition;
    };
    const MultiBackend: (
        transition: { backends: BackendTransition[] }
    ) => Backend;
    export default MultiBackend;
    export const createTransition: (
        event: string,
        check: (event: Event) => boolean
    ) => Transition;
    export const HTML5DragTransition: Transition;
    export const TouchTransition: Transition;
    export const MouseTransition: Transition;
}

declare module "react-dnd-touch-backend" {
    import { Backend } from "dnd-multi-backend";
    **const TouchBackend: ({ enableMouseEvents: boolean }) => Backend;**
    export default TouchBackend;
}

skyhook-preview not exported?

Hi,

I am trying to set up a simple version of the kanban board, based on the example you provide. However, despite compiling, I get a javascript error: Can't bind to 'allBackends' since it isn't a known property of 'skyhook-preview'. coming from the kanban-board component. Do you think you may know what is happening here? Any assistance would be greatly appreciated!

SkyhookPreview out of position

I have a SkyhookSortable that outputs a simple list to the user.
But when I use the SkyhookPreview to customize the preview of the draggable element, the preview render in x:0, y:0 position inside of the draggable element (screenshot below).

Is there any way to make the preview render in the mouse position?

Uncaught TypeError: _this.actions.initCoords is not a function

Uncaught TypeError: _this.actions.initCoords is not a function
at HTML5Backend.handleTopDragStart (HTML5Backend.js:65)
at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (zone.js:299)
at ZoneDelegate.push.../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push.../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at ZoneTask.push.../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
at invokeTask (zone.js:1540)
at globalZoneAwareCallback (zone.js:1566)

I apologize if this is not where I should ask this but I'm getting this error run time error when I try to start a drag and I'm not sure what i might have done wrong. Has any one else seen this error? any help or suggestions would be very appreciated.

ivy runtime error

Skyhook works perfect with the actual default angular compiler, but when you change the compiler to ivy, you get this runtime error.

It seems to be a problem with the directives and ivy.

Running ng build with optimization set to true breaks this library

Problem

Apperantly setting "optimzation": true in angular.json causes an app that functions normally without optimization (i.e. debug/development) to break with optimization (production mode).

Since Angular's stance on the matter is pretty much that the library should fix it, I'm posting an issue for it here.

Steps to reproduce:

• Have an angular project using skyhook
• build using "optimzation": true (i.e. ng build --prod)
• Try and use skyhook by dragging an object
• Experience it not working

Error in console:

Uncaught Invariant Violation: Cannot call endDrag while not dragging.
    at QLaP.e.exports (https://url/main.2884ec44a6f193632cc5.js:1:238563)
    at https://url/main.2884ec44a6f193632cc5.js:1:1088445
    at uF.<anonymous> (https://url/main.2884ec44a6f193632cc5.js:1:1088504)
    at Object.i.<computed> [as beginDrag] (https://url/main.2884ec44a6f193632cc5.js:1:1088678)
    at handleTopDragStart (https://url/main.2884ec44a6f193632cc5.js:1:1255778)
    at t.invokeTask (https://url/polyfills.c67528456ba5ac04556c.js:1:8753)
    at Object.onInvokeTask (https://url/polyfills.c67528456ba5ac04556c.js:1:5730)
    at t.invokeTask (https://url/polyfills.c67528456ba5ac04556c.js:1:8674)
    at e.runTask (https://url/polyfills.c67528456ba5ac04556c.js:1:3935)
    at e.invokeTask [as invoke] (https://url/polyfills.c67528456ba5ac04556c.js:1:9836)

Versions

Angular cli 7.2.2
Skyhook 1.2.1

Expected result

App works the same with optimization enabled or disabled.

Workaround

Disable optimization by setting "optimization": false in angular.json

Request

Make this library work with optimization set to true.

don't work with iframe

hi, how can i drop a item Outside to Inside iframe ? i dragged without effect.

Insecure dependency: event-stream 3.3.6

We noticed this repo pulls in event-stream at version 3.3.6 as a dependency. This version has had malicious code injected into it (see dominictarr/event-stream#116 for more information) and we recommend that you either upgrade to 4.0.1 or downgrade to 3.3.4 as soon as possible. You can do this by setting a Yarn resolution in your package.json.

(Dependabot can't generate downgrade PRs for sub-dependencies at the moment, but we wanted to warn you about the issue all the same.)

Is there an npm package for angular-skyhook-card-list?

Hi, I am trying to get sortable/simple example to run, but unfortunately I can not find an package for angular-skyhook-card-list. Also I was able to successfully install angular-skyhook and angular-skyhook-multi-backend via npm. I am not sure how to get the missing package. Can you help me here?
Thanks.

Single backends do not work in 1.3.0

I tried integrating skyhook into a project and ran into some issues. As a sanity check, I took the sample code from the documentation (https://cormacrelf.github.io/angular-skyhook/additional-documentation/guide/2.-connecting-to-dom.html) and tried to just run it. I expect to see something on the console when I drop the source on the target, but I don't see anything. Stackblitz: https://stackblitz.com/edit/angular-zkhsie

I've tried angular 7 and 8, skyhook 1.2 and 1.3, Chrome and Firefox. Nothing works. I'm assuming I'm just missing something obvious, but figuring out what that is and updating the documentation might be helpful.

Dependabot couldn't authenticate with registry.npmjs.org

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

You can mention @dependabot in the comments below to contact the Dependabot team.

Multiple Drag and Drop

Is it possible to add an example for multiple drag and drop.
Select multiple items and drag them together.
I have no idea how to implement that.

How to implement scroll while dragging?

Simple sortable freeze on drop

Hi!

If you check this simple sortable example link

https://cormacrelf.github.io/angular-skyhook/examples/index.html#/sortable/simple-kanban

and you try do drop items fast from one list to another, they sometimes freeze in the air!

I have implemented the example in my code also and it does the same. Can be this fixed?

Thank you!

Tracking: most backends have `react-dnd` as a (peer-)dependency

They are actually compatible, but they yell about unsatisfied peer dependencies when you're installing, or they actually install react-dnd.

• LouisBrunner/dnd-multi-backend#21
• https://github.com/yahoo/react-dnd-touch-backend/issues/96
• zyzo/react-dnd-mouse-backend#9
• react-dnd/react-dnd#1084
• react-dnd-test-backend as well

Dependabot couldn't authenticate with registry.npmjs.org

Dependabot couldn't authenticate with registry.npmjs.org.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

You can mention @dependabot in the comments below to contact the Dependabot team.

Module not found: Error: Can't resolve 'angular-skyhook'

Hey,

I am trying to use this library in my Angular6 app as shown on the Quickstart page by using:

npm install angular-skyhook
npm install react-dnd-html5-backend

and in my app.module.ts like so:

...
import { SkyhookDndModule } from 'angular-skyhook';
import { default as HTML5Backend } from 'react-dnd-html5-backend'

@NgModule({
  imports: [
    ...
    SkyhookDndModule.forRoot({ backend: HTML5Backend }),
  ], ....
})
export class AppModule {}

Just when running ng build I right away get the message

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'angular-skyhook' in 'C:\somePath\ClientApp\src\app'

"angular-skyhook": "^1.0.0", is part of package.json, I can see the folder and files in node_modules. I also updated my package-lock.json... am I missing something here?!

I stumbled upon this repo while struggling with dragula and trying to find a solution in the github issues of the dragula repo. It looks promising and I'd like to give it a try.

Thanks!

An in-range update of angular-skyhook is breaking the build 🚨

Version 1.0.9 of angular-skyhook was just published.

Branch	Build failing 🚨
Dependency	angular-skyhook
Current Version	1.0.7
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

angular-skyhook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

How to make the kanban board the whole kanban list droppable

With the @angular-skyhook/sortable, The DropTarget is attached where [ssRender] is, so the card can only be drop to the card container area. Is there any way that we can make the whole kanban-list a drop target like the real trello board? eg: When drag a card to the bottom area in the "Done" list like below, it will be dropped as the last card in the list.

Trello example:

TypeScript < 2.7 broken because of unique symbol usage

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Tokens.ts has a unique symbol. Fails in eg Angular 5 projects with expected “=“. Cast it to symbol for backwards compatibility.

Behaviour on mobile

Hi! Thanks for the awesome library, really like it and we would likely rewrite our code to use this rather than the unmaintained dragula. I thing that I would like to see is better mobile support as it currently logs errors in console and doesn't behave right. Having some custom handler would be a nice touch too.

bug: type error in `@angular-skyhook/multi-backend` 1.2.1

Upgrading to @angular-skyhook/multi-backend 1.2.1 triggers the following type error during Angular compilation:

ERROR in ../../node_modules/react-dnd-touch-backend/dist/Touch.d.ts(63,103): error TS2536: Type 'EventName[K]' cannot be used to index type 'WindowEventMap'.
    ../../node_modules/react-dnd-touch-backend/dist/Touch.d.ts(64,106): error TS2536: Type 'EventName[K]' cannot be used to index type 'WindowEventMap'.

I don't see this error in version 1.1.1. Given that version 1.1.1 still seems to work in Angular v8, downgrading is a work-around. It's possible this type error is only raised in ts strict mode.

My tsconfig.json file looks like:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "sourceMap": true,
    "declaration": false,
    "target": "es2015",
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "removeComments": true,
    "importHelpers": true,
    "paths": {
      "@local/*": ["libs/*"],
      "@local-patches/*": ["patched-3rd-party-libs/*"],
      "lodash/*": ["node_modules/@types/lodash-es/*"]
    },
    "lib": ["dom", "esnext"],
    "typeRoots": ["node_modules/@types", "typings"]
  },
  "exclude": ["node_modules", "tmp"]
}

Assign additional values to drag-object

Hello,

I use your mail-sorting example to achieve a runlist for placing pdf-pages on a print sheet. Via *ngFor I just generate multiple PAGE objects and multiple MAILBOXES as Dropzones as you can see on the Screenshot. At least I have problems to show up the origin of the dropped PAGE in the MAILBOX Container - just the PAGE hint shows up, unfortunately my other data like the filename and a pageindex are always undefined. I tried to add them to the trashes array like here:

bin-component.html

<div *ngIf="collected$|async as c" class="dustbin pad" [dropTarget]="trashTarget" [ngStyle]="getStyles(c)">
  <p>
    <b>
    {{ c.canDrop ? 'drop '+ c.itemType + ' in the' : '' }}
    {{ c.isOver && !hasCapacity ? 'cannot drop, ' : '' }}
    {{ name }}
    {{ hasCapacity ? '' : ' is full!' }}
    </b>
  </p>
  <p>
    <button (click)="empty()">leere {{ name }}</button>
  </p>
  <pre>{{ trashes | json }}</pre> //here
</div>

my TS (your bin-component.ts):

export class TemplateBinComponent implements OnInit, OnDestroy {

  @Input() name: string;
  @Input() filename: string;
  @Input() pageindex: number;
  @Input() accepts: string[] = ['TRASH'];
  trashes = [];
  capacity = 1;

  get hasCapacity() {
    return this.trashes.length < this.capacity;
  }

  trashTarget = this.dnd.dropTarget(null, {
    canDrop: (monitor) => {
      return this.hasCapacity;
    },
    drop: (monitor) => {
      // item is what we returned from beginDrag on the source
      const type = monitor.getItemType();
      const pageindex = this.pageindex;
      const filename = this.filename;
      this.trashes.unshift(type, pageindex, filename); //here
    }
  });

  collected$ = this.trashTarget.listen(m => ({
    isOver: m.isOver(),
    canDrop: m.canDrop(),
    itemType: m.getItemType()
  }));

  constructor(private dnd: SkyhookDndService) {
  }

  getStyles({ isOver, canDrop }) {
    return {
      backgroundColor: isOver && canDrop ? '#cfcffc' : canDrop ? '#fffacf' : 'white'
    };
  }

  empty() {
    this.trashes = [];
  }

  ngOnInit() {
    this.trashTarget.setTypes(this.accepts);
  }

  ngOnDestroy() {
    this.trashTarget.unsubscribe();
  }

}

I pass the filename and the page index to the component, in this way:
trash-pile-component.html

<ng-container *ngIf="collected$|async as c">
  <div [dragSource]="trashSource" [class.dragging]="c.isDragging && remain > 1">
    <app-template-trash
        [type]="type"
        [pageindex]="pageindex"
        [filename]="filename"
        [empty]="remain == 0 || c.isDragging && remain == 1"></app-template-trash>
  </div>
</ng-container>

trash-component.html

<div class="trash pad" [class.empty]="empty" [class.in-flight]="inFlight">
  <span class="type">{{ type }} {{ pageindex }} {{ filename }}</span>
</div>

Would be nice, If anybody gives me a hint - I´m new on TS.

THX Dom

Skyhook 1.2.1 seems to cause a script error with Angular 8 and Edge browser.

We recently updated our project to Angular 8. We were getting some dependency warnings with Skyhook core @1.1.1, but I saw that it had been updated to address this. After updating to Skyhook 1.2.1 everything seemed fine until I tested on Edge. Chrome and Firefox ran fine, but on Edge I get a vague script error: SCRIPT5022: Expected identifier, string or number at index.html (1,1). I was eventually able to determine that the problem was in the vendor-es2015.js bundle, but not where. Since it seemed to die immediately, I looked at the top of that bundle and saw that Skyhook was the first package in there. I reverted back to revision 1.1.1. The error goes away and the application runs. I compared the two bundles but there are quite a few changes and the error message doesn't really help me know what I'm looking for. I figured I'd reach out just in case this actually is a problem with Skyhook. Here are the dependencies from our package.json:

"dependencies": {
"@angular-skyhook/core": "1.2.1",
"@angular/animations": "8.1.1",
"@angular/cdk": "8.0.2",
"@angular/common": "8.1.1",
"@angular/compiler": "8.1.1",
"@angular/core": "8.1.1",
"@angular/forms": "8.1.1",
"@angular/material": "8.0.2",
"@angular/platform-browser": "8.1.1",
"@angular/platform-browser-dynamic": "8.1.1",
"@angular/router": "8.1.1",
"@ckeditor/ckeditor5-angular": "1.1.0",
"@ckeditor/ckeditor5-build-inline": "./CKEditor/ckeditor5-build-inline-stable",
"@ncstate/sat-popover": "4.0.0",
"angular-resizable-element": "3.2.4",
"angular-tree-component": "8.4.0",
"core-js": "2.6.9",
"fine-uploader": "5.16.2",
"gsap": "1.20.4",
"hammerjs": "2.0.8",
"html2canvas": "1.0.0-alpha.12",
"jszip": "3.2.2",
"material-design-icons": "3.0.1",
"ng2-dragula": "1.5.0",
"ngx-color-picker": "7.3.1",
"react-dnd-html5-backend": "9.3.2",
"rxjs": "6.5.2",
"tslib": "1.10.0",
"typeface-dancing-script": "0.0.72",
"typeface-open-sans": "0.0.54",
"typeface-quantico": "0.0.71",
"typeface-roboto": "0.0.54",
"typeface-ubuntu": "0.0.65",
"typescript-logging": "0.6.3",
"web-animations-js": "2.3.2",
"zone.js": "0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.801.1",
"@angular/cli": "8.1.1",
"@angular/compiler-cli": "8.1.1",
"@angular/language-service": "8.1.1",
"@compodoc/compodoc": "1.1.10",
"@types/gsap": "1.20.2",
"@types/hammerjs": "2.0.36",
"@types/html2canvas": "0.0.35",
"@types/jasmine": "2.8.16",
"@types/jszip": "3.1.6",
"@types/node": "12.6.2",
"codelyzer": "5.1.0",
"jasmine-core": "2.9.1",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.4.2",
"karma-jasmine": "1.1.1",
"karma-jasmine-html-reporter": "0.2.2",
"protractor": "5.2.2",
"ts-node": "8.3.0",
"tslint": "5.18.0",
"typescript": "3.4.5"
}

How to make kanban board with sub-cards

Hi, I saw the kanban example you posted. Its quite good for an advanced level developer but for a novice like me it's complicated - primarily because of NgRx integration. Is it possible to simplify it?

Also i wanted help how to add sub-cards to that board? I have been trying myself for couple of days but it becomes quite messy. At this point i have tried Dragula, Angular CDK and Skyhook twice but cant seem to get close to what i want.

Any help or direction in this regard will be greatly appreciated.

Can the skyhook-preview-renderer factor in the relative position?

I was trying to use a skyhook-preview inside a modal (which is at fixed position). This forces the preview to render at the mouse position without accounting for the offset. I saw an example of how to do this in the xy pad custom drag layer example, but Im curious if it's something that could be added to skyhook-preview?

How to run the examples after cloning?

Seems like its so basic, yarn install in the root. Then yarn install in the packages/examples folder. ng serve gives me

file system redacted/angular-skyhook/node_modules/@angular-skyhook/core/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (file system redacted/angular-skyhook/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:767:23)
at plugin.done.then (/angular-skyhook/node_modules/@ngtools/webpack/src/loader.js:41:31)
at
at process._tickCallback (internal/process/next_tick.js:188:7)