Skip to main content
Solved

Connectors in Shape Library?

  • 17 July 2024
  • 5 replies
  • 46 views

I 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

Comments

J
Badge +1

Hi there

Thanks for reaching out!

  1. To clarify, by custom connector shape, do you mean a custom shape that behaves like a line (can attach to other shapes)? Also could me help me understand what is your use case for creating a custom connector shape? 
  2. By custom data fields, do you a custom text on the shape? Or do you mean something like https://lucid.readme.io/docs/shape-data-properties#shapeproperty-schema ?
P
Badge +4

In 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?

J
Badge +1

Gotcha! We currently only support adding textarea to a line.
 

The easiest way to achieve this is:

  1. Add a new menu option that appears when two blocks are selected.
  2. Clicking this menu option will create a new line with the two blocks as endpoints, including the chosen textarea.

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!

P
Badge +4

I 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?

J
Badge +1

Yup 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",
});


 

Reply


Lucid Software Inc. Supplemental Community Terms