Congrats, you've made it to the repo for Teselagen's Open Source Vector Editor Component

  • Built With React & Redux
  • Built for easy extensibility + embed-ibility
  • Customize the views to suit your needs

image

CHANGELOG

Issue Tracking Board: https://github.com/orgs/TeselaGen/projects/10

Demo: http://teselagen.github.io/openVectorEditor/

Get the desktop app: https://github.com/tnrich/ove-electron/releases

Cypress Tests Dashboard: https://dashboard.cypress.io/#/projects/1zj5vc/runs (you'll need to make a login with cypress)

OVE out in the wild:

Table of Contents

Upgrade Instructions for Major and Minor Versions

This repo follows semantic versioning (major/minor/patche)

The commit log can be seen here: https://github.com/TeselaGen/openVectorEditor/commits/master

Upgrade instructions for any major or minor change can be found here: Upgrade instructions

Using this module in React

Example CRA repo with OVE

Here is where you can see how to run the <Editor/> in a Create-React-App environment: https://github.com/tnrich/ove-react-demo-repo

If you clone that repo you can see it working and see how to set up the redux store/provider and initialize the editor. You should just clone it and run:

yarn
yarn start

Installation (react)

yarn add open-vector-editor

Code (react)

Require the following components like:

import {Editor, RowView} from "open-vector-editor"

Editor

To use the component, you'll need to do a bit more work to set up a redux store. You can see an example repo where this works here: https://github.com/tnrich/ove-react-demo-repo

The <Editor {...editorProps}/> component gives you a full blown editor. It takes in a list of editorProps as detailed below.

CircularView/CircularViewUnconnected

This gives you just the circular/plasmid map view. Either redux connected or unconnected (non-interactive)

LinearView/LinearViewUnconnected

This gives you just the linear map view. Either redux connected or unconnected (non-interactive)

RowView/RowViewUnconnected

This gives you just the detailed view of the sequence rows. Either redux connected or unconnected (non-interactive)

EnzymeViewer

A component used for viewing enzymes

Using this module outside of react apps (Universal):

The universal build can be used in any app with or without react. It corresponds to using the component in the React version. You will be able to customize the Editor just like in the react build, but you will not be able to use the individual components like or . For that you'll need to use React.

Installation (Universal)

via npm:

npm install open-vector-editor

then add the links

<link rel="stylesheet" type="text/css" href="your-path-to-node-modules/open-vector-editor/umd/main.css">
<script type="text/javascript" src="your-path-to-node-modules/open-vector-editor/umd/open-vector-editor.js"></script>

Or via CDN:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/open-vector-editor/umd/main.css"> 
<script type="text/javascript" src="https://unpkg.com/open-vector-editor/umd/open-vector-editor.js"></script>

Full Example:

A full example of how to set up the unpkg/UMD demo can be seen here: https://github.com/TeselaGen/openVectorEditor/blob/master/demo/src/UMDDemo.html Demo here http://teselagen.github.io/openVectorEditor/UMDDemo.html

Code (Universal)

<script>
const editor = window.createVectorEditor(yourDomNodeHere || "createDomNodeForMe", editorProps); /* createDomNodeForMe will make a dom node for you and append it to the document.body*/
editor.updateEditor(editorState);	
</script>

Accessing the editor state:

const currentEditorState = editor.getState()
//you can view various properties of the alignment such as the selection layer using alignment.getState()
console.info(currentEditorState.selectionLayer)

Demo (Universal): http://teselagen.github.io/openVectorEditor/

editorProps

These props consist of hooks and editor config options that can be passed like so: <Editor {...editorProps}/> or as seen above like window.createVectorEditor(yourDomNodeHere, editorProps);

{
	shouldAutosave: true, //by default the editor does not autosave, setting this to true will trigger the onSave callback after any change to the sequenceData
	//supplying this function WILL make the editor FULLSCREEN BY DEFAULT
	handleFullscreenClose: () => { 
		//do whatever you want here
		//UMD only:
		editor.close() //this calls reactDom.unmountComponent at the node you passed as the first arg
	},
	showReadOnly: false, //default true
  disableSetReadOnly: true, //default false
	onSave: function(event, sequenceDataToSave, editorState, onSuccessCallback) {
		console.info("event:", event);
		console.info("sequenceData:", sequenceDataToSave);
		console.info("editorState:", editorState);
		// To disable the save button after successful saving
		// either call the onSuccessCallback or return a successful promise :)
		onSuccessCallback()
		//or 
		// return myPromiseBasedApiCall()
	},
	onCopy: function(event, copiedSequenceData, editorState) {
		//the copiedSequenceData is the subset of the sequence that has been copied in the teselagen sequence format
		console.info("event:", event);
		console.info("sequenceData:", copiedSequenceData);
		console.info("editorState:", editorState);
		const clipboardData = event.clipboardData;
		clipboardData.setData(
			"application/json",
			JSON.stringify(copiedSequenceData)
		);
		event.preventDefault();
		//in onPaste in your app you can do:
		// e.clipboardData.getData('application/json')
	},
	onPaste: function(event, editorState) {
		//the onPaste here must return sequenceData in the teselagen data format
		const clipboardData = event.clipboardData;
		let jsonData = clipboardData.getData("application/json")
		if (jsonData) {
			jsonData = JSON.parse(jsonData)
			if (jsonData.isJbeiSeq) {
				jsonData = convertJbeiToTeselagen(jsonData)
			}
		}
		const sequenceData = jsonData || {sequence: clipboardData.getData("text/plain")}
		return sequenceData
	},
	beforeAnnotationCreate: ({ //also works for edits (!)
		annotationTypePlural, //features/parts/primers
		annotation, //annotation info 
		props //general props to the dialog
	}) => {
		//a handler to hook into when annotations (features/primers/parts) are being created
	},
	//regular click overrides, eg: 
	featureClicked: ({annotation, event}) => {
		//do something here :)
	}
	// orf/primer/translation/cutsite/translationDouble/deletionLayer/replacementLayer/feature/part/searchLayer xxxxClicked can also be overridden

	rightClickOverrides: { //override what happens when a given feature/part/primer/translation/orf/cutsite/selectionLayer/lineageLine gets right clicked
		//the general format is xxxxRightClicked eg:
		selectionLayerRightClicked: (items, {annotation}, props) => {
			return [...items, { 
				//props here get passed directly to blueprintjs MenuItems
				text: "Create Part",
				onClick: () => console.info('hey!≈')
			}]
		}
	},
	PropertiesProps: { 
		// the list of tabs shown in the Properties panel
		propertiesList: [
			"general",
			"features",
			"parts",
			"primers",
			"translations",
			"cutsites",
			"orfs",
			"genbank"
		]
	},
	ToolBarProps: {
			toolList: [
				"saveTool",
				//you can override a tool like so:
				{name: "downloadTool", Dropdown: () => { 
					return "Hey!"
				}},
				"importTool",
				"undoTool",
				"redoTool",
				"cutsiteTool",
				"featureTool",
				"alignmentTool",
				// "oligoTool",
				"orfTool",
				// "viewTool",
				"editTool",
				"findTool",
				"visibilityTool"
				// "propertiesTool"
			]
		}
		StatusBarProps: {
			//these are the defaults:
			showCircularity: true,
  		showReadOnly: true,
			showAvailability: false
		},
		onDigestSave: () => {} //tnr: NOT YET IMPLEMENTED
}

editorState

These are the options to the updateEditor() action (the most generic redux action we have)) and will cause the editor state stored in redux to be updated. Only the subset of options that are passed will be updated.

{
	//note, sequence data passed here will be coerced to fit the Teselagen data model (Teselagen JSON)
	sequenceData: { Open Vector Editor data model
		sequence: "atagatagagaggcccg",
		features: [
			{
				color: "#b3b3b3", //you can override the default color for each individual feature if you want
				type: "

Last updated

v16.1.35

Install

npm install open-vector-editor
yarn add open-vector-editor

BUNDLE SIZE

Not Available

DOWNLOAD TIME

Not Available

CDNs

extras

Contributors

  • TeselaGen