+4I have a need to provide a Connector with custom data fields. My intent was to add a “connector” shape to a custom shape library. After playing with the custom shape library, I do not feel this is possible. Is it?
assuming it is not possible, any suggestions? Perhaps my extension package would handle whenever some creates a new connector, it detects it and adds the custom field?
Thanks, Dan
Best answer by jselvaraaj
Gotcha! We currently only support adding textarea to a line.
The easiest way to achieve this is:
For step 1, you can implement this by showing the 'logBlockClass' menu option only when the 'singleShapeSelected' action returns true."
client.registerAction("logBlockClass", () => {
const selection = viewport.getSelectedItems().pop();
if (!selection) return;
const page = viewport.getCurrentPage();
if (!page) return;
const blockWithSameId = page.blocks.get(selection.id);
console.log(blockWithSameId.getClassName());
});
client.registerAction("singleShapeSelected", () => {
const items = viewport.getSelectedItems();
return items.length === 1;
});
menu.addMenuItem({
label: "Log block class",
action: "logBlockClass",
menuType: MenuType.Context,
visibleAction: "singleShapeSelected",
});
For step 2, you can do this
client.registerAction('Create Line with textarea', async () => {
const page = await viewport.getCurrentPage();
if(page){
const line = page?.addLine({
endpoint1: {x:10, y:10},
endpoint2: {x:100, y:100},
})
line.addTextArea('Hello', {location:0.5,side:0})
}
});
You can also explore additional configurations for lines in LineProxy in lucid-extension-sdk library block comment documentation. Let me know if you have more questions!
+1Hi there
Thanks for reaching out!
+4In my extension application, I have a need of creating custom “lines” where a line is the built-in LucidChart connectors between shapes. I do not intend a custom shape that acts like a line bur rather the built-in line that LucidChart provides.
The only customization I need to make is to add custom data properties to it. for example, if a shape has 3 “lines” going out from it, I would like to store a “percentage” value on each line. It would be very nice to show the percentage value in a text area on the line as well.
What are my options to pull this off?
Would it be possible to programmatically know whenever a connector has been created and dynamically add data fields with default values post creation in my extension package?
Would it be possible to add a right click menu to a line and then select a menu to show a modal form?
+1Gotcha! We currently only support adding textarea to a line.
The easiest way to achieve this is:
For step 1, you can implement this by showing the 'logBlockClass' menu option only when the 'singleShapeSelected' action returns true."
client.registerAction("logBlockClass", () => {
const selection = viewport.getSelectedItems().pop();
if (!selection) return;
const page = viewport.getCurrentPage();
if (!page) return;
const blockWithSameId = page.blocks.get(selection.id);
console.log(blockWithSameId.getClassName());
});
client.registerAction("singleShapeSelected", () => {
const items = viewport.getSelectedItems();
return items.length === 1;
});
menu.addMenuItem({
label: "Log block class",
action: "logBlockClass",
menuType: MenuType.Context,
visibleAction: "singleShapeSelected",
});
For step 2, you can do this
client.registerAction('Create Line with textarea', async () => {
const page = await viewport.getCurrentPage();
if(page){
const line = page?.addLine({
endpoint1: {x:10, y:10},
endpoint2: {x:100, y:100},
})
line.addTextArea('Hello', {location:0.5,side:0})
}
});
You can also explore additional configurations for lines in LineProxy in lucid-extension-sdk library block comment documentation. Let me know if you have more questions!
+4I wanted to clarify the code solution for #1 and 2. I would anticipate the visibleAction to be when exactly 2 “blocks” have been selected. Your example is only 1.
If the user clicks the now visible menu item, then a line would be created from the 2 selected shapes..
Correct?
+1Yup that’s right! When the user clicks the now visible menu item, a line would be created from the 2 selected shapes.
To make the menu option visible only when two blocks are selected you can change the ‘visibleAction’ to this in step 1.
client.registerAction("twoShapesSelected", () => {
const items = viewport.getSelectedItems();
return items.length === 2;
});
menu.addMenuItem({
label: "Log block class",
action: "logBlockClass",
menuType: MenuType.Context,
visibleAction: "twoShapesSelected",
});
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to log in.
A Lucid account is required to interact with the Community, and your participation is subject to the Supplemental Lucid Community Terms. You may not participate in the Community if you are under age 18. You will be redirected to the Lucid app to log in.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
