Skip to content

Draw & adjust new shapes over image trace and cartesian subplots - #4775

Merged
archmoj merged 71 commits into
masterfrom
shape-drawing
Apr 28, 2020
Merged

Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom
shape-drawing

Conversation

@archmoj

@archmojarchmoj commented Apr 20, 2020•
edited
Loading

Copy link
Copy Markdown
Contributor

Resolves#4374.

As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).

New layout attributes are

{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit

plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119 in 891b6a1

newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}

as well as

plotly.js/src/components/shapes/attributes.js

Lines 241 to 261 in 891b6a1

fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')
.

New modebar buttons could simply be added by passing strings (instead of objects) in config.
For example:

modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']

@plotly/plotly_js
@emmanuelle

@archmojarchmoj added this to the v1.54.0 milestone Apr 20, 2020
@alexcjohnson

alexcjohnson commented Apr 20, 2020

Copy link
Copy Markdown
Collaborator

New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.

Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)

alexcjohnson
alexcjohnson reviewed Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js Outdated
alexcjohnson
alexcjohnson reviewed Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson reviewed Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js Outdated
alexcjohnson
alexcjohnson reviewed Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js Outdated
@archmoj

archmoj commented Apr 20, 2020

Copy link
Copy Markdown
ContributorAuthor

New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.

Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)

Good call. Revised in a585394.

alexcjohnson
alexcjohnson reviewed Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js Outdated
alexcjohnson
alexcjohnson reviewed Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js Outdated
@archmoj

archmoj commented Apr 28, 2020•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

@alexcjohnson here is a demo with shapes on template.

alexcjohnson
alexcjohnson approved these changes Apr 28, 2020
View reviewed changes

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺

@jackparmer

jackparmer commented Apr 28, 2020

Copy link
Copy Markdown
Contributor

Incredible work as always Mojtaba!!

@archmoj
archmoj merged commit 891b6a1 into masterApr 28, 2020
@archmoj
archmoj deleted the shape-drawing branch April 28, 2020 20:24
@emmanuelle

emmanuelle commented Apr 28, 2020

Copy link
Copy Markdown
Contributor

Hurray! 🎉 😍

@pfebrer

pfebrer commented May 11, 2020

Copy link
Copy Markdown

Just wanted to say that this is amazing :)

I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.

Thanks in advance and sorry if the question does not belong here.

@nicolaskruchten

nicolaskruchten commented May 11, 2020

Copy link
Copy Markdown
Contributor

Glad you like it!

In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.

@pfebrer

pfebrer commented May 11, 2020

Copy link
Copy Markdown

Makes sense 😄

I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!

@HTenkanenHTenkanen mentioned this pull request Jun 18, 2020
Closed
@archmojarchmoj mentioned this pull request May 14, 2021
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes
+1 more reviewer
@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

featuresomething new

Projects

None yet

Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing

6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Draw & adjust new shapes over image trace and cartesian subplots by archmoj · Pull Request #4775 · plotly/plotly.js · GitHub
Skip to content
Draw & adjust new shapes over image trace and cartesian subplots - #4775
Merged
archmoj merged 71 commits into
masterfrom 
shape-drawing
Apr 28, 2020
Merged
Draw & adjust new shapes over image trace and cartesian subplots#4775
archmoj merged 71 commits into
masterfrom 
shape-drawing
Conversation
@archmoj
@archmojarchmoj
commented
Apr 20, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
Resolves#4374.
As illustrated in demo, this PR enables drawing and editing shapes over image trace (as well as cartesian subplots).
New layout attributes are
{
`shape`: {
`fillrule`: 'evenodd' | 'nonzero'
`editable`: false | true
},
`newshape`: {
`line`: {
`width`:
`dash`:
`color`:
},
`fillcolor`:
`fillrule`: 'evenodd' | 'nonzero'
`opacity`:
`layer`: 'above' | 'below'
`drawdirection`: 'diagonal' | 'horizontal' | 'vertical' | 'ortho' },
`activeshape: {
`fillcolor`:
`opacity`:
}
}

For more info regarding new attributes, please visit 
plotly.js/src/components/shapes/draw_newshape/attributes.js

Lines 15 to 119
in
891b6a1
newshape: {
line: {
color: {
valType: 'color',
editType: 'none',
role: 'info',
description: [
'Sets the line color.',
'By default uses either dark grey or white',
'to increase contrast with background color.'
].join(' ')
},
width: {
valType: 'number',
min: 0,
dflt: 4,
role: 'info',
editType: 'none',
description: 'Sets the line width (in px).'
},
dash: extendFlat({},dash,{
dflt: 'solid',
editType: 'none'
}),
role: 'info',
editType: 'none'
},
fillcolor: {
valType: 'color',
dflt: 'rgba(0,0,0,0)',
role: 'info',
editType: 'none',
description: [
'Sets the color filling new shapes\' interior.',
'Please note that if using a fillcolor with alpha greater than half,',
'drag inside the active shape starts moving the shape underneath,',
'otherwise a new shape could be started over.'
].join(' ')
},
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'none',
description: [
'Determines the path\'s interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 1,
role: 'info',
editType: 'none',
description: 'Sets the opacity of new shapes.'
},
layer: {
valType: 'enumerated',
values: ['below','above'],
dflt: 'above',
role: 'info',
editType: 'none',
description: 'Specifies whether new shapes are drawn below or above traces.'
},
drawdirection: {
valType: 'enumerated',
role: 'info',
values: ['ortho','horizontal','vertical','diagonal'],
dflt: 'diagonal',
editType: 'none',
description: [
'When `dragmode` is set to *drawrect*, *drawline* or *drawcircle*',
'this limits the drag to be horizontal, vertical or diagonal.',
'Using *diagonal* there is no limit e.g. in drawing lines in any direction.',
'*ortho* limits the draw to be either horizontal or vertical.',
'*horizontal* allows horizontal extend.',
'*vertical* allows vertical extend.'
].join(' ')
},
editType: 'none'
},
activeshape: {
fillcolor: {
valType: 'color',
dflt: 'rgb(255,0,255)',
role: 'style',
editType: 'none',
description: 'Sets the color filling the active shape\' interior.'
},
opacity: {
valType: 'number',
min: 0,
max: 1,
dflt: 0.5,
role: 'info',
editType: 'none',
description: 'Sets the opacity of the active shape.'
},
editType: 'none'
}


as well as
plotly.js/src/components/shapes/attributes.js

Lines 241 to 261
in
891b6a1
fillrule: {
valType: 'enumerated',
values: ['evenodd','nonzero'],
dflt: 'evenodd',
role: 'info',
editType: 'arraydraw',
description: [
'Determines which regions of complex paths constitute the interior.',
'For more info please visit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule'
].join(' ')
},
editable: {
valType: 'boolean',
role: 'info',
dflt: false,
editType: 'calc+arraydraw',
description: [
'Determines whether the shape could be activated for edit or not.',
'Has no effect when the older editable shapes mode is enabled via',
'`config.editable` or `config.edits.shapePosition`.'
].join(' ')

.
New modebar buttons could simply be added by passing strings (instead of objects) in config.

For example:
modeBarButtonsToAdd: ['drawline','drawopenpath','drawclosedpath','drawcircle','drawrect','eraseshape']
@plotly/plotly_js
@emmanuelle
@archmojarchmoj
added this to the v1.54.0 milestone
Apr 20, 2020
@alexcjohnson
alexcjohnson
commented
Apr 20, 2020

Copy link


Copy Markdown

Collaborator
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/modebar/manage.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/defaults.js
alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 20, 2020
View reviewed changes
Comment threadsrc/components/shapes/attributes.js
Outdated

@archmoj
archmoj
commented
Apr 20, 2020

Copy link


Copy Markdown

ContributorAuthor
New dragmode options are linedraw, rectdraw, ellipsedraw, closedfreedraw and openfreedraw.
Thoughts on naming? I might vote for:
drawline
drawrect
drawcircle (because even though it doesn't need to be 1:1, the shape you make is type: 'circle'),
drawfreeclosed, drawfreeopen (or maybe drawclosedpath and drawopenpath?)
Good call. Revised in a585394.
alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

alexcjohnson
alexcjohnson
reviewed
Apr 21, 2020
View reviewed changes
Comment threadsrc/plots/cartesian/handle_outline.js
Outdated

@archmoj
archmoj
commented
Apr 28, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
@alexcjohnson here is a demo with shapes on template.
alexcjohnson
alexcjohnson
approved these changes
Apr 28, 2020
View reviewed changes
@alexcjohnsonalexcjohnson
left a comment


Copy link


Copy Markdown

Collaborator
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 👯 🕺
@jackparmer
jackparmer
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Incredible work as always Mojtaba!!
@archmoj
archmoj
merged commit 891b6a1
into
masterApr 28, 2020
@archmoj
archmoj
deleted the

shape-drawing

branch
April 28, 2020 20:24
@emmanuelle
emmanuelle
commented
Apr 28, 2020

Copy link


Copy Markdown

Contributor
Hurray! 🎉 😍
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Just wanted to say that this is amazing :)
I hope you don't mind this quick question: Are these changes automatically available in react-plotly.js? I updated plotly.py and it works, but when I try it on react I just get a white canvas.
Thanks in advance and sorry if the question does not belong here.
@nicolaskruchten
nicolaskruchten
commented
May 11, 2020

Copy link


Copy Markdown

Contributor
Glad you like it!
In principle these should be available in react-plotly.js if you upgrade the version of plotly.js via npm install or yarn install, yes.
@pfebrer
pfebrer
commented
May 11, 2020

Copy link


Copy Markdown

Makes sense 😄
I somehow thought that plotly.js would get updated automatically when I reinstalled react-plotly.js. All good now, thanks!
@HTenkanenHTenkanen
mentioned this pull request
Jun 18, 2020

Closed

@archmojarchmoj
mentioned this pull request
May 14, 2021
 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@alexcjohnsonalexcjohnsonalexcjohnson approved these changes

+1 more reviewer

@nicolaskruchtennicolaskruchtennicolaskruchten left review comments
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

featuresomething new

Projects


None yet


Milestone

v1.54.0

Development

Successfully merging this pull request may close these issues.

Shape drawing


6 participants

@archmoj@alexcjohnson@jackparmer@emmanuelle@pfebrer@nicolaskruchten