Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
matefun
Frontend
Commits
975e919d
Commit
975e919d
authored
Aug 15, 2018
by
Diego Rey
Browse files
Added export and center graph functionalities for graph2D Component
parent
8943edee
Changes
4
Hide whitespace changes
Inline
Side-by-side
Frontend Angular 4/package-lock.json
View file @
975e919d
...
...
@@ -4139,7 +4139,7 @@
"dev"
:
true
},
"function-plot"
:
{
"version"
:
"git://github.com/diego-rey/function-plot.git#
d8b7147168ab7a595f83
23
d
28
ffc944735117606
"
,
"version"
:
"git://github.com/diego-rey/function-plot.git#
1543ff3b7
2328
5e0119c53a9bd3d37ab7e671ca9
"
,
"from"
:
"git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape"
,
"requires"
:
{
"array-range"
:
"^1.0.1"
,
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @
975e919d
...
...
@@ -2,7 +2,12 @@
<div
class=
"card-block contenedor-canvas"
>
<button
ngbPopover=
"Zoom +"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 165px; margin-top: -55px"
(click)=
zoomIn()
><i
class=
"fa fa-plus"
></i></button>
<button
ngbPopover=
"Zoom -"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 132px; margin-top: -55px"
(click)=
zoomOut()
><i
class=
"fa fa-minus"
></i></button>
<button
ngbPopover=
"Centrar"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
" float:right; margin-right: 99px; margin-top: -55px"
(click)=
"recenterPlot()"
><i
class=
"fa fa-arrows"
></i></button>
<button
ngbPopover=
"Borrar"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
" float:right; margin-right: 66px; margin-top: -55px"
(click)=
"cleanPlot()"
><i
class=
"fa fa-trash"
></i></button>
<button
ngbPopover=
"Descargar PNG"
triggers=
"mouseenter:mouseleave"
data-placement=
"bottom"
class=
"btn btn-sm btn-secondary"
style=
"float:right; margin-right: 33px; margin-top: -55px"
(click)=
exportPlot()
><i
class=
"fa fa-download"
></i></button>
<a
id=
"download-plot"
class=
"download-plot"
href=
"#"
download=
"Plot.svg"
style=
"display: none"
>
Download Canvas
</a>
<button
class=
"btn btn-sm btn-secondary"
data-placement=
"bottom"
*ngIf=
"!animation.playing && animation.data.length>0"
style=
" float:left; margin-top: -5px; margin-right: 5px"
(click)=
"runAnimation()"
><i
class=
"fa fa-play"
></i></button>
<button
class=
"btn btn-sm btn-secondary"
data-placement=
"bottom"
*ngIf=
"animation.playing && animation.data.length>0"
style=
" float:left; margin-top: -5px; margin-right: 5px"
(click)=
"pauseAnimation()"
><i
class=
"fa fa-pause"
></i></button>
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @
975e919d
import
{
Component
}
from
'
@angular/core
'
;
import
{
GHCIService
}
from
'
../../../shared/services/ghci.service
'
;
import
functionPlot
from
'
function-plot
'
;
import
{
Animation
}
from
'
./graph2D.helper
'
;
import
{
Animation
,
toJSON
,
triggerDownload
}
from
'
./graph2D.helper
'
;
@
Component
({
moduleId
:
module
.
id
,
...
...
@@ -99,10 +99,9 @@ export class Graph2DComponent {
break
;
}
case
'
canvas
'
:
{
console
.
log
(
'
TIPO
'
,
canvas
.
tipo
);
var
shapesData
=
JSON
.
parse
(
canvas
.
resultado
);
var
shapesData
=
JSON
.
parse
(
toJSON
(
canvas
.
resultado
));
var
shapesDataNormalized
=
this
.
normalizeShapesData
(
shapesData
);
this
.
instance
=
null
;
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
...
...
@@ -122,9 +121,7 @@ export class Graph2DComponent {
})
break
;
}
case
'
animacion
'
:
{
console
.
log
(
'
TIPO
'
,
canvas
.
tipo
);
case
'
animacion
'
:
{
if
(
!
this
.
animation
.
init
)
{
this
.
animation
.
init
=
true
;
var
animationData
=
canvas
.
resultado
.
map
(
res
=>
JSON
.
parse
(
res
));
...
...
@@ -142,6 +139,42 @@ export class Graph2DComponent {
)
}
/**
* Angular lifecycle hook.
* called after Angular has fully initialized a component's view.
*/
ngAfterViewInit
()
{
if
(
!
this
.
instance
)
{
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
800
,
height
:
700
,
xAxis
:
{
label
:
'
x - axis
'
,
scale
:
'
linear
'
,
domain
:
{
initial
:
[
-
10
,
10
],
type
:
'
discrete
'
}
},
data
:
[],
plugins
:
[
functionPlot
.
plugins
.
zoomBox
()
]
})
}
}
/**
* Angular lifecycle hook.
* called when a directive, pipe, or service is destroyed.
*/
ngOnDestroy
()
{
if
(
this
.
ghciServiceSub
)
{
this
.
ghciServiceSub
.
unsubscribe
();
}
}
/**
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
...
...
@@ -170,7 +203,6 @@ export class Graph2DComponent {
})
}
}
/**
* @name runAnimation
* @desc Run Shapes Animation
...
...
@@ -209,6 +241,58 @@ export class Graph2DComponent {
public
zoomIn
=
function
()
{
this
.
instance
.
zoomIn
();
}
/**
* @name recenterPlot
* @desc center the plot and it returns to the initial state.
*/
public
recenterPlot
=
function
()
{
this
.
instance
.
recenter
();
}
/**
* @name cleanPlot
* @desc remove all the graph from the instance.
*/
public
cleanPlot
=
function
()
{
}
/**
* @name exportPlot
* @desc Download Plot as an SVG image.
*/
public
exportPlot
=
function
()
{
// Objects
var
svg
=
document
.
querySelector
(
'
svg
'
);
var
canvas
=
document
.
createElement
(
"
canvas
"
);
// Set dimensions of the image
var
svgSize
=
svg
.
getBoundingClientRect
();
canvas
.
width
=
svgSize
.
width
;
canvas
.
height
=
svgSize
.
height
;
// Convert SVG DOM structure to xml
var
ctx
=
canvas
.
getContext
(
'
2d
'
);
var
data
=
new
XMLSerializer
().
serializeToString
(
svg
);
// URL Object used to parse, construct, normalise, and encode URLs.
var
DOMURL
=
window
.
URL
||
(
<
any
>
window
).
webkitURL
||
window
;
var
img
=
new
Image
();
var
svgBlob
=
new
Blob
([
data
],
{
type
:
'
image/svg+xml;charset=utf-8
'
});
var
url
=
DOMURL
.
createObjectURL
(
svgBlob
);
img
.
onload
=
function
()
{
ctx
.
drawImage
(
img
,
0
,
0
);
DOMURL
.
revokeObjectURL
(
url
);
var
imgURI
=
canvas
.
toDataURL
(
'
image/png
'
)
.
replace
(
'
image/png
'
,
'
image/octet-stream
'
);
triggerDownload
(
imgURI
);
};
img
.
src
=
url
;
}
/**
* @name normalizeRectData
...
...
@@ -275,10 +359,10 @@ export class Graph2DComponent {
return
$textNormalized
;
}
/**
* @name normalize
Text
Data
* @desc Normalize
Text
data for Function Plot Library
* @param {Object}
text
Data Data of
Text
to be normalized
/**
* @name normalize
Line
Data
* @desc Normalize
Line
data for Function Plot Library
* @param {Object}
line
Data Data of
Line
to be normalized
* @returns {Object}
*/
// public normalizeLineData = function ($lineData) {
...
...
@@ -296,10 +380,10 @@ export class Graph2DComponent {
// return $lineNormalized;
// }
/**
* @name normalize
Text
Data
* @desc Normalize
Text
data for Function Plot Library
* @param {Object} textData Data of
Text
to be normalized
/**
* @name normalize
Polygon
Data
* @desc Normalize
Polygon
data for Function Plot Library
* @param {Object} textData Data of
Polygon
to be normalized
* @returns {Object}
*/
// public normalizePolygonData = function ($textData) {
...
...
@@ -354,6 +438,8 @@ export class Graph2DComponent {
return
normalized
;
}
getRandomArbitrary
=
function
(
min
,
max
)
{
return
Math
.
round
(
Math
.
random
()
*
(
max
-
min
)
+
min
);
}
...
...
@@ -571,11 +657,7 @@ export class Graph2DComponent {
return
funcionString
;
}
ngOnDestroy
()
{
if
(
this
.
ghciServiceSub
)
{
this
.
ghciServiceSub
.
unsubscribe
();
}
}
}
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
View file @
975e919d
...
...
@@ -7,27 +7,27 @@ export interface Animation {
init
:
boolean
}
export
function
toJSON
(
data
:
string
)
:
string
{
console
.
log
(
'
data
'
,
data
);
const
regexPts
=
/
(?:\"
pts
\"\:\[(?:\((
x
)
,
(
y
)\))
+,
?\])
/g
;
var
dataJSON
=
data
.
replace
(
regexPts
,
(
match
,
x
,
y
)
=>
{
return
`"points": [[
${
x
}
,
${
y
}
]]`
})
console
.
log
(
'
dataJSON
'
,
dataJSON
);
return
dataJSON
;
}
export
function
triggerDownload
(
imgURI
:
string
)
{
var
evt
=
new
MouseEvent
(
'
click
'
,
{
view
:
window
,
bubbles
:
false
,
cancelable
:
true
});
// export function toJSON(data: any) : string {
// var $points = data.pts;
// var $pointsJson = [];
// for (var p of $points) {
// $pointsJson.push([p[0],p[1]]);
// }
// var dataJson = data;
// dataJson.pts
// }
var
a
=
document
.
createElement
(
'
a
'
);
a
.
setAttribute
(
'
download
'
,
'
Matefun_2D_plot.png
'
);
a
.
setAttribute
(
'
href
'
,
imgURI
);
a
.
setAttribute
(
'
target
'
,
'
_blank
'
);
// return jsonString
// .replace(
// regexRot, (match, x, y, z) => {
// return `"rot": { "x": ${x}, "y": ${y}, "z": ${z} }`
// }
// )
// .replace(
// regexPts, (match, x1, y1, z1, x2, y2, z2) => {
// return `"pts": [{ "x": ${x1}, "y": ${y1}, "z": ${z1} },{ "x": ${x2}, "y": ${y2}, "z": ${z2} }]`
// }
// )
// }
\ No newline at end of file
a
.
dispatchEvent
(
evt
);
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment