How can I make a multi-stranded wire cable link?

[james-ep01]

Introduction

Wire cables have 1C (1 strand), 2C (2 strands), 3C (3 strands) ... N strands Cables (NC) depending on the number of strands. How do I draw links in this cable format?

This is an image of a wire cable.

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

And what do you want this cable connection to look like? Like n-parallel lines of different colors?

[james-ep01]

It would be nice if it is the same as the existing cable link method. It would be nice if the strands can be bent or bent by choosing the cable, and if you choose the cable strand at the end, you can stretch and bend and bend only the selected strand cable. And the number of strands, thickness and color of the strands should be changeable as an option.

Below are some cable examples.

1. Power Cable Example
   

2. Sensor Cable Example
   

3. DB9 RS-000 Commination Cable.
   

** 4. I want it to be the cable as below.**

Thank you.

[kumilingus]

I think the best option is to represent the whole cable as several components:

• link for cable body
• 2 elements for start and end of the cable
• 3 links to represent source wires
• 3 links to represent target wires

Here's an example:
https://codepen.io/jointjs/pen/dyxBRVV

[james-ep01]

Wow, thank you. The above code can be used only when parts are combined.. I'm going to use the above multi-stranded cables by dragging them from stencil to paper, do I have to tie the parts together and express them as one object ?

Stencil has 1C, 2C, 3C... We plan to put cables by specification and use them.

And as shown in the picture below, the left and right are not completely different cables, but there is a body cover and it is connected through the cover.

[kumilingus]

The easiest way would be represent those cables as images in the stencil and create the compound shape on drop.

Here's a similar example: https://www.jointjs.com/demos/dynamic-stencil