kawa/Motionity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

Initial commit

Browse Source
This commit is contained in:
kawa
2026-08-11 15:58:47 +02:00
parent 13e160fda4
commit b7790f89ff
230 changed files with 24197 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/align.js
+371
View File
@@ -0,0 +1,371 @@
// Center line reference
function initLines() {
if (canvas.getItemById('center_h')) {
canvas.remove(canvas.getItemById('center_h'));
canvas.remove(canvas.getItemById('center_v'));
}
if (canvas.getItemById('line_h')) {
canvas.remove(canvas.getItemById('line_h'));
canvas.remove(canvas.getItemById('line_v'));
}
// Canvas center reference
canvas.add(
new fabric.Line(
[
canvas.get('width') / 2,
0,
canvas.get('width') / 2,
canvas.get('height'),
],
{
opacity: 0,
selectable: false,
evented: false,
id: 'center_h',
}
)
);
canvas.add(
new fabric.Line(
[
0,
canvas.get('height') / 2,
canvas.get('width'),
canvas.get('height') / 2,
],
{
opacity: 0,
selectable: false,
evented: false,
id: 'center_v',
}
)
);
// Canvas alignemnt guides
line_h = new fabric.Line(
[
canvas.get('width') / 2,
artboard.get('top'),
canvas.get('width') / 2,
artboard.get('height') + artboard.get('top'),
],
{
stroke: 'red',
opacity: 0,
selectable: false,
evented: false,
id: 'line_h',
}
);
line_v = new fabric.Line(
[
artboard.get('left'),
canvas.get('height') / 2,
artboard.get('width') + artboard.get('left'),
canvas.get('height') / 2,
],
{
stroke: 'red',
opacity: 0,
selectable: false,
evented: false,
id: 'line_v',
}
);
canvas.add(line_h);
canvas.add(line_v);
}
function alignControls(object, type) {
if (type == 'align-top') {
object.set(
'top',
artboard.get('top') +
(object.get('height') * object.get('scaleY')) / 2
);
} else if (type == 'align-center-v') {
object.set(
'top',
artboard.get('top') + artboard.get('height') / 2
);
} else if (type == 'align-bottom') {
object.set(
'top',
artboard.get('top') +
artboard.get('height') -
(object.get('height') * object.get('scaleY')) / 2
);
} else if (type == 'align-left') {
object.set(
'left',
artboard.get('left') +
(object.get('width') * object.get('scaleX')) / 2
);
} else if (type == 'align-center-h') {
object.set(
'left',
artboard.get('left') + artboard.get('width') / 2
);
} else {
object.set(
'left',
artboard.get('left') +
artboard.get('width') -
(object.get('width') * object.get('scaleX')) / 2
);
}
}
// Align object
function alignObject() {
const type = $(this).attr('id');
const object = canvas.getActiveObject();
console.log(canvas.getActiveObject().type);
if (canvas.getActiveObject().type == 'activeSelection') {
const tempselection = canvas.getActiveObject();
canvas.discardActiveObject();
tempselection._objects.forEach(function (object) {
alignControls(object, type);
canvas.renderAll();
newKeyframe(
'left',
object,
currenttime,
object.get('left'),
true
);
newKeyframe(
'top',
object,
currenttime,
object.get('top'),
true
);
});
reselect(tempselection);
} else {
alignControls(object, type);
canvas.renderAll();
newKeyframe(
'left',
object,
currenttime,
object.get('left'),
true
);
newKeyframe('top', object, currenttime, object.get('top'), true);
}
}
$(document).on('click', '.align', alignObject);
// Alignment guides
function centerLines(e) {
if (!cropping) {
line_h.opacity = 0;
line_v.opacity = 0;
canvas.renderAll();
const snapZone = 5;
const obj_left = e.target.left;
const obj_top = e.target.top;
const obj_width = e.target.get('width') * e.target.get('scaleX');
const obj_height =
e.target.get('height') * e.target.get('scaleY');
canvas.forEachObject(function (obj, index, array) {
// Check for horizontal snapping
function checkHSnap(a, b, snapZone, e, type) {
if (a > b - snapZone && a < b + snapZone) {
line_h.opacity = 1;
line_h.bringToFront();
var value = b;
if (type == 1) {
value = b;
} else if (type == 2) {
value =
b -
(e.target.get('width') * e.target.get('scaleX')) / 2;
} else if (type == 3) {
value =
b +
(e.target.get('width') * e.target.get('scaleX')) / 2;
}
e.target
.set({
left: value,
})
.setCoords();
line_h
.set({
x1: b,
y1: artboard.get('top'),
x2: b,
y2: artboard.get('height') + artboard.get('top'),
})
.setCoords();
canvas.renderAll();
}
}
// Check for vertical snapping
function checkVSnap(a, b, snapZone, e, type) {
if (a > b - snapZone && a < b + snapZone) {
line_v.opacity = 1;
line_v.bringToFront();
var value = b;
if (type == 1) {
value = b;
} else if (type == 2) {
value =
b -
(e.target.get('height') * e.target.get('scaleY')) / 2;
} else if (type == 3) {
value =
b +
(e.target.get('height') * e.target.get('scaleY')) / 2;
}
e.target
.set({
top: value,
})
.setCoords();
line_v
.set({
y1: b,
x1: artboard.get('left'),
y2: b,
x2: artboard.get('width') + artboard.get('left'),
})
.setCoords();
canvas.renderAll();
}
}
if (obj != e.target && obj != line_h && obj != line_v) {
if (
obj.get('id') == 'center_h' ||
obj.get('id') == 'center_v'
) {
var check1 = [[obj_left, obj.get('left'), 1]];
var check2 = [[obj_top, obj.get('top'), 1]];
for (var i = 0; i < check1.length; i++) {
checkHSnap(
check1[i][0],
check1[i][1],
snapZone,
e,
check1[i][2]
);
checkVSnap(
check2[i][0],
check2[i][1],
snapZone,
e,
check2[i][2]
);
}
} else {
var check1 = [
[obj_left, obj.get('left'), 1],
[
obj_left,
obj.get('left') +
(obj.get('width') * obj.get('scaleX')) / 2,
1,
],
[
obj_left,
obj.get('left') -
(obj.get('width') * obj.get('scaleX')) / 2,
1,
],
[obj_left + obj_width / 2, obj.get('left'), 2],
[
obj_left + obj_width / 2,
obj.get('left') +
(obj.get('width') * obj.get('scaleX')) / 2,
2,
],
[
obj_left + obj_width / 2,
obj.get('left') -
(obj.get('width') * obj.get('scaleX')) / 2,
2,
],
[obj_left - obj_width / 2, obj.get('left'), 3],
[
obj_left - obj_width / 2,
obj.get('left') +
(obj.get('width') * obj.get('scaleX')) / 2,
3,
],
[
obj_left - obj_width / 2,
obj.get('left') -
(obj.get('width') * obj.get('scaleX')) / 2,
3,
],
];
var check2 = [
[obj_top, obj.get('top'), 1],
[
obj_top,
obj.get('top') +
(obj.get('height') * obj.get('scaleY')) / 2,
1,
],
[
obj_top,
obj.get('top') -
(obj.get('height') * obj.get('scaleY')) / 2,
1,
],
[obj_top + obj_height / 2, obj.get('top'), 2],
[
obj_top + obj_height / 2,
obj.get('top') +
(obj.get('height') * obj.get('scaleY')) / 2,
2,
],
[
obj_top + obj_height / 2,
obj.get('top') -
(obj.get('height') * obj.get('scaleY')) / 2,
2,
],
[obj_top - obj_height / 2, obj.get('top'), 3],
[
obj_top - obj_height / 2,
obj.get('top') +
(obj.get('height') * obj.get('scaleY')) / 2,
3,
],
[
obj_top - obj_height / 2,
obj.get('top') -
(obj.get('height') * obj.get('scaleY')) / 2,
3,
],
];
for (var i = 0; i < check1.length; i++) {
checkHSnap(
check1[i][0],
check1[i][1],
snapZone,
e,
check1[i][2]
);
checkVSnap(
check2[i][0],
check2[i][1],
snapZone,
e,
check2[i][2]
);
}
}
}
});
}
}