How to make text on an element selectable, so that the user can copy it? #2772
Unanswered
zombiekitten
asked this question in
Q&A
Replies: 1 comment
-
You need to set const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
const paper = new joint.dia.Paper({
el: document.getElementById('paper'),
width: 800,
height: 600,
model: graph,
cellViewNamespace: joint.shapes,
interactive: true,
preventDefaultViewAction: false, // to allow user to select the text within elements
preventDefaultBlankAction: false, // to cancel the selection when the user clicks on the blank area
});
const rect1 = new joint.shapes.standard.Rectangle();
rect1.resize(100, 100).position(100, 30);
rect1.attr('label', {
text: 'Hello World!',
style: { userSelect: 'text' },
cursor: 'text',
event: 'element:text:pointerdown'
});
graph.addCell(rect1);
// Do not move the element when the user tries to select the text.
paper.on('element:text:pointerdown', (elementView, evt) => {
elementView.preventDefaultInteraction(evt);
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Introduction
Hi! I'm making a diagram in the free version of jointJS. I have a custom element that displays a HTML table with data (using foreignObject), and I want users to be able to select and copy text from the table. However, no elements on the diagram seem to have selectable text, not even the standard Rectangles. I tried using css to add "user-select: text" to elements, and it didn't do anything. How to make the text selectable?
Steps to reproduce
No response
Restrictions & Constraints
No response
Does your question relate to JointJS or JointJS+. Select both if applicable.
JointJS
Beta Was this translation helpful? Give feedback.
All reactions