Merge pull request #1999 from plotly/edit-refactor

restyle/relayout refactor

Author: alexcjohnson

package.json

@@ -119,6 +119,7 @@
     "gzip-size": "^3.0.0",
     "image-size": "^0.5.1",
     "jasmine-core": "^2.4.1",
+    "jsdom": "^11.2.0",
     "karma": "^1.5.0",
     "karma-browserify": "^5.1.1",
     "karma-chrome-launcher": "^2.0.0",

src/components/annotations/arrow_paths.js

@@ -9,14 +9,13 @@
 'use strict';
 
 /**
- * centerx is a center of scaling tuned for maximum scalability of
- * the arrowhead ie throughout mag=0.3..3 the head is joined smoothly
- * to the line, but the endpoint moves.
- * backoff is the distance to move the arrowhead, and the end of the
- * line, in order to end at the right place
- *
- * TODO: option to have the pointed-to  point a little in front of the
- * end of the line, as people tend to want a bit of a gap there...
+ * All paths are tuned for maximum scalability of the arrowhead,
+ * ie throughout arrowwidth=0.3..3 the head is joined smoothly
+ * to the line, with the line coming from the left and ending at (0, 0).
+ * `backoff` is the distance to move the arrowhead and the end of the line,
+ * in order that the arrowhead points to the desired place, either at
+ * the tip of the arrow or (in the case of circle or square)
+ * the center of the symbol.
  */
 
 module.exports = [

src/components/annotations/attributes.js

@@ -11,7 +11,6 @@
 var ARROWPATHS = require('./arrow_paths');
 var fontAttrs = require('../../plots/font_attributes');
 var cartesianConstants = require('../../plots/cartesian/constants');
-var extendFlat = require('../../lib/extend').extendFlat;
 
 
 module.exports = {
@@ -21,6 +20,7 @@ module.exports = {
         valType: 'boolean',
         role: 'info',
         dflt: true,
+        editType: 'calcIfAutorange',
         description: [
             'Determines whether or not this annotation is visible.'
         ].join(' ')
@@ -29,6 +29,7 @@ module.exports = {
     text: {
         valType: 'string',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the text associated with this annotation.',
             'Plotly uses a subset of HTML tags to do things like',
@@ -41,19 +42,23 @@ module.exports = {
         valType: 'angle',
         dflt: 0,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the angle at which the `text` is drawn',
             'with respect to the horizontal.'
         ].join(' ')
     },
-    font: extendFlat({}, fontAttrs, {
+    font: fontAttrs({
+        editType: 'calcIfAutorange',
+        colorEditType: 'arraydraw',
         description: 'Sets the annotation text font.'
     }),
     width: {
         valType: 'number',
         min: 1,
         dflt: null,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets an explicit width for the text box. null (default) lets the',
             'text set the box width. Wider text will be clipped.',
@@ -65,6 +70,7 @@ module.exports = {
         min: 1,
         dflt: null,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets an explicit height for the text box. null (default) lets the',
             'text set the box height. Taller text will be clipped.'
@@ -76,13 +82,15 @@ module.exports = {
         max: 1,
         dflt: 1,
         role: 'style',
+        editType: 'arraydraw',
         description: 'Sets the opacity of the annotation (text + arrow).'
     },
     align: {
         valType: 'enumerated',
         values: ['left', 'center', 'right'],
         dflt: 'center',
         role: 'style',
+        editType: 'arraydraw',
         description: [
             'Sets the horizontal alignment of the `text` within the box.',
             'Has an effect only if `text` spans more two or more lines',
@@ -95,6 +103,7 @@ module.exports = {
         values: ['top', 'middle', 'bottom'],
         dflt: 'middle',
         role: 'style',
+        editType: 'arraydraw',
         description: [
             'Sets the vertical alignment of the `text` within the box.',
             'Has an effect only if an explicit height is set to override',
@@ -105,12 +114,14 @@ module.exports = {
         valType: 'color',
         dflt: 'rgba(0,0,0,0)',
         role: 'style',
+        editType: 'arraydraw',
         description: 'Sets the background color of the annotation.'
     },
     bordercolor: {
         valType: 'color',
         dflt: 'rgba(0,0,0,0)',
         role: 'style',
+        editType: 'arraydraw',
         description: [
             'Sets the color of the border enclosing the annotation `text`.'
         ].join(' ')
@@ -120,6 +131,7 @@ module.exports = {
         min: 0,
         dflt: 1,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the padding (in px) between the `text`',
             'and the enclosing border.'
@@ -130,6 +142,7 @@ module.exports = {
         min: 0,
         dflt: 1,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the width (in px) of the border enclosing',
             'the annotation `text`.'
@@ -140,6 +153,7 @@ module.exports = {
         valType: 'boolean',
         dflt: true,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Determines whether or not the annotation is drawn with an arrow.',
             'If *true*, `text` is placed near the arrow\'s tail.',
@@ -149,6 +163,7 @@ module.exports = {
     arrowcolor: {
         valType: 'color',
         role: 'style',
+        editType: 'arraydraw',
         description: 'Sets the color of the annotation arrow.'
     },
     arrowhead: {
@@ -157,26 +172,33 @@ module.exports = {
         max: ARROWPATHS.length,
         dflt: 1,
         role: 'style',
+        editType: 'arraydraw',
         description: 'Sets the annotation arrow head style.'
     },
     arrowsize: {
         valType: 'number',
         min: 0.3,
         dflt: 1,
         role: 'style',
-        description: 'Sets the size (in px) of annotation arrow head.'
+        editType: 'calcIfAutorange',
+        description: [
+            'Sets the size of the annotation arrow head, relative to `arrowwidth`.',
+            'A value of 1 (default) gives a head about 3x as wide as the line.'
+        ].join(' ')
     },
     arrowwidth: {
         valType: 'number',
         min: 0.1,
         role: 'style',
-        description: 'Sets the width (in px) of annotation arrow.'
+        editType: 'calcIfAutorange',
+        description: 'Sets the width (in px) of annotation arrow line.'
     },
     standoff: {
         valType: 'number',
         min: 0,
         dflt: 0,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Sets a distance, in pixels, to move the arrowhead away from the',
             'position it is pointing at, for example to point at the edge of',
@@ -188,6 +210,7 @@ module.exports = {
     ax: {
         valType: 'any',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the x component of the arrow tail about the arrow head.',
             'If `axref` is `pixel`, a positive (negative) ',
@@ -200,6 +223,7 @@ module.exports = {
     ay: {
         valType: 'any',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the y component of the arrow tail about the arrow head.',
             'If `ayref` is `pixel`, a positive (negative) ',
@@ -217,6 +241,7 @@ module.exports = {
             cartesianConstants.idRegex.x.toString()
         ],
         role: 'info',
+        editType: 'calc',
         description: [
             'Indicates in what terms the tail of the annotation (ax,ay) ',
             'is specified. If `pixel`, `ax` is a relative offset in pixels ',
@@ -234,6 +259,7 @@ module.exports = {
             cartesianConstants.idRegex.y.toString()
         ],
         role: 'info',
+        editType: 'calc',
         description: [
             'Indicates in what terms the tail of the annotation (ax,ay) ',
             'is specified. If `pixel`, `ay` is a relative offset in pixels ',
@@ -251,6 +277,7 @@ module.exports = {
             cartesianConstants.idRegex.x.toString()
         ],
         role: 'info',
+        editType: 'calc',
         description: [
             'Sets the annotation\'s x coordinate axis.',
             'If set to an x axis id (e.g. *x* or *x2*), the `x` position',
@@ -263,6 +290,7 @@ module.exports = {
     x: {
         valType: 'any',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the annotation\'s x position.',
             'If the axis `type` is *log*, then you must take the',
@@ -280,6 +308,7 @@ module.exports = {
         values: ['auto', 'left', 'center', 'right'],
         dflt: 'auto',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the text box\'s horizontal position anchor',
             'This anchor binds the `x` position to the *left*, *center*',
@@ -298,6 +327,7 @@ module.exports = {
         valType: 'number',
         dflt: 0,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Shifts the position of the whole annotation and arrow to the',
             'right (positive) or left (negative) by this many pixels.'
@@ -310,6 +340,7 @@ module.exports = {
             cartesianConstants.idRegex.y.toString()
         ],
         role: 'info',
+        editType: 'calc',
         description: [
             'Sets the annotation\'s y coordinate axis.',
             'If set to an y axis id (e.g. *y* or *y2*), the `y` position',
@@ -322,6 +353,7 @@ module.exports = {
     y: {
         valType: 'any',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the annotation\'s y position.',
             'If the axis `type` is *log*, then you must take the',
@@ -339,6 +371,7 @@ module.exports = {
         values: ['auto', 'top', 'middle', 'bottom'],
         dflt: 'auto',
         role: 'info',
+        editType: 'calcIfAutorange',
         description: [
             'Sets the text box\'s vertical position anchor',
             'This anchor binds the `y` position to the *top*, *middle*',
@@ -357,6 +390,7 @@ module.exports = {
         valType: 'number',
         dflt: 0,
         role: 'style',
+        editType: 'calcIfAutorange',
         description: [
             'Shifts the position of the whole annotation and arrow up',
             '(positive) or down (negative) by this many pixels.'
@@ -367,6 +401,7 @@ module.exports = {
         values: [false, 'onoff', 'onout'],
         dflt: false,
         role: 'style',
+        editType: 'arraydraw',
         description: [
             'Makes this annotation respond to clicks on the plot.',
             'If you click a data point that exactly matches the `x` and `y`',
@@ -385,6 +420,7 @@ module.exports = {
     xclick: {
         valType: 'any',
         role: 'info',
+        editType: 'arraydraw',
         description: [
             'Toggle this annotation when clicking a data point whose `x` value',
             'is `xclick` rather than the annotation\'s `x` value.'
@@ -393,6 +429,7 @@ module.exports = {
     yclick: {
         valType: 'any',
         role: 'info',
+        editType: 'arraydraw',
         description: [
             'Toggle this annotation when clicking a data point whose `y` value',
             'is `yclick` rather than the annotation\'s `y` value.'
@@ -401,6 +438,7 @@ module.exports = {
     hovertext: {
         valType: 'string',
         role: 'info',
+        editType: 'arraydraw',
         description: [
             'Sets text to appear when hovering over this annotation.',
             'If omitted or blank, no hover label will appear.'
@@ -410,6 +448,7 @@ module.exports = {
         bgcolor: {
             valType: 'color',
             role: 'style',
+            editType: 'arraydraw',
             description: [
                 'Sets the background color of the hover label.',
                 'By default uses the annotation\'s `bgcolor` made opaque,',
@@ -419,23 +458,27 @@ module.exports = {
         bordercolor: {
             valType: 'color',
             role: 'style',
+            editType: 'arraydraw',
             description: [
                 'Sets the border color of the hover label.',
                 'By default uses either dark grey or white, for maximum',
                 'contrast with `hoverlabel.bgcolor`.'
             ].join(' ')
         },
-        font: extendFlat({}, fontAttrs, {
+        font: fontAttrs({
+            editType: 'arraydraw',
             description: [
                 'Sets the hover label text font.',
                 'By default uses the global hover font and size,',
                 'with color from `hoverlabel.bordercolor`.'
             ].join(' ')
-        })
+        }),
+        editType: 'arraydraw'
     },
     captureevents: {
         valType: 'boolean',
         role: 'info',
+        editType: 'arraydraw',
         description: [
             'Determines whether the annotation text box captures mouse move',
             'and click events, or allows those events to pass through to data',
@@ -445,11 +488,13 @@ module.exports = {
             'you must explicitly enable `captureevents`.'
         ].join(' ')
     },
+    editType: 'calc',
 
     _deprecated: {
         ref: {
             valType: 'string',
             role: 'info',
+            editType: 'calc',
             description: [
                 'Obsolete. Set `xref` and `yref` separately instead.'
             ].join(' ')

src/components/annotations3d/attributes.js

@@ -10,8 +10,9 @@
 'use strict';
 
 var annAtts = require('../annotations/attributes');
+var overrideAll = require('../../plot_api/edit_types').overrideAll;
 
-module.exports = {
+module.exports = overrideAll({
     _isLinkedToArray: 'annotation',
 
     visible: annAtts.visible,
@@ -76,7 +77,7 @@ module.exports = {
     standoff: annAtts.standoff,
     hovertext: annAtts.hovertext,
     hoverlabel: annAtts.hoverlabel,
-    captureevents: annAtts.captureevents
+    captureevents: annAtts.captureevents,
 
     // maybes later?
     // clicktoshow: annAtts.clicktoshow,
@@ -89,4 +90,4 @@ module.exports = {
     // xref: 'x'
     // yref: 'y
     // zref: 'z'
-};
+}, 'calc', 'from-root');