Skip to content

Commit

Permalink
Polish graphing widget xomManatee styles
Browse files Browse the repository at this point in the history 
Summary: Includes cleanup of point-tooltip shadow management, removes shadows on selected points, disables crispedges on paths, and displays hairlines in the plotter widget.

Test Plan:
- Verified in Perseus demo that all styles render correctly
- Verified that without the xomManatee flag all the widgets look the same as before

Reviewers: kevinb

Reviewed By: kevinb

Subscribers: jared

Differential Revision: https://phabricator.khanacademy.org/D29797
  • Loading branch information
@shadaj
shadaj committed Aug 8, 2016
1 parent 80291b8 commit 9ea7888
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 18 deletions.
26 changes: 22 additions & 4 deletions src/interactive2/movable-point.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,10 +302,9 @@ _.extend(MovablePoint.prototype, {
);
}

const svgElem = state.visibleShape.wrapper;
if (state.shadow) {
const filter =
"drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.8))";
const svgElem = state.visibleShape.wrapper;
const filter = "none";
svgElem.style.webkitFilter = filter;
svgElem.style.filter = filter;
}
Expand All @@ -322,6 +321,16 @@ _.extend(MovablePoint.prototype, {
this._showTooltip(
`(${state.coord[0]}, ${state.coord[1]})`);
}

if (state.shadow) {
const content = svgElem
.getElementsByClassName("tooltip-content")[0];
const filter =
"drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";

content.style.webkitFilter = filter;
content.style.filter = filter;
}
}

self._fireEvent(state.onMoveStart, startCoord, startCoord);
Expand Down Expand Up @@ -362,10 +371,11 @@ _.extend(MovablePoint.prototype, {
self._fireEvent(state.onClick, state.coord, startCoord);
}

const svgElem = state.visibleShape.wrapper;

if (state.shadow) {
const filter =
"drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5))";
const svgElem = state.visibleShape.wrapper;
svgElem.style.webkitFilter = filter;
svgElem.style.filter = filter;
}
Expand All @@ -381,6 +391,12 @@ _.extend(MovablePoint.prototype, {
// tooltips.
showTrashTooltip();

const content =
svgElem.getElementsByClassName("tooltip-content")[0];

content.style.webkitFilter = "none";
content.style.filter = "none";

this._tooltip.firstChild.addEventListener("touchstart",
(e) => {
// Prevent creation of a new point when the event is
Expand All @@ -395,6 +411,8 @@ _.extend(MovablePoint.prototype, {
state.onRemove();
e.stopPropagation();
}, true);
} else if (state.tooltip) {
this._hideTooltip();
}

if (state.outOfBounds) {
Expand Down
17 changes: 7 additions & 10 deletions src/util/graphie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,11 +416,6 @@ GraphUtils.createGraphie = function(el) {
"stroke-linecap": "round",
});

if (graphie.xomManatee) {
subpath.node.style.shapeRendering = "crispEdges";
head.node.style.shapeRendering = "crispEdges";
}

head.arrowheadsDrawn = true;
set.push(subpath);
set.push(head);
Expand Down Expand Up @@ -531,10 +526,6 @@ GraphUtils.createGraphie = function(el) {
const p = raphael.path(svgPath(points));
p.graphiePath = points;

if (graphie.xomManatee) {
p.node.style.shapeRendering = "crispEdges";
}

return p;
},

Expand Down Expand Up @@ -604,7 +595,13 @@ GraphUtils.createGraphie = function(el) {
},

line: function(start, end) {
return this.path([start, end]);
const l = this.path([start, end]);

if (graphie.xomManatee) {
l.node.style.shapeRendering = "crispEdges";
}

return l;
},

parabola: function(a, b, c) {
Expand Down
38 changes: 38 additions & 0 deletions src/widgets/plotter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const KhanMath = require("../util/math.js");
const KhanColors = require("../util/colors.js");
const GraphUtils = require("../util/graph-utils.js");
const Interactive2 = require("../interactive2.js");
const WrappedLine = require("../interactive2/wrapped-line.js");

var BAR = "bar",
LINE = "line",
Expand Down Expand Up @@ -336,6 +337,43 @@ var Plotter = React.createClass({
.css("font-weight", "bold")
.css("color", xomManatee && KhanColors.GRAY_F)
.addClass("rotate");

if (this.props.apiOptions.xomManatee) {
this.horizHairline =
new WrappedLine(this.graphie, [0, 0], [0, 0], {
normalStyle: {
strokeWidth: 1
}
});
this.horizHairline.attr({
stroke: KhanColors.INTERACTIVE,
});
this.horizHairline.hide();

this.hairlineRange =
[[0, c.dimX], [0, c.dimY]];
}
},

showHairlines: function(point) {
if (this.props.apiOptions.xomManatee &&
this.props.markings !== "none") {
// Hairlines are already initialized when the graph is loaded, so
// here we just move them to the updated location and make them
// visible.
this.horizHairline.moveTo(
[this.hairlineRange[0][0], point[1]],
[this.hairlineRange[0][1], point[1]]
);

this.horizHairline.show();
}
},

hideHairlines: function() {
if (this.props.apiOptions.xomManatee) {
this.horizHairline.hide();
}
},

labelCategory: function(x, category) {
Expand Down
7 changes: 3 additions & 4 deletions stylesheets/exercise-content-package/widgets/interactive-graph.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
z-index: 2;
}

.tooltip.visible:before {
.tooltip.visible .tooltip-content:before {
border: solid;
border-color: white transparent;
border-width: 10px 10px 0 10px;
bottom: 40px;
bottom: -10px;
content: "";
left: 50%;
transform: translateX(-50%);
Expand All @@ -37,8 +37,7 @@

.tooltip.visible .tooltip-content {
display: inline-block;
background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 5px;
bottom: 50px;

Expand Down

0 comments on commit 9ea7888

Please sign in to comment.