mirror of
https://github.com/Sunscreen-tech/Sunscreen.git
synced 2026-04-19 03:00:06 -04:00
merge
This commit is contained in:
Matthew Liu
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Sunscreen",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
@@ -1,23 +1 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
node_modules
|
||||
@@ -0,0 +1,38 @@
|
||||
const path = require('path');
|
||||
const enableImportsFromExternalPaths = require("./src/helpers/craco/enableImportsFromExternalPaths");
|
||||
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
{
|
||||
plugin: {
|
||||
overrideWebpackConfig: ({ webpackConfig }) => {
|
||||
enableImportsFromExternalPaths(webpackConfig, [
|
||||
// Add the paths here
|
||||
path.resolve("./node_modules/react")
|
||||
]);
|
||||
return webpackConfig;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
webpack: {
|
||||
configure: {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?js$/,
|
||||
resolve: {
|
||||
fullySpecified: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
react: path.resolve("./node_modules/react"),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,20 +1,41 @@
|
||||
{
|
||||
"name": "fhe-debugger-frontend",
|
||||
"name": "test",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^7.1.0",
|
||||
"@devbookhq/splitter": "^1.4.0",
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@msagl/core": "^1.1.16",
|
||||
"@msagl/parser": "^1.1.16",
|
||||
"@msagl/renderer-svg": "^1.1.18",
|
||||
"@msagl/renderer-webgl": "^1.1.18",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"@types/jest": "^29.5.3",
|
||||
"@types/node": "^20.4.2",
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"mui": "^0.0.1",
|
||||
"react-digraph": "^8.1.0",
|
||||
"react-resizable": "^3.0.5",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-split": "^2.0.14",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"split-pane-react": "^0.1.3",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"start": "craco start",
|
||||
"build": "craco build",
|
||||
"test": "craco test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -37,19 +47,107 @@
|
||||
}
|
||||
}
|
||||
|
||||
.tile {
|
||||
background-color: #eb0303;
|
||||
border: 1px solid #ccc;
|
||||
padding: 10px;
|
||||
.selected {
|
||||
background-color: "#FFDB81";
|
||||
}
|
||||
|
||||
.splitter-handle {
|
||||
background-color: #a32626;
|
||||
width: 10px; /* Adjust the width as needed */
|
||||
cursor: col-resize; /* Displays a horizontal resize cursor */
|
||||
.split {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tile div {
|
||||
font-size: 18px; /* Adjust the font size as needed */
|
||||
color: #333; /* Adjust the text color as needed */
|
||||
.gutter {
|
||||
background-color: #eee;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.gutter.gutter-horizontal {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.pane {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-top;
|
||||
|
||||
border-radius: 0px;
|
||||
background: #121114;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.resizable-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.resizable-panel {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #121212;
|
||||
}
|
||||
|
||||
.splits {
|
||||
margin: 0px 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* max-height: 500px; */
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
/* border: 1px solid #794D1F; */
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--code-color: darkred;
|
||||
--code-bg-color: #aaaaaa;
|
||||
--code-font-size: 14px;
|
||||
--code-line-height: 1.4;
|
||||
--scroll-bar-color: #c5c5c5;
|
||||
--scroll-bar-bg-color: #f6f6f6;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--code-color);
|
||||
font-size: var(--code-font-size);
|
||||
line-height: var(--code-line-height);
|
||||
background-color: var(--code-bg-color);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
overflow: auto;
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px -10px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color);
|
||||
}
|
||||
|
||||
/* Works on Chrome, Edge, and Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scroll-bar-bg-color);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scroll-bar-color);
|
||||
border-radius: 20px;
|
||||
border: 3px solid var(--scroll-bar-bg-color);
|
||||
}
|
||||
239
sunscreen_runtime/src/debugger/fhe-debugger-frontend/src/App.tsx
Normal file
239
sunscreen_runtime/src/debugger/fhe-debugger-frontend/src/App.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import ReactSplit, { SplitDirection } from '@devbookhq/splitter'
|
||||
import './App.css'
|
||||
|
||||
import { UberGraph } from './UberGraph';
|
||||
import { SelectionT } from 'react-digraph';
|
||||
|
||||
interface CodeBlockProps {
|
||||
code: string;
|
||||
onClickHandler: (number: number) => void;
|
||||
selectedLine: number;
|
||||
}
|
||||
|
||||
function CodeBlock({ code, onClickHandler, selectedLine }: CodeBlockProps) {
|
||||
const onSelectLine = useCallback(
|
||||
(lineNumber: number) => onClickHandler(lineNumber),
|
||||
[onClickHandler]
|
||||
)
|
||||
|
||||
const lineProps = useCallback((lineNumber: number) => {
|
||||
return lineNumber !== selectedLine ?
|
||||
{
|
||||
onClick: () => onSelectLine(lineNumber),
|
||||
} :
|
||||
{
|
||||
onClick: () => onSelectLine(lineNumber),
|
||||
style: {backgroundColor: "saddlebrown"}
|
||||
}
|
||||
}, [onSelectLine, selectedLine]);
|
||||
|
||||
return (
|
||||
<SyntaxHighlighter
|
||||
language="rust"
|
||||
style={atomDark}
|
||||
showLineNumbers={true}
|
||||
wrapLines={true}
|
||||
useInlineStyles={true}
|
||||
lineProps={lineProps}
|
||||
lineNumberStyle={{minWidth: 10}}
|
||||
>
|
||||
{code}
|
||||
</SyntaxHighlighter>
|
||||
);
|
||||
};
|
||||
|
||||
const exampleCode: string = `fn sudoku_proof<F: BackendField>(
|
||||
#[constant] constraints: [[NativeField<F>; 9]; 9],
|
||||
board: [[NativeField<F>; 9]; 9],
|
||||
) {
|
||||
fn assert_unique_numbers<F: BackendField>(arr: [ProgramNode<NativeField<F>>; 9]) {
|
||||
for i in 1..=9 {
|
||||
let mut circuit = NativeField::<F>::from(1).into_program_node();
|
||||
for a in arr {
|
||||
circuit = circuit * (NativeField::<F>::from(i).into_program_node() - a);
|
||||
}
|
||||
circuit.constrain_eq(NativeField::<F>::from(0));
|
||||
}
|
||||
}
|
||||
// Proves that the board matches up with the puzzle where applicable
|
||||
let zero = NativeField::<F>::from(0).into_program_node();
|
||||
|
||||
for i in 0..9 {
|
||||
for j in 0..9 {
|
||||
let square = board[i][j].into_program_node();
|
||||
let constraint = constraints[i][j].into_program_node();
|
||||
(constraint * (constraint - square)).constrain_eq(zero);
|
||||
}
|
||||
}
|
||||
|
||||
// Checks rows contain every number from 1 to 9
|
||||
for row in board {
|
||||
assert_unique_numbers(row);
|
||||
}
|
||||
|
||||
// Checks columns contain each number from 1 to 9
|
||||
for col in 0..9 {
|
||||
let column = board.map(|r| r[col]);
|
||||
assert_unique_numbers(column);
|
||||
}
|
||||
|
||||
// Checks squares contain each number from 1 to 9
|
||||
for i in 0..3 {
|
||||
for j in 0..3 {
|
||||
let rows = &board[(i * 3)..(i * 3 + 3)];
|
||||
|
||||
let square = rows.iter().map(|s| &s[(j * 3)..(j * 3 + 3)]);
|
||||
|
||||
let flattened_sq: [ProgramNode<NativeField<F>>; 9] = square
|
||||
.flatten()
|
||||
.copied()
|
||||
.collect::<Vec<_>>()
|
||||
.try_into()
|
||||
.unwrap_or([zero; 9]);
|
||||
|
||||
assert_unique_numbers(flattened_sq);
|
||||
}
|
||||
}
|
||||
}`
|
||||
|
||||
type InputCiphertextOp = {
|
||||
kind: 'InputCiphertext';
|
||||
data: number
|
||||
};
|
||||
|
||||
type MultiplyOp = {
|
||||
kind: 'Multiply'
|
||||
};
|
||||
|
||||
type AddOp = {
|
||||
kind: 'Add'
|
||||
};
|
||||
|
||||
type RelinearizeOp = {
|
||||
kind: 'Relinearize'
|
||||
};
|
||||
|
||||
type OutputCiphertextOp = {
|
||||
kind: 'OutputCiphertext'
|
||||
};
|
||||
|
||||
type FheProgramOperation = InputCiphertextOp | MultiplyOp | AddOp | RelinearizeOp | OutputCiphertextOp
|
||||
|
||||
type FheProgramNode = {
|
||||
operation: FheProgramOperation
|
||||
}
|
||||
|
||||
type EdgeType = 'Left' | 'Right' | 'Unary'
|
||||
type FheProgramEdge = [number, number, EdgeType]
|
||||
|
||||
type FheProgramGraph = {
|
||||
nodes: FheProgramNode[];
|
||||
edges: FheProgramEdge[]
|
||||
}
|
||||
|
||||
type FheProgram = {
|
||||
graph: { graph: { graph: FheProgramGraph }};
|
||||
data: 'Bfv'
|
||||
}
|
||||
|
||||
const dataToGraph = (data: FheProgramGraph, incRelin: boolean) => {
|
||||
const nodes: any[] = [];
|
||||
const edges: any[] = [];
|
||||
|
||||
for (let i: number = 0; i < data.nodes .length; ++i) {
|
||||
const op = data.nodes[i].operation
|
||||
switch (op.kind) {
|
||||
case 'InputCiphertext':
|
||||
nodes.push({id: i, title: JSON.stringify(op.data), type: 'input'})
|
||||
break
|
||||
case 'Multiply':
|
||||
case 'Add':
|
||||
case 'Relinearize':
|
||||
case 'OutputCiphertext':
|
||||
default:
|
||||
nodes.push({id: i, title: JSON.stringify(data.nodes[i].operation), type: 'empty'})
|
||||
}
|
||||
}
|
||||
for (let i: number = 0; i < data.edges.length; ++i) {
|
||||
edges.push({source: data.edges[i][0], target: data.edges[i][1], type: data.edges[i][2]})
|
||||
}
|
||||
return {nodes: nodes, edges: edges}
|
||||
}
|
||||
|
||||
|
||||
const App = () => {
|
||||
|
||||
const sampleData = JSON.parse(`{"graph":{"graph":{"nodes":[{"operation":{"InputCiphertext":0}},{"operation":{"InputCiphertext":1}},{"operation":{"InputCiphertext":2}},{"operation":{"InputCiphertext":3}},{"operation":"Multiply"},{"operation":"Multiply"},{"operation":"Multiply"},{"operation":"Add"},{"operation":"OutputCiphertext"},{"operation":"OutputCiphertext"},{"operation":"Relinearize"},{"operation":"Relinearize"},{"operation":"Relinearize"}],"node_holes":[],"edge_property":"directed","edges":[[0,4,"Left"],[3,4,"Right"],[1,5,"Left"],[2,5,"Right"],[1,6,"Left"],[3,6,"Right"],[12,7,"Left"],[10,7,"Right"],[7,8,"Unary"],[11,9,"Unary"],[5,10,"Unary"],[6,11,"Unary"],[4,12,"Unary"]]}},"data":"Bfv"}`)
|
||||
const exGraph = dataToGraph(sampleData, true);
|
||||
const [selectedLine, setLine] = useState<number>(0);
|
||||
const [vertSize, setVertSize] = useState<any[]>();
|
||||
const [horSize, setHorSize] = useState<any[]>();
|
||||
const [currGraph, setGraph] = useState(exGraph);
|
||||
const [selected, select] = useState<SelectionT | null>(null);
|
||||
|
||||
const updateLine = useCallback(
|
||||
(lineNumber: number) => {
|
||||
setLine(lineNumber)
|
||||
const graph = {
|
||||
nodes: [
|
||||
{
|
||||
id: 1,
|
||||
title: `line ${lineNumber}`,
|
||||
type: 'empty',
|
||||
x: -10,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `test_func`,
|
||||
type: 'problematic',
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{ source: 1, target: 2, directed: true, arrowhead: 'normal' }
|
||||
]
|
||||
}
|
||||
setGraph(lineNumber !== 1 ? graph : exGraph)
|
||||
}, [setLine, setGraph]
|
||||
)
|
||||
|
||||
const updateSelection = useCallback(
|
||||
(selection, e) => {select(selection); console.log(selection.nodes?.values().next().value)}, [select]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='splits'>
|
||||
<ReactSplit direction={SplitDirection.Horizontal} onResizeFinished={(p, n) => setHorSize(n)} initialSizes={horSize}>
|
||||
<div className="pane">
|
||||
<ReactSplit direction={SplitDirection.Vertical} onResizeFinished={(p, n) => setVertSize(n)} initialSizes={vertSize}>
|
||||
<div className='pane'><CodeBlock
|
||||
code={exampleCode}
|
||||
onClickHandler={updateLine}
|
||||
selectedLine={selectedLine}
|
||||
></CodeBlock></div>
|
||||
<div className='pane'><NodeInfo info={selected?.nodes?.values().next().value}/></div>
|
||||
</ReactSplit>
|
||||
</div>
|
||||
<div className='pane'><UberGraph
|
||||
graph={currGraph} onSelect={updateSelection} selected={selected} /></div>
|
||||
</ReactSplit>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function NodeInfo({info}) {
|
||||
if (info !== null) {
|
||||
return <p>{JSON.stringify(info)}</p>
|
||||
}
|
||||
return <p>{JSON.stringify(info)}</p>
|
||||
}
|
||||
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,87 @@
|
||||
import { GraphView } from "react-digraph";
|
||||
import React from "react";
|
||||
|
||||
const GraphConfig = {
|
||||
NodeTypes: {
|
||||
empty: { // required to show empty nodes
|
||||
typeText: "None",
|
||||
shapeId: "#empty", // relates to the type property of a node
|
||||
shape: (
|
||||
<symbol viewBox="0 0 100 100" id="empty" key="0">
|
||||
<circle cx="50" cy="50" r="45"></circle>
|
||||
</symbol>
|
||||
)
|
||||
},
|
||||
input: { // required to show empty nodes
|
||||
typeText: "Input",
|
||||
shapeId: "#input", // relates to the type property of a node
|
||||
shape: (
|
||||
<symbol viewBox="0 0 100 100" id="input" key="0">
|
||||
<circle cx="50" cy="50" r="45"></circle>
|
||||
</symbol>
|
||||
)
|
||||
},
|
||||
output: { // required to show empty nodes
|
||||
typeText: "Output",
|
||||
shapeId: "#output", // relates to the type property of a node
|
||||
shape: (
|
||||
<symbol viewBox="0 0 100 100" id="input" key="0">
|
||||
<circle cx="50" cy="50" r="45"></circle>
|
||||
</symbol>
|
||||
)
|
||||
},
|
||||
custom: { // required to show empty nodes
|
||||
typeText: "Custom",
|
||||
shapeId: "#custom", // relates to the type property of a node
|
||||
shape: (
|
||||
<symbol viewBox="0 0 50 25" id="custom" key="0">
|
||||
<ellipse cx="50" cy="25" rx="50" ry="25"></ellipse>
|
||||
</symbol>
|
||||
)
|
||||
},
|
||||
problematic: {
|
||||
typeText: "Problematic",
|
||||
shapeId: "#problem", // relates to the type property of a node
|
||||
shape: (
|
||||
<symbol viewBox="0 0 100 100" id="problem" key="0">
|
||||
<circle cx="50" cy="50" r="45" fill='pink'></circle>
|
||||
</symbol>
|
||||
)
|
||||
}
|
||||
},
|
||||
NodeSubtypes: {},
|
||||
EdgeTypes: {
|
||||
emptyEdge: { // required to show empty edges
|
||||
shapeId: "#emptyEdge",
|
||||
shape: (
|
||||
<symbol viewBox="0 0 50 50" id="emptyEdge" key="0">
|
||||
<circle cx="25" cy="25" r="8" fill="currentColor"> </circle>
|
||||
</symbol>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function UberGraph({graph, onSelect, selected}) {
|
||||
// const [selected, select] = useState(null);
|
||||
console.log('render')
|
||||
return (
|
||||
<GraphView
|
||||
nodeKey="id"
|
||||
nodes={graph.nodes}
|
||||
edges={graph.edges}
|
||||
allowMultiselect={false}
|
||||
layoutEngineType='VerticalTree'
|
||||
readOnly={true}
|
||||
nodeTypes={GraphConfig.NodeTypes}
|
||||
edgeTypes={GraphConfig.EdgeTypes}
|
||||
nodeSubtypes={GraphConfig.NodeSubtypes}
|
||||
onCreateNode={() => {}}
|
||||
selected={selected}
|
||||
onSwapEdge={() => {}}
|
||||
onCreateEdge={() => {}}
|
||||
onSelect={onSelect}
|
||||
/>)
|
||||
}
|
||||
export {UberGraph};
|
||||
|
||||
@@ -0,0 +1,177 @@
|
||||
// @flow
|
||||
/*
|
||||
Copyright(c) 2018 Uber Technologies, Inc.
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
/*
|
||||
Example config for GraphView component
|
||||
*/
|
||||
import React from "react";
|
||||
|
||||
export const NODE_KEY = "id"; // Key used to identify nodes
|
||||
|
||||
// These keys are arbitrary (but must match the config)
|
||||
// However, GraphView renders text differently for empty types
|
||||
// so this has to be passed in if that behavior is desired.
|
||||
export const EMPTY_TYPE = "empty";
|
||||
export const CUSTOM_EMPTY_TYPE = "customEmpty"; // Empty node type
|
||||
export const POLY_TYPE = "poly";
|
||||
export const SPECIAL_TYPE = "special";
|
||||
export const SKINNY_TYPE = "skinny";
|
||||
export const SPECIAL_CHILD_SUBTYPE = "specialChild";
|
||||
export const EMPTY_EDGE_TYPE = "emptyEdge";
|
||||
export const SPECIAL_EDGE_TYPE = "specialEdge";
|
||||
export const TEXTBOX_TYPE = "textbox";
|
||||
|
||||
export const nodeTypes = [
|
||||
EMPTY_TYPE,
|
||||
CUSTOM_EMPTY_TYPE,
|
||||
POLY_TYPE,
|
||||
SPECIAL_TYPE,
|
||||
SKINNY_TYPE,
|
||||
TEXTBOX_TYPE
|
||||
];
|
||||
export const edgeTypes = [EMPTY_EDGE_TYPE, SPECIAL_EDGE_TYPE];
|
||||
|
||||
export const nodeSubTypes = [SPECIAL_CHILD_SUBTYPE];
|
||||
|
||||
const EmptyNodeShape = (
|
||||
<symbol viewBox="0 0 154 154" width="154" height="154" id="emptyNode">
|
||||
<circle cx="77" cy="77" r="76" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const CustomEmptyShape = (
|
||||
<symbol viewBox="0 0 200 200" id="customEmpty">
|
||||
<circle cx="100" cy="100" r="50" />
|
||||
<g>
|
||||
<foreignObject width="100%" height="100%">
|
||||
{/* <div xmlns="http://www.w3.org/1999/xhtml">test</div> */}
|
||||
</foreignObject>
|
||||
</g>
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const SpecialShape = (
|
||||
<symbol viewBox="-27 0 154 154" id="special" width="154" height="154">
|
||||
<rect transform="translate(50) rotate(45)" width="109" height="109" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const PolyShape = (
|
||||
<symbol viewBox="0 0 88 72" id="poly" width="88" height="88">
|
||||
<path d="M 0 36 18 0 70 0 88 36 70 72 18 72Z" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const TextboxShape = (
|
||||
<symbol viewBox="0 0 88 72" id="poly" width="88" height="88">
|
||||
<path d="M 0 36 18 0 70 0 88 36 70 72 18 72Z" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const SkinnyShape = (
|
||||
<symbol
|
||||
viewBox="0 0 154 54"
|
||||
width="154"
|
||||
height="54"
|
||||
id="skinny"
|
||||
onClick={() => console.log("tim")}
|
||||
>
|
||||
<rect x="0" y="0" rx="2" ry="2" width="154" height="54" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const SpecialChildShape = (
|
||||
<symbol viewBox="0 0 154 154" id="specialChild">
|
||||
<rect
|
||||
x="2.5"
|
||||
y="0"
|
||||
width="154"
|
||||
height="154"
|
||||
fill="rgba(30, 144, 255, 0.12)"
|
||||
/>
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const EmptyEdgeShape = (
|
||||
<symbol viewBox="0 0 50 50" id="emptyEdge">
|
||||
<circle cx="25" cy="25" r="8" fill="currentColor" />
|
||||
</symbol>
|
||||
);
|
||||
|
||||
const SpecialEdgeShape = (
|
||||
<symbol viewBox="0 0 50 50" id="specialEdge">
|
||||
<rect
|
||||
transform="rotate(45)"
|
||||
x="27.5"
|
||||
y="-7.5"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</symbol>
|
||||
);
|
||||
|
||||
export default {
|
||||
EdgeTypes: {
|
||||
emptyEdge: {
|
||||
shape: EmptyEdgeShape,
|
||||
shapeId: "#emptyEdge",
|
||||
typeText: "Empty"
|
||||
},
|
||||
specialEdge: {
|
||||
shape: SpecialEdgeShape,
|
||||
shapeId: "#specialEdge"
|
||||
}
|
||||
},
|
||||
NodeSubtypes: {
|
||||
specialChild: {
|
||||
shape: SpecialChildShape,
|
||||
shapeId: "#specialChild"
|
||||
}
|
||||
},
|
||||
NodeTypes: {
|
||||
empty: {
|
||||
shape: EmptyNodeShape,
|
||||
shapeId: "#empty",
|
||||
typeText: "None"
|
||||
},
|
||||
customEmpty: {
|
||||
shape: CustomEmptyShape,
|
||||
shapeId: "#customEmpty",
|
||||
typeText: "None"
|
||||
},
|
||||
special: {
|
||||
shape: SpecialShape,
|
||||
shapeId: "#special",
|
||||
typeText: "Special"
|
||||
},
|
||||
skinny: {
|
||||
shape: SkinnyShape,
|
||||
shapeId: "#skinny",
|
||||
typeText: "Skinny"
|
||||
},
|
||||
poly: {
|
||||
shape: PolyShape,
|
||||
shapeId: "#poly",
|
||||
typeText: "Poly"
|
||||
},
|
||||
textbox: {
|
||||
shape: TextboxShape,
|
||||
//set shape to empty edge so that there is no backround for the textbox node
|
||||
shapeId: "#emptyEdge",
|
||||
// set title to black only the node's contents will hond anything
|
||||
typeText: ""
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
const findWebpackPlugin = (webpackConfig, pluginName) =>
|
||||
webpackConfig.resolve.plugins.find(
|
||||
({ constructor }) => constructor && constructor.name === pluginName
|
||||
);
|
||||
|
||||
const enableTypescriptImportsFromExternalPaths = (
|
||||
webpackConfig,
|
||||
newIncludePaths
|
||||
) => {
|
||||
const oneOfRule = webpackConfig.module.rules.find((rule) => rule.oneOf);
|
||||
if (oneOfRule) {
|
||||
const tsxRule = oneOfRule.oneOf.find(
|
||||
(rule) => rule.test && rule.test.toString().includes("tsx")
|
||||
);
|
||||
|
||||
if (tsxRule) {
|
||||
tsxRule.include = Array.isArray(tsxRule.include)
|
||||
? [...tsxRule.include, ...newIncludePaths]
|
||||
: [tsxRule.include, ...newIncludePaths];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const addPathsToModuleScopePlugin = (webpackConfig, paths) => {
|
||||
const moduleScopePlugin = findWebpackPlugin(
|
||||
webpackConfig,
|
||||
"ModuleScopePlugin"
|
||||
);
|
||||
if (!moduleScopePlugin) {
|
||||
throw new Error(
|
||||
`Expected to find plugin "ModuleScopePlugin", but didn't.`
|
||||
);
|
||||
}
|
||||
moduleScopePlugin.appSrcs = [...moduleScopePlugin.appSrcs, ...paths];
|
||||
};
|
||||
|
||||
const enableImportsFromExternalPaths = (webpackConfig, paths) => {
|
||||
enableTypescriptImportsFromExternalPaths(webpackConfig, paths);
|
||||
addPathsToModuleScopePlugin(webpackConfig, paths);
|
||||
};
|
||||
|
||||
module.exports = enableImportsFromExternalPaths;
|
||||
@@ -1,3 +1,13 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
|
||||
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
// <React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
// </React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||
"jsx": "react",
|
||||
/* Modules */
|
||||
"module": "commonjs", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files. */
|
||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
// "strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user