swiety85 / angular2gridster Goto Github PK

I was superhappy seeing that there was a gridster implementation for angular2 but I do get an error when running it on angular-cli that I want to see if you have seen:

[fondberg@Niklass-MacBook-Pro teamcity-noc]$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: 7f1850860d0a5e950f66
Time: 10063ms
chunk    {0} main.bundle.js, main.bundle.map (main) 13.7 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 9.96 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.71 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/angular2gridster/src/gridster.component.ts
49:55-71 "export 'IGridsterOptions' was not found in './gridster.service'

WARNING in ./~/angular2gridster/src/gridster.component.ts
49:91-107 "export 'IGridsterOptions' was not found in './gridster.service'

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/node_modules/@angular/core/index.d.ts, resolving symbol GridsterModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/src/gridster.module.ts, resolving symbol GridsterModule in /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/src/gridster.module.ts

ERROR in ./src/app/app.component.ts
Module build failed: Error: /Users/fondberg/Documents/dashboard/teamcity-noc/src/app/app.component.ts (2,55): Module '"/Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/angular2gridster/index"' has no exported member 'GridsterComponent'.)
    at _checkDiagnostics (/Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/@ngtools/webpack/src/loader.js:145:15)
    at /Users/fondberg/Documents/dashboard/teamcity-noc/node_modules/@ngtools/webpack/src/loader.js:172:17
 @ ./src/app/app.module.ts 16:0-47
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: bundle is now VALID.

while adding new gridster-item we have to pass its x and y potion. is there anyway to not pass it and it should dynamically adjust it self to empty place.

Handles for a GridsterItem should respect the padding of the GridsterItem so that they match up with the gridster-item-inner div but currently do not.

Hello,
how can I enable/disable drag&drop, for example with a toggle button. I've tried:
--> to change dragAndDrop parameter ( IGridsterOptions )
--> to change handlerClass ( IGridsterDraggableOptions )
but nothing change the drag&drop functionality.

• provide a way to resize gridster item by drag n drop

Please create new angular project( I tried it with this versions ):
angular/cli: 1.2.1
node: 8.1.0
os:linux64
angular/...:4.2.6
angular/compiler:4.2.6
angular/language-service: 4.2.6

Put your demo code inside and run the application. Problem on PC( Chrome and Firefox ):
Drag&Drop behavior: drap a grid item and drop it anywhere in gridster. The item stays at the position where droped, he doesn't take automatically position in the grid.
Resize behavior: by resizing the item its size not fit the size of lanes. After resizing the mouse position is still connected with grid item. Click without the item resolve the connection and caused automatically item resizing.

@getsales-damian @michalstepien @swiety85
when using in a project with angular-cli. build fails cause angular2gridster is not AOT compatible.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /home/userx/angular2_app/node_modules/angular2gridster/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /home/userx/angular2_app/node_modules/angular2gridster/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /home/userx/angular2_app/node_modules/angular2gridster/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in /home/userx/angular2_app/node_modules/angular2gridster/node_modules/@angular/core/index.d.ts, resolving symbol GridsterModule in /home/userx/angular2_app/node_modules/angular2gridster/src/gridster.module.ts, resolving symbol GridsterModule in /home/userx/angular2_app/node_modules/angular2gridster/src/gridster.module.ts

is there a way to get around this for the time being?

https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.vlam4896g

Is there a way to have a layout (vertical, horizontal) that doesn't compact in any direction so tiles can float. Or can we have the ability to turn off the 'auto compacting' whilst we manipulate the tiles in code.

See the example:
http://plnkr.co/edit/nP2uqGMy4bT6zG7GiEAI?p=preview
I am simply replacing a tile with one with identical x and y properties but the resulting dashboard layout differs.
When I replace an item in the list of 'tiles' the layout shifts down to fill the gap left my the removed tile. Then it adds the new tile to the grid and that pushes the one in its place to the left.

Hopefully that makes sense.

When new item will be pushed to list without size it should use default one taken form config.

From comments in #11 it seams that npm module in v 0.4.0 does not work with angular 4.
Research and fix an issue.

Dragging an item into another has different effects based on the direction dragged from. Dragging from the left causes the displaced item to jump to the left side of the dragged item. Dragging from the right pushes the displaced item to the left until it can return to its original position. The only time you can push to the right instead of swapping is if there is not enough space for the displaced item. You can see this in the demo.
░█←■░ becomes ░█■←░
░■→█░ becomes ░→█■░
As for intended functionality, is it supposed to swap or push?

Nice feature would be to have options per item:

<gridster-item *ngFor="let item of options.items; let indx = index" [(x)]="item.x" [(y)]="item.y" [(w)]="item.w" [(h)]="item.h" [options]="item.options">

Or maybe change item attributes to

<gridster-item *ngFor="let item of options.items; let indx = index" [options]="item.options"(change)="change(params)" (ready)="ready(params)" (more_events_here)="some_event(params)">
and store x,y,w,h in the item options.

Some options may be similar to global ones, ie

{
   dragAndDrop: false,
   resizable: false
   ...
}

I believe it will solve #22 and gives some flexibility. For instance you can disable dragAndDrop for a single item (pinned) but keep it resizable, or opposite.

We could even have resizableOptions which works when resizable is set to true:
resizableOptions: {left: true, right: true, top:false, bottom: false} That allows to make items resizeble to some directions, ie horizontally or vertically only etc.

How to reproduce:

• (in vertical, draggable) remove all elements in the first column
• drag a new element to any col>1 (0's position)
• alt: drag a new element to any col that has some free slots to the left

What happens:

• newly added element is teleported to 0x0 position (or any first free slot served by findDefaultPosition() func)
• position cords are not updated

Suggested solution

Remove or revalidate findDefaultPostion() in ngOnInit in gridster-item.component - the position is checked prior i.e. in gridList:findPositionForItem and collitions taken care as well. When moving item component that already exists you do not call the function findDefaultPosition and that works fine.

Gridster height is not getting minimum height that should match the sum of item heights.

Using this.gridster.setOption('widthHeightRatio', aspect).reload(); will not update the aspect ratio, it stays at the initial setting.

GridsterComponent.prototype.setOption() function is missing the implementation for the widthHeight option.

Test with angular2gridster version: 0.6.0

I tried out your demo application on PC(Chrome), on android smartphone, iPad and iPhone. I think the application work only on PC as expected . See below:

• iPhone portrait: 2 lanes (as expected )
• iPhone portrait in chrome: 2 lanes (as expected )
• iPhone landscape : 2 lanes (3 expected )
• iPhone landscape in chrome: 3 lanes (as expected )

• iPad portrait: 2 lanes (4 expected )
• iPad portrait in chrome: 4 lanes (as expected )
• iPad landscape : 2 lanes (4 expected )
• iPad landscape in chrome: 4 lanes (as expected )

Is it a bug in new feature responsive behavior? Or I don't understand how to use this feature...

How to reproduce:

• play around with d&d new elements to the grid (it's relatively easy when the pointer cannot find focus & does not visualize the position - but the bug occurs randomly on many other occasions)

What happens:

• position cords are invalid (not related with issue #38)

image hosting for ebay

Hello,

I have a menu bar with a fixed position at the bottom of the viewport which contains a bunch of Gridster Item Prototypes. Because the grid stretches the whole height of the viewport, the prototypes are resting within the dimensions of the gridster grid. When the user drags one of the prototypes onto the grid, the highlight does not initially work. You have to drag the prototype either left or right outside the grid's dimensions then drag it back in for the highlight to work.

Is there a way to fix this or manually trigger an enter event for the prototype if it starts within the grid? Thanks!

Demo page does not look tempting, therefore refactoring for layout and styles would be needed.
Using Material design could be a solution.

At the moment there is no way to listen for the dragging of an element (at least i don't know one).
I think there should be one... :D

Edit alright it seems that i can't read...
Start listener should be named drag (?)

When widgets don't fit screen and we want to move element from top to bottom (below viewport) the viewport should scroll while dragging.
Scrolling should start when dragged element enters window edge or optionally defined window margin.
Should work in both: vertical and horizontal direction.

Provide a way to have different behaviour on narrow view e.g. on mobile devises. It should in this case displays each gridster item in full width in new row.
Think how it could be implemented in horizontal direction.

Reproduction steps (based on demo):
(Basic form inputs 2) -> click "width +" -> click "width -"

Basic form inputs 4 should be on start position

Provide an option to use multitouch events to resize gridster items on touch devices.

Hi,

Content is accepting only text. I am looking for component to append to the content. Please help me on this.

Thanks,
Avanithika.

So I've started seeng zone.js complaining about performance problems:
[Violation] 'load' handler took 517ms 45zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. zone.js:472 [Violation] 'load' handler took 504ms [Violation] Forced reflow while executing JavaScript took 184ms zone.js:1157 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. zone.js:1489 [Violation] 'setTimeout' handler took 50ms zone.js:472 [Violation] 'message' handler took 319ms

I think there are just options that we can pass in draggable.ts, for the passive: true. Seeing as I'm no expert in this area, does this seem feasible while keeping backwards compatibility?

Hi,
It is possible to change dynamically the dragAndDrop option.
For example, I initialise to true then I want to be able to change it to false when I click on my checkbox button.

I have already tried but it's not working.

This is the options:

gridsterOptions:IGridsterOptions = {
    lanes: 5,
    direction: "vertical",
    dragAndDrop: true
}

this is the html tag:

<gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions">

When I try to do something like this: this.gridsterOptions.dragAndDrop = false
The gridster items are still draggable.

Thanks !

I would like to make widgets fit to screen and resizes automatically based on the available width and height?

Should be possible to drag widget from one dashboard to another.
Configuration should allow to indicate which gridster can drag to which, or event which item.
A spike task is needed beforehand to append dragged item to body.

We need more detailed documentation for inputs: IGridsterOptions and IGridsterDraggableOptions

Would be cool if the user can configure to show grid lines when dragging items or permanently.

If I fix the versions from the repo, then it works, but with the versions 2.4.0+, the app won't work!

Problem exists when i open inspect element console and i load the application.
After loading, gridster is adjusted to current width of screen, but when i close the inspect element
console, gridster stays with the same width. You can see this at your demo page https://swiety85.github.io/angular2gridster/.

Here are my printscreens:

Hi,

Here is the step to reproduce the bug :

• Generate new project (ng new project_name)
• npm i
• ng serve (Work fine)
• npm install angular2gridster --save
• ng serve (Work fine)
• remove node_modules folder (Simulate a new clone on some project)
• npm i (with angular2gridster already in dependencies)
• ng serve (Fail)

Output :
Error: No module factory available for dependency type: ContextElementDependency
at Compilation.addModuleDependencies.

Cheers,

In gridster-item.component.ts file

we should update dragMove subscribe function

const dragSub = draggable.dragMove
.subscribe((event: DraggableEvent) => {
this.gridster.gridsterRect = this.gridster.$element.getBoundingClientRect(); //add this code fix
let left = this.gridster.gridsterRect.left < 0 ? 0 : this.gridster.gridsterRect.left;
let top = this.gridster.gridsterRect.top < 0 ? 0 : this.gridster.gridsterRect.top;

                this.$element.style.top = (event.clientY - cursorToElementPosition.y -
                    top) + 'px';
                this.$element.style.left = (event.clientX - cursorToElementPosition.x -
                    left) + 'px';

                this.gridster.onDrag(this.item);
            });

There should be a parameter (fixed for example) in grid-item that makes it not draggable by the user while the others are still draggable.

for example you could write
<grid-item [x]="x" ... [h]="h" [fixed]="true">

Sorry it's more a suggestion than an issue :/

Hi again. I have the following code here:

`<md-tab-group [dynamicHeight]="true" [selectedIndex]="selectedDashboard" (selectChange)="onTabChange($event)" [dynamicHeight]="true">
<md-tab *ngFor="let dashboard of dashboards; let i = index;" >

    <ng-template md-tab-label>
      {{dashboard.title}}
    </ng-template>

          <gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions" #gridster>
            <gridster-item [(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h" *ngFor="let widget of dashboards[selectedDashboard].widgets">
              <!-- your content here -->

              <md-toolbar class="panel-heading" color="">
                {{widget.title}}
              </md-toolbar>

              <verso-notification class="panel-body" *ngIf="widget.type == 'notification'"></verso-notification>
              <verso-target class="panel-body" *ngIf="widget.type == 'target'"></verso-target>
              <verso-topic class="panel-body" *ngIf="widget.type == 'topic'"></verso-topic>
              <verso-note class="panel-body" *ngIf="widget.type == 'note'"></verso-note>
              <verso-task class="panel-body" *ngIf="widget.type == 'task'"></verso-task>
              <verso-kpi class="panel-body" *ngIf="widget.type == 'kpi'"></verso-kpi>

            </gridster-item>
          </gridster>


  </md-tab>
</md-tab-group>`

There is a strange offset between the mouse and gridster-item when I put gridster in md-tab.

We should remove onChange function and create EventEmmiter. I think it is more clear for Angular2.

Provide a way to have a layout (vertical, horizontal) that doesn't compact in any direction so tiles can float.
This could be configured by Gridster option: direction="none".

Do you know why I get this error ?

WARNING in ./src/app/core/gridster/gridster.component.ts
29:91 export 'IGridsterOptions' was not found in './gridster.service'

There are some defects in calculateCellSize method of GridsterService。
When we calculate container height and width，we need to minus the padding。
This is my some advice, hope to adopt。

At the moment i don't see any way to listen for drag, drops, over and outs on grid-items. Only on prototypes :/

Did i miss something?

I set the dragAndDrop option to false, and when I navigate to a new page my app breaks.

gridsterOptions:IGridsterOptions = {
lanes: 5,
direction: "vertical",
dragAndDrop: false
}

I found this into the gridster-item.component.ts class:

this.dragSubscription is undefined but into the ngOnDestroy(), you try to unsubscribe on it

ngOnInit() {
    this.gridster.registerItem(this);

    if(this.gridster.options.dragAndDrop) {
        this.createMouseDrag(this.$element);
        this.createTouchDrag(this.$element);

        // Update position
        this.dragSubscription = this.dragging.subscribe((pos) => {
            if(!this.pin){
                this.$element.style.top = (pos.top - this.gridster.$element.offsetTop) + 'px';
                this.$element.style.left = (pos.left - this.gridster.$element.offsetLeft) + 'px';
            }           
        });
    }
}
ngOnDestroy() {
    let index = this.gridster.items.findIndex((z) => z == this);
    if(index){
        this.gridster.items.splice(index,1);
    }
    this.dragSubscription.unsubscribe();
}

I included this line in vendor.ts after installing:

import 'angular2gridster';

but,webpack dev server throws me myriads of error like:

ERROR in [default] ...\node_modules\angular2gridster\src\gridster.service.ts:298:38
Parameter 'item' implicitly has an 'any' type.

Add ability change position (x,y) without reload grid.

"x" and "y" were two way binding attrs, but in v. 0.4.0 it was broken. This task is to fix it.
Second part is to provide two way binding in "w" and "h" attrs that could be a value with new resize (#15) feature.

It should be possible to define min and max height and width of gridster item. This configuration should be used in resize feature. The user should not be allowed to resize item to smaller or bigger than defined by config.
These params should be (integer) number of gridster lanes. Default min should 1x1.