It would be nice to be able to connect a LED light.

Great job,Would be more effective to add logic gates and more components.

Responsive design, mobile first and all that.

Possible implementation:

• If no components have been created
• User selects component type from sidebar
• Moves mouse over canvas
• A message appears in the bottom right saying "Click and drag on the canvas to create a(n) ${typeID}"

See http://browniefed.com/blog/2015/05/20/react-art-zooming-and-dragging/

The previous system, using a higher-order component and react-art's built-in mouseOver events, wasn't fit for purpose because it doesn't allow enough control when there are multiple overlapping components. We need this control to implement #12 to decide which connector to drag.

• Remove BoundingBox React component.
• Add functions to each component type
• On begin function of each loop iteration, if mouse moved, determine which component is being hovered over.

Each circuit component type should have a getBoundingBox function:

• connectors :: [Vector] -> BoundingBox

BoundingBox will have a contains function:

• point :: Vector -> boolean

We can then iterate over each view to determine if the mouse cursor is hovering over one (or more) circuit component.

We will then need to decide which single component is being hovered, in the case of overlapping boxes.

Should have a max length?

Every instance connected to node 0.

The primordials object was removed from Node.js starting from version 12. Therefore, any version of Node.js 12.x and above should support the primordials object.

Need a nicely designed org logo, not a crappy screenshot.

Should be able to:

• click and drag a component
• click and drag a connector

Hover highlighting an element should:

• show circles at the connectors
• change the cursor to a hand

Prereqs:

• Complete #20

E.g. resistance for resistor, current for current source.

Similar to #19, the current dots are sometimes rendered underneath adjacent components.

I see your in the beginning phases of this project and there is not much to see, but what I do see I like. This is the most active and current effort to create such a thing on the web so I thought this is where I would like to offer my help. When I first started programming many years ago I dreamed that one day I could create something like this. It seemed like a very far off goal, one I had l had long since forgotten about until recently while getting deep into DSP/Audio programming on the web.

One of my goals is to be able to emulate analog circuits which will produce a signal you can hear and interact with as well as visualize.

Where are you at with this project and where could you use the most input and/or assistance?

Or does it?

A couple of possibilities:

• colour gradients along wires/components, as in Falstad's sim
• numbers and mini-scopes, as in everycircuit

E.g. 5Ω, 1A.

Example circuit:

Currently the connectors are sometime rendered underneath other components.

Ground connected:

CurrentSource 1
2Resistor.js:83 Resistor 0.9997000999660113
Resistor.js:83 Resistor 0.9996001399520164
Ground.js:110 Ground [0.0003998600479836467]
CurrentSource.js:102 CurrentSource 1

Ground disconnected:

CurrentSource 1
Resistor.js:83 Resistor 1.0000000000000002
2Resistor.js:83 Resistor 0.9999000099990002
Ground.js:110 Ground [-0]

Probably due to the fact that we're connecting disconnected circuits to ground with a high-value resistor. Time to consider #27 more seriously?

Currently multiple disconnected circuits are connected together and treated as one for analysis. We could treat them all as separate circuits and analyse them independently. This would mean that problems with one circuit wouldn't affect the others.

Or any suitable mouse mode. No need to highlight in add mode, it's probably confusing.

E.g. modeReducer to manage the mode. Action creators could dispatch multiple actions to affect different parts of the state, rather than a single reducer per action creator handling everything.

Try to get circuits.im up Google's rankings.

Add to this list: https://en.wikipedia.org/wiki/List_of_free_electronics_circuit_simulators

• Semi-highlight on hover, full highlight when selected (currently full highlights on hover, no highlight when selected)
• Use 'pointer' mouse icon when hovering to indicate component can be clicked (or moved... possibly confusing)

• Current Source
• Voltage Source

Current Source
Maybe this?

Or keep the symbol we already have and add an arrowhead to the line, similar to this:

Looks like Snap is caching installed NPM modules or something?

Dragging connectors on mobile behaves a bit funny.

• favicon etc.
• links to GitHub/website etc.

Redux logger

A component can have:

• any number of connectors
• 2 dragPoints

connectors are used for the simulation to detect which components are connected together. Should they be rendered as blobs?

dragPoints are used to create/move components. These are rendered on hover.

This happens when adding new elements. Probably due to not handling hover in/out when in 'adding new element' mode.

IMHO they should act like simple wires.

This project looks awesome! Kudos! :D

Consider using a more appropriate license.

I want all modifications/derivatives to be open source, should I GPL this?

Find each connected graph in circuit. For each connected graph, connect one node to ground with high-value resistor (in circuit equation only).

nodes = array of: -1 for unconnected, nodeID for connected to node
findConnectedNodes(nodeID) - use BFS/DFS

• for each unconnected node: findConnectedNodes(groundID)
• for each unique value in nodes, connect node to ground with high-value resistor (in circuit equation only)

See http://browniefed.com/blog/2015/05/20/react-art-zooming-and-dragging/

Fairly low-priority at the moment, but should be fairly trivial using redux middleware.

Look at this? - https://gist.github.com/gaearon/2b3ee315bb6a3b280b7c