-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding initial schema designer component. (#183)
* init commit * added auto layouts * adding better examples * Fixing some layout bugs * remove ts examples * Adding back plain html examples * Fixing layout and editing mode * Adding click listeners * removing npm lock * Fixing node version * Fix stuff * removing workspace setting * removing css property * removing copyright * Fixing more items * Fixing compile issue * Fixing datatype icons * removing unused graph options * removing console statement * Fixing compile errors * Updating package json version for new release * cleaning up z-index code
- Loading branch information
1 parent
5e679b9
commit beea83d
Showing
42 changed files
with
7,110 additions
and
393 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,5 @@ | ||
| /*--------------------------------------------------------------------------------------------- | ||
| * Copyright (c) Microsoft Corporation. All rights reserved. | ||
| * Licensed under the Source EULA.See License.txt in the project root for license information. | ||
| * --------------------------------------------------------------------------------------------*/ | ||
|
|
||
| /// <reference path="./mxtypings/index.d.ts" /> | ||
| import mx from 'mxgraph'; | ||
| export * from 'mxgraph'; | ||
| export * from './schemaDesigner/schemaDesigner'; | ||
| export { mx }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| :root { | ||
| --sd-z-base: 1; | ||
| --sd-z-graph: calc(var(--sd-z-base) + 1); | ||
| --sd-z-toolbar: calc(var(--sd-z-base) + 2); | ||
| } | ||
|
|
||
| .sd-toolbar-belt { | ||
| position: fixed; | ||
| bottom: 22px; | ||
| z-index: var(--sd-z-toolbar); | ||
| 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: var(--sd-z-base); | ||
| 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; | ||
| bottom: 10px; | ||
| border-radius: 0.3rem; | ||
| z-index: var(--sd-z-toolbar); | ||
| 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); | ||
| width: 200px; | ||
| height: 100px; | ||
| } | ||
|
|
||
| .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; | ||
| min-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; | ||
| } | ||
|
|
Oops, something went wrong.