Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding initial schema designer component. #183

Merged
merged 24 commits into from
Jan 9, 2025
Merged

Adding initial schema designer component. #183

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
211c6df
init commit
aasimkhan30 Dec 13, 2024
40349b6
added auto layouts
aasimkhan30 Dec 15, 2024
9354c0c
adding better examples
aasimkhan30 Jan 7, 2025
2a24867
Fixing some layout bugs
aasimkhan30 Jan 7, 2025
7491d95
Merge remote-tracking branch 'origin/aasim/feat/sd' into aasim/feat/sd
aasimkhan30 Jan 7, 2025
4d3ef57
remove ts examples
aasimkhan30 Jan 8, 2025
7944a79
Adding back plain html examples
aasimkhan30 Jan 8, 2025
aa53afa
Fixing layout and editing mode
aasimkhan30 Jan 8, 2025
1b49b0d
Adding click listeners
aasimkhan30 Jan 8, 2025
f7bc238
removing npm lock
aasimkhan30 Jan 8, 2025
5c22b09
Fixing node version
aasimkhan30 Jan 9, 2025
32032c3
Fix stuff
aasimkhan30 Jan 9, 2025
66d1915
removing workspace setting
aasimkhan30 Jan 9, 2025
3874f36
removing css property
aasimkhan30 Jan 9, 2025
f98da79
removing copyright
aasimkhan30 Jan 9, 2025
048a8bf
Fixing more items
aasimkhan30 Jan 9, 2025
9f25fb0
Fixing compile issue
aasimkhan30 Jan 9, 2025
52dc3ae
Merge remote-tracking branch 'origin/aasim/feat/sd' into aasim/feat/sd
aasimkhan30 Jan 9, 2025
c5c0823
Fixing datatype icons
aasimkhan30 Jan 9, 2025
73eb6df
removing unused graph options
aasimkhan30 Jan 9, 2025
4fc20bd
removing console statement
aasimkhan30 Jan 9, 2025
dc88301
Fixing compile errors
aasimkhan30 Jan 9, 2025
af76149
Updating package json version for new release
aasimkhan30 Jan 9, 2025
fded946
cleaning up z-index code
aasimkhan30 Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"sarif-viewer.connectToGithubCodeScanning": "off"
aasimkhan30 marked this conversation as resolved.
Show resolved Hide resolved
}
4 changes: 3 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
<body>
<h1>Examples</h1>
<ul>
<li><a href="ts-examples/helloWorld.html">Hello World</a></li>
<li><a href="ts-examples/helloWorld.html">Hello World</a> - A simple example that loads mxgraph with 2 cells and a connection between them.</li>
<li><a href="ts-examples/bigSchema.html">Schema Designer with a big schema loaded</a> - Creates a schemaDesigner with using the world wide importers schema</li>
<li><a href="ts-examples/smallSchema.html">Schema Designer with an small schema</a> - Creates a small demo schema</li>
</ul>
</body>
</html>
15 changes: 12 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,28 @@
"build": "yarn compile-mxgraph && npx tsc && node build.js",
"watch": "yarn compile-mxgraph && node build.js --watch",
"examples": "http-server -p 4000",
"lint": "eslint"
"lint": "eslint",
"dev": "vite"
},
"devDependencies": {
"@jgoz/esbuild-plugin-typecheck": "^4.0.2",
"@types/node": "^22.10.5",
"@types/react": "^19.0.3",
"@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"esbuild": "^0.24.0",
"eslint": "^9.16.0",
"eslint": "^9.17.0",
"eslint-plugin-license-header": "^0.6.1",
"grunt": "^1.6.1",
"grunt-contrib-concat": "^2.1.0",
"grunt-contrib-copy": "^1.0.0",
"http-server": "^14.1.1",
"load-grunt-tasks": "^3.5.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.1.1",
"typescript": "^5.7.2",
"typescript-eslint": "^8.18.0"
"typescript-eslint": "^8.18.0",
"vite": "^6.0.7"
}
}
1 change: 1 addition & 0 deletions src/ts/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
/// <reference path="./mxtypings/index.d.ts" />
import mx from 'mxgraph';
export * from 'mxgraph';
export * from './schemaDesigner/schemaDesigner';
export { mx };
174 changes: 174 additions & 0 deletions src/ts/schemaDesigner/schemaDesigner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
.sd-toolbar-belt {
position: fixed;
bottom: 22px;
z-index: 8;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.sd-toolbar {
height: 48px;
width: fit-content;
gap: 0.5rem;
display: flex;
background-color: var(--color-toolbar-bg);
color: var(--color-toolbar-text);
padding: 5px;
border-radius: 0.8rem;
vertical-align: middle;
justify-content: center;
align-items: center;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
}

.sd-toolbar-button {
cursor: pointer;
width: 32px;
height: 32px;
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: center;
padding: 4px;
border-radius: 0.5rem;
}

.sd-toolbar-button:hover {
background-color: var(--color-toolbar-button-hover);
}

.sd-toolbar-divider {
height: 100%;
width: 1px;
background-color: var(--color-toolbar-divider);
}

#graphContainer {
width: 100%;
height: 100%;
z-index: 1;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you may consider creating variable for z-index values to be more expressive what you're trying to do with the different values?

for example,

root {
  /* Z-index hierarchy system */
  --z-base: 1;
  --z-graph: var(--z-base);
  --z-outline: calc(var(--z-base) + 4);
  --z-toolbar: calc(var(--z-base) + 7);
}

/* Then update the components to use these variables */
.sd-toolbar-belt {
  position: fixed;
  bottom: 22px;
  z-index: var(--z-toolbar);
  /* rest of styles... */
}

.sd-outline {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: var(--z-outline);
  /* rest of styles... */
}

#graphContainer {
  width: 100%;
  height: 100%;
  z-index: var(--z-graph);
  /* rest of styles... */
}

background-image: radial-gradient(
circle,
var(--color-graph-gridLines) 10%,
transparent 10%
);
background-size: 20px 20px;
background-repeat: repeat;
overflow: auto;
}

.sd-outline {
position: fixed;
right: 10px;
top: 10px;
border-radius: 0.3rem;
background-color: var(--color-outline-bg);
z-index: 5;
border: 1px solid var(--color-border);
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
background-color: var(--color-graph-outline-background);
aasimkhan30 marked this conversation as resolved.
Show resolved Hide resolved
}

.sd-table {
width: 260px;
height: 100%;
border-radius: 2px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.35), 0px 1px 3px rgba(0, 0, 0, 0.5),
inset 0px 0.5px 0px rgba(255, 255, 255, 0.08),
inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
background-color: var(--color-graph-background);
}

.sd-table-color-indicator {
width: 100%;
height: 6px;
background-color: var(--color-graph-table-indicator);
border-radius: 2px 2px 0 0;
}

.sd-table-header {
display: flex;
gap: 10px;
height: 40px;
border-bottom: 1px solid var(--color-border);
}


.sd-table-header-icon {
width: 24px;
height: 100%;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
margin-left: 10px;
}

.sd-table-header-text {
font-size: 14px;
font-weight: 500;
color: var(--color-table-header-text);
align-self: center;
text-align: left;
flex: 1;
user-select: none;
text-overflow: ellipsis;
overflow: hidden;
}

.sd-table-columns {
display: flex;
flex-direction: column;
max-height: 280px;
overflow-y: auto;
margin-top: 5px;
padding: 0;
box-sizing: border-box;
}

.sd-table-column {
display: flex;
gap: 10px;
height: 28px;
box-sizing: border-box;
}

.sd-table-column:hover{
background-color: var(--color-graph-node-hover);
}

.sd-table-column-icon {
width: 26px;
height: 100%;
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
margin-left: 10px;
}

.sd-table-column-text {
font-size: 13px;
line-height: 18px;
font-weight: 400;
align-self: center;
text-align: left;
user-select: none;
flex: 1;
}

.sd-table-column-constraints {
font-size: 13px;
line-height: 18px;
font-weight: 400;
align-self: center;
text-align: left;
margin-right: 10px;
user-select: none;
}

Loading
Loading