Logic,Circuit (@webwriter/[email protected])

License: MIT | Version: 1.2.0

Create and simulate circuits with logic gates (AND, OR, XOR, etc.).

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Halfadder | @webwriter/logic-circuit/snippets/halfadder.html | | RS FlipFlop | @webwriter/logic-circuit/snippets/RS-FlipFlop.html |

LogicCircuit (<webwriter-logic-circuit>)

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/logic-circuit/widgets/webwriter-logic-circuit.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/logic-circuit/widgets/webwriter-logic-circuit.js"></script>
<webwriter-logic-circuit></webwriter-logic-circuit>

Or use with a bundler (e.g. Vite):

npm install @webwriter/logic-circuit

<link href="@webwriter/logic-circuit/widgets/webwriter-logic-circuit.css" rel="stylesheet">
<script type="module" src="@webwriter/logic-circuit/widgets/webwriter-logic-circuit.js"></script>
<webwriter-logic-circuit></webwriter-logic-circuit>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | LogicCircuit.shadowRootOptions | object | - | { ...LitElementWw.shadowRootOptions, delegatesFocus: true, } | ✗ | | localize | - | i18n handler for the widget. | LOCALIZE | ✗ | | LogicCircuit.scopedElements | - | Registers scoped custom elements used within the logic circuit widget. | - | ✗ | | lineElements (lineElements) | array | The list of all current wire (line) elements. | [] | ✗ | | gateElements (gateElements) | array | The list of all current gate elements. | [] | ✗ | | reflectGates (reflectGates) | String | Stringified representation of gate state, synced via attribute. | "" | ✓ | | reflectCons (reflectCons) | String | Stringified representation of connector state, synced via attribute. | "" | ✓ | | gateID (gateID) | number | Internal gate ID counter for uniquely identifying gates. | 0 | ✗ | | lineID (lineID) | number | Internal line ID counter for uniquely identifying wires. | 0 | ✗ | | zoom (zoom) | number | Current zoom level of the circuit canvas. | 1 | ✗ | | dragStartX (dragStartX) | number | X coordinate where the drag operation started. | 0 | ✗ | | dragStartY (dragStartY) | number | Y coordinate where the drag operation started. | 0 | ✗ | | simulate (simulate) | boolean | Whether the simulation is running. | true | ✗ | | simulationDelay (simulationDelay) | number | Delay in milliseconds between simulation steps. | 500 | ✓ | | allowSimulation (allowSimulation) | number | Whether simulation is allowed (1 = allowed, 0 = disallowed). | 1 | ✓ | | notGateAllowed (notGateAllowed) | number | Limit or enable state for NOT gates (-1 = unlimited, 0+ = limited). | -1 | ✓ | | andGateAllowed (andGateAllowed) | number | Limit or enable state for AND gates. | -1 | ✓ | | orGateAllowed (orGateAllowed) | number | Limit or enable state for OR gates. | -1 | ✓ | | nandGateAllowed (nandGateAllowed) | number | Limit or enable state for NAND gates. | -1 | ✓ | | norGateAllowed (norGateAllowed) | number | Limit or enable state for NOR gates. | -1 | ✓ | | xnorGateAllowed (xnorGateAllowed) | number | Limit or enable state for XNOR gates. | -1 | ✓ | | xorGateAllowed (xorGateAllowed) | number | Limit or enable state for XOR gates. | -1 | ✓ | | splitterAllowed (splitterAllowed) | number | Limit or enable state for splitter gates. | -1 | ✓ | | isDragging (isDragging) | boolean | Whether the user is currently dragging the canvas or an element. | false | ✗ | | isDrawingLine | boolean | Whether a connection line is currently being drawn. | false | ✗ | | startConnector | ConnectorElement | Reference to the starting connector for a wire being drawn. | null | ✗ | | endConnector | ConnectorElement | Reference to the ending connector for a wire being drawn. | null | ✗ | | svgCanvas | - | Reference to the SVG canvas element. | - | ✗ | | workspaceContainer | - | Reference to the overall workspace container. | - | ✗ | | wsDrag | - | Reference to the draggable inner workspace. | - | ✗ | | simCheckbox | - | Reference to the simulation checkbox toggle. | - | ✗ | | instructionsContainer | - | Reference to the instructions container. | - | ✗ | | getGateElements | - | Get the current list of gate elements. | - | ✗ | | getLineElements | - | Get the current list of line elements. | - | ✗ | | svgPathToMouse | SVGPathElement \| null | The temporary path element used when drawing a wire to follow the mouse. | null | ✗ |

Fields including properties and attributes define the current state of the widget and offer customization options.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | toggleInstructions | Toggles the visibility of the instructions container in the UI. | - | handleAllowSimulation | Toggles simulation mode on or off.Resets the circuit and updates the simulation checkbox and internal flag. | - | handleFlipAllGates | Enables or disables the "truth table" display on all gates,depending on the state of the main switch. | - | handleMouseDown | Handles mouse down interactions on the workspace.- Starts dragging the canvas if the background is clicked.- Cancels in-progress line drawing.- Hides any open gate context menus. | event: MouseEvent | handleMouseMove | Handles mouse move events during dragging or line drawing.Updates canvas position or live line path accordingly. | event: MouseEvent | transformWorkspace | Applies the current workspace offset and zoom transform to the container. | - | handleMouseUp | Stops dragging behavior. | - | handleWheel | Handles zooming the workspace with the mouse wheel.Clamps zoom between 0.5 and 2.5, and recalculates boundaries. | event: WheelEvent | handleDragLeave | Handles mouse leaving the workspace area while dragging.Updates line positions to initial position. | event: MouseEvent | handleContextMenu | Prevents the default browser context menu. | event: MouseEvent | handleDragOver | Called when a gate is dragged over the workspace.- Moves any connected lines dynamically.- Highlights the trash can icon if hovering over it. | event: DragEvent | handleDrop | Handles a drop event on the workspace.- Adds new gates or moves existing ones.- Deletes gates if dropped over the trash icon. | event: DragEvent | handleDropTrashCan | Deletes a gate when it is dropped over the trash can. | event: DragEvent | handleInputChange | Parses a numeric input field and sets the corresponding property.Defaults to -1 if the value is invalid. | event: InputEvent, propertyName: string | simulateCircuit | Starts circuit simulation.Calculates outputs from all input gates and propagates through the circuit.Stops simulation if the checkbox is unchecked. | - | resetCircuit | Resets all gates and lines in the circuit to their initial state. | - | calculateBoundaries | Ensures the workspace stays within bounds during dragging or zooming.Clamps workspaceOffsetX and workspaceOffsetY based on viewport and canvas size. | -

Methods allow programmatic access to the widget.

Slots

| Name | Description | Content Type | | :--: | :---------: | :----------: | | (default) | The default slot (currently unused in this widget) | - |

Slots define how the content of the widget is rendered.

Custom CSS properties

| Name | Description | | :--: | :---------: | | --circuit-background | Background color of the workspace |

Custom CSS properties offer defined customization of the widget's style.

CSS parts

| Name | Description | | :--: | :---------: | | gate | Styles individual gate components | | line | Styles the connecting lines between gates |

CSS parts allow freely styling internals of the widget with CSS.

Editing config

| Name | Value | | :--: | :---------: |

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public events.

Generated with @webwriter/[email protected]