nkh / P5-App-Asciio

Plain ASCII diagram
https://nkh.github.io/P5-App-Asciio/
53 stars 4 forks source link

Connector direction and visibility #125

Open nkh opened 10 months ago

nkh commented 10 months ago

In the circuit below, notice the vertical line connecting to the capacitor; although visually pleasant there is no real connection as there is no connector in the capacitor

screenshot_2023-10-04_13-05-09

This can be fixed by grouping a connector element with the capacitor elements but it unfortunately looks less pleasant.

screenshot_2023-10-04_13-03-11

Another problem is when the grouped capacitor elements are moved, the connecting lines from the top and the bottom become horizontal and the diagram doesn't seem to make any sense. This is due to the optimizer which doesn't understand that the connections should be vertical. selecting the arrows and forcing their directions fixes the problem ... until the object is moved again!

screenshot_2023-10-04_13-04-09

The problem is not specific to electronic diagrams, for some objects connecting arrows can be horizontal or vertical, for other they should only be one of them.

screenshot_2023-10-04_13-46-00 screenshot_2023-10-04_13-48-19

Back to the first and second screenshots, connector elements differ from the element connectors as they have text, 'o', '*', etc ... while element connectors are invisible.

qindapao commented 10 months ago

I feel like this feature could be developed in conjunction with the multi-connectors feature on the box you mentioned earlier.

In fact, the circuit diagram today is not my original creation. I saw the drawing on the online text diagram website of a Japanese guy I mentioned to you before.

His project is still under development, but at a relatively early stage. https://monosketch.io/ https://github.com/tuanchauict/MonoSketch

We are short of a web developer, but I guess I can't hope to invite him since he has his own project. The functionality is similar to ours.

I drew today's picture more casually, and some places look a bit unnatural. There should be a better way of drawing. For example, use border connection. But the new features you mentioned sound useful too. I recommend ranking it at 2.0 or later.

nkh commented 10 months ago

@qindapao Contact him, or I can do it, I doubt that he'd leave the comfort of 3 years of development on his project but you never know.

Note that putting a web interface on top of Asciio is relatively simple, we often work at the level under the UI.

Even if I agree that we should keep this for 2.0, I have been playing a bit with some ideas in the current version and maybe we can find a quick solution.

We can't connect, in cross mode, an arrow with a box because a box has connectors and cross mode will only overlay when lines are crossing. To achieve that effect we need to disable connections and enable border connections.

screenshot_2023-10-04_17-17-01

The single character box, that I called connector element but it is just a box, also has 4 connectors. Some times ago I created the "center box", a box with a connector in the middle of it.

screenshot_2023-10-04_17-12-46

the "center box" can be grouped together with a box (with normal connectors), and thus the group now has 5 connectors

screenshot_2023-10-04_17-19-57

we can now, still in cross mode, connect an arrow to the center box but as you see the crossing is still shown as "v". My guess is that's because the center box character is not one the crossing code recognizes. What character would we need to put in the center box so the crossing lib will create a crossing overlay?

screenshot_2023-10-04_17-20-29

nkh commented 10 months ago

@qindapao Here's the asciio file, the .txt extension is for github to accept it, you can remove it if you want but asciio loads any extension.

cross_center_box.asciio.txt

nkh commented 10 months ago

I used

 my %unicode_left_chars_thin        = map {$_, 1} ('─',    '┼',    '├',    '┬',    '┴',    '╭',    '╰') ;

We now have this very nice looking crossing which connects to a real connector, the box still has the other connectors and we don't need to use "border connections"

What remains is to find a nice and easy way to create a centerbox with the right character.

screenshot_2023-10-04_17-48-45

qindapao commented 10 months ago

This is really cool and I think we should state this in the documentation. It is faster and more convenient to place the connector similar to the git mode. We can make a similar one for placing the central connector. Regarding that Japanese guy, you can try it. He also developed monosketch before finding a good solution for ASCII graphics on the Internet. I'm not very good at dealing with people.If he accepts it, then he will develop two sets of software, and maybe he can take inspiration from our software to optimize his software. Or he brings us the advantages of his software.

nkh commented 10 months ago

I'll contact him.

I'm making an example of the resistor, capacitor and cpu with only the right connectors at the right place, they'll be ready today.

That this solution or another is used, we still need to have a better ways to chose elements, I feel we's reaching the end of the simple popup menus and need something better, shortcuts will always work fine. I'll write bindings and I'll ask my daughter who works with UX to make a mockup for a better interface than the popup menu.

qindapao commented 10 months ago

'-', '|', '.', '\'', '\', '/', '+', '─', '│', '┼', '┤', '├', '┬', '┴', '╭', '╮', '╯', '╰', '━', '┃', '╋', '┫', '┣', '┳', '┻', '┏', '┓', '┛', '┗', '═', '║', '╬', '╣', '╠', '╦', '╩', '╔', '╗', '╝', '╚', '╫', '╪', '╨', '╧', '╥', '╤', '╢', '╡', '╟', '╞', '╜', '╛', '╙', '╘', '╖', '╕', '╓', '╒'

As long as the central connector has these characters, it can participate in the crossover

qindapao commented 10 months ago

I've always wanted to fully complete the cross mode, and I'm worried that you might think there are too many functions, because there are still 45 functions left!

# todo: bold thin mix 45 chars
#       such as: ┮ ┪ ┪ ┡ ... ...
#       Due to the low degree of recognition, 
#       it will not be implemented for the time 
#       being, but it is enough for now

This is the TODO in the code

qindapao commented 10 months ago

https://github.com/nkh/P5-App-Asciio/issues/125#issuecomment-1747219033

image

Maybe it's something similar to a hint line? Users can preview elements of their choice. I'm waiting for your good news. I'm going to work soon, so development may be interrupted for a while.Tomorrow is the last day of my vacation.The company's new projects are related to Java and web, I think I can study them seriously.

nkh commented 10 months ago

@qindapao

completing the cross mode is not a problem for me as long as all the code is separated, I think the code needs to be generated not written manually but that's up to you.

Below are three components from the electronic example, note that they only have connectors where they are needed.

screenshot_2023-10-04_18-17-45

We still have a problem but I think it's an easy one, today the cross mode overlays everything that looks like a crossing, we need a new cross mode that would do that ONLY where there is a connector, that can't be more than one or two lines of code.

screenshot_2023-10-04_18-25-13

qindapao commented 10 months ago

@nkh The new cross mode is ok, but I hope the current mode can be preserved. Because I still need it at work

The code changes very little, just add a judgment. Let me handle it.The shortcut key X has been used. Let's use O, which stands for connector cross mode.

qindapao commented 10 months ago

@nkh

https://github.com/nkh/P5-App-Asciio/issues/125#issuecomment-1747256155

Don't worry, I also use vim to write code now, and the speed and comfort of writing code have improved by one level.I'm worried about making mistakes when using templates to generate code. I'd better write it by hand and optimize it later when my skills improve.I know there should be some magic methods to generate some regular code through some template.

nkh commented 10 months ago

@qindapao let's keep the discussion for the cross code outside this issue; I've created #129 for that.

The discussion we've had today was good and fruitful. although this issue is far from being fixed, I think we have found a good way to handle some of the requirements with the code we have today.

The connector visibility part is fixed, we have a new way of creating groups with real connectors and made it less cumbersome to use cross mode.

I'm looking forward to the connector cross mode.