Options
All
  • Public
  • Public/Protected
  • All
Menu

GraphQLEditor Editor

npm Commitizen friendly npm downloads

GraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code. With GraphQL Editor you can create visual diagrams without writing any code or present your schema in a nice way!

Cloud version

Here is a cloud version of GraphQL Editor.

Docs

Here is a guide for GraphQL Editor.

How it works

Create GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation

GraphQL View

GraphQLEditor Editor

Code Editor View

GraphQLEditor Editor

Hierarchy View

GraphQLEditor Editor

Table of contents

Developer Docs

If you wish to contribute docs from typedoc are availble on https://graphql-editor.github.io/graphql-editor/

License

MIT

Develop or use standalone

To use standalone you have to use webpack right now. If you want to use it without webpack you need to handle monaco editor workers yourself.

Install dependencies

npm i react react-dom monaco-editor
npm i -D monaco-editor-webpack-plugin worker-loader css-loader file-loader
npm i graphql-editor
import React, { useState } from 'react';
import { render } from 'react-dom';
import { GraphQLEditor,PassedSchema } from 'graphql-editor';

const schemas = {
  pizza:`
type Query{
    pizzas: [Pizza!]
}
`,
pizzaLibrary:`
type Pizza{
  name:String;
}
`
}

export const App = () => {
  const [mySchema, setMySchema] = useState<PassedSchema>({
    code: schemas.pizza,
    libraries: schemas.pizzaLibrary,
  });
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <GraphQLEditor
        onSchemaChange={(props) => {
          setMySchema(props);
        }}
        schema={mySchema}
      />
    </div>
  );
};

render(<App />, document.getElementById('root'));

Support

Join our Discord Channel

Contribute

For a complete guide to contributing to GraphQL Editor, see the Contribution Guide.

  1. Fork this repo
  2. Create your feature branch: git checkout -b feature-name
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Team

GraphQL Editor Website

Underlying Diagram technology

Whole graphql-editor is based on underlying diagram technology.

Underlying Parsing technology

Whole graphql-editor parsing stuff is based on underlying zeus technology.

GraphQL Tutorials

GraphQL Editor Guide here

GraphQL Blog here

My Video Blog Tutorials here

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

ActivePane

ActivePane: "code" | "diagram" | "code-diagram" | "hierarchy"

CodePaneProps

CodePaneProps: { libraries?: undefined | string; onChange: (v: string) => void; schema: string; size: number | string } & CodePaneOuterProps

Dimensions

Dimensions: [number, number]

HexaDecimal

HexaDecimal: string

PossibleMenus

PossibleMenus: "field" | "interface" | "directive" | "options"

ThemeType

ThemeType<T>: Required<Pick<NestedCSSProperties, T>> & Omit<NestedCSSProperties, T>

Type parameters

  • T: keyof NestedCSSProperties

Variables

Const BuiltInScalars

BuiltInScalars: ParserField[] = [ScalarTypes.Boolean,ScalarTypes.Float,ScalarTypes.ID,ScalarTypes.Int,ScalarTypes.String,].reverse().map((t) =>({data: {type: TypeDefinition.ScalarTypeDefinition,},type: {name: 'scalar',},name: t,} as ParserField),)

Const CaptionTitle

CaptionTitle: string = style({marginRight: 10,color: Colors.orange[0],})

Const Circle

Circle: string = style({borderRadius: 6,width: 12,height: 12,display: 'flex',alignItems: 'center',justifyContent: 'center',border: `solid 1px`,borderColor: Colors.grey[0],$nest: {'&.Selected': {borderColor: Colors.green[0],},},})

Const CodeContainer

CodeContainer: string = style({flex: 1,overflowY: 'hidden',overflowX: 'hidden',display: 'flex',flexFlow: 'column',})

Const Colors

Colors: { blue: ["#17bebb", "#15adaa", "#139c99", "#118b89", "#0f7a78", "#0d6967", "#0a5756", "#084645", "#063535", "#042424", "#021313"]; green: ["#acf7c1", "#9ce0af", "#8cc99d", "#7bb18b", "#6b9a79", "#5b8367", "#4b6c54", "#3b5542", "#2a3d30", "#1a261e", "#0a0f0c"]; grey: ["#F3F3F4", "#E5E5E5", "#CCCCCC", "#B2B2B2", "#999999", "#808080", "#666666", "#4D4D4D", "#333333", "#1A1A1A", "#000000"]; main: ["#d966ff", "#c45ce6", "#b053cd", "#9b49b3", "#873f9a", "#723681", "#5d2c68", "#49224f", "#341835", "#200f1c", "#0b050d"]; orange: ["#f18f01", "#da8201", "#c47401", "#ad6701", "#975901", "#804c01", "#693f00", "#533100", "#3c2400", "#261600", "#0f0900"]; pink: ["#e6bccd", "#d1aaba", "#bb99a7", "#a68793", "#907680", "#7b646d", "#65525a", "#504147", "#3a2f33", "#251e20", "#0f0c0d"]; red: ["#de3c4b", "#c93644", "#b5313d", "#a02b36", "#8b262f", "#772028", "#621a21", "#4d151a", "#380f13", "#240a0c", "#0f0405"]; sky: ["#A3E7FC", "#94d1e5", "#84bccd", "#75a6b5", "#66919e", "#577b87", "#47656f", "#385058", "#293a40", "#192529", "#0a0f11"]; yellow: ["#cfee9e", "#bcd88f", "#a8c180", "#95ab72", "#819563", "#6e7f54", "#5b6845", "#475236", "#343c28", "#202519", "#0d0f0a"] } = {grey: ['#F3F3F4','#E5E5E5','#CCCCCC','#B2B2B2','#999999','#808080','#666666','#4D4D4D','#333333','#1A1A1A','#000000',],main: ['#d966ff','#c45ce6','#b053cd','#9b49b3','#873f9a','#723681','#5d2c68','#49224f','#341835','#200f1c','#0b050d',],green: ['#acf7c1','#9ce0af','#8cc99d','#7bb18b','#6b9a79','#5b8367','#4b6c54','#3b5542','#2a3d30','#1a261e','#0a0f0c',],yellow: ['#cfee9e','#bcd88f','#a8c180','#95ab72','#819563','#6e7f54','#5b6845','#475236','#343c28','#202519','#0d0f0a',],red: ['#de3c4b','#c93644','#b5313d','#a02b36','#8b262f','#772028','#621a21','#4d151a','#380f13','#240a0c','#0f0405',],orange: ['#f18f01','#da8201','#c47401','#ad6701','#975901','#804c01','#693f00','#533100','#3c2400','#261600','#0f0900',],pink: ['#e6bccd','#d1aaba','#bb99a7','#a68793','#907680','#7b646d','#65525a','#504147','#3a2f33','#251e20','#0f0c0d',],blue: ['#17bebb','#15adaa','#139c99','#118b89','#0f7a78','#0d6967','#0a5756','#084645','#063535','#042424','#021313',],sky: ['#A3E7FC','#94d1e5','#84bccd','#75a6b5','#66919e','#577b87','#47656f','#385058','#293a40','#192529','#0a0f11',],} as const

Type declaration

  • blue: ["#17bebb", "#15adaa", "#139c99", "#118b89", "#0f7a78", "#0d6967", "#0a5756", "#084645", "#063535", "#042424", "#021313"]
  • green: ["#acf7c1", "#9ce0af", "#8cc99d", "#7bb18b", "#6b9a79", "#5b8367", "#4b6c54", "#3b5542", "#2a3d30", "#1a261e", "#0a0f0c"]
  • grey: ["#F3F3F4", "#E5E5E5", "#CCCCCC", "#B2B2B2", "#999999", "#808080", "#666666", "#4D4D4D", "#333333", "#1A1A1A", "#000000"]
  • main: ["#d966ff", "#c45ce6", "#b053cd", "#9b49b3", "#873f9a", "#723681", "#5d2c68", "#49224f", "#341835", "#200f1c", "#0b050d"]
  • orange: ["#f18f01", "#da8201", "#c47401", "#ad6701", "#975901", "#804c01", "#693f00", "#533100", "#3c2400", "#261600", "#0f0900"]
  • pink: ["#e6bccd", "#d1aaba", "#bb99a7", "#a68793", "#907680", "#7b646d", "#65525a", "#504147", "#3a2f33", "#251e20", "#0f0c0d"]
  • red: ["#de3c4b", "#c93644", "#b5313d", "#a02b36", "#8b262f", "#772028", "#621a21", "#4d151a", "#380f13", "#240a0c", "#0f0405"]
  • sky: ["#A3E7FC", "#94d1e5", "#84bccd", "#75a6b5", "#66919e", "#577b87", "#47656f", "#385058", "#293a40", "#192529", "#0a0f11"]
  • yellow: ["#cfee9e", "#bcd88f", "#a8c180", "#95ab72", "#819563", "#6e7f54", "#5b6845", "#475236", "#343c28", "#202519", "#0d0f0a"]

Const Content

Content: string = style({background: Colors.pink[10],borderRadius: 4,})

Const DirectiveBackground

DirectiveBackground: string = style({background: Colors.pink[5],})

Const ErrorContainer

ErrorContainer: string = style({position: 'absolute',zIndex: 2,top: 0,right: 0,width: `calc(100% - 40px)`,padding: 20,margin: 20,borderRadius: 4,fontSize: 12,fontFamily,letterSpacing: 1,})

Const ErrorLock

ErrorLock: string = style({width: '100%',height: '100%',position: 'absolute',top: 0,left: 0,background: `${Colors.main[9]}99`,cursor: 'pointer',display: 'flex',justifyContent: 'center',alignItems: 'center',})

Const ErrorLockMessage

ErrorLockMessage: string = style({width: `clamp(200px,50vw,500px)`,fontFamily,fontSize: 14,padding: 30,color: Colors.red[0],background: Colors.main[10],})

Const ErrorLonger

ErrorLonger: string = style({position: 'absolute',background: Colors.red[0],color: Colors.grey[0],padding: 10,fontSize: 10,maxWidth: 200,margin: 5,borderRadius: 5,right: 0,letterSpacing: 1,zIndex: 3,})

Const ErrorOuterContainer

ErrorOuterContainer: string = style({width: '100%',position: 'relative',})

Const ErrorsStateProvider

ErrorsStateProvider: ComponentType<ContainerProviderProps<void>> = useErrorsStateContainer.Provider

Const ExtendButton

ExtendButton: string = style({position: 'relative',borderColor: Colors.orange[0],borderWidth: 1,borderStyle: 'solid',padding: `5px 10px`,borderRadius: 4,width: 200,cursor: 'pointer',margin: 15,display: 'flex',alignItems: 'center',transition: `border-color 0.25s ease-in-out`,})

Const ExtendButtonTitle

ExtendButtonTitle: string = style({padding: `0 5px`,fontSize: 12,color: Colors.grey[0],})

Const ExtendMenuContainer

ExtendMenuContainer: string = style({position: 'absolute',top: 30,right: -70,})

Const FIELD_HEIGHT

FIELD_HEIGHT: 28 = 28

Const FIELD_NAME_SIZE

FIELD_NAME_SIZE: 12 = 12

Const FIELD_TYPE_SIZE

FIELD_TYPE_SIZE: 10 = 10

Const Focus

Focus: string = style({position: 'absolute',})

Const FullScreenContainer

FullScreenContainer: string = style({flex: 1,alignSelf: 'stretch',height: '100%',})

Const FullScreenIcon

FullScreenIcon: string = style({cursor: 'pointer',display: 'flex',color: Colors.grey[0],transition: vars.transition,padding: `0 10px`,$nest: {'&:hover,&.active': {color: Colors.green[0],},},})

Const Generate

Generate: string = style({marginLeft: 'auto',color: Colors.green[3],padding: `2px 6px`,cursor: 'pointer',display: 'flex',alignItems: 'center',fontSize: 10,textTransform: 'lowercase',borderRadius: 3,fontWeight: 'bold',transition: vars.transition,$nest: {'&.disabled': {color: Colors.grey[6],},'&.ready': {color: Colors.grey[0],$nest: {'&:hover': {color: Colors.green[0],$nest: {svg: {animationName,animationDuration: '1s',animationIterationCount: 'infinite',animationTimingFunction: 'linear',},},},},},},})

Const GraphQLEditorCypress

GraphQLEditorCypress: { name: "editor"; code: object; diagram: object; hierarchy: object; sidebar: object } = {name: 'editor',diagram: {name: 'diagram',},code: {name: 'code',},hierarchy: {name: 'hierarchy',},sidebar: {name: 'sidebar',menu: {name: 'menu',children: {diagram: {name: 'diagram',},codeDiagram: {name: 'codeDiagram',},code: {name: 'code',},hierarchy: {name: 'hierarchy',},},},code: {name: 'code',children: {status: {name: 'status',},},},explorer: {name: 'explorer',children: {search: {name: 'search',},filters: {name: 'filters',},list: {name: 'list',},},},},} as const

Type declaration

  • name: "editor"
  • code: object
    • name: "code"
  • diagram: object
    • name: "diagram"
  • hierarchy: object
    • name: "hierarchy"
  • sidebar: object
    • name: "sidebar"
    • code: object
      • name: "code"
      • children: object
        • status: object
          • name: "status"
    • explorer: object
      • name: "explorer"
      • children: object
        • filters: object
          • name: "filters"
        • list: object
          • name: "list"
        • search: object
          • name: "search"
    • menu: object
      • name: "menu"
      • children: object
        • code: object
          • name: "code"
        • codeDiagram: object
          • name: "codeDiagram"
        • diagram: object
          • name: "diagram"
        • hierarchy: object
          • name: "hierarchy"

Const Hider

Hider: string = style({width: 42,height: 42,display: 'flex',alignItems: 'center',justifyContent: 'center',userSelect: 'none',cursor: 'pointer',$nest: {'&:hover': {background: Colors.grey[10],},'&.active': {color: Colors.pink[0],},},})

Const HiderPanel

HiderPanel: string = style({width: menuWidth,background: Colors.main[10],color: Colors.grey[7],fontSize: 12,padding: 3,zIndex: 3,})

Const IOStateProvider

IOStateProvider: ComponentType<ContainerProviderProps<void>> = useIOStateContainer.Provider

Const Indent

Indent: string = style({marginLeft: 2,textOverflow: 'ellipsis',overflow: 'hidden',})

Const Input

Input: string = style({border: 0,background: 'transparent',color: Colors.grey[0],minWidth: 'auto',padding: 0,fontFamily: fontFamily,fontSize: FIELD_NAME_SIZE,})

Const LastField

LastField: string = style({borderBottomLeftRadius: 4,borderBottomRightRadius: 4,})

Const LibraryNodeContainer

LibraryNodeContainer: string = style({$nest: {'.MainNodeArea': MainNodeArea,...Object.keys(GraphQLBackgrounds).reduce((a, b) => {a[`.NodeType-${b}`] = {borderColor: `${GraphQLBackgrounds[b]}`,borderStyle: 'dashed',};return a;}, {} as Record<string, NestedCSSProperties>),},})

Const MAX_NODE_WIDTH

MAX_NODE_WIDTH: 350 = 350

Const MAX_VISIBLE_FIELDS

MAX_VISIBLE_FIELDS: 10 = 10

Const Main

Main: string = style({display: 'flex',flexFlow: 'row nowrap',height: '100%',width: '100%',alignItems: 'stretch',})

Const MainNodeContainer

MainNodeContainer: string = style({$nest: {'.MainNodeArea': MainNodeArea,...Object.keys(GraphQLBackgrounds).reduce((a, b) => {a[`.NodeType-${b}`] = {background: `${GraphQLBackgrounds[b]}`,};return a;}, {} as Record<string, NestedCSSProperties>),},})

Const Marker

Marker: string = style({background: 'red',})

Const MatchedSearchContainer

MatchedSearchContainer: string = style({opacity: 1,})

Const Name

Name: string = style({ fontSize: 10, marginRight: 4, overflow: 'hidden' })

Const NavigationStateProvider

NavigationStateProvider: ComponentType<ContainerProviderProps<void>> = useNavigationStateContainer.Provider

Const NoMatchedSearchContainer

NoMatchedSearchContainer: string = style({opacity: 0.2,})

Const NodeCaption

NodeCaption: string = style({flexBasis: '100%',margin: `15px 15px`,display: 'flex',borderBottom: `1px solid ${Colors.orange[0]}22`,paddingBottom: 5,alignItems: 'center',})

Const NodeContainer

NodeContainer: string = style({padding: 10,display: 'flex',flexWrap: 'wrap',width: '100%',height: '100%',})

Const NodeInterfaceBlock

NodeInterfaceBlock: string = style({padding: `3px 6px`,background: GraphQLBackgrounds.interface,color: Colors.grey[1],fontSize: 10,borderRadius: 4,marginLeft: 10,position: 'relative',cursor: 'pointer',marginBottom: 5,$nest: {'.DeleteInterface': {opacity: 0.0,position: 'absolute',pointerEvents: 'none',cursor: 'pointer',top: -17,right: 0,fontSize: 8,width: 200,textAlign: 'right',$nest: {svg: {fill: 'red',},'&:hover': {opacity: 1.0,},},},svg: {display: 'none',marginLeft: 5,fill: Colors.red[0],},'&:hover': {$nest: {'.DeleteInterface': {opacity: 1.0,},svg: {display: 'inline',},},},},})

Const NodeInterfaces

NodeInterfaces: string = style({maxWidth: 600,display: 'flex',flexFlow: 'row wrap',alignItems: 'flex-start',marginBottom: 5,})

Const NodeMenuContainer

NodeMenuContainer: string = style({position: 'absolute',top: 35,zIndex: 2,})

Const OptionsMenuContainer

OptionsMenuContainer: string = style({position: 'absolute',top: 20,zIndex: 2,})

Const PlusButton

PlusButton: string = style({marginLeft: 'auto',display: 'flex',justifyContent: 'center',alignItems: 'center',alignSelf: 'center',color: Colors.grey[0],border: `1px solid ${Colors.grey[0]}11`,width: 20,height: 20,borderRadius: 10,})

Const RelatedNode

RelatedNode: string = style({opacity: 1.0,})

Const SearchIconContainer

SearchIconContainer: string = style({position: 'absolute',height: 24,width: 24,display: 'flex',alignItems: 'center',justifyContent: 'center',zIndex: 1,})

Const Sidebar

Sidebar: string = style({alignSelf: 'stretch',zIndex: 2,display: 'flex',flex: 1,flexDirection: 'column',overflow: 'hidden',position: 'relative',})

Const ThemeProvider

ThemeProvider: ComponentType<ContainerProviderProps<void>> = useThemesStateContainer.Provider

Const TreesStateProvider

TreesStateProvider: ComponentType<ContainerProviderProps<void>> = useTreesStateContainer.Provider

Const Triangle

Triangle: string = style({width: 0,height: 0,borderLeft: `10px solid transparent`,borderRight: `10px solid transparent`,borderBottom: `15px solid ${Colors.pink[10]}`,margin: 'auto',marginBottom: -1,})

Const Type

Type: string = style({ fontSize: 10, color: Colors.green[0] })

Const UnRelatedNode

UnRelatedNode: string = style({opacity: 0.2,})

Const ValidationWorker

ValidationWorker: any = new Worker()

Const Wrapper

Wrapper: string = style({width: '100%',height: '100%',overflowX: 'hidden',position: 'relative',background: `#0b050d`,overflowY: 'auto',})

Const XIconContainer

XIconContainer: string = style({position: 'absolute',height: 24,width: 24,right: 10,display: 'flex',alignItems: 'center',justifyContent: 'center',cursor: 'pointer',zIndex: 1,})

Const animationName

animationName: string = keyframes({['0%']: {transform: `rotate(0deg)`,},['100%']: {transform: `rotate(360deg)`,},})

Let codeLock

codeLock: boolean = false

Const ctx

ctx: Worker = self as any

Const docsColor

docsColor: "#139c99" = Colors.blue[2]

Const fadeIn

fadeIn: string = keyframes({['0%']: {opacity: 0.0,},['100%']: {opacity: 1.0,},})

Const fontFamily

fontFamily: "'Fira Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace" = `'Fira Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`

Const language

language: IMonarchLanguage | Thenable<IMonarchLanguage> = <monaco.languages.IMonarchLanguage | monaco.Thenable<monaco.languages.IMonarchLanguage>>{// Set defaultToken to invalid to see what you do not tokenize yetdefaultToken: 'invalid',tokenPostfix: '.gql',keywords: ['null', 'true', 'false', 'query', 'mutation', 'subscription', 'schema', 'implements', 'fragment', 'on'],inputs: ['input'],types: ['type'],interfaces: ['interface'],enums: ['enum'],unions: ['union'],scalars: ['scalar'],extends: ['extend'],directives: ['directive'],typeKeywords: ['Int', 'Float', 'String', 'Boolean', 'ID'],directiveLocations: ['SCHEMA','SCALAR','OBJECT','FIELD_DEFINITION','ARGUMENT_DEFINITION','INTERFACE','UNION','ENUM','ENUM_VALUE','INPUT_OBJECT','INPUT_FIELD_DEFINITION','QUERY','MUTATION','SUBSCRIPTION','FIELD','FRAGMENT_DEFINITION','FRAGMENT_SPREAD','INLINE_FRAGMENT','VARIABLE_DEFINITION',],operators: ['=', '!', '?', ':', '&', '|'],// we include these common regular expressionssymbols: /[=!?:&|]+/,// https://facebook.github.io/graphql/draft/#sec-String-Valueescapes: /\\(?:["\\\/bfnrt]|u[0-9A-Fa-f]{4})/,// The main tokenizer for our languagestokenizer: {root: [// identifiers and keywords[/\!/,{token: 'exclamation',},],[/[a-z_$][\w$]*/,{cases: {'@keywords': 'keyword','@inputs': 'input','@types': 'type','@interfaces': 'interface','@enums': 'enum','@unions': 'union','@scalars': 'scalar','@extends': 'extend','@directives': 'directive','@default': 'identifier',},},],[/[A-Z][\w\$]*/,{cases: {'@typeKeywords': 'scalar','@default': 'identifier',},},],[/@[\w\$]*/,{cases: {'@default': 'identifier',},},],// whitespace{ include: '@whitespace' },// delimiters and operators[/[{}()\[\]]/, '@brackets'],[/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],// numbers[/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],[/0[xX][0-9a-fA-F]+/, 'number.hex'],[/\d+/, 'number'],// delimiter: after number because of .\d floats[/[;,.]/, 'delimiter'],[`"""`, { token: 'string.doc', next: '@mlstring', nextEmbedded: 'markdown' }],// strings[/"([^"\\]|\\.)*$/, 'string.invalid'], // non-teminated string[/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],],mlstring: [[`"""`, { token: 'string.doc', next: '@pop', nextEmbedded: '@pop' }]],string: [[/[^\\"]+/, 'string'],[/@escapes/, 'string.escape'],[/\\./, 'string.escape.invalid'],[/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],],whitespace: [[/[\s\t\r\n]+/, ''],[/#.*$/, 'comment'],],},}

Const menuWidth

menuWidth: 46 = 46

Const sizeSidebar

sizeSidebar: "25vw" = "25vw"

Let snapLock

snapLock: boolean = true

Const transition

transition: ".25s all" = ".25s all"

Let treeLock

treeLock: boolean = false

Const useErrorsState

useErrorsState: () => Value = useErrorsStateContainer.useContainer

Type declaration

    • (): Value
    • Returns Value

Const useErrorsStateContainer

useErrorsStateContainer: Container<{ codeErrors: EditorError[]; grafErrors: undefined | string; lockCode: boolean; lockGraf: boolean; setCodeErrors: Dispatch<SetStateAction<EditorError[]>>; setGrafErrors: Dispatch<SetStateAction<undefined | string>>; setLockCode: Dispatch<SetStateAction<boolean>>; setLockGraf: Dispatch<SetStateAction<boolean>> }, void> = createContainer(() => {const [codeErrors, setCodeErrors] = useState<EditorError[]>([]);const [grafErrors, setGrafErrors] = useState<string>();const [lockGraf, setLockGraf] = useState<boolean>(false);const [lockCode, setLockCode] = useState<boolean>(false);return { codeErrors, setCodeErrors, grafErrors, setGrafErrors, lockGraf, lockCode, setLockGraf, setLockCode };})

Const useIOState

useIOState: () => Value = useIOStateContainer.useContainer

Type declaration

    • (): Value
    • Returns Value

Const useIOStateContainer

useIOStateContainer: Container<{ setActions: Dispatch<SetStateAction<Partial<Record<KeyboardActions, Function>>>> }, void> = createContainer(() => {const [actions, setActions] = useState<Partial<Record<KeyboardActions, Function>>>({});const on = (action: KeyboardActions) => {actions[action]?.();};useEffect(() => {const handleKeyboard = (event: KeyboardEvent) => {// if (DOM.panLock) return;const ctrl = event.ctrlKey || event.metaKey;if (event.key === 'm') {}if (event.key === 'Delete') {on(KeyboardActions.Delete);}if (event.key === 'Backspace') {on(KeyboardActions.Delete);}if (event.key === 'z' && ctrl && !event.shiftKey) {on(KeyboardActions.Undo);}if (event.key === 'z' && ctrl && event.shiftKey) {on(KeyboardActions.Redo);}if (event.key === 's' && ctrl) {event.preventDefault();on(KeyboardActions.Save);}};document.addEventListener('keydown', handleKeyboard);return () => {document.removeEventListener('keydown', handleKeyboard);};}, [actions]);return {setActions,};})

Const useNavigationState

useNavigationState: () => Value = useNavigationStateContainer.useContainer

Type declaration

    • (): Value
    • Returns Value

Const useNavigationStateContainer

useNavigationStateContainer: Container<{ menuState: ActivePane; setMenuState: Dispatch<SetStateAction<ActivePane>> }, void> = createContainer(() => {const [menuState, setMenuState] = useState<ActivePane>('diagram');return { menuState, setMenuState };})

Const useTheme

useTheme: () => Value = useThemesStateContainer.useContainer

Type declaration

    • (): Value
    • Returns Value

Const useThemesStateContainer

useThemesStateContainer: Container<{ setTheme: Dispatch<SetStateAction<ThemeDefinition>>; theme: ThemeDefinition; themed: themed }, void> = createContainer(() => {const [theme, setTheme] = useState<ThemeDefinition>(MainTheme);const themed = (themeKey: keyof ThemeDefinition) => (className: string) =>[className, style(theme[themeKey])].join(' ');return { theme, setTheme, themed };})

Const useTreesState

useTreesState: () => Value = useTreesStateContainer.useContainer

Type declaration

    • (): Value
    • Returns Value

Const useTreesStateContainer

useTreesStateContainer: Container<{ future: future; libraryTree: ParserTree; past: past; position: undefined | { offsetLeft: number; offsetTop: number; width: number }; readonly: boolean; relatedToSelected: (Anonymous function); selectedNode: undefined | { dataType: AllTypes; name: string }; selectedNodeRef: RefObject<HTMLDivElement>; setLibraryTree: Dispatch<SetStateAction<ParserTree>>; setPosition: Dispatch<SetStateAction<undefined | { offsetLeft: number; offsetTop: number; width: number }>>; setReadonly: Dispatch<SetStateAction<boolean>>; setSelectedNode: Dispatch<SetStateAction<undefined | { dataType: AllTypes; name: string }>>; setSnapshots: Dispatch<SetStateAction<string[]>>; setTree: Dispatch<SetStateAction<ParserTree>>; setUndos: Dispatch<SetStateAction<string[]>>; snapshots: string[]; tree: ParserTree; undos: string[] }, void> = createContainer(() => {const [tree, setTree] = useState<ParserTree>({ nodes: [] });const [libraryTree, setLibraryTree] = useState<ParserTree>({ nodes: [] });const [snapshots, setSnapshots] = useState<string[]>([]);const [undos, setUndos] = useState<string[]>([]);const [selectedNode, setSelectedNode] = useState<{ name: string; dataType: AllTypes }>();const selectedNodeRef = useRef<HTMLDivElement>(null);const [readonly, setReadonly] = useState(false);const [position, setPosition] = useState<{offsetLeft: number;offsetTop: number;width: number;}>();const past = () => {const p = snapshots.pop();if (p) {setUndos((u) => [...u, p]);setSnapshots([...snapshots]);return p;}};const future = () => {const p = undos.pop();if (p) {setUndos([...undos]);setSnapshots((s) => [...s, p]);return p;}};const relatedToSelected = useCallback(() => {const node =tree.nodes.find((n) => n.name === selectedNode?.name && n.data.type === selectedNode.dataType) ||libraryTree.nodes.find((n) => n.name === selectedNode?.name && n.data.type === selectedNode.dataType);if (node) {return node.args?.map((a) => a.type.name);}}, [selectedNode]);return {tree,setTree,libraryTree,setLibraryTree,snapshots,setSnapshots,selectedNode,setSelectedNode,selectedNodeRef,position,setPosition,past,undos,setUndos,future,relatedToSelected,readonly,setReadonly,};})

Functions

Const ActiveArgument

  • ActiveArgument(__namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNode: ParserField; parentNodeTypeName: string }): Element
  • Parameters

    • __namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNode: ParserField; parentNodeTypeName: string }
      • inputDisabled: undefined | false | true
      • inputOpen: boolean
      • isLocked: undefined | false | true
      • last: undefined | false | true
      • node: ParserField
      • onDelete: () => void
          • (): void
          • Returns void

      • onInputClick: () => void
          • (): void
          • Returns void

      • onOutputClick: () => void
          • (): void
          • Returns void

      • outputDisabled: undefined | false | true
      • outputOpen: boolean
      • parentNode: ParserField
      • parentNodeTypeName: string

    Returns Element

Const ActiveArgumentName

  • ActiveArgumentName(__namedParameters: { afterChange: (newName: string) => void; node: ParserField }): Element
  • Parameters

    • __namedParameters: { afterChange: (newName: string) => void; node: ParserField }
      • afterChange: (newName: string) => void
          • (newName: string): void
          • Parameters

            • newName: string

            Returns void

      • node: ParserField

    Returns Element

Const ActiveDescription

  • ActiveDescription(__namedParameters: { className: string; isLocked: undefined | false | true; onChange: (changedValue: string) => void; value: string }): Element
  • Parameters

    • __namedParameters: { className: string; isLocked: undefined | false | true; onChange: (changedValue: string) => void; value: string }
      • className: string
      • isLocked: undefined | false | true
      • onChange: (changedValue: string) => void
          • (changedValue: string): void
          • Parameters

            • changedValue: string

            Returns void

      • value: string

    Returns Element

Const ActiveDirective

  • ActiveDirective(__namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean }): Element
  • Parameters

    • __namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean }
      • inputDisabled: undefined | false | true
      • inputOpen: boolean
      • isLocked: undefined | false | true
      • last: undefined | false | true
      • node: ParserField
      • onDelete: () => void
          • (): void
          • Returns void

      • onInputClick: () => void
          • (): void
          • Returns void

      • onOutputClick: () => void
          • (): void
          • Returns void

      • outputDisabled: undefined | false | true
      • outputOpen: boolean

    Returns Element

Const ActiveField

  • ActiveField(__namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNodeTypeName: string }): Element
  • Parameters

    • __namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNodeTypeName: string }
      • inputDisabled: undefined | false | true
      • inputOpen: boolean
      • isLocked: undefined | false | true
      • last: undefined | false | true
      • node: ParserField
      • onDelete: () => void
          • (): void
          • Returns void

      • onInputClick: () => void
          • (): void
          • Returns void

      • onOutputClick: () => void
          • (): void
          • Returns void

      • outputDisabled: undefined | false | true
      • outputOpen: boolean
      • parentNodeTypeName: string

    Returns Element

Const ActiveFieldName

  • ActiveFieldName(__namedParameters: { afterChange: (newName: string) => void; args: undefined | ParserField[]; data: GraphQLNodeParams; name: string }): Element
  • Parameters

    • __namedParameters: { afterChange: (newName: string) => void; args: undefined | ParserField[]; data: GraphQLNodeParams; name: string }
      • afterChange: (newName: string) => void
          • (newName: string): void
          • Parameters

            • newName: string

            Returns void

      • args: undefined | ParserField[]
      • data: GraphQLNodeParams
      • name: string

    Returns Element

Const ActiveInputValue

  • ActiveInputValue(__namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNodeTypeName: string }): Element
  • Parameters

    • __namedParameters: { inputDisabled: undefined | false | true; inputOpen: boolean; isLocked: undefined | false | true; last: undefined | false | true; node: ParserField; onDelete: () => void; onInputClick: () => void; onOutputClick: () => void; outputDisabled: undefined | false | true; outputOpen: boolean; parentNodeTypeName: string }
      • inputDisabled: undefined | false | true
      • inputOpen: boolean
      • isLocked: undefined | false | true
      • last: undefined | false | true
      • node: ParserField
      • onDelete: () => void
          • (): void
          • Returns void

      • onInputClick: () => void
          • (): void
          • Returns void

      • onOutputClick: () => void
          • (): void
          • Returns void

      • outputDisabled: undefined | false | true
      • outputOpen: boolean
      • parentNodeTypeName: string

    Returns Element

Const ActiveInputValueName

  • ActiveInputValueName(__namedParameters: { afterChange: (newName: string) => void; node: ParserField }): Element
  • Parameters

    • __namedParameters: { afterChange: (newName: string) => void; node: ParserField }
      • afterChange: (newName: string) => void
          • (newName: string): void
          • Parameters

            • newName: string

            Returns void

      • node: ParserField

    Returns Element

Const ActiveNode

  • ActiveNode(__namedParameters: { node: ParserField; sharedProps: sharedProps }): Element

Const ActiveType

  • ActiveType(__namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }): Element
  • Parameters

    • __namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }
      • type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] }
        • Optional directiveOptions?: Directive[]
        • name: string
        • Optional operations?: OperationType[]
        • Optional options?: Options[]

    Returns Element

Const Arrq

  • Arrq(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const ChangeAllRelatedNodes

  • ChangeAllRelatedNodes(__namedParameters: { newName: string; nodes: ParserField[]; oldName: string }): void
  • Parameters

    • __namedParameters: { newName: string; nodes: ParserField[]; oldName: string }
      • newName: string
      • nodes: ParserField[]
      • oldName: string

    Returns void

Const ChangeRelatedNode

  • ChangeRelatedNode(__namedParameters: { newName: string; node: ParserField; oldName: string }): void
  • Parameters

    • __namedParameters: { newName: string; node: ParserField; oldName: string }
      • newName: string
      • node: ParserField
      • oldName: string

    Returns void

Const Code

Const CodePane

Const ConvertStringToObject

  • ConvertStringToObject(value: string): undefined | ParserField[]

Const ConvertValueNodeToString

  • ConvertValueNodeToString(node: ParserField): string

Const ConvertValueToEditableString

  • ConvertValueToEditableString(f: ParserField): string

Const DetailMenuItem

  • DetailMenuItem(__namedParameters: { children: ReactNode; onClick: () => void }): Element

Const DynamicResize

  • DynamicResize(__namedParameters: { children: ReactNode; disabledClass: undefined | string; resizeCallback: ResizeCallback; width: TLength }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; disabledClass: undefined | string; resizeCallback: ResizeCallback; width: TLength }
      • children: ReactNode
      • disabledClass: undefined | string
      • resizeCallback: ResizeCallback
      • width: TLength

    Returns Element

Const EditableDefaultValue

  • EditableDefaultValue(__namedParameters: { autoFocus: undefined | false | true; onChange: undefined | ((value: string) => void); style: CSSProperties; value: string }): Element
  • Parameters

    • __namedParameters: { autoFocus: undefined | false | true; onChange: undefined | ((value: string) => void); style: CSSProperties; value: string }
      • autoFocus: undefined | false | true
      • onChange: undefined | ((value: string) => void)
      • style: CSSProperties
      • value: string

    Returns Element

Const EditableText

  • EditableText(__namedParameters: { autoFocus: undefined | false | true; fontSize: undefined | number; onChange: undefined | ((value: string) => void); value: string }): Element
  • Parameters

    • __namedParameters: { autoFocus: undefined | false | true; fontSize: undefined | number; onChange: undefined | ((value: string) => void); value: string }
      • autoFocus: undefined | false | true
      • fontSize: undefined | number
      • onChange: undefined | ((value: string) => void)
      • value: string

    Returns Element

Const Editor

  • Editor(__namedParameters: { activePane: ActivePane; initialSizeOfSidebar: TLength; onPaneChange: undefined | ((pane: ActivePane) => void); onSchemaChange: undefined | ((props: PassedSchema) => void); placeholder: undefined | string; readonly: undefined | false | true; schema: object }): Element
  • Parameters

    • __namedParameters: { activePane: ActivePane; initialSizeOfSidebar: TLength; onPaneChange: undefined | ((pane: ActivePane) => void); onSchemaChange: undefined | ((props: PassedSchema) => void); placeholder: undefined | string; readonly: undefined | false | true; schema: object }
      • activePane: ActivePane
      • initialSizeOfSidebar: TLength
      • onPaneChange: undefined | ((pane: ActivePane) => void)
      • onSchemaChange: undefined | ((props: PassedSchema) => void)
      • placeholder: undefined | string
      • readonly: undefined | false | true
      • schema: object
        • code: string
        • libraries: string

    Returns Element

Const ExtendNodeMenu

  • ExtendNodeMenu(__namedParameters: { hideMenu: () => void }): Element

Const Eye

Const EyeOff

Const FieldPort

  • FieldPort(__namedParameters: { children: ReactNode; info: undefined | { message: string; placement: "top" | "bottom" | "left" | "right" }; onClick: () => void; open: undefined | false | true; icons: object }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; info: undefined | { message: string; placement: "top" | "bottom" | "left" | "right" }; onClick: () => void; open: undefined | false | true; icons: object }
      • children: ReactNode
      • info: undefined | { message: string; placement: "top" | "bottom" | "left" | "right" }
      • onClick: () => void
          • (): void
          • Returns void

      • open: undefined | false | true
      • icons: object
        • closed: "Plus"
        • open: "Minus"

    Returns Element

Const Filter

Const FullScreen

Const Graf

  • Graf(): Element

Const GraphQLEditor

Const GraphQLErrorToEditorErrors

  • GraphQLErrorToEditorErrors(e: GraphQLError): EditorError[]

Const Hide

Const Hierarchy

  • Hierarchy(): Element

Const Interface

  • Interface(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const Layers

Const Lock

Const Menu

  • Menu(__namedParameters: { activePane: ActivePane; setActivePane: (pane: ActivePane) => void }): Element
  • Menu(__namedParameters: { children: ReactNode; hideMenu: () => void; props: props }): Element

Const MenuItem

  • MenuItem(__namedParameters: { node: ParserField; onClick: () => void }): Element

Const MenuScrollingArea

  • MenuScrollingArea(__namedParameters: { children: ReactNode; props: props }): Element

Const MenuSearch

  • MenuSearch(__namedParameters: { onChange: (v: string) => void; onClear: () => void; value: string }): Element
  • Parameters

    • __namedParameters: { onChange: (v: string) => void; onClear: () => void; value: string }
      • onChange: (v: string) => void
          • (v: string): void
          • Parameters

            • v: string

            Returns void

      • onClear: () => void
          • (): void
          • Returns void

      • value: string

    Returns Element

Const Minus

  • Minus(props: IconProps): Element
  • Minus(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const Monkey

  • Monkey(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const More

  • More(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const MoreValues

  • MoreValues(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const NewNode

  • NewNode(__namedParameters: { node: ParserField; onCreate: (name: string) => void }): Element
  • Parameters

    • __namedParameters: { node: ParserField; onCreate: (name: string) => void }
      • node: ParserField
      • onCreate: (name: string) => void
          • (name: string): void
          • Parameters

            • name: string

            Returns void

    Returns Element

Const NodeAddDirectiveMenu

  • NodeAddDirectiveMenu(__namedParameters: { hideMenu: () => void; node: ParserField }): Element

Const NodeAddFieldMenu

  • NodeAddFieldMenu(__namedParameters: { hideMenu: () => void; node: ParserField }): Element

Const NodeDirectiveOptionsMenu

  • NodeDirectiveOptionsMenu(__namedParameters: { hideMenu: () => void; node: ParserField }): Element

Const NodeFieldContainer

  • NodeFieldContainer(__namedParameters: { children: ReactNode; className: string; props: props }): Element

Const NodeImplementInterfacesMenu

  • NodeImplementInterfacesMenu(__namedParameters: { hideMenu: () => void; node: ParserField }): Element

Const NodeInterface

  • NodeInterface(__namedParameters: { children: ReactNode; isLocked: undefined | false | true; onDelete: () => void }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; isLocked: undefined | false | true; onDelete: () => void }
      • children: ReactNode
      • isLocked: undefined | false | true
      • onDelete: () => void
          • (): void
          • Returns void

    Returns Element

Const NodeTypeOptionsMenu

  • NodeTypeOptionsMenu(__namedParameters: { hideMenu: () => void; node: ParserField }): Element

Const OptionsMenu

  • OptionsMenu(__namedParameters: { children: ReactNode; hideMenu: () => void; onCheck: (name: string) => void; options: Record<string, boolean>; props: props }): Element
  • Parameters

    • __namedParameters: { children: ReactNode; hideMenu: () => void; onCheck: (name: string) => void; options: Record<string, boolean>; props: props }
      • children: ReactNode
      • hideMenu: () => void
          • (): void
          • Returns void

      • onCheck: (name: string) => void
          • (name: string): void
          • Parameters

            • name: string

            Returns void

      • options: Record<string, boolean>
      • props: props

    Returns Element

Const PaintField

  • PaintField(__namedParameters: { last: undefined | false | true; node: ParserField; parentNodeTypeName: string }): Element
  • Parameters

    • __namedParameters: { last: undefined | false | true; node: ParserField; parentNodeTypeName: string }
      • last: undefined | false | true
      • node: ParserField
      • parentNodeTypeName: string

    Returns Element

Const PaintFieldName

  • PaintFieldName(__namedParameters: { args: undefined | ParserField[]; data: GraphQLNodeParams; name: string }): Element

Const PaintNode

  • PaintNode(__namedParameters: { isLibrary: undefined | false | true; isMatchedToSearch: undefined | false | true; node: ParserField }): Element
  • Parameters

    • __namedParameters: { isLibrary: undefined | false | true; isMatchedToSearch: undefined | false | true; node: ParserField }
      • isLibrary: undefined | false | true
      • isMatchedToSearch: undefined | false | true
      • node: ParserField

    Returns Element

Const PaintNodes

  • PaintNodes(): Element

Const PaintType

  • PaintType(__namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }): Element
  • Parameters

    • __namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }
      • type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] }
        • Optional directiveOptions?: Directive[]
        • name: string
        • Optional operations?: OperationType[]
        • Optional options?: Options[]

    Returns Element

Const Play

Const Plus

  • Plus(props: IconProps): Element
  • Plus(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const ResolveCreateField

  • ResolveCreateField(field: ParserField, actualFields: ParserField[]): ParserField[] | undefined

Const ResolveDirectives

  • ResolveDirectives(field: ParserField, actualFields: ParserField[]): ParserField[]

Const ResolveExtension

  • ResolveExtension(t: AllTypes): undefined | ScalarTypeExtension | ObjectTypeExtension | InterfaceTypeExtension | UnionTypeExtension | EnumTypeExtension | InputObjectTypeExtension
  • Parameters

    • t: AllTypes

    Returns undefined | ScalarTypeExtension | ObjectTypeExtension | InterfaceTypeExtension | UnionTypeExtension | EnumTypeExtension | InputObjectTypeExtension

Const ResolveImplementInterface

  • ResolveImplementInterface(field: ParserField, actualFields: ParserField[]): ParserField[] | undefined

Const RootExtendNode

  • RootExtendNode(__namedParameters: { libraryNode: undefined | ParserField; node: ParserField }): Element
  • Parameters

    • __namedParameters: { libraryNode: undefined | ParserField; node: ParserField }
      • libraryNode: undefined | ParserField
      • node: ParserField

    Returns Element

Const RootNode

  • RootNode(__namedParameters: { libraryNode: undefined | ParserField; node: ParserField }): Element
  • Parameters

    • __namedParameters: { libraryNode: undefined | ParserField; node: ParserField }
      • libraryNode: undefined | ParserField
      • node: ParserField

    Returns Element

Const Search

  • Search(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const Settings

Const Show

Const StatusDot

Const Tick

  • Tick(props: PropsWithChildren<SVGProps<SVGSVGElement>>): Element

Const Title

  • Title(__namedParameters: { children: ReactNode; className: string; props: props }): Element

Const TitleOfPane

  • TitleOfPane(__namedParameters: { children: ReactNode }): Element

Const ToggleOff

Const ToggleOn

Const TopNodeMenu

  • TopNodeMenu(__namedParameters: { node: ParserField; onDelete: () => void; onDuplicate: undefined | (() => void) }): Element
  • Parameters

    • __namedParameters: { node: ParserField; onDelete: () => void; onDuplicate: undefined | (() => void) }
      • node: ParserField
      • onDelete: () => void
          • (): void
          • Returns void

      • onDuplicate: undefined | (() => void)

    Returns Element

Const Trash

Const X

  • X(props: IconProps): Element
  • X(__namedParameters: { fill: string; props: props }): Element

bounds

Const catchSchemaErrors

  • catchSchemaErrors(schema: string, libraries?: string): EditorError[]

Const compileTypeOptions

  • compileTypeOptions(__namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }): string
  • Parameters

    • __namedParameters: { type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] } }
      • type: { directiveOptions?: Directive[]; name: string; operations?: OperationType[]; options?: Options[] }
        • Optional directiveOptions?: Directive[]
        • name: string
        • Optional operations?: OperationType[]
        • Optional options?: Options[]

    Returns string

Const configureOpts

  • configureOpts(node: ParserField): Record<string, boolean>
  • configureOpts(node: ParserField): Record<string, boolean>

cypressGet

  • cypressGet<T, P1>(obj: T, prop1: P1): NonNullable<T>[P1]
  • cypressGet<T, P1, P2>(obj: T, prop1: P1, prop2: P2): NonNullable<NonNullable<T>[P1]>[P2]
  • cypressGet<T, P1, P2, P3>(obj: T, prop1: P1, prop2: P2, prop3: P3): NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]
  • cypressGet<T, P1, P2, P3, P4>(obj: T, prop1: P1, prop2: P2, prop3: P3, prop4: P4): NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>[P4]
  • cypressGet<T, P1, P2, P3, P4, P5>(obj: T, prop1: P1, prop2: P2, prop3: P3, prop4: P4, prop5: P5): NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>[P4]>[P5]
  • Type parameters

    • T

    • P1: keyof NonNullable<T>

    Parameters

    • obj: T
    • prop1: P1

    Returns NonNullable<T>[P1]

  • Type parameters

    • T

    • P1: keyof NonNullable<T>

    • P2: keyof NonNullable<NonNullable<T>[P1]>

    Parameters

    • obj: T
    • prop1: P1
    • prop2: P2

    Returns NonNullable<NonNullable<T>[P1]>[P2]

  • Type parameters

    • T

    • P1: keyof NonNullable<T>

    • P2: keyof NonNullable<NonNullable<T>[P1]>

    • P3: keyof NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>

    Parameters

    • obj: T
    • prop1: P1
    • prop2: P2
    • prop3: P3

    Returns NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]

  • Type parameters

    • T

    • P1: keyof NonNullable<T>

    • P2: keyof NonNullable<NonNullable<T>[P1]>

    • P3: keyof NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>

    • P4: keyof NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>

    Parameters

    • obj: T
    • prop1: P1
    • prop2: P2
    • prop3: P3
    • prop4: P4

    Returns NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>[P4]

  • Type parameters

    • T

    • P1: keyof NonNullable<T>

    • P2: keyof NonNullable<NonNullable<T>[P1]>

    • P3: keyof NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>

    • P4: keyof NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>

    • P5: keyof NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>[P4]>

    Parameters

    • obj: T
    • prop1: P1
    • prop2: P2
    • prop3: P3
    • prop4: P4
    • prop5: P5

    Returns NonNullable<NonNullable<NonNullable<NonNullable<NonNullable<T>[P1]>[P2]>[P3]>[P4]>[P5]

Const fade

Const getAcceptedDirectives

  • getAcceptedDirectives(f: ParserField): Directive[]

intersects

  • intersects(a: Box, b: Box): boolean

Const isExtensionNode

  • isExtensionNode(t: AllTypes): boolean

Const isHexa

  • isHexa(s: string): s is HexaDecimal

Const isScalarArgument

  • isScalarArgument(field: ParserField): undefined | IntValue | FloatValue | StringValue | BooleanValue

Const mapEditorErrorToMonacoDecoration

  • mapEditorErrorToMonacoDecoration(e: EditorError): IModelDeltaDecoration

Const mix

Const moveErrorsByLibraryPadding

  • moveErrorsByLibraryPadding(libraries: string): (Anonymous function)
  • Extend code with library and remember library line size to move the error later

    Parameters

    • libraries: string

    Returns (Anonymous function)

packBoxes

Const placeStringInNode

  • placeStringInNode(__namedParameters: { node: ParserField; v: string }): undefined | ParserField[]
  • placeStringInNode(__namedParameters: { node: ParserField; v: string }): undefined | ParserField[]

rate

  • rate(layout: Layout): number

Const resolveValueFromNode

  • resolveValueFromNode(node: ParserField, parentNode: ParserField): string

Const settings

  • settings(override?: IStandaloneEditorConstructionOptions): IStandaloneEditorConstructionOptions

validate

  • validate(boxes: Box[], box: Box): boolean

Const validateSDLErrors

Const validateTypes

whitespace

  • whitespace(layout: Layout): number

Object literals

Const DescriptionPosition

DescriptionPosition: object

outline

outline: string = "none"

position

position: "absolute" = "absolute"

transform

transform: string = "translate(0px, calc(-100% - 10px))"

transformOrigin

transformOrigin: string = "center bottom"

width

width: string = "100%"

$nest

$nest: object

&:focus

&:focus: object

border

border: string = `1px solid ${Colors.grey[3]}`

Const GraphQLBackgrounds

GraphQLBackgrounds: object

Boolean

Boolean: "#4b6c54" = Colors.green[6]

Extend

Extend: "#693f00" = Colors.orange[6]

Float

Float: "#4b6c54" = Colors.green[6]

ID

ID: "#4b6c54" = Colors.green[6]

Int

Int: "#4b6c54" = Colors.green[6]

String

String: "#4b6c54" = Colors.green[6]

directive

directive: "#65525a" = Colors.pink[6]

enum

enum: "#5b6845" = Colors.yellow[6]

extend

extend: "#693f00" = Colors.orange[6]

input

input: "#0a5756" = Colors.blue[6]

interface

interface: "#47656f" = Colors.sky[6]

scalar

scalar: "#4b6c54" = Colors.green[6]

type

type: "#5d2c68" = Colors.main[6]

union

union: "#49224f" = Colors.main[7]

Const GraphQLColors

GraphQLColors: object

Boolean

Boolean: "#acf7c1" = Colors.green[0]

Float

Float: "#acf7c1" = Colors.green[0]

ID

ID: "#acf7c1" = Colors.green[0]

Int

Int: "#acf7c1" = Colors.green[0]

String

String: "#acf7c1" = Colors.green[0]

directive

directive: "#e6bccd" = Colors.pink[0]

enum

enum: "#cfee9e" = Colors.yellow[0]

extend

extend: "#f18f01" = Colors.orange[0]

input

input: "#17bebb" = Colors.blue[0]

interface

interface: "#A3E7FC" = Colors.sky[0]

scalar

scalar: "#acf7c1" = Colors.green[0]

type

type: "#d966ff" = Colors.main[0]

union

union: "#d966ff" = Colors.main[0]

Const LeftNodeArea

LeftNodeArea: object

alignItems

alignItems: string = "flex-end"

display

display: string = "flex"

flexDirection

flexDirection: "column" = "column"

left

left: number = -300

position

position: "absolute" = "absolute"

width

width: number = 300

zIndex

zIndex: number = 4

Const LeftNodeAreaNode

LeftNodeAreaNode: object

position

position: "relative" = "relative"

Const LibraryNodeArea

LibraryNodeArea: object

borderStyle

borderStyle: string = "dashed"

Const MainNodeArea

MainNodeArea: object

borderColor

borderColor: string = "transparent"

borderRadius

borderRadius: number = 4

borderStyle

borderStyle: string = "solid"

borderWidth

borderWidth: number = 1

cursor

cursor: string = "pointer"

maxWidth

maxWidth: number = 600

position

position: "relative" = "relative"

transition

transition: string = `border-color 0.25s ease-in-out`

$nest

$nest: object

&.LibraryNodeArea

&.LibraryNodeArea: NestedCSSProperties = LibraryNodeArea

.NodeFields

.NodeFields: NestedCSSProperties = NodeFields

&:hover

&:hover: object

borderColor

borderColor: "#acf7c1" = Colors.green[0]

.NodeTitle

.NodeTitle: object = NodeTitle

background

background: string = "transparent"

borderBottomLeftRadius

borderBottomLeftRadius: number = 4

borderBottomRightRadius

borderBottomRightRadius: number = 4

width

width: number = 200

$nest

$nest: object

.NameErrorMessage

.NameErrorMessage: NestedCSSProperties = NameErrorMessage

.NodeCreate

.NodeCreate: NestedCSSProperties = NodeCreate

Const MainTheme

MainTheme: object

ErrorContainer

ErrorContainer: object

background

background: string = `${Colors.red[6]}ee`

border

border: string = `1px solid ${Colors.red[0]}`

color

color: "#e6bccd" = Colors.pink[0]

Sidebar

Sidebar: object

background

background: "#333333" = Colors.grey[8]

Const NameError

NameError: object

color

color: "#de3c4b" = Colors.red[0]

Const NameErrorMessage

NameErrorMessage: object

alignItems

alignItems: string = "center"

color

color: "#de3c4b" = Colors.red[0]

display

display: string = "flex"

fontSize

fontSize: number = 10

height

height: number = 30

marginLeft

marginLeft: number = -10

position

position: "absolute" = "absolute"

top

top: number = -30

width

width: number = 600

Const NodeCreate

NodeCreate: object

background

background: string = "transparent"

border

border: number = 0

color

color: "#F3F3F4" = Colors.grey[0]

fontFamily

fontFamily: string

fontSize

fontSize: number = 12

outline

outline: number = 0

padding

padding: string = `5px 0 5px 10px`

width

width: number = 200

$nest

$nest: object

&.NameError

&.NameError: NestedCSSProperties = NameError

&::placeholder

&::placeholder: object

fontFamily

fontFamily: string

Const NodeFields

NodeFields: object

background

background: "#333333" = Colors.grey[8]

borderBottomLeftRadius

borderBottomLeftRadius: number = 4

borderBottomRightRadius

borderBottomRightRadius: number = 4

Const NodeIconArea

NodeIconArea: object

alignItems

alignItems: string = "center"

alignSelf

alignSelf: string = "center"

background

background: string = "transparent"

borderRadius

borderRadius: number = 12

cursor

cursor: string = "pointer"

display

display: string = "flex"

height

height: number = 24

justifyContent

justifyContent: string = "center"

transition

transition: string = "background 0.25s ease-in-out"

width

width: number = 24

$nest

$nest: object

&:hover

&:hover: object

background

background: string = "#0003"

Const NodeName

NodeName: object

-moz-user-select

-moz-user-select: "-moz-none" = "-moz-none"

color

color: "#F3F3F4" = Colors.grey[0]

fontSize

fontSize: number = 12

marginRight

marginRight: number = 10

padding

padding: string = `5px 0 5px 10px`

userSelect

userSelect: "none" = "none"

Const NodeTitle

NodeTitle: object

alignItems

alignItems: string = "stretch"

background

background: "#333333" = Colors.grey[8]

borderTopLeftRadius

borderTopLeftRadius: number = 4

borderTopRightRadius

borderTopRightRadius: number = 4

display

display: string = "flex"

padding

padding: number = 5

$nest

$nest: object

.NodeIconArea

.NodeIconArea: NestedCSSProperties = NodeIconArea

.NodeName

.NodeName: NestedCSSProperties = NodeName

.NodeType

.NodeType: NestedCSSProperties = NodeType

Const NodeType

NodeType: object

color

color: "#d966ff" = Colors.main[0]

fontSize

fontSize: number = 10

marginRight

marginRight: string = "auto"

padding

padding: string = `5px 30px 5px 0`

Const RightNodeArea

RightNodeArea: object

position

position: "absolute" = "absolute"

right

right: number = -300

width

width: number = 300

zIndex

zIndex: number = 4

Const RightNodeAreaNode

RightNodeAreaNode: object

position

position: "absolute" = "absolute"

Const conf

conf: object

autoClosingPairs

autoClosingPairs: ({ close: string; open: string } | { close: string; notIn: string[]; open: string })[] = [{ open: '{', close: '}' },{ open: '[', close: ']' },{ open: '(', close: ')' },{ open: '"""', close: '"""', notIn: ['string', 'comment'] },{ open: '"', close: '"', notIn: ['string', 'comment'] },]

brackets

brackets: [string, string][] = [['{', '}'],['[', ']'],['(', ')'],]

surroundingPairs

surroundingPairs: { close: string; open: string }[] = [{ open: '{', close: '}' },{ open: '[', close: ']' },{ open: '(', close: ')' },{ open: '"""', close: '"""' },{ open: '"', close: '"' },]

comments

comments: object

lineComment

lineComment: string = "#"

folding

folding: object

offSide

offSide: true = true

Const theme

theme: object

base

base: "vs-dark" = "vs-dark"

fontFamily

fontFamily: string

inherit

inherit: true = true

rules

rules: ({ foreground: string; token: string } | { fontStyle: string; foreground: string; token: string })[] = [{ token: '', foreground: docsColor },{ token: 'identifier.gql', foreground: Colors.grey[0] },{ token: 'type', foreground: GraphQLColors.type },{ token: 'keyword', foreground: Colors.green[0] },{ token: 'input', foreground: GraphQLColors.input },{ token: 'interface', foreground: GraphQLColors.interface },{ token: 'enum', foreground: GraphQLColors.enum },{ token: 'extend', foreground: GraphQLColors.extend },{ token: 'input', foreground: GraphQLColors.input },{ token: 'directive', foreground: GraphQLColors.directive },{ token: 'scalar', foreground: GraphQLColors.scalar },{ token: 'union', foreground: GraphQLColors.union },{ token: 'annotation', foreground: Colors.grey[1] },{ token: 'md', foreground: Colors.blue[3] },{ token: 'string.md', foreground: docsColor },{ token: 'string.doc', foreground: docsColor },{ token: 'string.gql', foreground: mix(Colors.yellow[0], Colors.grey[0]) },{ token: 'string.quote.gql', foreground: mix(Colors.yellow[0], Colors.grey[0]) },{ token: 'comment.gql', foreground: Colors.blue[3] },{ token: 'exclamation', fontStyle: 'bold', foreground: mix(Colors.yellow[0], Colors.grey[0], 90.0) },]

colors

colors: object

background

background: "#0b050d" = Colors.main[10]

editor.background

editor.background: string = `#0b050d`

editor.foreground

editor.foreground: "#F3F3F4" = Colors.grey[0]

minimap.background

minimap.background: string = "#0b050d"

description

description: object

background

background: "#200f1c" = Colors.main[9]

text

text: "#e6bccd" = Colors.pink[0]

help

help: object

link

link: object

active

active: "#e6bccd" = Colors.pink[0]

hover

hover: "#e6bccd" = Colors.pink[0]

main

main: "#65525a" = Colors.pink[6]

minimap

minimap: object

background

background: "#200f1c" = Colors.main[9]

borders

borders: "#bb99a7" = Colors.pink[2]

node

node: "#907680" = Colors.pink[4]

visibleArea

visibleArea: "#341835" = Colors.main[8]

node

node: object

background

background: "#200f1c" = Colors.main[9]

backgrounds

backgrounds: Record<string, string> = GraphQLBackgrounds

selected

selected: "#e6bccd" = Colors.pink[0]

type

type: "#CCCCCC" = Colors.grey[2]

types

types: Record<string, string> = GraphQLColors

hover

hover: object

type

type: "#F3F3F4" = Colors.grey[0]

options

options: object

array

array: "#cfee9e" = Colors.yellow[0]

required

required: "#de3c4b" = Colors.red[0]

description

description: object

help

help: object

node

node: object

nameSize

nameSize: number = 25

typeSize

typeSize: number = 21

width

width: number = 280

spacing

spacing: object

Legend

  • Static property
  • Static method
  • Property

Generated using TypeDoc