| '+ cell.toText() +' | ' - - }, '\n\t
| " + cell.toText() + " | "; + }, "\n\t
document.getElementById('${ this.domId }').circuit`
+ //document.getElementById('Q-Editor-0').circuit
+ //$('#${ this.domId }')
+
+
+ // Put a note in the JavaScript console
+ // that includes how to reference the circuit via code
+ // and an ASCII diagram for reference.
+
+ logger.warn( 0.5,
+ `\n\nCreated a DOM interface for $('#${ this.domId }').circuit\n\n`,
+ circuit.toDiagram(),
+ '\n\n\n'
+ )
+}
+
+
+// Augment Circuit to have this functionality.
+
+Circuit.toDom = function( circuit, targetEl ){
+
+ return new Editor( circuit, targetEl ).domElement
+}
+Circuit.prototype.toDom = function( targetEl ){
+
+ return new Editor( this, targetEl ).domElement
+}
+
+
+
+
+
+
+
+
+Object.assign( Editor, {
+
+ index: 0,
+ help: function(){ return logger.help( this )},
+ dragEl: null,
+ gridColumnToMomentIndex: function( gridColumn ){ return +gridColumn - 2 },
+ momentIndexToGridColumn: function( momentIndex ){ return momentIndex + 2 },
+ gridRowToRegisterIndex: function( gridRow ){ return +gridRow - 1 },
+ registerIndexToGridRow: function( registerIndex ){ return registerIndex + 1 },
+ gridSize: 4,// CSS: grid-auto-columns = grid-auto-rows = 4rem.
+ pointToGrid: function( p ){
+
+
+ // Take a 1-dimensional point value
+ // (so either an X or a Y but not both)
+ // and return what CSS grid cell contains it
+ // based on our 4rem × 4rem grid setup.
+
+ const rem = parseFloat( getComputedStyle( document.documentElement ).fontSize )
+ return 1 + Math.floor( p / ( rem * Editor.gridSize ))
+ },
+ gridToPoint: function( g ){
+
+
+ // Take a 1-dimensional grid cell value
+ // (so either a row or a column but not both)
+ // and return the minimum point value it contains.
+
+ const rem = parseFloat( getComputedStyle( document.documentElement ).fontSize )
+ return rem * Editor.gridSize * ( g - 1 )
+ },
+ getInteractionCoordinates: function( event, pageOrClient ){
+
+ if( typeof pageOrClient !== 'string' ) pageOrClient = 'client'//page
+ if( event.changedTouches &&
+ event.changedTouches.length ) return {
+
+ x: event.changedTouches[ 0 ][ pageOrClient +'X' ],
+ y: event.changedTouches[ 0 ][ pageOrClient +'Y' ]
+ }
+ return {
+ x: event[ pageOrClient +'X' ],
+ y: event[ pageOrClient +'Y' ]
+ }
+ },
+ createNewElement :function(element_type, element_parent, element_css) {
+ element = document.createElement(element_type)
+ if(element_css) element.classList.add(element_css)
+ if(element_parent) element_parent.appendChild( element )
+ return element
+ },
+ createPalette: function( targetEl ){
+
+ if( typeof targetEl === 'string' ) targetEl = document.getElementById( targetEl )
+
+ const
+ paletteEl = targetEl instanceof HTMLElement ? targetEl : document.createElement( 'div' ),
+ randomRangeAndSign = function( min, max ){
+
+ const r = min + Math.random() * ( max - min )
+ return Math.floor( Math.random() * 2 ) ? r : -r
+ }
+
+ //ltnln: added missing Braket operations.
+ paletteEl.classList.add( 'Q-circuit-palette' );
+ 'H,X,Y,Z,P,Rx,Ry,Rz,U,V,V†,S*,S†,T,T†,00,01,10,√S,iS,XX,XY,YY,ZZ,*'
+ .split( ',' )
+ .forEach( function( symbol ){
+
+ const gate = Gate.findBySymbol( symbol )
+
+ const operationEl = document.createElement( 'div' )
+ paletteEl.appendChild( operationEl )
+ operationEl.classList.add( 'Q-circuit-operation' )
+ operationEl.classList.add( 'Q-circuit-operation-'+ gate.nameCss )
+ operationEl.setAttribute( 'gate-symbol', symbol )
+ operationEl.setAttribute( 'title', gate.name )
+
+ const tileEl = document.createElement( 'div' )
+ operationEl.appendChild( tileEl )
+ tileEl.classList.add( 'Q-circuit-operation-tile' )
+ if( symbol !== Gate.CURSOR.symbol ) tileEl.innerText = symbol
+
+ ;[ 'before', 'after' ].forEach( function( layer ){
+
+ tileEl.style.setProperty( '--Q-'+ layer +'-rotation', randomRangeAndSign( 0.5, 4 ) +'deg' )
+ tileEl.style.setProperty( '--Q-'+ layer +'-x', randomRangeAndSign( 1, 4 ) +'px' )
+ tileEl.style.setProperty( '--Q-'+ layer +'-y', randomRangeAndSign( 1, 3 ) +'px' )
+ })
+ })
+
+ paletteEl.addEventListener( 'mousedown', Editor.onPointerPress )
+ paletteEl.addEventListener( 'touchstart', Editor.onPointerPress )
+ return paletteEl
+ },
+ toDom: function( circuit, targetEl ){
+
+ return new Editor( circuit, targetEl ).domElement
+ }
+})
+
+
+
+
+
+
+ /////////////////////////
+ // //
+ // Operation CLEAR //
+ // //
+/////////////////////////
+
+
+Editor.prototype.onExternalClear = function( event ){
+
+ if( event.detail.circuit === this.circuit ){
+
+ Editor.clear( this.domElement, {
+
+ momentIndex: event.detail.momentIndex,
+ registerIndices: event.detail.registerIndices
+ })
+ }
+}
+Editor.clear = function( circuitEl, operation ){
+
+ const momentIndex = operation.momentIndex
+ operation.registerIndices.forEach( function( registerIndex ){
+
+ Array
+ .from( circuitEl.querySelectorAll(
+
+ `[moment-index="${ momentIndex }"]`+
+ `[register-index="${ registerIndex }"]`
+
+ ))
+ .forEach( function( op ){
+
+ op.parentNode.removeChild( op )
+ })
+ })
+}
+
+
+
+
+
+
+ ///////////////////////
+ // //
+ // Operation SET //
+ // //
+///////////////////////
+
+
+Editor.prototype.onExternalSet = function( event ){
+
+ if( event.detail.circuit === this.circuit ){
+
+ Editor.set( this.domElement, event.detail.operation )
+ }
+}
+Editor.set = function( circuitEl, operation ){
+ const
+ backgroundEl = circuitEl.querySelector( '.Q-circuit-board-background' ),
+ foregroundEl = circuitEl.querySelector( '.Q-circuit-board-foreground' ),
+ circuit = circuitEl.circuit,
+ operationIndex = circuitEl.circuit.operations.indexOf( operation )
+
+ operation.registerIndices.forEach( function( registerIndex, i ){
+ const operationEl = document.createElement( 'div' )
+ foregroundEl.appendChild( operationEl )
+ operationEl.classList.add( 'Q-circuit-operation', 'Q-circuit-operation-'+ operation.gate.nameCss )
+ // operationEl.setAttribute( 'operation-index', operationIndex )
+ operationEl.setAttribute( 'gate-symbol', operation.gate.symbol )
+ operationEl.setAttribute( 'gate-index', operation.gate.index )// Used as an application-wide unique ID!
+ operationEl.setAttribute( 'moment-index', operation.momentIndex )
+ operationEl.setAttribute( 'register-index', registerIndex )
+ operationEl.setAttribute( 'register-array-index', i )// Where within the registerIndices array is this operations fragment located?
+ operationEl.setAttribute( 'is-controlled', operation.isControlled )
+ operationEl.setAttribute( 'title', operation.gate.name )
+ operationEl.style.gridColumnStart = Editor.momentIndexToGridColumn( operation.momentIndex )
+ operationEl.style.gridRowStart = Editor.registerIndexToGridRow( registerIndex )
+ if( operation.gate.has_parameters ) Object.keys(operation.gate.parameters).forEach( element => {
+ operationEl.setAttribute( element, operation.gate.parameters[element] ) //adds a parameter attribute to the operation!
+ })
+ const tileEl = document.createElement( 'div' )
+ operationEl.appendChild( tileEl )
+ tileEl.classList.add( 'Q-circuit-operation-tile' )
+ if( operation.gate.symbol !== Gate.CURSOR.symbol ) tileEl.innerText = operation.gate.symbol
+
+
+ // Add operation link wires
+ // for multi-qubit operations.
+
+ if( operation.registerIndices.length > 1 ){
+
+ operationEl.setAttribute( 'register-indices', operation.registerIndices )
+ operationEl.setAttribute( 'register-indices-index', i )
+ operationEl.setAttribute(
+
+ 'sibling-indices',
+ operation.registerIndices
+ .filter( function( siblingRegisterIndex ){
+
+ return registerIndex !== siblingRegisterIndex
+ })
+ )
+ operation.registerIndices.forEach( function( registerIndex, i ){
+
+ if( i < operation.registerIndices.length - 1 ){
+
+ const
+ siblingRegisterIndex = operation.registerIndices[ i + 1 ],
+ registerDelta = Math.abs( siblingRegisterIndex - registerIndex ),
+ start = Math.min( registerIndex, siblingRegisterIndex ),
+ end = Math.max( registerIndex, siblingRegisterIndex ),
+ containerEl = document.createElement( 'div' ),
+ linkEl = document.createElement( 'div' )
+
+ backgroundEl.appendChild( containerEl )
+ containerEl.setAttribute( 'moment-index', operation.momentIndex )
+ containerEl.setAttribute( 'register-index', registerIndex )
+ containerEl.classList.add( 'Q-circuit-operation-link-container' )
+ containerEl.style.gridRowStart = Editor.registerIndexToGridRow( start )
+ containerEl.style.gridRowEnd = Editor.registerIndexToGridRow( end + 1 )
+ containerEl.style.gridColumn = Editor.momentIndexToGridColumn( operation.momentIndex )
+
+ containerEl.appendChild( linkEl )
+ linkEl.classList.add( 'Q-circuit-operation-link' )
+ if( registerDelta > 1 ) linkEl.classList.add( 'Q-circuit-operation-link-curved' )
+ }
+ })
+ if( operation.isControlled && i === 0 ){
+ operationEl.classList.add( 'Q-circuit-operation-control' )
+ operationEl.setAttribute( 'title', 'Control' )
+ tileEl.innerText = ''
+ }
+ else operationEl.classList.add( 'Q-circuit-operation-target' )
+ }
+ })
+}
+
+
+
+
+Editor.isValidControlCandidate = function( circuitEl ){
+
+ const
+ selectedOperations = Array
+ .from( circuitEl.querySelectorAll( '.Q-circuit-cell-selected' ))
+
+
+ // We must have at least two operations selected,
+ // hopefully a control and something else,
+ // in order to attempt a join.
+
+ if( selectedOperations.length < 2 ) return false
+
+
+ // Note the different moment indices present
+ // among the selected operations.
+
+ const moments = selectedOperations.reduce( function( moments, operationEl ){
+
+ moments[ operationEl.getAttribute( 'moment-index' )] = true
+ return moments
+
+ }, {} )
+
+
+ // All selected operations must be in the same moment.
+
+ if( Object.keys( moments ).length > 1 ) return false
+
+
+ // If there are multi-register operations present,
+ // regardless of whether those are controls or swaps,
+ // all siblings must be present
+ // in order to join a new gate to this selection.
+
+ // I’m sure we can make this whole routine much more efficient
+ // but its results are correct and boy am I tired ;)
+
+ const allSiblingsPresent = selectedOperations
+ .reduce( function( status, operationEl ){
+
+ const registerIndicesString = operationEl.getAttribute( 'register-indices' )
+
+
+ // If it’s a single-register operation
+ // there’s no need to search further.
+
+ if( !registerIndicesString ) return status
+
+
+ // How many registers are in use
+ // by this operation?
+
+ const
+ registerIndicesLength = registerIndicesString
+ .split( ',' )
+ .map( function( registerIndex ){
+
+ return +registerIndex
+ })
+ .length,
+
+
+ // How many of this operation’s siblings
+ // (including itself) can we find?
+
+ allSiblingsLength = selectedOperations
+ .reduce( function( siblings, operationEl ){
+
+ if( operationEl.getAttribute( 'register-indices' ) === registerIndicesString ){
+
+ siblings.push( operationEl )
+ }
+ return siblings
+
+ }, [])
+ .length
+
+
+ // Did we find all of the siblings for this operation?
+ // Square that with previous searches.
+
+ return status && allSiblingsLength === registerIndicesLength
+
+ }, true )
+
+
+ // If we’re missing some siblings
+ // then we cannot modify whatever we have selected here.
+
+ if( allSiblingsPresent !== true ) return false
+
+ // Note the different gate types present
+ // among the selected operations.
+
+ const gates = selectedOperations.reduce( function( gates, operationEl ){
+ const gateSymbol = operationEl.getAttribute( 'gate-symbol' )
+ if( !mathf.isUsefulInteger( gates[ gateSymbol ])) gates[ gateSymbol ] = 1
+ else gates[ gateSymbol ] ++
+ return gates
+
+ }, {} )
+
+
+ // Note if each operation is already controlled or not.
+
+ const {
+
+ totalControlled,
+ totalNotControlled
+
+ } = selectedOperations
+ .reduce( function( stats, operationEl ){
+
+ if( operationEl.getAttribute( 'is-controlled' ) === 'true' )
+ stats.totalControlled ++
+ else stats.totalNotControlled ++
+ return stats
+
+ }, {
+
+ totalControlled: 0,
+ totalNotControlled: 0
+ })
+
+ // This could be ONE “identity cursor”
+ // and one or more of a regular single gate
+ // that is NOT already controlled.
+
+ if( gates[ Gate.CURSOR.symbol ] === 1 &&
+ Object.keys( gates ).length === 2 &&
+ totalNotControlled === selectedOperations.length ){
+
+ return true
+ }
+
+
+ // There’s NO “identity cursor”
+ // but there is one or more of specific gate type
+ // and at least one of those is already controlled.
+
+ if( gates[ Gate.CURSOR.symbol ] === undefined &&
+ Object.keys( gates ).length === 1 &&
+ totalControlled > 0 &&
+ totalNotControlled > 0 ){
+
+ return true
+ }
+
+
+ // Any other combination allowed? Nope!
+
+ return false
+}
+Editor.createControl = function( circuitEl ){
+
+ if( Editor.isValidControlCandidate( circuitEl ) !== true ) return this
+
+
+ const
+ circuit = circuitEl.circuit,
+ selectedOperations = Array
+ .from( circuitEl.querySelectorAll( '.Q-circuit-cell-selected' )),
+
+
+ // Are any of these controlled operations??
+ // If so, we need to find its control component
+ // and re-use it.
+
+ existingControlEl = selectedOperations.find( function( operationEl ){
+
+ return (
+
+ operationEl.getAttribute( 'is-controlled' ) === 'true' &&
+ operationEl.getAttribute( 'register-array-index' ) === '0'
+ )
+ }),
+
+
+ // One control. One or more targets.
+
+ control = existingControlEl || selectedOperations
+ .find( function( el ){
+
+ return el.getAttribute( 'gate-symbol' ) === Gate.CURSOR.symbol
+ }),
+ targets = selectedOperations
+ .reduce( function( targets, el ){
+
+ //if( el.getAttribute( 'gate-symbol' ) !== '!' ) targets.push( el )
+ if( el !== control ) targets.push( el )
+ return targets
+
+ }, [] )
+
+
+ // Ready to roll.
+
+ circuit.history.createEntry$()
+ selectedOperations.forEach( function( operationEl ){
+
+ circuit.clear$(
+
+ +operationEl.getAttribute( 'moment-index' ),
+ +operationEl.getAttribute( 'register-index' )
+ )
+ })
+ circuit.set$(
+ targets[ 0 ].getAttribute( 'gate-symbol' ),
+ +control.getAttribute( 'moment-index' ),
+ [ +control.getAttribute( 'register-index' )].concat(
+
+ targets.reduce( function( registers, operationEl ){
+
+ registers.push( +operationEl.getAttribute( 'register-index' ))
+ return registers
+
+ }, [] )
+ )
+ )
+
+
+ // Update our toolbar button states.
+
+ Editor.onSelectionChanged( circuitEl )
+ Editor.onCircuitChanged( circuitEl )
+
+ return this
+}
+
+
+
+
+Editor.isValidSwapCandidate = function( circuitEl ){
+
+ const
+ selectedOperations = Array
+ .from( circuitEl.querySelectorAll( '.Q-circuit-cell-selected' ))
+
+
+ // We can only swap between two registers.
+ // No crazy rotation-swap bullshit. (Yet.)
+ if( selectedOperations.length !== 2 ) return false
+
+
+ // Both operations must be “identity cursors.”
+ // If so, we are good to go.
+
+ areBothCursors = selectedOperations.every( function( operationEl ){
+
+ return operationEl.getAttribute( 'gate-symbol' ) === Gate.CURSOR.symbol
+ })
+ if( areBothCursors ) return true
+
+
+ // Otherwise this is not a valid swap candidate.
+
+ return false
+}
+Editor.createSwap = function( circuitEl ){
+
+ if( Editor.isValidSwapCandidate( circuitEl ) !== true ) return this
+
+ const
+ selectedOperations = Array
+ .from( circuitEl.querySelectorAll( '.Q-circuit-cell-selected' )),
+ momentIndex = +selectedOperations[ 0 ].getAttribute( 'moment-index' )
+ registerIndices = selectedOperations
+ .reduce( function( registerIndices, operationEl ){
+
+ registerIndices.push( +operationEl.getAttribute( 'register-index' ))
+ return registerIndices
+
+ }, [] ),
+ circuit = circuitEl.circuit
+
+
+ // Create the swap operation.
+
+ circuit.history.createEntry$()
+ selectedOperations.forEach( function( operation ){
+
+ circuit.clear$(
+
+ +operation.getAttribute( 'moment-index' ),
+ +operation.getAttribute( 'register-index' )
+ )
+ })
+ circuit.set$(
+
+ Gate.SWAP,
+ momentIndex,
+ registerIndices
+ )
+
+
+ // Update our toolbar button states.
+
+ Editor.onSelectionChanged( circuitEl )
+ Editor.onCircuitChanged( circuitEl )
+
+ return this
+}
+
+
+
+
+Editor.onSelectionChanged = function( circuitEl ){
+
+ const controlButtonEl = circuitEl.querySelector( '.Q-circuit-toggle-control' )
+ if( Editor.isValidControlCandidate( circuitEl )){
+
+ controlButtonEl.removeAttribute( 'Q-disabled' )
+ }
+ else controlButtonEl.setAttribute( 'Q-disabled', true )
+
+ const swapButtonEl = circuitEl.querySelector( '.Q-circuit-toggle-swap' )
+ if( Editor.isValidSwapCandidate( circuitEl )){
+
+ swapButtonEl.removeAttribute( 'Q-disabled' )
+ }
+ else swapButtonEl.setAttribute( 'Q-disabled', true )
+}
+Editor.onCircuitChanged = function( circuitEl ){
+
+ const circuit = circuitEl.circuit
+ window.dispatchEvent( new CustomEvent(
+
+ 'Q gui altered circuit',
+ { detail: { circuit: circuit }}
+ ))
+
+ // Should we trigger a circuit.evaluate$() here?
+ // Particularly when we move all that to a new thread??
+ // console.log( originCircuit.report$() ) ??
+}
+
+
+
+
+
+Editor.unhighlightAll = function( circuitEl ){
+
+ Array.from( circuitEl.querySelectorAll(
+
+ '.Q-circuit-board-background > div,'+
+ '.Q-circuit-board-foreground > div'
+ ))
+ .forEach( function( el ){
+
+ el.classList.remove( 'Q-circuit-cell-highlighted' )
+ })
+}
+
+
+
+
+
+
+ //////////////////////
+ // //
+ // Pointer MOVE //
+ // //
+//////////////////////
+
+
+Editor.onPointerMove = function( event ){
+
+
+ // We need our cursor coordinates straight away.
+ // We’ll use that both for dragging (immediately below)
+ // and for hover highlighting (further below).
+ // Let’s also hold on to a list of all DOM elements
+ // that contain this X, Y point
+ // and also see if one of those is a circuit board container.
+
+ const
+ { x, y } = Editor.getInteractionCoordinates( event ),
+ foundEls = document.elementsFromPoint( x, y ),
+ boardContainerEl = foundEls.find( function( el ){
+
+ return el.classList.contains( 'Q-circuit-board-container' )
+ })
+
+
+ // Are we in the middle of a circuit clipboard drag?
+ // If so we need to move that thing!
+
+ if( Editor.dragEl !== null ){
+
+
+ // ex. Don’t scroll on touch devices!
+
+ event.preventDefault()
+
+
+ // This was a very useful resource
+ // for a reality check on DOM coordinates:
+ // https://javascript.info/coordinates
+
+ Editor.dragEl.style.left = ( x + window.pageXOffset + Editor.dragEl.offsetX ) +'px'
+ Editor.dragEl.style.top = ( y + window.pageYOffset + Editor.dragEl.offsetY ) +'px'
+
+ if( !boardContainerEl && Editor.dragEl.circuitEl ) Editor.dragEl.classList.add( 'Q-circuit-clipboard-danger' )
+ else Editor.dragEl.classList.remove( 'Q-circuit-clipboard-danger' )
+ }
+
+
+ // If we’re not over a circuit board container
+ // then there’s no highlighting work to do
+ // so let’s bail now.
+
+ if( !boardContainerEl ) return
+
+
+ // Now we know we have a circuit board
+ // so we must have a circuit
+ // and if that’s locked then highlighting changes allowed!
+
+ const circuitEl = boardContainerEl.closest( '.Q-circuit' )
+ if( circuitEl.classList.contains( 'Q-circuit-locked' )) return
+
+
+ // Ok, we’ve found a circuit board.
+ // First, un-highlight everything.
+
+ Array.from( boardContainerEl.querySelectorAll(`
+
+ .Q-circuit-board-background > div,
+ .Q-circuit-board-foreground > div
+
+ `)).forEach( function( el ){
+
+ el.classList.remove( 'Q-circuit-cell-highlighted' )
+ })
+
+
+ // Let’s prioritize any element that is “sticky”
+ // which means it can appear OVER another grid cell.
+
+
+ const
+ cellEl = foundEls.find( function( el ){
+
+ const style = window.getComputedStyle( el )
+ return (
+
+ style.position === 'sticky' && (
+
+ el.getAttribute( 'moment-index' ) !== null ||
+ el.getAttribute( 'register-index' ) !== null
+ )
+ )
+ }),
+ highlightByQuery = function( query ){
+
+ Array.from( boardContainerEl.querySelectorAll( query ))
+ .forEach( function( el ){
+
+ el.classList.add( 'Q-circuit-cell-highlighted' )
+ })
+ }
+
+
+ // If we’ve found one of these “sticky” cells
+ // let’s use its moment and/or register data
+ // to highlight moments or registers (or all).
+
+ if( cellEl ){
+
+ const
+ momentIndex = cellEl.getAttribute( 'moment-index' ),
+ registerIndex = cellEl.getAttribute( 'register-index' )
+
+ if( momentIndex === null ){
+
+ highlightByQuery( `div[register-index="${ registerIndex }"]` )
+ return
+ }
+ if( registerIndex === null ){
+
+ highlightByQuery( `div[moment-index="${ momentIndex }"]` )
+ return
+ }
+ highlightByQuery(`
+
+ .Q-circuit-board-background > div[moment-index],
+ .Q-circuit-board-foreground > .Q-circuit-operation
+
+ `)
+ return
+ }
+
+
+ // Ok, we know we’re hovering over the circuit board
+ // but we’re not on a “sticky” cell.
+ // We might be over an operation, but we might not.
+ // No matter -- we’ll infer the moment and register indices
+ // from the cursor position.
+
+ const
+ boardElBounds = boardContainerEl.getBoundingClientRect(),
+ xLocal = x - boardElBounds.left + boardContainerEl.scrollLeft + 1,
+ yLocal = y - boardElBounds.top + boardContainerEl.scrollTop + 1,
+ columnIndex = Editor.pointToGrid( xLocal ),
+ rowIndex = Editor.pointToGrid( yLocal ),
+ momentIndex = Editor.gridColumnToMomentIndex( columnIndex ),
+ registerIndex = Editor.gridRowToRegisterIndex( rowIndex )
+
+
+ // If this hover is “out of bounds”
+ // ie. on the same row or column as an “Add register” or “Add moment” button
+ // then let’s not highlight anything.
+
+ if( momentIndex > circuitEl.circuit.timewidth ||
+ registerIndex > circuitEl.circuit.bandwidth ) return
+
+
+ // If we’re at 0, 0 or below that either means
+ // we’re over the “Select all” button (already taken care of above)
+ // or over the lock toggle button.
+ // Either way, it’s time to bail.
+
+ if( momentIndex < 1 || registerIndex < 1 ) return
+
+
+ // If we’ve made it this far that means
+ // we have valid moment and register indices.
+ // Highlight them!
+
+ highlightByQuery(`
+
+ div[moment-index="${ momentIndex }"],
+ div[register-index="${ registerIndex }"]
+ `)
+ return
+}
+
+
+
+ ///////////////////////
+ // //
+ // Pointer PRESS //
+ // //
+///////////////////////
+
+
+Editor.onPointerPress = function( event ){
+ // This is just a safety net
+ // in case something terrible has ocurred.
+ // (ex. Did the user click and then their mouse ran
+ // outside the window but browser didn’t catch it?)
+
+ if( Editor.dragEl !== null ){
+
+ Editor.onPointerRelease( event )
+ return
+ }
+ const
+ targetEl = event.target,
+ circuitEl = targetEl.closest( '.Q-circuit' ),
+ paletteEl = targetEl.closest( '.Q-circuit-palette' )
+ parameterEl = targetEl.closest( '.Q-parameters-box' )
+
+ // If we can’t find a circuit that’s a really bad sign
+ // considering this event should be fired when a circuit
+ // is clicked on. So... bail!
+
+ if( !circuitEl && !paletteEl ) return
+
+ // This is a bit of a gamble.
+ // There’s a possibility we’re not going to drag anything,
+ // but we’ll prep these variables here anyway
+ // because both branches of if( circuitEl ) and if( paletteEl )
+ // below will have access to this scope.
+
+ dragEl = document.createElement( 'div' )
+ dragEl.classList.add( 'Q-circuit-clipboard' )
+ const { x, y } = Editor.getInteractionCoordinates( event )
+
+
+ // Are we dealing with a circuit interface?
+ // ie. NOT a palette interface.
+
+ if( circuitEl && !parameterEl ){
+
+ // Shall we toggle the circuit lock?
+
+ const
+ circuit = circuitEl.circuit,
+ circuitIsLocked = circuitEl.classList.contains( 'Q-circuit-locked' ),
+ lockEl = targetEl.closest( '.Q-circuit-toggle-lock' )
+
+ if( lockEl ){
+
+ // const toolbarEl = Array.from( circuitEl.querySelectorAll( '.Q-circuit-button' ))
+ if( circuitIsLocked ){
+
+ circuitEl.classList.remove( 'Q-circuit-locked' )
+ lockEl.innerText = '🔓'
+ }
+ else {
+
+ circuitEl.classList.add( 'Q-circuit-locked' )
+ lockEl.innerText = '🔒'
+ Editor.unhighlightAll( circuitEl )
+ }
+
+
+ // We’ve toggled the circuit lock button
+ // so we should prevent further propagation
+ // before proceeding further.
+ // That includes running all this code again
+ // if it was originally fired by a mouse event
+ // and about to be fired by a touch event!
+
+ event.preventDefault()
+ event.stopPropagation()
+ return
+ }
+
+
+ // If our circuit is already “locked”
+ // then there’s nothing more to do here.
+
+ if( circuitIsLocked ) {
+
+ logger.warn( `User attempted to interact with a circuit editor but it was locked.` )
+ return
+ }
+
+
+ const
+ cellEl = targetEl.closest(`
+
+ .Q-circuit-board-foreground > div,
+ .Q-circuit-palette > div
+ `),
+ undoEl = targetEl.closest( '.Q-circuit-button-undo' ),
+ redoEl = targetEl.closest( '.Q-circuit-button-redo' ),
+ controlEl = targetEl.closest( '.Q-circuit-toggle-control' ),
+ swapEl = targetEl.closest( '.Q-circuit-toggle-swap' ),
+ addMomentEl = targetEl.closest( '.Q-circuit-moment-add' ),
+ addRegisterEl = targetEl.closest( '.Q-circuit-register-add' )
+
+ if( !cellEl &&
+ !undoEl &&
+ !redoEl &&
+ !controlEl &&
+ !swapEl &&
+ !addMomentEl &&
+ !addRegisterEl ) return
+
+
+ // By this point we know that the circuit is unlocked
+ // and that we’ll activate a button / drag event / etc.
+ // So we need to hault futher event propagation
+ // including running this exact code again if this was
+ // fired by a touch event and about to again by mouse.
+ // This may SEEM redundant because we did this above
+ // within the lock-toggle button code
+ // but we needed to NOT stop propagation if the circuit
+ // was already locked -- for scrolling and such.
+
+ event.preventDefault()
+ event.stopPropagation()
+
+
+ if( undoEl && circuit.history.undo$() ){
+
+ Editor.onSelectionChanged( circuitEl )
+ Editor.onCircuitChanged( circuitEl )
+ }
+ if( redoEl && circuit.history.redo$() ){
+
+ Editor.onSelectionChanged( circuitEl )
+ Editor.onCircuitChanged( circuitEl )
+ }
+ if( controlEl ) Editor.createControl( circuitEl )
+ if( swapEl ) Editor.createSwap( circuitEl )
+ if( addMomentEl ) console.log( '→ Add moment' )
+ if( addRegisterEl ) console.log( '→ Add register' )
+
+
+ // We’re done dealing with external buttons.
+ // So if we can’t find a circuit CELL
+ // then there’s nothing more to do here.
+
+ if( !cellEl ) return
+
+ // Once we know what cell we’ve pressed on
+ // we can get the momentIndex and registerIndex
+ // from its pre-defined attributes.
+ // NOTE that we are getting CSS grid column and row
+ // from our own conversion function and NOT from
+ // asking its styles. Why? Because browsers convert
+ // grid commands to a shorthand less easily parsable
+ // and therefore makes our code and reasoning
+ // more prone to quirks / errors. Trust me!
+
+ const
+ momentIndex = +cellEl.getAttribute( 'moment-index' ),
+ registerIndex = +cellEl.getAttribute( 'register-index' ),
+ columnIndex = Editor.momentIndexToGridColumn( momentIndex ),
+ rowIndex = Editor.registerIndexToGridRow( registerIndex )
+
+
+ // Looks like our circuit is NOT locked
+ // and we have a valid circuit CELL
+ // so let’s find everything else we could need.
+
+ const
+ selectallEl = targetEl.closest( '.Q-circuit-selectall' ),
+ registersymbolEl = targetEl.closest( '.Q-circuit-register-label' ),
+ momentsymbolEl = targetEl.closest( '.Q-circuit-moment-label' ),
+ inputEl = targetEl.closest( '.Q-circuit-input' ),
+ operationEl = targetEl.closest( '.Q-circuit-operation' )
+
+ // +++++++++++++++
+ // We’ll have to add some input editing capability later...
+ // Of course you can already do this in code!
+ // For now though most quantum code assumes all qubits
+ // begin with a value of zero so this is mostly ok ;)
+
+ if( inputEl ){
+
+ console.log( '→ Edit input Qubit value at', registerIndex )
+ return
+ }
+
+
+ // Let’s inspect a group of items via a CSS query.
+ // If any of them are NOT “selected” (highlighted)
+ // then select them all.
+ // But if ALL of them are already selected
+ // then UNSELECT them all.
+
+ function toggleSelection( query ){
+
+ const
+ operations = Array.from( circuitEl.querySelectorAll( query )),
+ operationsSelectedLength = operations.reduce( function( sum, element ){
+
+ sum += +element.classList.contains( 'Q-circuit-cell-selected' )
+ return sum
+
+ }, 0 )
+
+ if( operationsSelectedLength === operations.length ){
+
+ operations.forEach( function( el ){
+ el.classList.remove( 'Q-circuit-cell-selected' )
+ })
+ }
+ else {
+
+ operations.forEach( function( el ){
+
+ el.classList.add( 'Q-circuit-cell-selected' )
+ })
+ }
+ Editor.onSelectionChanged( circuitEl )
+ }
+
+
+ // Clicking on the “selectAll” button
+ // or any of the Moment symbols / Register symbols
+ // causes a selection toggle.
+ // In the future we may want to add
+ // dragging of entire Moment columns / Register rows
+ // to splice them out / insert them elsewhere
+ // when a user clicks and drags them.
+
+ if( selectallEl ){
+
+ toggleSelection( '.Q-circuit-operation' )
+ return
+ }
+ if( momentsymbolEl ){
+
+ toggleSelection( `.Q-circuit-operation[moment-index="${ momentIndex }"]` )
+ return
+ }
+ if( registersymbolEl ){
+
+ toggleSelection( `.Q-circuit-operation[register-index="${ registerIndex }"]` )
+ return
+ }
+
+
+ // Right here we can made a big decision:
+ // If you’re not pressing on an operation
+ // then GO HOME.
+
+ if( !operationEl ) return
+ // If we've doubleclicked on an operation and the operation has parameters, we should be able
+ // to edit those parameters regardless of whether or not the circuit is locked.
+ if( event.detail == 2) {
+ const operation = Gate.findBySymbol(operationEl.getAttribute( 'gate-symbol' ))
+ if( operation.has_parameters ) {
+ Editor.onDoubleclick( event, operationEl )
+ return
+ }
+ }
+
+ // Ok now we know we are dealing with an operation.
+ // This preserved selection state information
+ // will be useful for when onPointerRelease is fired.
+
+ if( operationEl.classList.contains( 'Q-circuit-cell-selected' )){
+ operationEl.wasSelected = true
+ }
+ else operationEl.wasSelected = false
+
+
+ // And now we can proceed knowing that
+ // we need to select this operation
+ // and possibly drag it
+ // as well as any other selected operations.
+
+ operationEl.classList.add( 'Q-circuit-cell-selected' )
+ const selectedOperations = Array.from( circuitEl.querySelectorAll( '.Q-circuit-cell-selected' ))
+ dragEl.circuitEl = circuitEl
+ dragEl.originEl = circuitEl.querySelector( '.Q-circuit-board-foreground' )
+
+
+ // These are the default values;
+ // will be used if we’re only dragging one operation around.
+ // But if dragging more than one operation
+ // and we’re dragging the clipboard by an operation
+ // that is NOT in the upper-left corner of the clipboard
+ // then we need to know what the offset is.
+ // (Will be calculated below.)
+
+ dragEl.columnIndexOffset = 1
+ dragEl.rowIndexOffset = 1
+
+
+ // Now collect all of the selected operations,
+ // rip them from the circuit board’s foreground layer
+ // and place them on the clipboard.
+
+ let
+ columnIndexMin = Infinity,
+ rowIndexMin = Infinity
+
+ selectedOperations.forEach( function( el ){
+
+
+ // WORTH REPEATING:
+ // Once we know what cell we’ve pressed on
+ // we can get the momentIndex and registerIndex
+ // from its pre-defined attributes.
+ // NOTE that we are getting CSS grid column and row
+ // from our own conversion function and NOT from
+ // asking its styles. Why? Because browsers convert
+ // grid commands to a shorthand less easily parsable
+ // and therefore makes our code and reasoning
+ // more prone to quirks / errors. Trust me!
+
+ const
+ momentIndex = +el.getAttribute( 'moment-index' ),
+ registerIndex = +el.getAttribute( 'register-index' ),
+ columnIndex = Editor.momentIndexToGridColumn( momentIndex ),
+ rowIndex = Editor.registerIndexToGridRow( registerIndex )
+
+ columnIndexMin = Math.min( columnIndexMin, columnIndex )
+ rowIndexMin = Math.min( rowIndexMin, rowIndex )
+ el.classList.remove( 'Q-circuit-cell-selected' )
+ el.origin = { momentIndex, registerIndex, columnIndex, rowIndex }
+ dragEl.appendChild( el )
+ })
+ selectedOperations.forEach( function( el ){
+
+ const
+ columnIndexForClipboard = 1 + el.origin.columnIndex - columnIndexMin,
+ rowIndexForClipboard = 1 + el.origin.rowIndex - rowIndexMin
+
+ el.style.gridColumn = columnIndexForClipboard
+ el.style.gridRow = rowIndexForClipboard
+
+
+ // If this operation element is the one we grabbed
+ // (mostly relevant if we’re moving multiple operations at once)
+ // we need to know what the “offset” so everything can be
+ // placed correctly relative to this drag-and-dropped item.
+
+ if( el.origin.columnIndex === columnIndex &&
+ el.origin.rowIndex === rowIndex ){
+
+ dragEl.columnIndexOffset = columnIndexForClipboard
+ dragEl.rowIndexOffset = rowIndexForClipboard
+ }
+ })
+
+
+ // We need an XY offset that describes the difference
+ // between the mouse / finger press position
+ // and the clipboard’s intended upper-left position.
+ // To do that we need to know the press position (obviously!),
+ // the upper-left bounds of the circuit board’s foreground,
+ // and the intended upper-left bound of clipboard.
+
+ const
+ boardEl = circuitEl.querySelector( '.Q-circuit-board-foreground' ),
+ bounds = boardEl.getBoundingClientRect(),
+ minX = Editor.gridToPoint( columnIndexMin ),
+ minY = Editor.gridToPoint( rowIndexMin )
+
+ dragEl.offsetX = bounds.left + minX - x
+ dragEl.offsetY = bounds.top + minY - y
+ dragEl.momentIndex = momentIndex
+ dragEl.registerIndex = registerIndex
+ }
+ else if( paletteEl ){
+ const operationEl = targetEl.closest( '.Q-circuit-operation' )
+
+ if( !operationEl ) return
+
+ const
+ bounds = operationEl.getBoundingClientRect(),
+ { x, y } = Editor.getInteractionCoordinates( event )
+
+ dragEl.appendChild( operationEl.cloneNode( true ))
+ dragEl.originEl = paletteEl
+ dragEl.offsetX = bounds.left - x
+ dragEl.offsetY = bounds.top - y
+ }
+ else if( parameterEl ){
+ const exitEl = targetEl.closest( '.Q-parameter-box-exit' )
+ if( !exitEl ) return
+ parameterEl.style.display = 'none'
+ const foregroundEl = circuitEl.querySelector( '.Q-circuit-board-foreground' )
+ operationEl = foregroundEl.querySelector( `[moment-index="${ parameterEl.getAttribute( 'operation-moment-index' )}"]` +
+ `[register-index="${ parameterEl.getAttribute( 'operation-register-index' )}"]` )
+ parameters = {}
+ operationSkeleton = Gate.findBySymbol( operationEl.getAttribute( 'gate-symbol' ))
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = operationEl.getAttribute( key ) ? operationEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ //upon exiting, we should update the circuit!!!
+ circuitEl.circuit.set$(
+ operationEl.getAttribute( 'gate-symbol' ),
+ +operationEl.getAttribute( 'moment-index' ),
+ operationEl.getAttribute( 'register-indices' ) ? operationEl.getAttribute( 'register-indices' ).split(',').map( i => +i ) :
+ [ +operationEl.getAttribute( 'register-index' )],
+ parameters
+ )
+ //on exiting the parameter-input-box, we should update the circuit!!
+ parameterEl.innerHTML = ""
+ return
+ }
+ dragEl.timestamp = Date.now()
+
+
+ // Append the clipboard to the document,
+ // establish a global reference to it,
+ // and trigger a draw of it in the correct spot.
+
+ document.body.appendChild( dragEl )
+ Editor.dragEl = dragEl
+ Editor.onPointerMove( event )
+}
+
+
+
+
+
+
+ /////////////////////////
+ // //
+ // Pointer RELEASE //
+ // //
+/////////////////////////
+
+
+Editor.onPointerRelease = function( event ){
+
+
+ // If there’s no dragEl then bail immediately.
+ if( Editor.dragEl === null ) return
+ // Looks like we’re moving forward with this plan,
+ // so we’ll take control of the input now.
+ event.preventDefault()
+ event.stopPropagation()
+
+
+ // We can’t get the drop target from the event.
+ // Think about it: What was under the mouse / finger
+ // when this drop event was fired? THE CLIPBOARD !
+ // So instead we need to peek at what elements are
+ // under the mouse / finger, skipping element [0]
+ // because that will be the clipboard.
+
+ const { x, y } = Editor.getInteractionCoordinates( event )
+ const boardContainerAll = document.querySelectorAll(".Q-circuit-board-container")
+ if( boardContainerAll.length === 0 ) return
+ let boardContainerEl = Array.from(boardContainerAll).find((element) => {
+ let rect = element.getBoundingClientRect()
+ let clientX = rect.left
+ let clientY = rect.top
+ let height = element.offsetHeight
+ let width = element.offsetWidth
+ return ( x >= clientX && x <= clientX + width ) && ( y >= clientY && y <= clientY + height )
+ })
+ returnToOrigin = function(){
+
+
+ // We can only do a “true” return to origin
+ // if we were dragging from a circuit.
+ // If we were dragging from a palette
+ // we can just stop dragging.
+
+ if( Editor.dragEl.circuitEl ){
+
+ Array.from( Editor.dragEl.children ).forEach( function( el ){
+
+ Editor.dragEl.originEl.appendChild( el )
+ el.style.gridColumn = el.origin.columnIndex
+ el.style.gridRow = el.origin.rowIndex
+ if( el.wasSelected === true ) el.classList.remove( 'Q-circuit-cell-selected' )
+ else el.classList.add( 'Q-circuit-cell-selected' )
+ })
+ Editor.onSelectionChanged( Editor.dragEl.circuitEl )
+ }
+ document.body.removeChild( Editor.dragEl )
+ Editor.dragEl = null
+ }
+
+
+ // If we have not dragged on to a circuit board
+ // then we’re throwing away this operation.
+
+ if( !boardContainerEl ){
+
+ if( Editor.dragEl.circuitEl ){
+
+ const
+ originCircuitEl = Editor.dragEl.circuitEl
+ originCircuit = originCircuitEl.circuit
+
+ originCircuit.history.createEntry$()
+ Array
+ .from( Editor.dragEl.children )
+ .forEach( function( child ){
+
+ originCircuit.clear$(
+
+ child.origin.momentIndex,
+ child.origin.registerIndex
+ )
+ })
+ Editor.onSelectionChanged( originCircuitEl )
+ Editor.onCircuitChanged( originCircuitEl )
+ }
+
+
+ // TIME TO DIE.
+ // Let’s keep a private reference to
+ // the current clipboard.
+
+ let clipboardToDestroy = Editor.dragEl
+
+
+ // Now we can remove our dragging reference.
+
+ Editor.dragEl = null
+
+
+ // Add our CSS animation routine
+ // which will run for 1 second.
+ // If we were SUPER AWESOME
+ // we would have also calculated drag momentum
+ // and we’d let this glide away!
+
+ clipboardToDestroy.classList.add( 'Q-circuit-clipboard-destroy' )
+
+
+ // And around the time that animation is completing
+ // we can go ahead and remove our clipboard from the DOM
+ // and kill the reference.
+
+ setTimeout( function(){
+
+ document.body.removeChild( clipboardToDestroy )
+ clipboardToDestroy = null
+
+ }, 500 )
+
+
+ // No more to do here. Goodbye.
+
+ return
+ }
+
+
+ // If we couldn’t determine a circuitEl
+ // from the drop target,
+ // or if there is a target circuit but it’s locked,
+ // then we need to return these dragged items
+ // to their original circuit.
+
+ const circuitEl = boardContainerEl.closest( '.Q-circuit' )
+ if( circuitEl.classList.contains( 'Q-circuit-locked' )){
+
+ returnToOrigin()
+ return
+ }
+
+
+ // Time to get serious.
+ // Where exactly are we dropping on to this circuit??
+
+ const
+ circuit = circuitEl.circuit,
+ bounds = boardContainerEl.getBoundingClientRect(),
+ droppedAtX = x - bounds.left + boardContainerEl.scrollLeft,
+ droppedAtY = y - bounds.top + boardContainerEl.scrollTop,
+ droppedAtMomentIndex = Editor.gridColumnToMomentIndex(
+
+ Editor.pointToGrid( droppedAtX )
+ ),
+ droppedAtRegisterIndex = Editor.gridRowToRegisterIndex(
+
+ Editor.pointToGrid( droppedAtY )
+ ),
+ foregroundEl = circuitEl.querySelector( '.Q-circuit-board-foreground' )
+
+
+ // If this is a self-drop
+ // we can also just return to origin and bail.
+
+ if( Editor.dragEl.circuitEl === circuitEl &&
+ Editor.dragEl.momentIndex === droppedAtMomentIndex &&
+ Editor.dragEl.registerIndex === droppedAtRegisterIndex ){
+
+ returnToOrigin()
+ return
+ }
+
+
+ // Is this a valid drop target within this circuit?
+
+ if(
+ droppedAtMomentIndex < 1 ||
+ droppedAtMomentIndex > circuit.timewidth ||
+ droppedAtRegisterIndex < 1 ||
+ droppedAtRegisterIndex > circuit.bandwidth
+ ){
+ returnToOrigin()
+ return
+ }
+
+
+ // Finally! Work is about to be done!
+ // All we need to do is tell the circuit itself
+ // where we need to place these dragged items.
+ // It will do all the validation for us
+ // and then fire events that will place new elements
+ // where they need to go!
+
+ const
+ draggedOperations = Array.from( Editor.dragEl.children ),
+ draggedMomentDelta = droppedAtMomentIndex - Editor.dragEl.momentIndex,
+ draggedRegisterDelta = droppedAtRegisterIndex - Editor.dragEl.registerIndex,
+ setCommands = []
+
+
+ // Whatever the next action is that we perform on the circuit,
+ // this was user-initiated via the graphic user interface (GUI).
+
+ circuit.history.createEntry$()
+
+
+ // Now let’s work our way through each of the dragged operations.
+ // If some of these are components of a multi-register operation
+ // the sibling components will get spliced out of the array
+ // to avoid processing any specific operation more than once.
+
+ draggedOperations.forEach( function( childEl, i ){
+
+ let
+ momentIndexTarget = droppedAtMomentIndex,
+ registerIndexTarget = droppedAtRegisterIndex
+
+ if( Editor.dragEl.circuitEl ){
+
+ momentIndexTarget += childEl.origin.momentIndex - Editor.dragEl.momentIndex
+ registerIndexTarget += childEl.origin.registerIndex - Editor.dragEl.registerIndex
+ }
+
+
+ // Is this a multi-register operation?
+ // If so, this is also a from-circuit drop
+ // rather than a from-palette drop.
+
+ const registerIndicesString = childEl.getAttribute( 'register-indices' )
+ if( registerIndicesString ){
+
+ // What are ALL of the registerIndices
+ // associated with this multi-register operation?
+ // (We may use them later as a checklist.)
+
+ const
+ registerIndices = registerIndicesString
+ .split( ',' )
+ .map( function( str ){ return +str }),
+
+
+ // Lets look for ALL of the sibling components of this operation.
+ // Later we’ll check and see if the length of this array
+ // is equal to the total number of components for this operation.
+ // If they’re equal then we know we’re dragging the WHOLE thing.
+ // Otherwise we need to determine if it needs to break apart
+ // and if so, what that nature of that break might be.
+
+ foundComponents = Array.from(
+
+ Editor.dragEl.querySelectorAll(
+
+ `[moment-index="${ childEl.origin.momentIndex }"]`+
+ `[register-indices="${ registerIndicesString }"]`
+ )
+ )
+ .sort( function( a, b ){
+
+ const
+ aRegisterIndicesIndex = +a.getAttribute( 'register-indices-index' ),
+ bRegisterIndicesIndex = +b.getAttribute( 'register-indices-index' )
+
+ return aRegisterIndicesIndex - bRegisterIndicesIndex
+ }),
+ allComponents = Array.from( Editor.dragEl.circuitEl.querySelectorAll(
+
+ `[moment-index="${ childEl.origin.momentIndex }"]`+
+ `[register-indices="${ registerIndicesString }"]`
+ )),
+ remainingComponents = allComponents.filter( function( componentEl, i ){
+
+ return !foundComponents.includes( componentEl )
+ }),
+
+
+ // We can’t pick the gate symbol
+ // off the 0th gate in the register indices array
+ // because that will be an identity / control / null gate.
+ // We need to look at slot 1.
+
+ component1 = Editor.dragEl.querySelector(
+
+ `[moment-index="${ childEl.origin.momentIndex }"]`+
+ `[register-index="${ registerIndices[ 1 ] }"]`
+ ),
+ gatesymbol = component1 ?
+ component1.getAttribute( 'gate-symbol' ) :
+ childEl.getAttribute( 'gate-symbol' )
+
+
+ // We needed to grab the above gatesymbol information
+ // before we sent any clear$ commands
+ // which would in turn delete those componentEls.
+ // We’ve just completed that,
+ // so now’s the time to send a clear$ command
+ // before we do any set$ commands.
+
+ draggedOperations.forEach( function( childEl ){
+
+ Editor.dragEl.circuitEl.circuit.clear$(
+
+ childEl.origin.momentIndex,
+ childEl.origin.registerIndex
+ )
+ })
+
+
+ // FULL MULTI-REGISTER DRAG (TO ANY POSITION ON ANY CIRCUIT).
+ // If we are dragging all of the components
+ // of a multi-register operation
+ // then we are good to go.
+
+ if( registerIndices.length === foundComponents.length ){
+
+ const operationSkeleton = Gate.findBySymbol( gatesymbol )
+ parameters = {}
+ if( operationSkeleton.has_parameters ) {
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = childEl.getAttribute( key ) ? childEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ }
+ //circuit.set$(
+ setCommands.push([
+
+ gatesymbol,
+ momentIndexTarget,
+
+
+ // We need to remap EACH register index here
+ // according to the drop position.
+ // Let’s let set$ do all the validation on this.
+
+ registerIndices.map( function( registerIndex ){
+
+ const siblingDelta = registerIndex - childEl.origin.registerIndex
+ registerIndexTarget = droppedAtRegisterIndex
+ if( Editor.dragEl.circuitEl ){
+
+ registerIndexTarget += childEl.origin.registerIndex - Editor.dragEl.registerIndex + siblingDelta
+ }
+ return registerIndexTarget
+ }),
+ parameters
+ // )
+ ])
+ }
+
+
+ // IN-MOMENT (IN-CIRCUIT) PARTIAL MULTI-REGISTER DRAG.
+ // It appears we are NOT dragging all components
+ // of a multi-register operation.
+ // But if we’re dragging within the same circuit
+ // and we’re staying within the same moment index
+ // that might be ok!
+
+ else if( Editor.dragEl.circuitEl === circuitEl &&
+ momentIndexTarget === childEl.origin.momentIndex ){
+
+
+ // We must ensure that only one component
+ // can sit at each register index.
+ // This copies registerIndices,
+ // but inverts the key : property relationship.
+ const registerMap = registerIndices
+ .reduce( function( registerMap, registerIndex, r ){
+
+ registerMap[ registerIndex ] = r
+ return registerMap
+
+ }, {} )
+
+
+ // First, we must remove each dragged component
+ // from the register it was sitting at.
+
+ foundComponents.forEach( function( component ){
+
+ const componentRegisterIndex = +component.getAttribute( 'register-index' )
+
+
+ // Remove this component from
+ // where this component used to be.
+
+ delete registerMap[ componentRegisterIndex ]
+ })
+
+
+ // Now we can seat it at its new position.
+ // Note: This may OVERWRITE one of its siblings!
+ // And that’s ok.
+ foundComponents.forEach( function( component ){
+
+ const
+ componentRegisterIndex = +component.getAttribute( 'register-index' ),
+ registerGrabDelta = componentRegisterIndex - Editor.dragEl.registerIndex
+
+
+ // Now put it where it wants to go,
+ // possibly overwriting a sibling component!
+ //ltnln: if a multiqubit operation component that requires a sibling, overwrites its sibling, both/all components should be destroyed
+ registerMap[
+
+ componentRegisterIndex + draggedRegisterDelta
+
+ ] = +component.getAttribute( 'register-indices-index' )
+ })
+
+
+ // Now let’s flip that registerMap
+ // back into an array of register indices.
+
+ const fixedRegistersIndices = Object.entries( registerMap )
+ .reduce( function( registers, entry, i ){
+
+ registers[ +entry[ 1 ]] = +entry[ 0 ]
+ return registers
+
+ }, [] )
+
+
+ // This will remove any blank entries in the array
+ // ie. if a dragged sibling overwrote a seated one.
+
+ .filter( function( entry ){
+ return mathf.isUsefulInteger( entry )
+ })
+
+ const operationSkeleton = Gate.findBySymbol( childEl.getAttribute( 'gate-symbol' ) )
+ parameters = {}
+ if( operationSkeleton.has_parameters ) {
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = childEl.getAttribute( key ) ? childEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ }
+ // Finally, we’re ready to set.
+ // circuit.set$(
+ setCommands.push([
+ //ltnln: if a component of an operation that requires a sibling pair overwrites its sibling, we want it removed entirely.
+ fixedRegistersIndices.length < 2 && Gate.findBySymbol( childEl.getAttribute( 'gate-symbol' ) ).is_multi_qubit ?
+ Gate.NOOP :
+ childEl.getAttribute( 'gate-symbol' ),
+ momentIndexTarget,
+ fixedRegistersIndices,
+ parameters
+ // )
+ ])
+ }
+ else {
+ remainingComponents.forEach( function( componentEl, i ){
+ //circuit.set$(
+ const operationSkeleton = Gate.findBySymbol( componentEl.getAttribute( 'gate-symbol' ) )
+ parameters = {}
+ if( operationSkeleton.has_parameters ) {
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = +componentEl.getAttribute( key ) ? +componentEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ }
+ setCommands.push([
+
+ +componentEl.getAttribute( 'register-indices-index' ) && !Gate.findBySymbol( childEl.getAttribute( 'gate-symbol' ) ).is_multi_qubit ?
+ gatesymbol :
+ Gate.NOOP,
+ +componentEl.getAttribute( 'moment-index' ),
+ +componentEl.getAttribute( 'register-index' ),
+ parameters
+ // )
+ ])
+ })
+
+
+ // Finally, let’s separate and update
+ // all the components that were part of the drag.
+
+ foundComponents.forEach( function( componentEl ){
+ const operationSkeleton = Gate.findBySymbol( componentEl.getAttribute( 'gate-symbol' ) )
+ parameters = {}
+ if( operationSkeleton.has_parameters ) {
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = +componentEl.getAttribute( key ) ? +componentEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ }
+ setCommands.push([
+ //ltnln: temporary fix: certain multiqubit operations should only be represented in pairs of registers. If one is removed (i.e. a single component of the pair)
+ //then the entire operation should be removed.
+ +componentEl.getAttribute( 'register-indices-index' ) && !Gate.findBySymbol( componentEl.getAttribute( 'gate-symbol' ) ).is_multi_qubit ?
+ componentEl.getAttribute( 'gate-symbol' ) :
+ Gate.NOOP,
+ +componentEl.getAttribute( 'moment-index' ) + draggedMomentDelta,
+ +componentEl.getAttribute( 'register-index' ) + draggedRegisterDelta,
+ parameters
+ // )
+ ])
+ })
+ }
+
+
+ // We’ve just completed the movement
+ // of a multi-register operation.
+ // But all of the sibling components
+ // will also trigger this process
+ // unless we remove them
+ // from the draggd operations array.
+
+ let j = i + 1
+ while( j < draggedOperations.length ){
+
+ const possibleSibling = draggedOperations[ j ]
+ if( possibleSibling.getAttribute( 'gate-symbol' ) === gatesymbol &&
+ possibleSibling.getAttribute( 'register-indices' ) === registerIndicesString ){
+
+ draggedOperations.splice( j, 1 )
+ }
+ else j ++
+ }
+ }
+
+
+ // This is just a single-register operation.
+ // How simple this looks
+ // compared to all the gibberish above.
+
+ else {
+
+
+ // First, if this operation comes from a circuit
+ // (and not a circuit palette)
+ // make sure the old positions are cleared away.
+
+ if( Editor.dragEl.circuitEl ){
+
+ draggedOperations.forEach( function( childEl ){
+
+ Editor.dragEl.circuitEl.circuit.clear$(
+
+ childEl.origin.momentIndex,
+ childEl.origin.registerIndex
+ )
+ })
+ }
+
+
+ // And now set$ the operation
+ // in its new home.
+
+ // circuit.set$(
+ let registerIndices = [ registerIndexTarget ]
+ //ltnln: By default, multiqubit gates appear in pairs on the circuit rather than
+ // requiring the user to have to pair them like with Swap/CNot.
+ const operationSkeleton = Gate.findBySymbol( childEl.getAttribute( 'gate-symbol' ))
+ if(operationSkeleton.is_multi_qubit ) {
+ registerIndices.push( registerIndexTarget == circuit.bandwidth ? registerIndexTarget - 1 : registerIndexTarget + 1)
+ }
+ let parameters = {}
+ if( operationSkeleton.has_parameters ) {
+ Object.keys( operationSkeleton.parameters ).forEach( key => {
+ parameters[ key ] = childEl.getAttribute( key ) ? childEl.getAttribute( key ) : operationSkeleton.parameters[ key ]
+ })
+ }
+ setCommands.push([
+ childEl.getAttribute( 'gate-symbol' ),
+ momentIndexTarget,
+ registerIndices,
+ parameters
+ // )
+ ])
+ }
+ })
+
+
+ // DO IT DO IT DO IT
+
+ setCommands.forEach( function( setCommand ){
+
+ circuit.set$.apply( circuit, setCommand )
+ })
+
+
+ // Are we capable of making controls? Swaps?
+
+ Editor.onSelectionChanged( circuitEl )
+ Editor.onCircuitChanged( circuitEl )
+
+
+ // If the original circuit and destination circuit
+ // are not the same thing
+ // then we need to also eval the original circuit.
+
+ if( Editor.dragEl.circuitEl &&
+ Editor.dragEl.circuitEl !== circuitEl ){
+
+ const originCircuitEl = Editor.dragEl.circuitEl
+ Editor.onSelectionChanged( originCircuitEl )
+ Editor.onCircuitChanged( originCircuitEl )
+ }
+
+
+ // We’re finally done here.
+ // Clean up and go home.
+ // It’s been a long journey.
+ // I love you all.
+
+ document.body.removeChild( Editor.dragEl )
+ Editor.dragEl = null
+}
+
+
+ /////////////////////////
+ // //
+ // Pointer DOUBLECLICK //
+ // //
+/////////////////////////
+//ltnln: my trying out an idea for parameterized gates...
+Editor.onDoubleclick = function( event, operationEl ) {
+ const operation = Gate.findBySymbol( operationEl.getAttribute( 'gate-symbol' ))
+ const { x, y } = Editor.getInteractionCoordinates( event )
+ const boardContainerAll = document.querySelectorAll(".Q-circuit-board-container")
+ if( boardContainerAll.length === 0 ) return
+ let boardContainerEl = Array.from(boardContainerAll).find((element) => {
+ let rect = element.getBoundingClientRect()
+ let clientX = rect.left
+ let clientY = rect.top
+ let height = element.offsetHeight
+ let width = element.offsetWidth
+ return ( x >= clientX && x <= clientX + width ) && ( y >= clientY && y <= clientY + height )
+ })
+ if( !boardContainerEl ) return;
+ const parameterEl = boardContainerEl.querySelector('.Q-parameters-box')
+ const exit = Editor.createNewElement( 'button', parameterEl, 'Q-parameter-box-exit')
+ exit.appendChild(document.createTextNode( '⬅' ))
+ parameterEl.setAttribute( "operation-moment-index", operationEl.getAttribute( 'moment-index' ))
+ parameterEl.setAttribute( "operation-register-index", operationEl.getAttribute( 'register-index' ))
+ //here we generate queries for each parameter that the gate operation takes!
+ const parameters = Object.keys(operation.parameters)
+ parameters.forEach( element => {
+ if( operation.parameters && operation.parameters[element] !== null ) {
+ const input_fields = document.createElement( 'div' )
+ parameterEl.appendChild( input_fields )
+ input_fields.classList.add( 'Q-parameter-box-input-container' )
+
+ const label = Editor.createNewElement( "span", input_fields, 'Q-parameter-input-label' )
+ label.appendChild(document.createTextNode( element ))
+
+ const textbox = Editor.createNewElement( "input", input_fields, 'Q-parameter-box-input')
+ textbox.setAttribute( 'type', 'text' )
+ textbox.setAttribute( 'placeholder', element )
+ textbox.setAttribute( 'value', operationEl.getAttribute(element) ? operationEl.getAttribute(element) : operation.parameters[element] )
+ //set textbox to update the operation instance (cellEl)'s parameters on value change
+ textbox.addEventListener( "change", () => {
+ let parameterValue = +textbox.value;
+ let oldValue = operationEl.getAttribute( element )
+ if( !oldValue ) oldValue = operation.parameters[ element ]
+ if( parameterValue === null || parameterValue === Infinity ) textbox.value = oldValue.toString()
+ else {
+ operationEl.setAttribute( element, parameterValue )
+ textbox.value = parameterValue
+ }
+ })
+
+
+ }
+ })
+ parameterEl.classList.toggle('overlay')
+ parameterEl.style.display = 'block'
+}
+
+
+
+ ///////////////////
+ // //
+ // Listeners //
+ // //
+///////////////////
+
+
+// These listeners must be appliedm
+// to the entire WINDOW (and not just document.body!)
+
+window.addEventListener( 'mousemove', Editor.onPointerMove )
+window.addEventListener( 'touchmove', Editor.onPointerMove )
+window.addEventListener( 'mouseup', Editor.onPointerRelease )
+window.addEventListener( 'touchend', Editor.onPointerRelease )
+module.exports = {Editor}
\ No newline at end of file
diff --git a/build/q-old.css b/packages/quantum-js-vis/Q.css
similarity index 94%
rename from build/q-old.css
rename to packages/quantum-js-vis/Q.css
index e4a6620..ebacba8 100644
--- a/build/q-old.css
+++ b/packages/quantum-js-vis/Q.css
@@ -1,6 +1,6 @@
/*
- Copyright © 2019–2020, Stewart Smith. See LICENSE for details.
+ Copyright © 2019–2020, Stewart Smith. See LICENSE for details.
*/
@charset "utf-8";
@@ -11,8 +11,8 @@
/*
This file is in the process of being separated
- in to “essential global Q.js styles†which will
- remain here in Q.css, and “documentation-specificâ€
+ in to “essential global Q.js styles” which will
+ remain here in Q.css, and “documentation-specific”
styles which will be removed from here and placed
within the /other/documentation.css file instead.
@@ -319,7 +319,7 @@ svg, :root {
/*
- The below still need to be prefaced with “Q-â€
+ The below still need to be prefaced with “Q-”
and for the HTML pages to be updated accordingly.
*/
@@ -341,8 +341,6 @@ svg, :root {
max-width: 100%;
overflow-x: auto;
font-family: var( --Q-font-family-sans );
- /*letter-spacing: 0.03em;*/
- word-spacing: 0.2em;
}
dd .maths {
@@ -395,23 +393,22 @@ dd .maths {
vertical-align: middle;
position: relative;
align: middle;
- margin: 1em 0.5em;
+ margin: 1em;
padding: 1em;
- /*font-family: var( --Q-font-family-mono );*/
+ font-family: var( --Q-font-family-mono );
font-weight: 300;
line-height: 1em;
- /*text-align: right;*/
- text-align: center;
+ text-align: right;
}
.matrix td {
- padding: 0.25em 0.5em;
+ padding: 5px 10px;
}
.matrix-bracket-left, .matrix-bracket-right {
position: absolute;
top: 0;
- width: 0.5em;
+ width: 5px;
height: 100%;
border: 1px solid #CCC;
}
@@ -440,7 +437,7 @@ dd .maths {
.Q-state-vector.bra::before,
.complex-vector.bra::before {
- content: '⟨';
+ content: '⟨';
color: #BBB;
}
.Q-state-vector.bra::after,
@@ -458,7 +455,7 @@ dd .maths {
.Q-state-vector.ket::after,
.complex-vector.ket::after {
- content: '⟩';
+ content: '⟩';
color: #BBB;
}
.Q-state-vector.bra + .Q-state-vector.ket::before,
@@ -475,7 +472,7 @@ dd .maths {
/*
- Copyright © 2019–2020, Stewart Smith. See LICENSE for details.
+ Copyright © 2019–2020, Stewart Smith. See LICENSE for details.
*/
@charset "utf-8";
@@ -487,6 +484,7 @@ dd .maths {
+
/*
Z indices:
@@ -569,12 +567,11 @@ dd .maths {
-
.Q-circuit,
.Q-circuit-palette {
position: relative;
- width: 50%;
+ width: 100%;
}
.Q-circuit-palette {
@@ -598,7 +595,6 @@ dd .maths {
margin: 1rem 0 2rem 0;
/*border-top: 2px solid hsl( 0, 0%, 50% );*/
}
-.Q-parameters-box,
.Q-circuit-board-foreground {
line-height: 3.85rem;
@@ -751,19 +747,6 @@ dd .maths {
grid-auto-columns: 4rem;
grid-auto-flow: column;
}
-
-.Q-parameters-box {
-
- position: absolute;
- display: none;
- z-index: 100;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: whitesmoke;
-}
-
/*.Q-circuit-palette,*/
.Q-circuit-board-foreground,
.Q-circuit-board-background {
@@ -853,17 +836,8 @@ dd .maths {
);
}
-.Q-parameter-box-exit {
- position: relative;
- right: 0;
- left: 0;
- width: 5rem;
- height: 2.5rem;
- background-color: whitesmoke;
- border-radius: 0;
-}
-.Q-parameters-box > div,
+
.Q-circuit-palette > div,
.Q-circuit-clipboard > div,
.Q-circuit-board-foreground > div {
@@ -1105,7 +1079,7 @@ dd .maths {
rgba( 0, 0, 0, 0.05 )
)*/;
}
-.Q-parameter-box-exit .Q-circuit-palette .Q-circuit-operation:hover {
+.Q-circuit-palette .Q-circuit-operation:hover {
/*background-color: rgba( 255, 255, 255, 0.6 );*/
background-color: white;
@@ -1218,25 +1192,6 @@ dd .maths {
}
-.Q-parameter-box-input-container {
- position: relative;
- text-align: center;
- grid-auto-columns: 4rem;
- grid-auto-flow: column;
-}
-
-.Q-parameter-box-input {
- position: relative;
- border-radius: .2rem;
- margin-left: 10px;
- font-family: var( --Q-font-family-mono );
-}
-
-.Q-parameter-input-label {
- position: relative;
- color: var( --Q-color-blue );
- font-family: var( --Q-font-family-mono );
-}
diff --git a/packages/quantum-js-vis/index.js b/packages/quantum-js-vis/index.js
new file mode 100644
index 0000000..6838703
--- /dev/null
+++ b/packages/quantum-js-vis/index.js
@@ -0,0 +1,91 @@
+const {Editor} = require('./Q-Circuit-Editor');
+const {circuit} = require('quantum-js-util');
+const {BlochSphere} = require('./Q-BlochSphere');
+console.log("Welcome to Q.js! The GUI experience!\n");
+
+braket = function(){
+
+
+ // Create the HTML bits we need,
+ // contain them all together,
+ // and output them to Jupyter.
+ if( arguments.length === 0 || arguments.length > 3 ) return;
+ const element = arguments[0];
+ const args = (Array.from(arguments)).slice(1);
+ let circuit
+ if(args.length === 0) {
+ circuit = new Q( 4, 8 )
+ }
+ else if(args.length === 1) {
+ circuit = new Q( args[0] )
+ }
+ else {
+ circuit = new Q( args[0], args[1] )
+ }
+ container = document.createElement( 'div' )
+ let paletteEl = Editor.createPalette();
+ paletteEl.style.width = "50%";
+ container.appendChild( paletteEl );
+ container.appendChild( circuit.toDom() )
+ element.html( container )
+
+
+ // We’re going to take this SLOOOOOOOOWLY
+ // because there are many potential things to debug.
+
+ const thisCell = Jupyter.notebook.get_selected_cell()
+ // console.log( 'thisCell', thisCell )
+
+ const thisCellIndex = Jupyter.notebook.get_cells().indexOf( thisCell )
+ // console.log( 'thisCellIndex', thisCellIndex )
+
+ const nextCell = Jupyter.notebook.insert_cell_below( 'code', thisCellIndex - 1 )
+ const nextNextCell = Jupyter.notebook.insert_cell_below( 'markdown', Jupyter.notebook.get_cells().indexOf( thisCell ) - 1 )
+ // console.log( 'nextCell', nextCell )
+
+ nextCell.set_text( circuit.toAmazonBraket() )
+ nextNextCell.set_text( circuit.report$() )
+
+
+
+
+
+
+ window.addEventListener( 'Q gui altered circuit', function( event ){
+
+ // updatePlaygroundFromDom( event.detail.circuit )
+ if( event.detail.circuit === circuit ){
+
+ console.log( 'Updating circuit from GUI', circuit )
+ circuit.evaluate$()
+ nextCell.set_text( circuit.toAmazonBraket() )
+
+ }
+ })
+
+ window.addEventListener( 'Circuit.evaluate completed', function( event ) {
+ if( event.detail.circuit === circuit ) {
+ nextNextCell.set_text( circuit.report$() )
+ }
+ })
+
+
+
+ // nextCell.render()
+
+ // console.log( 'thisCell', thisCell )
+ // console.log( 'nextCell', nextCell )
+ // console.log( 'thisCellIndex', thisCellIndex )
+
+ // code = Jupyter.notebook.insert_cell_{0}('code');
+ // code.set_text(atob("{1}"))
+
+ // var t_cell = Jupyter.notebook.get_selected_cell()
+ // t_cell.set_text(' \\n{}')
+ // var t_index = Jupyter.notebook.get_cells().indexOf(t_cell)
+ // Jupyter.notebook.to_markdown(t_index)
+ // Jupyter.notebook.get_cell(t_index).render()
+}
+
+
+module.exports = {Editor, BlochSphere, braket};
\ No newline at end of file
diff --git a/packages/quantum-js-vis/package-lock.json b/packages/quantum-js-vis/package-lock.json
new file mode 100644
index 0000000..95e01ab
--- /dev/null
+++ b/packages/quantum-js-vis/package-lock.json
@@ -0,0 +1,35 @@
+{
+ "name": "quantum-js-vis",
+ "version": "1.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "version": "1.0.0",
+ "license": "ISC",
+ "devDependencies": {
+ "prettier": "^2.3.2"
+ }
+ },
+ "node_modules/prettier": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+ "dev": true,
+ "bin": {
+ "prettier": "bin-prettier.js"
+ },
+ "engines": {
+ "node": ">=10.13.0"
+ }
+ }
+ },
+ "dependencies": {
+ "prettier": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+ "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+ "dev": true
+ }
+ }
+}
diff --git a/packages/quantum-js-vis/package.json b/packages/quantum-js-vis/package.json
new file mode 100644
index 0000000..f17495b
--- /dev/null
+++ b/packages/quantum-js-vis/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "quantum-js-vis",
+ "version": "1.0.0",
+ "description": "Visualization Components for Q.js",
+ "main": "index.js",
+ "scripts": {
+ "test": "jest",
+ "prettier": "npx prettier --write **/*.js" ,
+ "lint": "npx eslint **/*.js"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "prettier": "^2.3.2",
+ "window": "^4.2.7"
+
+ },
+ "dependencies": {
+ "requirejs": "^2.3.6"
+ }
+}
diff --git a/playground.html b/playground.html
index 10543ca..47aeead 100644
--- a/playground.html
+++ b/playground.html
@@ -40,20 +40,13 @@
-
-
+
+
-
-
-
-
-
-
-
-
+
@@ -246,7 +239,7 @@