Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
D
digilib-pivaj
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Daniel ANTELME
digilib-pivaj
Commits
760fa386
Commit
760fa386
authored
Feb 14, 2015
by
hertzhaft
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
pluggable handle types
parent
121b5752
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
65 additions
and
72 deletions
+65
-72
webapp/src/main/webapp/jquery/jquery.digilib.vector.js
webapp/src/main/webapp/jquery/jquery.digilib.vector.js
+65
-72
No files found.
webapp/src/main/webapp/jquery/jquery.digilib.vector.js
View file @
760fa386
...
...
@@ -118,7 +118,7 @@
renderShapes
(
data
,
layer
);
}
},
/**
* get vector object (shape) by id.
*
...
...
@@ -140,7 +140,7 @@
}
return
null
;
},
/**
* remove vector object (shape) by id.
*
...
...
@@ -161,7 +161,7 @@
}
renderShapes
(
data
,
layer
);
},
/**
* add vector layer.
*
...
...
@@ -225,6 +225,8 @@
};
// shapes layer is first
data
.
vectorLayers
=
[
shapeLayer
];
// prepare pluggable handle create functions
setupHandleFactory
(
data
);
// install event handlers
$data
.
bind
(
'
update
'
,
handleUpdate
);
};
...
...
@@ -272,7 +274,7 @@
}
}
};
/**
* render all shapes on the layer.
*
...
...
@@ -310,61 +312,48 @@
};
/**
* create a square handle from a screen position.
* setup handle creation functions
* (more functions can be plugged into data.settings.handleFactory)
*
* @param p Screen point
* @param hs Handle size
* @param css CSS prefix
*/
var
createHandleSquare
=
function
(
p
,
hs
,
css
)
{
var
d
=
hs
/
2
;
var
$handle
=
$
(
svgElement
(
'
rect
'
,
{
'
width
'
:
hs
,
'
height
'
:
hs
,
'
stroke
'
:
'
darkgrey
'
,
'
stroke-width
'
:
1
,
'
fill
'
:
'
none
'
,
'
class
'
:
css
+
'
svg-handle
'
,
'
style
'
:
'
pointer-events:all
'
}));
$handle
.
moveTo
=
function
(
p
)
{
this
.
attr
({
'
x
'
:
p
.
x
-
d
,
'
y
'
:
p
.
y
-
d
});
};
$handle
.
moveTo
(
p
);
return
$handle
;
};
/**
* create a diamond-like handle from a screen position.
*
* @param p Screen point
* @param hs Handle size
* @param css CSS prefix
* @param data
*/
var
createHandleDiamond
=
function
(
p
,
hs
,
css
)
{
var
setupHandleFactory
=
function
(
data
)
{
var
settings
=
data
.
settings
;
var
css
=
settings
.
cssPrefix
;
var
hs
=
settings
.
editHandleSize
;
var
d
=
hs
/
2
;
var
$handle
=
$
(
svgElement
(
'
polygon
'
,
{
'
stroke
'
:
'
darkgrey
'
,
'
stroke-width
'
:
1
,
'
fill
'
:
'
none
'
,
'
class
'
:
css
+
'
svg-handle
'
,
'
style
'
:
'
pointer-events:all
'
}));
$handle
.
moveTo
=
function
(
p
)
{
this
.
attr
(
'
points
'
,
(
p
.
x
-
d
)
+
'
,
'
+
p
.
y
+
'
'
+
p
.
x
+
'
,
'
+
(
p
.
y
+
d
)
+
'
'
+
(
p
.
x
+
d
)
+
'
,
'
+
p
.
y
+
'
'
+
p
.
x
+
'
,
'
+
(
p
.
y
-
d
));
var
attr
=
{
'
stroke
'
:
'
darkgrey
'
,
'
stroke-width
'
:
1
,
'
fill
'
:
'
none
'
,
'
class
'
:
css
+
'
svg-handle
'
,
'
style
'
:
'
pointer-events:all
'
};
$handle
.
moveTo
(
p
);
return
$handle
;
};
/**
* create a cross-like handle from a screen position.
*
* @param p Screen point
* @param hs Handle size
* @param css CSS prefix
*/
var
createHandleCross
=
function
(
p
,
hs
,
css
)
{
var
d
=
hs
/
2
;
var
$handle
=
$
(
svgElement
(
'
path
'
,
{
'
stroke
'
:
'
darkgrey
'
,
'
stroke-width
'
:
2
,
'
fill
'
:
'
none
'
,
'
class
'
:
css
+
'
svg-handle
'
,
'
style
'
:
'
pointer-events:all
'
}));
$handle
.
moveTo
=
function
(
p
)
{
this
.
attr
(
'
d
'
,
'
M
'
+
(
p
.
x
-
d
)
+
'
,
'
+
p
.
y
+
'
L
'
+
(
p
.
x
+
d
)
+
'
,
'
+
p
.
y
+
'
M
'
+
p
.
x
+
'
,
'
+
(
p
.
y
+
d
)
+
'
L
'
+
p
.
x
+
'
,
'
+
(
p
.
y
-
d
));
var
factory
=
{
'
square
'
:
function
()
{
var
$h
=
$
(
svgElement
(
'
rect
'
,
attr
));
$h
.
attr
({
'
width
'
:
hs
,
'
height
'
:
hs
});
$h
.
moveTo
=
function
(
p
)
{
this
.
attr
({
'
x
'
:
p
.
x
-
d
,
'
y
'
:
p
.
y
-
d
});
};
return
$h
;
},
'
diamond
'
:
function
()
{
var
$h
=
$
(
svgElement
(
'
polygon
'
,
attr
));
$h
.
moveTo
=
function
(
p
)
{
this
.
attr
(
'
points
'
,
(
p
.
x
-
d
)
+
'
,
'
+
p
.
y
+
'
'
+
p
.
x
+
'
,
'
+
(
p
.
y
+
d
)
+
'
'
+
(
p
.
x
+
d
)
+
'
,
'
+
p
.
y
+
'
'
+
p
.
x
+
'
,
'
+
(
p
.
y
-
d
));
};
return
$h
;
},
'
cross
'
:
function
()
{
var
$h
=
$
(
svgElement
(
'
path
'
,
attr
));
$h
.
moveTo
=
function
(
p
)
{
this
.
attr
(
'
d
'
,
'
M
'
+
(
p
.
x
-
d
)
+
'
,
'
+
p
.
y
+
'
L
'
+
(
p
.
x
+
d
)
+
'
,
'
+
p
.
y
+
'
M
'
+
p
.
x
+
'
,
'
+
(
p
.
y
+
d
)
+
'
L
'
+
p
.
x
+
'
,
'
+
(
p
.
y
-
d
));
};
return
$h
;
}
};
$handle
.
moveTo
(
p
);
return
$handle
;
data
.
handleFactory
=
factory
;
};
/**
...
...
@@ -378,27 +367,33 @@
* @param func If present, use a special create function
*/
//create handles for a shape.
var
createHandles
=
function
(
data
,
shape
,
$svg
,
func
)
{
var
createHandles
=
function
(
data
,
shape
,
layer
)
{
if
(
!
shape
.
properties
.
editable
)
{
return
};
var
$
handles
=
[]
;
var
$
svg
=
$
(
layer
.
svgElem
)
;
var
trafo
=
data
.
imgTrafo
;
var
settings
=
data
.
settings
;
var
hs
=
settings
.
editHandleSiz
e
;
var
css
=
settings
.
cssPrefix
;
if
(
func
==
null
)
{
func
=
createHandleCross
}
// create handle element from a coordinate pair
var
createHandle
=
function
(
i
,
coord
)
{
var
p
=
trafo
.
transform
(
geom
.
position
(
coord
));
var
$handle
=
func
(
p
,
hs
,
css
);
$handle
s
.
push
(
$handle
);
$handle
.
one
(
"
mousedown.dlVertexDrag
"
,
getVertexDragHandler
(
data
,
shape
,
i
)
);
// type of handle can be stated in layer
var
type
=
layer
.
handleTyp
e
;
var
newHandle
=
data
.
handleFactory
[
type
]
;
if
(
newHandle
==
null
)
{
newHandle
=
data
.
handleFactory
[
'
square
'
];
}
var
handles
=
[];
var
createHandle
=
function
(
i
,
item
)
{
var
p
=
trafo
.
transform
(
geom
.
position
(
item
));
var
$handle
=
newHandle
(
);
$handle
.
moveTo
(
p
);
handles
.
push
(
$handle
);
$svg
.
append
(
$handle
);
return
$handle
;
};
shape
.
$vertexElems
=
$handles
;
var
coords
=
shape
.
geometry
.
coordinates
;
$
.
each
(
coords
,
createHandle
);
};
// vertexElems must be defined before calling getVertexDragHandler()
shape
.
$vertexElems
=
handles
;
var
attachEvent
=
function
(
i
,
item
)
{
item
.
one
(
"
mousedown.dlVertexDrag
"
,
getVertexDragHandler
(
data
,
shape
,
i
));
};
$
.
each
(
handles
,
attachEvent
);
};
/**
* calculate screen positions from coordinates for a shape.
...
...
@@ -528,7 +523,7 @@
}
shape
.
$elem
=
$elem
;
$svg
.
append
(
$elem
);
createHandles
(
data
,
shape
,
$svg
);
createHandles
(
data
,
shape
,
layer
);
$
(
data
).
trigger
(
"
renderShape
"
,
shape
);
};
...
...
@@ -595,8 +590,6 @@
pt
.
clipTo
(
imgRect
);
shape
.
properties
.
screenpos
[
vtx
]
=
pt
;
$
(
data
).
trigger
(
'
positionShape
'
,
shape
);
// move handle
//$handle.attr({'x': pt.x-hs/2, 'y': pt.y-hs/2});
$handle
.
moveTo
(
pt
);
// update shape SVG element
if
(
shapeType
===
'
Line
'
)
{
...
...
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