Skip to content

Commit

Permalink
added dataits
Browse files Browse the repository at this point in the history
  • Loading branch information
@aexol
aexol committed Feb 19, 2024
1 parent 7965326 commit c56b740
Show file tree
Hide file tree
Showing 20 changed files with 97 additions and 49 deletions.
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/editor-worker/package.json
View file
@@ -1,6 +1,6 @@
{
"name": "graphql-editor-worker",
"version": "7.2.3",
"version": "7.2.4",
"private": false,
"license": "MIT",
"description": "Visual node editor for GraphQL",
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/package.json
View file
@@ -1,6 +1,6 @@
{
"name": "graphql-editor",
"version": "7.2.3",
"version": "7.2.4",
"private": false,
"license": "MIT",
"description": "Visual node editor for GraphQL",
Expand Down Expand Up @@ -45,7 +45,7 @@
"file-saver": "^2.0.5",
"framer-motion": "^10.12.16",
"fuzzyjs": "^5.0.1",
"graphql-editor-worker": "^7.2.3",
"graphql-editor-worker": "^7.2.4",
"graphql-js-tree": "^1.0.9",
"graphql-language-service": "3.1.4",
"html-to-image": "^1.10.8",
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/Graf/Node/ActiveNode/TopNodeMenu.tsx
View file
Expand Up @@ -33,6 +33,7 @@ import {
Stack,
Tooltip,
} from "@aexol-studio/styling-system";
import { dataIt } from "@/Models";

type PossibleMenus =
| "field"
Expand Down Expand Up @@ -110,6 +111,7 @@ export const TopNodeMenu: React.FC<{
Trigger={({ triggerProps }) => (
<Tooltip title="Add field">
<NodeIconArea
{...dataIt("addField")}
{...triggerProps}
onClick={() => {
setMenuOpen("field");
Expand Down Expand Up @@ -138,6 +140,7 @@ export const TopNodeMenu: React.FC<{
Trigger={({ triggerProps }) => (
<Tooltip title="Add directive">
<NodeIconArea
{...dataIt("addDirective")}
{...triggerProps}
onClick={() => {
setMenuOpen("directive");
Expand Down Expand Up @@ -181,6 +184,7 @@ export const TopNodeMenu: React.FC<{
Trigger={({ triggerProps }) => (
<Tooltip title="Node actions">
<NodeIconArea
{...dataIt("nodeOptions")}
{...triggerProps}
onClick={() => {
setMenuOpen("options");
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/Graf/Node/ActiveNode/index.tsx
View file
Expand Up @@ -31,6 +31,7 @@ import {
import { DraggableProvider, useDraggable } from "@/Graf/state/draggable";
import { useRelationsState } from "@/state/containers";
import { Tooltip } from "@aexol-studio/styling-system";
import { dataIt } from "@/Models";

interface NodeProps {
node: ParserField;
Expand Down Expand Up @@ -228,6 +229,7 @@ export const ActiveNode: React.FC<NodeProps> = ({
: undefined;
return (
<NodeContainer
{...dataIt("activeNode")}
className={`NodeBackground-${getTypeName(node.type.fieldType)}`}
onWheel={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
Expand Down
6 changes: 6 additions & 0 deletions packages/editor/src/Graf/Node/Field/ActiveField.tsx
View file
Expand Up @@ -34,6 +34,7 @@ import {
Tooltip,
} from "@aexol-studio/styling-system";
import { NodeFieldContainer } from "@/Graf/Node/Field/NodeFieldContainer";
import { dataIt } from "@/Models";

export const ActiveField: React.FC<FieldProps> = ({
node,
Expand All @@ -59,6 +60,7 @@ export const ActiveField: React.FC<FieldProps> = ({
const isFromInterface = !!node.fromInterface?.length;
return (
<NodeFieldContainer
{...dataIt("nodeField")}
fromInterface={!!node.fromInterface?.length}
active={!!(inputOpen || menuOpen || outputOpen)}
>
Expand Down Expand Up @@ -168,6 +170,7 @@ export const ActiveField: React.FC<FieldProps> = ({
return (
<Tooltip title="Set List/Required">
<FieldPort
{...dataIt("fieldList")}
{...triggerProps}
icons={{
closed: <BracketsSquare width={18} height={18} />,
Expand Down Expand Up @@ -219,6 +222,7 @@ export const ActiveField: React.FC<FieldProps> = ({
node.data.type !== TypeSystemDefinition.UnionMemberDefinition && (
<Tooltip title="Field arguments and directives">
<FieldPort
{...dataIt("fieldArgs")}
onClick={onInputClick}
open={inputOpen}
icons={{
Expand All @@ -236,6 +240,7 @@ export const ActiveField: React.FC<FieldProps> = ({
return (
<Tooltip title="Field options">
<FieldPort
{...dataIt("fieldOptions")}
{...triggerProps}
icons={{
closed: <DotsVertical width={18} height={18} />,
Expand All @@ -259,6 +264,7 @@ export const ActiveField: React.FC<FieldProps> = ({
{!outputDisabled && (
<Tooltip title="Expand type">
<OutputArrow
{...dataIt("fieldArgs")}
className="node-field-port"
onClick={onOutputClick}
// info={{
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/Graf/Node/Field/ActiveGrafFieldName.tsx
View file
Expand Up @@ -4,6 +4,7 @@ import styled from "@emotion/styled";
import { EditableText } from "@/Graf/Node/Field/EditableText";
import { ActiveGrafType } from "@/Graf/Node/Field/ActiveGrafType";
import { GRAF_FIELD_NAME_SIZE } from "@/Graf/constants";
import { dataIt } from "@/Models";

const Main = styled.div`
display: flex;
Expand All @@ -20,7 +21,7 @@ export const ActiveGrafFieldName: React.FC<
> = ({ args, name, afterChange, parentTypes }) => {
if (args && args.length > 0) {
return (
<Main>
<Main {...dataIt("fieldName")}>
<EditableText value={name} onChange={afterChange} />(
{afterChange &&
args.map((a, i) => (
Expand Down
20 changes: 11 additions & 9 deletions packages/editor/src/Graf/Node/Field/ActiveGrafType.tsx
View file
@@ -1,28 +1,30 @@
import React, { useMemo } from 'react';
import { ParserField } from 'graphql-js-tree';
import { compileScalarTypes, compileTypeOptions } from '@/GraphQL/Compile';
import styled from '@emotion/styled';
import { GRAF_FIELD_TYPE_SIZE } from '@/Graf/constants';
import React, { useMemo } from "react";
import { ParserField } from "graphql-js-tree";
import { compileScalarTypes, compileTypeOptions } from "@/GraphQL/Compile";
import styled from "@emotion/styled";
import { GRAF_FIELD_TYPE_SIZE } from "@/Graf/constants";
import { dataIt } from "@/Models";
export const ActiveGrafType = React.forwardRef<
HTMLAnchorElement,
Pick<ParserField, 'type'> & {
Pick<ParserField, "type"> & {
parentTypes?: Record<string, string>;
onClick?: () => void;
children?: React.ReactNode;
}
>(({ type, parentTypes, onClick, children }, ref) => {
const compiledType = useMemo(
() => compileTypeOptions({ type }),
[JSON.stringify(type)],
[JSON.stringify(type)]
);
const sType = useMemo(() => compileScalarTypes(type), [JSON.stringify(type)]);
const color = parentTypes?.[sType] ? parentTypes[sType] : sType;

return (
<Type
{...dataIt("fieldType")}
ref={ref}
color={color}
cursor={onClick ? 'pointer' : 'default'}
cursor={onClick ? "pointer" : "default"}
onClick={onClick}
>
<span>{compiledType}</span>
Expand All @@ -31,7 +33,7 @@ export const ActiveGrafType = React.forwardRef<
);
});

const Type = styled.a<{ color: string; cursor: 'pointer' | 'default' }>`
const Type = styled.a<{ color: string; cursor: "pointer" | "default" }>`
color: ${({ color, theme }) =>
color
? theme.colors[color as keyof typeof theme.colors]
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/Graf/Node/components/Description/ActiveDescription.tsx
View file
@@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import styled from "@emotion/styled";
import { dataIt } from "@/Models";

const Main = styled.textarea`
background: ${({ theme }) => theme.neutrals.L6};
Expand Down Expand Up @@ -53,7 +54,7 @@ export const ActiveDescription: React.FC<{
}, []);

return (
<MainWrapper>
<MainWrapper {...dataIt("nodeDescription")}>
<Main
rows={1}
data-gramm_editor="false"
Expand Down
18 changes: 10 additions & 8 deletions packages/editor/src/Graf/Node/components/NodeInterface/index.tsx
View file
@@ -1,16 +1,17 @@
import React, { useState } from 'react';
import styled from '@emotion/styled';
import React, { useState } from "react";
import styled from "@emotion/styled";
import {
ContextMenu,
NodeImplementInterfacesMenu,
} from '@/shared/components/ContextMenu';
import { ParserField } from 'graphql-js-tree';
import { transition } from '@/vars';
} from "@/shared/components/ContextMenu";
import { ParserField } from "graphql-js-tree";
import { transition } from "@/vars";
import {
DetailMenuItem,
Menu,
MenuScrollingArea,
} from '@/Graf/Node/components/Menu';
} from "@/Graf/Node/components/Menu";
import { dataIt } from "@/Models";

interface NodeInterfaceProps {
onDelete: () => void;
Expand All @@ -28,7 +29,7 @@ const NodeInterfaceBlock = styled.div<{ isLocked?: boolean }>`
cursor: pointer;
border: 1px solid currentColor;
&:hover {
border: 1px ${({ isLocked }) => (isLocked ? 'solid' : 'dashed')}
border: 1px ${({ isLocked }) => (isLocked ? "solid" : "dashed")}
currentColor;
}
`;
Expand Down Expand Up @@ -64,7 +65,7 @@ export const NodeInterface: React.FC<NodeInterfaceProps> = ({
{({ layerProps }) => (
<Menu
{...layerProps}
menuName={'Detach interface'}
menuName={"Detach interface"}
onScroll={(e) => e.stopPropagation()}
hideMenu={() => setMenuOpen(false)}
>
Expand Down Expand Up @@ -117,6 +118,7 @@ export const CreateNodeInterface: React.FC<CreateNodeInterfaceProps> = ({
close={() => setMenuOpen(false)}
Trigger={({ triggerProps }) => (
<CreateNodeInterfaceBlock
{...dataIt("implementInterface")}
{...triggerProps}
onClick={(e) => {
if (isLocked) {
Expand Down
41 changes: 32 additions & 9 deletions packages/editor/src/Models/dataIds.ts
View file
@@ -1,21 +1,44 @@
export const DataIds = {
new: "new",
filter: "filter",
relationsOnly: "relations-only",
libraryNodes: "library-nodes",
export: "export",
shuffle: "shuffle",
zoom: "zoom",
defocus: "defocus",
search: "search",
navigation: "navigation",
sidebar: "sidebar-menu",
//sidebar
menuCode: "menu-code",
menuRelations: "menu-relations",
menuDocs: "menu-docs",
menuExport: "menu-export",
menuImport: "menu-import",
menuDiff: "menu-diff",
navigation: "navigation",
//Views
diffView: "diff-view",
codeView: "code-view",
docsView: "docs-view",
relationView: "relation-view",
//relation
graphNode: "graph-node",
nodeFocus: "node-focus",
nodeEditExpand: "node-edit-expand",
defocus: "defocus",
newNode: "newNode",
filter: "filter",
relationsOnly: "relations-only",
libraryNodes: "library-nodes",
export: "export",
zoom: "zoom",
//graf
activeNode: "active-node",
nodeDescription: "node-description",
addField: "add-field",
implementInterface: "implement-interface",
addDirective: "add-directive",
nodeOptions: "node-options",
nodeField: "node-field",
fieldName: "field-name",
fieldType: "field-type",
fieldList: "field-list",
fieldExpand: "field-expand",
fieldArgs: "field-args",
fieldOptions: "field-options",
} as const;

export const dataIt = (d: keyof typeof DataIds) => {
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/Relation/PanZoom/LinesDiagram/Node/index.tsx
View file
Expand Up @@ -21,6 +21,7 @@ import {
RELATION_NODE_MAX_FIELDS,
RELATION_NODE_MAX_WIDTH,
} from "@/Relation/shared/nodeLook";
import { dataIt } from "@/Models";

type NodeTypes = keyof EditorTheme["colors"];

Expand Down Expand Up @@ -284,6 +285,7 @@ export const Node: React.FC<NodeProps> = (props) => {
{!printPreviewActive && (
<EditNodeContainer className="editNode">
<FocusNodeClickableButton
{...dataIt("nodeFocus")}
onClick={(e) => {
e.stopPropagation();
if (isFieldFocused) {
Expand All @@ -297,6 +299,7 @@ export const Node: React.FC<NodeProps> = (props) => {
<EagleEye width={16} height={16} />
</FocusNodeClickableButton>
<EditNodeClickableButton
{...dataIt("nodeEditExpand")}
onClick={(e) => {
e.stopPropagation();
setEditMode(field.id);
Expand All @@ -319,6 +322,7 @@ export const Node: React.FC<NodeProps> = (props) => {

return (
<Content
{...dataIt("graphNode")}
width={numberNode.width}
className={`${DOMClassNames.node} inViewport`}
id={`node-${field.id}`}
Expand Down

0 comments on commit c56b740

Please sign in to comment.