property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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('^' + ".*" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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('^' + ".*" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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('^' + ".*" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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('^' + ".*" + '
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors
, '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); } })(); })();
Skip to content

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates - #7005

Merged
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift
Jul 16, 2024
Merged

property x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinates#7005
archmoj merged 26 commits into
plotly:masterfrom
my-tien:shape_shift

Conversation

@my-tien

@my-tienmy-tien commented May 27, 2024

Copy link
Copy Markdown
Contributor

This property adjusts the shape coordinates if xref/yref references a (multi-)category axis.

A shape at position x0/x1 = "A"
image

with x0shift = 0.5
image

Disclaimer I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

@my-tienmy-tien changed the title property shape.x_shift/y_shift for adjusting the shape coordinatesproperty x_shift/y_shift for adjusting the shape/selection coordinatesMay 27, 2024
@archmojarchmoj added feature something new community community contribution status: reviewable labels May 30, 2024
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/selections/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js
Comment threadsrc/components/selections/defaults.js Outdated
Comment threadsrc/components/shapes/defaults.js Outdated
Comment threadsrc/components/shapes/helpers.js Outdated
'the reference unit.'
].join(' ')
},

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We should also add these to newselection and test it.

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json
"y1": 0.5,
"xshift": -0.25,
"yref": "paper"
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this also working for a path?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

No, this should only do something when using x0, x1, y0, y1

@archmoj

Copy link
Copy Markdown
Contributor

Interesting PR for shapes and selections.
But I started wondering perhaps we should add a categoryshift option to Cartesian axes instead?

@archmoj

Copy link
Copy Markdown
Contributor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

@archmoj

Copy link
Copy Markdown
Contributor

Let's ask @alexcjohnson to review 🔎

Comment threadtest/image/mocks/zzz_shape_shift_horizontal.json Outdated
@my-tien

my-tien commented Jun 3, 2024

Copy link
Copy Markdown
ContributorAuthor

I am wondering if adding a categoryselectionstart, categoryselectionend, categoryshapestart and categoryshapeend to cartesian axes is a better option?

Here is a PR with this suggestion for shapes only: #7010 (I actually only included selection in this PR, because it reuses shape properties.)

@archmoj

Copy link
Copy Markdown
Contributor

Considering #7010 (comment) discussion,
two attributes are needed for start and the end i.e. instead of xshift which is already implemented we need x0shift and x1shift.

Comment threadsrc/components/selections/attributes.js Outdated
@archmoj

Copy link
Copy Markdown
Contributor

Thanks for the simplification.
Please update the PR title and description.
Also zzz_shape_shift_vertical image test is failing now.

@archmoj

Copy link
Copy Markdown
Contributor

@stephprobst Do you have a use case for date axes?
If so it could be possible to add these options for other axis types.

Comment threadsrc/components/shapes/helpers.js Outdated
@stephprobst

Copy link
Copy Markdown

@stephprobst Do you have a use case for date axes? If so it could be possible to add these options for other axis types.

@archmoj No, I don't think this is relevant for other axes. The rationale for this property is to allow exact positioning of a shape based on the axis value. For categorical axes this is needed, because it allows the combination of categorical and numerical values (e.g. country "Canada" plus a shift of 0.5 to position the shape at the end of the categories interval on the axis). On numerical or date axes this isn't really needed, since the user can directly select the precise numerical or date value (e.g. "2023-12-31" to position a shape at the end of year 2023).

My proposal would be to skip the implementation for date and numeric axes.

@my-tienmy-tien changed the title property x0shift, x1shift, y0shift, y1shift for adjusting the shape/selection coordinatesproperty x0shift, x1shift, y0shift, y1shift for adjusting the shape coordinatesJul 11, 2024
Comment threadsrc/components/shapes/calc_autorange.js
Comment threadsrc/components/shapes/helpers.js
@archmoj

Copy link
Copy Markdown
Contributor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

@archmoj

Copy link
Copy Markdown
Contributor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock.
Thank you!

@my-tien

Copy link
Copy Markdown
ContributorAuthor

Please also test texttemplate on your mocks to show the slopes similar to those in the text_on_shapes_texttemplate mock. Thank you!

I noticed that I didn't account for the shift for the texttemplate. Fixed that and added a test shape with slope and xcenter.

@my-tien

Copy link
Copy Markdown
ContributorAuthor

When shape.editable is set to true, clicking the shape and editing the position of a vertex result in the wrong positioning of the updated shape.

Fixed

Comment threadsrc/components/shapes/attributes.js Outdated
Comment threadsrc/components/shapes/attributes.js Outdated

@archmojarchmoj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks @my-tien for the PR 🥇
💃

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

Labels

communitycommunity contributionfeaturesomething new

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants

@my-tien@archmoj@stephprobst@alexcjohnson@LiamConnors