Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
typo3
qfq
Commits
da4ec6ab
Commit
da4ec6ab
authored
Jan 03, 2018
by
bbaer
Browse files
added update Background and some mousechecks
parent
e91e0924
Changes
1
Hide whitespace changes
Inline
Side-by-side
javascript/src/Plugins/qfq.fabric.js
View file @
da4ec6ab
...
...
@@ -18,6 +18,7 @@ var QfqNS = QfqNS || {};
$
(
function
(
n
)
{
n
.
Fabric
=
function
()
{
this
.
parentElement
=
{};
this
.
rotation
=
0
;
this
.
controlElement
=
{};
this
.
emojiContainer
=
{};
this
.
eventEmitter
=
new
EventEmitter
();
...
...
@@ -37,6 +38,7 @@ $(function (n) {
this
.
drawTextBoxMode
=
false
;
this
.
emojiMode
=
false
;
this
.
isHighlightMode
=
false
;
this
.
isMouseMode
=
false
;
this
.
isDrawingMode
=
true
;
this
.
isDown
=
false
;
this
.
origX
=
0
;
...
...
@@ -128,10 +130,8 @@ $(function (n) {
var
that
=
this
;
$
.
each
(
this
.
myModes
.
modes
,
function
(
i
,
o
)
{
if
(
o
.
name
==
that
.
myModes
.
currentMode
)
{
console
.
log
(
o
.
requiresDrawing
);
if
(
o
.
requiresDrawing
)
{
that
.
qFabric
.
canvas
.
isDrawingMode
=
true
;
console
.
log
(
that
.
qFabric
);
}
else
{
that
.
qFabric
.
canvas
.
isDrawingMode
=
false
;
}
...
...
@@ -147,7 +147,6 @@ $(function (n) {
that
.
qFabric
[
o
.
toggle
]
=
true
;
}
if
(
o
.
hasToggleElement
)
{
console
.
log
(
o
.
toggleElement
);
that
.
qFabric
[
o
.
toggleElement
].
slideToggle
();
}
}
else
{
...
...
@@ -375,7 +374,9 @@ $(function (n) {
n
.
Fabric
.
prototype
.
dragEndEvent
=
function
(
e
)
{
if
(
this
.
dragAndDrop
)
{
this
.
emojiAdd
(
this
.
dndData
,
e
);
if
(
this
.
mouseInsideCanvas
)
{
this
.
emojiAdd
(
this
.
dndData
,
e
);
}
this
.
dndData
=
''
;
this
.
dragAndDrop
=
false
;
}
...
...
@@ -389,16 +390,16 @@ $(function (n) {
console
.
log
(
"
resize canvas started
"
);
var
backgroundSizing
=
false
;
var
oldWidth
=
this
.
canvas
.
getWidth
();
console
.
log
(
"
canvas:
"
+
oldWidth
);
var
backgroundImageWidth
=
this
.
canvas
.
backgroundImage
.
width
||
0
;
console
.
log
(
"
bgimage:
"
+
backgroundImageWidth
);
if
(
this
.
canvas
.
backgroundImage
)
{
var
backgroundImageWidth
=
this
.
canvas
.
backgroundImage
.
getWidth
()
||
0
;
}
else
{
var
backgroundImageWidth
=
0
;
}
if
(
oldWidth
!==
backgroundImageWidth
&&
backgroundImageWidth
!==
0
)
{
oldWidth
=
backgroundImageWidth
;
backgroundSizing
=
true
;
}
console
.
log
(
"
canvas oldWidth:
"
+
oldWidth
);
var
newWidth
=
this
.
parentElement
.
innerWidth
();
console
.
log
(
"
html:
"
+
newWidth
);
if
(
newWidth
!==
oldWidth
)
{
var
scaleMultiplier
=
newWidth
/
oldWidth
;
var
oldHeight
;
...
...
@@ -436,8 +437,8 @@ $(function (n) {
};
n
.
Fabric
.
prototype
.
setBackground
=
function
()
{
var
that
=
this
;
if
(
this
.
backgroundImage
)
{
var
that
=
this
;
fabric
.
Image
.
fromURL
(
this
.
backgroundImage
,
function
(
img
)
{
img
.
set
({
width
:
that
.
canvas
.
width
,
...
...
@@ -445,7 +446,8 @@ $(function (n) {
originX
:
'
left
'
,
originY
:
'
top
'
,
lockUniScaling
:
true
,
centeredScaling
:
true
centeredScaling
:
true
,
centeredRotation
:
true
});
that
.
canvas
.
setBackgroundImage
(
img
,
that
.
canvas
.
renderAll
.
bind
(
that
.
canvas
));
});
...
...
@@ -460,10 +462,28 @@ $(function (n) {
originX
:
'
left
'
,
originY
:
'
top
'
,
lockUniScaling
:
true
,
centeredScaling
:
true
centeredScaling
:
true
,
centeredRotation
:
true
});
this
.
canvas
.
setBackgroundImage
(
0
,
this
.
canvas
.
renderAll
.
bind
(
this
.
canvas
));
img
.
rotate
(
this
.
rotation
);
img
.
onload
=
function
()
{
that
.
canvas
.
renderAll
();
};
this
.
canvas
.
setBackgroundImage
(
img
,
this
.
canvas
.
renderAll
.
bind
(
this
.
canvas
));
this
.
canvas
.
renderAll
();
}
};
n
.
Fabric
.
prototype
.
updateBackground
=
function
()
{
if
(
this
.
canvas
.
backgroundImage
)
{
console
.
log
(
"
set
"
);
this
.
canvas
.
backgroundImage
.
setWidth
(
this
.
canvas
.
getWidth
());
this
.
canvas
.
backgroundImage
.
setHeight
(
this
.
canvas
.
getHeight
());
this
.
canvas
.
renderAll
();
}
else
{
console
.
log
(
"
later
"
);
var
that
=
this
;
setTimeout
(
function
()
{
that
.
updateBackground
();
},
200
);
}
};
...
...
@@ -620,7 +640,6 @@ $(function (n) {
// Default Canvas mouse events are currently strangely implemented.
n
.
Fabric
.
prototype
.
defaultMouseUpEvent
=
function
(
e
)
{
console
.
log
(
"
Default Mouse Up Event
"
);
if
(
this
.
moveMode
)
{
this
.
deactivatePanning
();
}
...
...
@@ -633,11 +652,6 @@ $(function (n) {
if
(
this
.
isZoomMode
)
{
this
.
zoomCanvas
(
e
,
0.1
);
}
if
(
this
.
dragAndDrop
)
{
console
.
log
(
"
dnd mouseUp
"
);
}
};
n
.
Fabric
.
prototype
.
defaultRightClickHandler
=
function
(
e
)
{
...
...
@@ -702,17 +716,43 @@ $(function (n) {
this
.
delete
();
break
;
case
"
rotateRight
"
:
this
.
rotate
Right
(
90
);
this
.
rotate
Canvas
(
90
);
break
;
default
:
console
.
error
(
"
unrecognized mode
"
);
}
};
n
.
Fabric
.
prototype
.
rotateRight
=
function
(
degrees
)
{
var
currentAngle
=
this
.
canvas
.
backgroundImage
.
angle
;
this
.
canvas
.
backgroundImage
.
setAngle
(
currentAngle
+
degrees
);
this
.
resizeCanvas
();
n
.
Fabric
.
prototype
.
rotateCanvas
=
function
(
degrees
)
{
var
newHeight
=
this
.
canvas
.
getWidth
();
var
newWidth
=
this
.
canvas
.
getHeight
();
this
.
setRotation
(
this
.
rotation
+
degrees
);
this
.
canvas
.
setHeight
(
newHeight
);
this
.
canvas
.
setWidth
(
newWidth
);
this
.
canvas
.
backgroundImage
.
rotate
(
this
.
rotation
);
this
.
canvas
.
resizeCanvas
();
};
n
.
Fabric
.
prototype
.
setRotation
=
function
(
degrees
)
{
var
mirror
=
false
;
if
(
degrees
<
0
)
{
degrees
=
Math
.
abs
(
degrees
);
mirror
=
true
;
}
while
(
degrees
>
360
)
{
degrees
=
degrees
-
360
;
}
if
(
mirror
)
{
degrees
=
360
-
degrees
;
}
if
(
degrees
>=
0
&&
degrees
<=
360
)
{
this
.
rotation
=
degrees
;
}
else
{
console
.
error
(
"
You broke the laws of mathematics!
"
);
}
};
n
.
Fabric
.
prototype
.
delete
=
function
()
{
...
...
Write
Preview
Supports
Markdown
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