Skip to content

Commit

Permalink
drag and drop of charts with css3 animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@privet56
privet56 committed Feb 14, 2017
1 parent 2c124a0 commit cc7190a
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 89 deletions.
17 changes: 17 additions & 0 deletions src/app/search/resultlist/graph/graph.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,23 @@
animation: ngfordd 0.1s infinite;
animation-direction: alternate;
}
@keyframes ngforchartani
{
0%
{
padding-left: 100px;
background-color: aquamarine;
}
100%
{
padding-left: 0px;
}
}
.ngforchart
{
animation: ngforchartani 1s;
}

/* there is no parent selector in css!
div < div.ui-state-highlight-drag { background-color:red; }
*/
8 changes: 5 additions & 3 deletions src/app/search/resultlist/graph/graph.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<!-- pdf-generator has problems with float:left (height not possible) -->
<!-- div #graphdiv style="padding: 9px; margin: 9px; background-color:#e6e6e6; height:333px;width:266px;float:left" -->
<!-- float:left breaks pdf! -->
<!-- float:left breaks pdf! better: display:inline-block; -->
<div #graphdiv
style="padding: 9px; margin: 9px; background-color:#e6e6e6; height:333px;width:266px;display:inline-block;"
class="dddiv"
class="dddiv ngforchart"
[ngClass]="{'ui-state-highlight-drag':isDragged, 'ui-state-highlight-drop':isDropOver}"
(mouseout)='mouseOut($event)'
name="dd_div1">
<!-- p-chart #chart type="line" [data]="data"></p-chart -->
<!-- BREAKS D&D: dragHandle=".move" -->
<div name="dd_div2"
<div name="dddiv2"
pDroppable="dddata" pDraggable="dddata"
dragEffect="move"
dropEffect="move"
Expand All @@ -20,12 +20,14 @@
(onDragEnter) ="dragEnter($event, data)"
(onDragLeave) ="dragLeave($event, data)"
>
<div name="dddiv2.5">
<h4 style="text-align:center;" name="dd_div3">
{{ getTitle() }} ({{ total }})
</h4>
<button (click)="onPDF(graphdiv)" class="button_pdf" pTooltip="Export as PDF" tooltipPosition="top" name="dddiv4">
<img src="assets/file_pdf.png" name="dddiv5" />
</button>
</div>
</div>
<p-chart type="pie" [data]="getCharData()" (onDataSelect)="onDataSelected($event)" [options]="getOptions()"></p-chart>
</div>
118 changes: 35 additions & 83 deletions src/app/search/resultlist/graph/graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,100 +341,60 @@ export class GraphComponent implements OnInit
public dragEnter($event,data):void
{
if(!this.isDragged)
{
//TODO: graphs.deactivate.all.graph.isDropOver's except me!
this.isDropOver = true;
}
//console.log("graph:dragEnter("+this.getTitle()+"):"+data);
}
public dragLeave($event:DragEvent,data):void
public getName(o:any):string
{
if(!this.isDropOver)return;

//TODO:.!? how to do it better?

if($event.srcElement.attributes["name"] && $event.srcElement.attributes["name"].value && $event.srcElement.attributes["name"].value.startsWith("dddiv"))
try
{
//console.log("graph:dragLeave isonchild. src:"+$event.srcElement.attributes["name"].value);
return;
let e:Element = o;
let s:string = e.tagName;
s += (e.attributes["name"] && e.attributes["name"].value) ? (":"+e.attributes["name"].value) : "";
return s;
}
catch(e)
{
return null;
}
}
isGraphChild(e:any):boolean
{
return e && e.attributes && e.attributes["name"] && e.attributes["name"].value && e.attributes["name"].value.startsWith("dddiv");
}

this.isDropOver = false;
//console.log("graph:dragLeave("+this.getTitle()+") src("+$event.srcElement.tagName+") classList:"+$event.srcElement.classList+" target:"+$event.target+" curTarget:"+$event.currentTarget);

/*
public dragLeave($event:DragEvent,data):void
{
if(!this.isDropOver)return;

//var x = $event.pageX - $(this.vChart).offset().left;
//var y =$event.pageY - $(this.vChart).offset().top;
var e = $(this.vGraphdiv.nativeElement);
var ex = e.offset().left; //retrieves the current position relative to the document
var ey = e.offset().top;
var ewidth = e.width();
var eheight = e.height();
//TODO:.!? how to do it better?

//var x = ($event.pageY - ex) + $(window).scrollTop();
//var y = ($event.pageY - ey) + $(window).scrollTop();
let bIsOnChildren:boolean = UJsUtil.isWithinElement(this.vGraphdiv.nativeElement, $event.pageX, $event.pageY, false);
let bIsOverChildren:boolean = UJsUtil.isInChildren(this.vGraphdiv.nativeElement, $event.toElement || $event.relatedTarget);
let bIsOnChildNamedDiv:boolean = this.isGraphChild($event.srcElement);

if($event.pageY < ey)
{
console.log("graph:dragLeave mouse is over ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+$event.pageY+" mousex:"+$event.pageX);
return;
}
if($event.pageX < ex)
{
console.log("graph:dragLeave mouse is left of ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+$event.pageY+" mousex:"+$event.pageX);
return;
}
if($event.pageY > ey+eheight)
{
console.log("graph:dragLeave mouse is under ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+$event.pageY+" mousex:"+$event.pageX);
return;
}
if($event.pageX > ex+ewidth)
{
console.log("graph:dragLeave mouse is rights of ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+$event.pageY+" mousex:"+$event.pageX);
return;
}
console.log("graph:dragLeave mouse is ON the ele!!! ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+$event.pageY+" mousex:"+$event.pageX);
return;
let srcName:string = ($event.srcElement.attributes["name"] && $event.srcElement.attributes["name"].value) ? $event.srcElement.attributes["name"].value : null;
let toName:string = ($event.toElement.attributes["name"] && $event.toElement.attributes["name"].value) ? $event.toElement.attributes["name"].value : null;
let targetName:string = this.getName($event.target);
let currentTargetName:string= this.getName($event.currentTarget);

/*
let children:Array<Element> = new Array<Element>();
this.traverseChildren(this.vGraphdiv.nativeElement, children);
let e:any = $event.toElement || $event.relatedTarget;
if (children.indexOf(e))
{
for(let i:number=0;i<children.length;i++)
{
//console.log(""+i+"="+children[i].tagName+"="+children[i].getAttribute("name"));
}
var t1:any = $event.target;
var target:Element = t1;
var targetName = target.attributes["name"] ? target.attributes["name"].value : null;
var t2:any = $event.currentTarget;
var currentTarget:Element = t2;
var currentTargetName = currentTarget.attributes["name"] ? currentTarget.attributes["name"].value : null;
if(!bIsOnChildNamedDiv) bIsOnChildNamedDiv = this.isGraphChild($event.target);
//if(!bIsOnChildNamedDiv) bIsOnChildNamedDiv = this.isGraphChild($event.currentTarget);

console.log("graph:dragLeave("+this.getTitle()+") STILLOONCHILD src("+$event.srcElement.tagName+") classList:"+$event.srcElement.classList+" target:"+targetName+" curTarget:"+currentTargetName);
return;
//TODO: remove all not-needed code & console.log after implementation is stable
console.log("graph:dragLeave INF: bIsOnChildren:"+bIsOnChildren+" bIsOverChildren:"+bIsOverChildren+" bIsOnChildNamedDiv:"+bIsOnChildNamedDiv+" srcName:"+srcName+" toName:"+toName+" targetName:"+targetName+" currentTargetName:"+currentTargetName);
}

if($event.srcElement.classList.contains("ui-state-highlight-drop"))
if(bIsOnChildNamedDiv)
{
console.log("graph:dragLeave("+this.getTitle()+") STILLOVER src("+$event.srcElement.tagName+") classList:"+$event.srcElement.classList+" target:"+$event.target+" curTarget:"+$event.currentTarget);
return;
}*/
}

//this.isDropOver = false;
//console.log("graph:dragLeave("+this.getTitle()+") src("+$event.srcElement.tagName+") classList:"+$event.srcElement.classList+" target:"+$event.target+" curTarget:"+$event.currentTarget);

/*
console.log($event);
console.log($event.srcElement);
console.log($event.target);
console.log($event.currentTarget);*/
//console.log(data);
this.isDropOver = false;
}

//MouseEnter and mouseLeave do not fire while a button is pressed
Expand All @@ -459,14 +419,6 @@ export class GraphComponent implements OnInit
this.isDropOver = false;
console.log("graph:mouseOut("+this.getTitle()+"):");*/
}
public traverseChildren(e:Element, children:Array<Element>) : void
{
children.push(e);
for(let i:number=0;i<e.children.length;i++)
{
this.traverseChildren(e.children[i], children);
}
}
public drop(event):void
{
this.dropHandler.emit(1);
Expand Down
12 changes: 9 additions & 3 deletions src/app/search/resultlist/graphs/graphs.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { QueryList, ViewChildren, Component, OnInit, ContentChildren, AfterViewInit } from '@angular/core';
import { OnDestroy, QueryList, ViewChildren, Component, OnInit, ContentChildren, AfterViewInit } from '@angular/core';
import { UStrUtil } from '../../../shared/uStrUtil';
import { UJsUtil } from '../../../shared/uJsUtil';
import { MsgService } from '../../../services/msg.service';
Expand All @@ -10,7 +10,7 @@ import { ValueEmitter } from '../../../shared/ValueEmitter';
templateUrl: './graphs.component.html',
styleUrls: ['./graphs.component.css']
})
export class GraphsComponent implements OnInit, AfterViewInit
export class GraphsComponent implements OnInit, AfterViewInit, OnDestroy
{
@ViewChildren(GraphComponent) vGraphs : QueryList<GraphComponent>;
public onDD : ValueEmitter<number> = new ValueEmitter<number>();
Expand All @@ -22,6 +22,12 @@ export class GraphsComponent implements OnInit, AfterViewInit

}

ngOnDestroy()
{
if(this.onDD) this.onDD.unsubscribe();
this.onDD = null;
}

ngOnInit()
{

Expand Down Expand Up @@ -88,7 +94,7 @@ export class GraphsComponent implements OnInit, AfterViewInit
let summary:string = "Move";
let detail:string = "Drag&Drop operation failed.";
console.log("graphs:onDrop WRN: i2Drop("+i2Drop+") <> iDropInFrontOf("+iDropInFrontOf+")");
this.msgService.inf(summary, detail);
this.msgService.warn(summary, detail);
return;
}

Expand Down
59 changes: 59 additions & 0 deletions src/app/shared/uJsUtil.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,4 +189,63 @@ export class UJsUtil
}
return imgs;
}

public static getAllChildren(e:Element, children:Array<Element>) : void
{
children.push(e);
for(let i:number=0;i<e.children.length;i++)
{
UJsUtil.getAllChildren(e.children[i], children);
}
}

public static isInChildren(nativeE:Element, to:any) : boolean
{
//let to:any = $event.toElement || $event.relatedTarget;
let children:Array<Element> = new Array<Element>();
UJsUtil.getAllChildren(nativeE, children);
if (children.indexOf(to))
{
return true;
}
return false;
}


//TODO: untested function!
public static isWithinElement(nativeE:Element, pointx:number, pointy:number, debug:boolean) : boolean
{
var e = $(nativeE);
var ex = e.offset().left; //retrieves the current position relative to the document
var ey = e.offset().top;
var ewidth = e.width();
var eheight = e.height();

//TODO: consider scrollpos.!?
//var x = ($event.pageY - ex) + $(window).scrollTop();
//var y = ($event.pageY - ey) + $(window).scrollTop();

if(pointy < ey)
{
if(debug)console.log("isWithinElement mouse is above ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+pointy+" mousex:"+pointx);
return false;
}
if(pointx < ex)
{
if(debug)console.log("isWithinElement mouse is left of ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+pointy+" mousex:"+pointx);
return false;
}
if(pointy > ey+eheight)
{
if(debug)console.log("isWithinElement mouse is under ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+pointy+" mousex:"+pointx);
return false;
}
if(pointx > ex+ewidth)
{
if(debug)console.log("isWithinElement mouse is rights of ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+pointy+" mousex:"+pointx);
return false;
}
if(debug)console.log("isWithinElement mouse is WITHIN ele ex:"+ex+" ey:"+ey+" width:"+ewidth+" eheight:"+eheight+" mousey:"+pointy+" mousex:"+pointx);
return true;
}
}

0 comments on commit cc7190a

Please sign in to comment.