graphInit({
range: [[-10, 16], [-10, 16]],
scale: [22, 22],
tickStep: 2,
labelStep: 1,
unityLabels: true
});
style({
stroke: "black",
strokeWidth: "1px"
});
//
// initialization
//
addMouseLayer({
onClick: function(e) {
//console.log("click at " + e);
},
onMouseDown: function(e) {
//console.log("mouse down at " + e);
},
onMouseMove: function(e) {
//console.log("dragging at " + e);
},
onMouseOver: function(e) {
//console.log("mouse over " + e);
},
onMouseOut: function(e) {
//console.log("mouse out " + e);
}
});
//
// movable points
//
graph.p1 = addMovablePoint({});
graph.p2 = addMovablePoint({
coord: [2,0],
snapX: 1,
snapY: 1,
pointSize: 8,
visible: true,
constraints: {
fixed: false,
constrainX: false,
constrainY: false,
fixedAngle: {},
/*fixedAngle: {
angle: 45,
vertex: [2,0],
ref: [X,Y]
}*/
fixedDist: {},
/*fixedDistance: {
dist: 5,
point: [0,0]
}*/
},
normalStyle: {
fill: RED,
stroke: RED
},
highlightStyle: {
fill: RED,
stroke: RED
},
labelStyle: {
color: RED
},
vertexLabel: "p2"
});
// move point without any animation
graph.p1.setCoord([1, 0]);
// move point in accordance with constraints and snap
graph.p2.setCoordConstrained([0.5, 3]);
// redraw label
graph.p2.drawLabel();
// to simulate the user clicking on the point
// graph.p1.grab();
// Check new coordinates against constraints
var constrained_coords = graph.p1.applyConstraint(
[10, 6],
{constrainX:true},
false // whether or not already set constraints of the point are overwritten
);
console.log(constrained_coords);
// move with animation
graph.p1.moveTo(constrained_coords[0], constrained_coords[1]);
// move point to front
graph.p1.toFront();
// move point to black
graph.p1.toBack();
// remove point
// graph.p1.remove();
// custom move fixed point
graph.custom_p = addMovablePoint({
coord: [10, 2],
constraints: {
fixed: true
}
});
graph.custom_p.visibleShape.animateTo([14, 10], 10000, function(coord) {
graph.custom_p.coord = coord;
graph.custom_p.updateLineEnds();
});
//
// line segments
//
graph.p3 = addMovablePoint({
coord: [6, -6]
});
graph.p4 = addMovablePoint({
coord: [8, -8]
});
// TODO
//
// graphie-like functions
//
drawArcs(
[12, 14],
[8, 14],
[5, 3],
2
);
labelAngle({
point1: [10, 10],
vertex: [6, 10],
point3: [6, 3],
text: "\\alpha",
label: null, // already constructed label can be used
numArcs: 2,
showRightAngleMarker: true,
pushOut: 0,
clockwise: false,
style: {}
});
labelSide({
point1: [-6, 6],
point2: [-8, 8],
text: "\\text{line}",
label: null,
numTicks: 2,
numArrows: 3,
clockwise: true,
style: {}
});
labelVertex({
point1: null,
vertex: [-8, -6],
point3: null,
text: "v",
label: null,
closckwise: false,
style: {}
});
// just for visualisation
line([12, 14], [8, 14]);
line([8, 14], [5, 3]);
line([10, 10], [6, 10]);
line([6, 10], [6, 3]);
line([-6, 6], [-8, 8]);