updated using CODEX, refresh in canvas layout and functionalities
This commit is contained in:
Binary file not shown.
+1
-1
@@ -4,7 +4,7 @@ import os
|
||||
from werkzeug.security import generate_password_hash
|
||||
|
||||
# Save the database in the backend folder
|
||||
DB_FILE = os.path.join(os.path.dirname(__file__), "..\\database\\mxpic_data.db")
|
||||
DB_FILE = os.path.abspath(os.path.join(os.path.dirname(__file__), "..", "database", "mxpic_data.db"))
|
||||
|
||||
def init_db():
|
||||
conn = sqlite3.connect(DB_FILE)
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
import os
|
||||
import yaml
|
||||
from collections import OrderedDict
|
||||
from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
|
||||
from werkzeug.security import check_password_hash
|
||||
import database
|
||||
|
||||
# --- Path Configurations ---
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FRONTEND_DIR = os.path.join(BASE_DIR, '..', 'frontend')
|
||||
|
||||
YML_PATH = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra', 'directories.yaml')
|
||||
COMPS_ROOT = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra')
|
||||
# Define where your new icons folder is located (adjust if it's placed elsewhere)
|
||||
ICONS_DIR = os.path.join(BASE_DIR, 'icons')
|
||||
|
||||
app = Flask(__name__, template_folder=FRONTEND_DIR, static_folder=FRONTEND_DIR)
|
||||
app.secret_key = 'super_secret_mxpic_key'
|
||||
app.json.sort_keys = False
|
||||
|
||||
database.init_db()
|
||||
|
||||
# ... [Keep countSpaces and buildTree exactly as they are] ...
|
||||
|
||||
def findComps(baseDir):
|
||||
"""Scan component folders, return map of paths -> component info."""
|
||||
compMap = {}
|
||||
refDir = baseDir
|
||||
for root, dirs, files in os.walk(baseDir):
|
||||
ymlFiles = [f for f in files if f.endswith('.yml')]
|
||||
if ymlFiles:
|
||||
parentDir = os.path.dirname(root)
|
||||
relPath = os.path.relpath(parentDir, refDir)
|
||||
parts = () if relPath == '.' else tuple(relPath.split(os.sep))
|
||||
compName = os.path.basename(root)
|
||||
|
||||
# Extract the category (the mother folder's name)
|
||||
category = os.path.basename(parentDir)
|
||||
|
||||
compMap[parts] = {
|
||||
'folder': compName,
|
||||
'yml': ymlFiles[0],
|
||||
'category': category # Save the category to the map
|
||||
}
|
||||
dirs.clear()
|
||||
return compMap
|
||||
|
||||
def addCompsToTree(compMap):
|
||||
"""Build a completely fresh tree from scratch and insert component nodes."""
|
||||
fresh_tree = OrderedDict()
|
||||
|
||||
for pathSeg, compItem in compMap.items():
|
||||
compName = compItem['folder']
|
||||
curNode = fresh_tree
|
||||
|
||||
for seg in pathSeg:
|
||||
if seg not in curNode:
|
||||
curNode[seg] = OrderedDict()
|
||||
curNode = curNode[seg]
|
||||
|
||||
curNode[compName] = OrderedDict({
|
||||
"__type__": "component",
|
||||
"__name__": compName,
|
||||
"__yml__": compItem['yml'],
|
||||
"__category__": compItem['category'] # Inject category into the tree
|
||||
})
|
||||
|
||||
return fresh_tree
|
||||
|
||||
|
||||
if os.path.isdir(COMPS_ROOT):
|
||||
compMap = findComps(COMPS_ROOT)
|
||||
fresh_tree = addCompsToTree(compMap)
|
||||
|
||||
print(compMap)
|
||||
print(fresh_tree)
|
||||
|
||||
|
||||
|
||||
+285
-107
@@ -1,128 +1,90 @@
|
||||
|
||||
import os
|
||||
import re
|
||||
import shutil
|
||||
import json
|
||||
import yaml
|
||||
from collections import OrderedDict
|
||||
from functools import wraps
|
||||
from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
|
||||
from werkzeug.security import check_password_hash
|
||||
import database # Imports the database.py you created earlier
|
||||
import database
|
||||
from flask import Response
|
||||
|
||||
# --- Path Configurations ---
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FRONTEND_DIR = os.path.join(BASE_DIR, '..', 'frontend')
|
||||
|
||||
# Use os.path.join exclusively for cross-platform safety
|
||||
YML_PATH = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra', 'directories.yaml')
|
||||
COMPS_ROOT = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra')
|
||||
# Define where your new icons folder is located (adjust if it's placed elsewhere)
|
||||
ICONS_DIR = os.path.join(BASE_DIR, 'icons')
|
||||
|
||||
#build layout save path
|
||||
DATABASE_ROOT = os.path.abspath(os.path.join(BASE_DIR, '..', 'database'))
|
||||
|
||||
|
||||
# Initialize Flask, pointing to the frontend folder for HTML/CSS/JS
|
||||
app = Flask(__name__, template_folder=FRONTEND_DIR, static_folder=FRONTEND_DIR)
|
||||
app.secret_key = 'super_secret_mxpic_key' # Required for session management
|
||||
app.json.sort_keys = False # Keep dictionary order
|
||||
app.secret_key = 'super_secret_mxpic_key'
|
||||
app.json.sort_keys = False
|
||||
|
||||
# Ensure database tables exist when the server boots
|
||||
database.init_db()
|
||||
|
||||
# --- YAML & PDK Parsing Helper Functions (Unchanged) ---
|
||||
def countSpaces(line):
|
||||
"""Count leading spaces (tab=4)."""
|
||||
expanded = line.expandtabs(4)
|
||||
return len(expanded) - len(expanded.lstrip(' '))
|
||||
|
||||
def buildTree(filepath):
|
||||
"""Build nested tree from indented yaml."""
|
||||
if not os.path.exists(filepath):
|
||||
return OrderedDict()
|
||||
def login_required_json(view_func):
|
||||
@wraps(view_func)
|
||||
def wrapper(*args, **kwargs):
|
||||
if 'user_id' not in session:
|
||||
return jsonify({"error": "Authentication required"}), 401
|
||||
return view_func(*args, **kwargs)
|
||||
return wrapper
|
||||
|
||||
with open(filepath, 'r', encoding='utf-8') as f:
|
||||
lines = f.readlines()
|
||||
|
||||
rootIdx = None
|
||||
for i, line in enumerate(lines):
|
||||
if line.strip().startswith('root') and ':' in line.strip():
|
||||
rootIdx = i
|
||||
break
|
||||
if rootIdx is None:
|
||||
return OrderedDict()
|
||||
def safe_name(value, fallback):
|
||||
"""Keep user/project/cell names filesystem-friendly without changing display names."""
|
||||
value = (value or '').strip()
|
||||
if not value:
|
||||
value = fallback
|
||||
value = re.sub(r'[^A-Za-z0-9_.-]+', '_', value)
|
||||
value = value.strip('._')
|
||||
return value or fallback
|
||||
|
||||
entries = []
|
||||
for line in lines[rootIdx + 1:]:
|
||||
stripped = line.strip()
|
||||
if not stripped or stripped.startswith('#'):
|
||||
continue
|
||||
if stripped.startswith('- '):
|
||||
spaceNum = countSpaces(line)
|
||||
# FIX 1: Strip trailing colons off the string so 'composites:' becomes 'composites'
|
||||
name = stripped[2:].strip().rstrip(':')
|
||||
if name:
|
||||
entries.append((spaceNum, name))
|
||||
|
||||
if not entries:
|
||||
return OrderedDict()
|
||||
def user_layout_root():
|
||||
username = safe_name(session.get('username'), 'anonymous')
|
||||
return os.path.join(DATABASE_ROOT, username, 'layout')
|
||||
|
||||
minIndent = min(indent for indent, _ in entries)
|
||||
nest = OrderedDict()
|
||||
levelStack = [(minIndent - 1, nest)]
|
||||
|
||||
for spaceNum, name in entries:
|
||||
while levelStack and levelStack[-1][0] >= spaceNum:
|
||||
levelStack.pop()
|
||||
parent = levelStack[-1][1]
|
||||
child = OrderedDict()
|
||||
parent[name] = child
|
||||
levelStack.append((spaceNum, child))
|
||||
def project_root(project_name):
|
||||
return os.path.join(user_layout_root(), safe_name(project_name, 'project_1'))
|
||||
|
||||
return nest
|
||||
|
||||
# def addCompsToTree(tree, compMap):
|
||||
# """Insert component nodes into the tree."""
|
||||
# for pathSeg, compItem in compMap.items():
|
||||
# compName = compItem['folder']
|
||||
# curNode = tree
|
||||
def cell_file_path(project_name, cell_name):
|
||||
return os.path.join(project_root(project_name), f"{safe_name(cell_name, 'canvas_1')}.yml")
|
||||
|
||||
# # FIX 2: Automatically build missing folder paths
|
||||
# for seg in pathSeg:
|
||||
# if seg not in curNode:
|
||||
# # If a folder like MZM_1600G isn't in the YAML, gracefully auto-create it
|
||||
# curNode[seg] = OrderedDict()
|
||||
# curNode = curNode[seg]
|
||||
|
||||
# curNode[compName] = OrderedDict({
|
||||
# "__type__": "component",
|
||||
# "__name__": compName,
|
||||
# "__yml__": compItem['yml']
|
||||
# })
|
||||
# return tree
|
||||
def project_meta_path(project_name):
|
||||
return os.path.join(project_root(project_name), ".project.json")
|
||||
|
||||
def addCompsToTree(compMap):
|
||||
"""
|
||||
Build a completely fresh tree from scratch and insert component nodes.
|
||||
No previous tree object or inspection required.
|
||||
"""
|
||||
# Initialize a clean, empty root tree
|
||||
fresh_tree = OrderedDict()
|
||||
|
||||
for pathSeg, compItem in compMap.items():
|
||||
compName = compItem['folder']
|
||||
curNode = fresh_tree
|
||||
def read_project_meta(project_name):
|
||||
path = project_meta_path(project_name)
|
||||
if not os.path.exists(path):
|
||||
return {}
|
||||
with open(path, 'r', encoding='utf-8') as f:
|
||||
return json.load(f)
|
||||
|
||||
# Sequentially build the nested path segments dynamically
|
||||
for seg in pathSeg:
|
||||
if seg not in curNode:
|
||||
curNode[seg] = OrderedDict()
|
||||
curNode = curNode[seg]
|
||||
|
||||
# Place the component metadata dictionary into its leaf node
|
||||
curNode[compName] = OrderedDict({
|
||||
"__type__": "component",
|
||||
"__name__": compName,
|
||||
"__yml__": compItem['yml']
|
||||
})
|
||||
def write_project_meta(project_name, meta):
|
||||
os.makedirs(project_root(project_name), exist_ok=True)
|
||||
with open(project_meta_path(project_name), 'w', encoding='utf-8') as f:
|
||||
json.dump(meta, f, indent=2)
|
||||
|
||||
return fresh_tree
|
||||
# ... [Keep countSpaces and buildTree exactly as they are] ...
|
||||
|
||||
def findComps(baseDir):
|
||||
"""Scan component folders, return map of paths -> component info."""
|
||||
compMap = {}
|
||||
# refDir = os.path.dirname(baseDir)
|
||||
refDir = baseDir
|
||||
for root, dirs, files in os.walk(baseDir):
|
||||
ymlFiles = [f for f in files if f.endswith('.yml')]
|
||||
@@ -131,29 +93,67 @@ def findComps(baseDir):
|
||||
relPath = os.path.relpath(parentDir, refDir)
|
||||
parts = () if relPath == '.' else tuple(relPath.split(os.sep))
|
||||
compName = os.path.basename(root)
|
||||
compMap[parts] = {
|
||||
|
||||
# Extract the category (the mother folder's name)
|
||||
category = os.path.basename(parentDir)
|
||||
|
||||
# Include compName in the key so multiple cells in one category do not overwrite each other.
|
||||
compMap[parts + (compName,)] = {
|
||||
'folder': compName,
|
||||
'yml': ymlFiles[0]
|
||||
'yml': ymlFiles[0],
|
||||
'category': category # Save the category to the map
|
||||
}
|
||||
dirs.clear()
|
||||
return compMap
|
||||
|
||||
# def addCompsToTree(tree, compMap):
|
||||
# """Insert component nodes into the tree."""
|
||||
# for pathSeg, compItem in compMap.items():
|
||||
# compName = compItem['folder']
|
||||
# curNode = tree
|
||||
# try:
|
||||
# for seg in pathSeg:
|
||||
# curNode = curNode[seg]
|
||||
# except KeyError:
|
||||
# continue
|
||||
# curNode[compName] = OrderedDict({
|
||||
# "__type__": "component",
|
||||
# "__name__": compName,
|
||||
# "__yml__": compItem['yml']
|
||||
# })
|
||||
# return tree
|
||||
def addCompsToTree(compMap):
|
||||
"""Build a completely fresh tree from scratch and insert component nodes."""
|
||||
fresh_tree = OrderedDict()
|
||||
|
||||
for mapKey, compItem in compMap.items():
|
||||
pathSeg = mapKey[:-1]
|
||||
compName = compItem['folder']
|
||||
curNode = fresh_tree
|
||||
|
||||
for seg in pathSeg:
|
||||
if seg not in curNode:
|
||||
curNode[seg] = OrderedDict()
|
||||
curNode = curNode[seg]
|
||||
|
||||
curNode[compName] = OrderedDict({
|
||||
"__type__": "component",
|
||||
"__name__": compName,
|
||||
"__yml__": compItem['yml'],
|
||||
"__category__": compItem['category'] # Inject category into the tree
|
||||
})
|
||||
|
||||
return fresh_tree
|
||||
|
||||
# ... [Keep readCompYaml and Page Routes exactly as they are] ...
|
||||
|
||||
# --- API ROUTES (Library, Components & Icons) ---
|
||||
|
||||
@app.route('/api/icon/<category>')
|
||||
def getIcon(category):
|
||||
"""Serve the icon corresponding to the component category."""
|
||||
for ext in ('.png', '.svg', '.jpg'):
|
||||
icon_path = os.path.join(ICONS_DIR, f"{category}{ext}")
|
||||
if os.path.exists(icon_path):
|
||||
return send_from_directory(ICONS_DIR, f"{category}{ext}")
|
||||
|
||||
fallback = os.path.join(ICONS_DIR, "default.png")
|
||||
if os.path.exists(fallback):
|
||||
return send_from_directory(ICONS_DIR, "default.png")
|
||||
|
||||
# return png if not found
|
||||
transparent_png = (
|
||||
b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x01\x00\x00\x00\x01'
|
||||
b'\x08\x06\x00\x00\x00\x1f\x15\xc4\x89\x00\x00\x00\nIDATx\x9cc\x00\x01'
|
||||
b'\x00\x00\x05\x00\x01\r\n\xf4\xc0\x00\x00\x00\x00IEND\xaeB`\x82'
|
||||
)
|
||||
return Response(transparent_png, mimetype='image/png')
|
||||
|
||||
# ... [Keep existing API routes below] ...
|
||||
|
||||
def readCompYaml(compName):
|
||||
"""Load YAML from component folder."""
|
||||
@@ -214,11 +214,185 @@ def logout():
|
||||
session.clear()
|
||||
return redirect(url_for('home'))
|
||||
|
||||
|
||||
@app.route('/api/technologies', methods=['GET'])
|
||||
@login_required_json
|
||||
def list_technologies():
|
||||
"""List technology choices from mxpic/PDKs/<foundry>/<technology>."""
|
||||
technologies = []
|
||||
pdks_root = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs')
|
||||
if os.path.isdir(pdks_root):
|
||||
for foundry in sorted(os.listdir(pdks_root)):
|
||||
foundry_path = os.path.join(pdks_root, foundry)
|
||||
if not os.path.isdir(foundry_path):
|
||||
continue
|
||||
for technology in sorted(os.listdir(foundry_path)):
|
||||
technology_path = os.path.join(foundry_path, technology)
|
||||
if not os.path.isdir(technology_path):
|
||||
continue
|
||||
technologies.append({
|
||||
"foundry": foundry,
|
||||
"technology": technology,
|
||||
"id": f"{foundry}/{technology}",
|
||||
"label": f"{foundry} / {technology}"
|
||||
})
|
||||
return jsonify({"technologies": technologies})
|
||||
|
||||
|
||||
@app.route('/api/projects', methods=['GET'])
|
||||
@login_required_json
|
||||
def list_projects():
|
||||
"""List projects stored under database/<username>/layout."""
|
||||
root = user_layout_root()
|
||||
os.makedirs(root, exist_ok=True)
|
||||
|
||||
projects = []
|
||||
for name in sorted(os.listdir(root)):
|
||||
path = os.path.join(root, name)
|
||||
if not os.path.isdir(path):
|
||||
continue
|
||||
cells = []
|
||||
for filename in sorted(os.listdir(path)):
|
||||
if not filename.lower().endswith(('.yml', '.yaml')):
|
||||
continue
|
||||
cell_name = os.path.splitext(filename)[0]
|
||||
yml_path = os.path.join(path, filename)
|
||||
cells.append({
|
||||
"name": cell_name,
|
||||
"has_layout": os.path.exists(yml_path)
|
||||
})
|
||||
meta = read_project_meta(name)
|
||||
projects.append({
|
||||
"name": name,
|
||||
"cells": cells,
|
||||
"technology": meta.get("technology")
|
||||
})
|
||||
|
||||
return jsonify({"projects": projects})
|
||||
|
||||
|
||||
@app.route('/api/projects', methods=['POST'])
|
||||
@login_required_json
|
||||
def create_project():
|
||||
data = request.get_json(silent=True) or {}
|
||||
requested_name = safe_name(data.get('name'), 'project_1')
|
||||
technology = data.get('technology') or ''
|
||||
root = user_layout_root()
|
||||
os.makedirs(root, exist_ok=True)
|
||||
|
||||
project_name = requested_name
|
||||
counter = 1
|
||||
while os.path.exists(os.path.join(root, project_name)):
|
||||
counter += 1
|
||||
project_name = f"{requested_name}_{counter}"
|
||||
|
||||
os.makedirs(project_root(project_name), exist_ok=True)
|
||||
write_project_meta(project_name, {
|
||||
"name": project_name,
|
||||
"technology": technology
|
||||
})
|
||||
return jsonify({"name": project_name, "technology": technology}), 201
|
||||
|
||||
|
||||
@app.route('/api/projects/<project_name>', methods=['GET'])
|
||||
@login_required_json
|
||||
def get_project(project_name):
|
||||
"""Load all saved cells for a project."""
|
||||
root = project_root(project_name)
|
||||
if not os.path.isdir(root):
|
||||
return jsonify({"error": "Project not found"}), 404
|
||||
|
||||
cells = []
|
||||
for filename in sorted(os.listdir(root)):
|
||||
if not filename.lower().endswith(('.yml', '.yaml')):
|
||||
continue
|
||||
cell_name = os.path.splitext(filename)[0]
|
||||
yml_path = os.path.join(root, filename)
|
||||
if not os.path.exists(yml_path):
|
||||
continue
|
||||
with open(yml_path, 'r', encoding='utf-8') as f:
|
||||
cells.append({
|
||||
"name": cell_name,
|
||||
"content": f.read()
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
"name": safe_name(project_name, 'project_1'),
|
||||
"cells": cells,
|
||||
"technology": read_project_meta(project_name).get("technology")
|
||||
})
|
||||
|
||||
|
||||
@app.route('/api/projects/<project_name>', methods=['DELETE'])
|
||||
@login_required_json
|
||||
def delete_project(project_name):
|
||||
"""Delete a user's project folder under database/<username>/layout."""
|
||||
root = project_root(project_name)
|
||||
layout_root = os.path.abspath(user_layout_root())
|
||||
target = os.path.abspath(root)
|
||||
|
||||
if not target.startswith(layout_root + os.sep):
|
||||
return jsonify({"error": "Invalid project path"}), 400
|
||||
if not os.path.isdir(target):
|
||||
return jsonify({"error": "Project not found"}), 404
|
||||
|
||||
shutil.rmtree(target)
|
||||
return jsonify({"message": "deleted", "project": safe_name(project_name, 'project_1')})
|
||||
|
||||
|
||||
@app.route('/api/projects/<project_name>/cells/<cell_name>', methods=['PATCH'])
|
||||
@login_required_json
|
||||
def rename_cell(project_name, cell_name):
|
||||
data = request.get_json(silent=True) or {}
|
||||
old_cell = safe_name(cell_name, 'canvas_1')
|
||||
new_cell = safe_name(data.get('name'), old_cell)
|
||||
if old_cell == new_cell:
|
||||
return jsonify({"message": "unchanged", "cell": new_cell})
|
||||
|
||||
old_path = cell_file_path(project_name, old_cell)
|
||||
new_path = cell_file_path(project_name, new_cell)
|
||||
if os.path.exists(new_path):
|
||||
return jsonify({"error": "Cell name already exists"}), 409
|
||||
if os.path.exists(old_path):
|
||||
os.rename(old_path, new_path)
|
||||
|
||||
return jsonify({"message": "renamed", "old_cell": old_cell, "cell": new_cell})
|
||||
|
||||
|
||||
|
||||
|
||||
@app.route('/api/save-layout', methods=['POST'])
|
||||
@login_required_json
|
||||
def save_layout():
|
||||
try:
|
||||
data = request.get_json()
|
||||
project = safe_name(data.get('project'), 'project_1')
|
||||
cell = safe_name(data.get('cell'), 'canvas_1')
|
||||
content = data.get('content', '')
|
||||
|
||||
save_path = cell_file_path(project, cell)
|
||||
os.makedirs(os.path.dirname(save_path), exist_ok=True)
|
||||
|
||||
with open(save_path, 'w', encoding='utf-8') as f:
|
||||
f.write(content)
|
||||
|
||||
return jsonify({
|
||||
"message": "successfully saved",
|
||||
"project": project,
|
||||
"cell": cell,
|
||||
"path": save_path
|
||||
}), 200
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
|
||||
# --- API ROUTES (Library & Components) ---
|
||||
@app.route('/api/library')
|
||||
def getLib():
|
||||
"""Get library structure."""
|
||||
tree = buildTree(YML_PATH)
|
||||
# tree = buildTree(YML_PATH)
|
||||
if os.path.isdir(COMPS_ROOT):
|
||||
compMap = findComps(COMPS_ROOT)
|
||||
fresh_tree = addCompsToTree(compMap)
|
||||
@@ -250,3 +424,7 @@ def getCompImg(component_name):
|
||||
if __name__ == '__main__':
|
||||
print("Starting mxpic EDA Server on http://127.0.0.1:3000")
|
||||
app.run(host='127.0.0.1', port=3000, debug=True)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
|
||||
import os
|
||||
import yaml
|
||||
from collections import OrderedDict
|
||||
from flask import Flask, jsonify, send_from_directory, request, redirect, url_for, session, render_template
|
||||
from werkzeug.security import check_password_hash
|
||||
import database
|
||||
from flask import Response
|
||||
|
||||
# --- Path Configurations ---
|
||||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||||
FRONTEND_DIR = os.path.join(BASE_DIR, '..', 'frontend')
|
||||
|
||||
YML_PATH = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra', 'directories.yaml')
|
||||
COMPS_ROOT = os.path.join(BASE_DIR, '..', 'mxpic', 'PDKs', 'Silterra')
|
||||
# Define where your new icons folder is located (adjust if it's placed elsewhere)
|
||||
ICONS_DIR = os.path.join(BASE_DIR, 'icons')
|
||||
|
||||
#build layout save path
|
||||
SAVE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'generated_layouts')
|
||||
|
||||
|
||||
app = Flask(__name__, template_folder=FRONTEND_DIR, static_folder=FRONTEND_DIR)
|
||||
app.secret_key = 'super_secret_mxpic_key'
|
||||
app.json.sort_keys = False
|
||||
|
||||
database.init_db()
|
||||
|
||||
# ... [Keep countSpaces and buildTree exactly as they are] ...
|
||||
|
||||
def findComps(baseDir):
|
||||
"""Scan component folders, return map of paths -> component info."""
|
||||
compMap = {}
|
||||
refDir = baseDir
|
||||
for root, dirs, files in os.walk(baseDir):
|
||||
ymlFiles = [f for f in files if f.endswith('.yml')]
|
||||
if ymlFiles:
|
||||
parentDir = os.path.dirname(root)
|
||||
relPath = os.path.relpath(parentDir, refDir)
|
||||
parts = () if relPath == '.' else tuple(relPath.split(os.sep))
|
||||
compName = os.path.basename(root)
|
||||
|
||||
# Extract the category (the mother folder's name)
|
||||
category = os.path.basename(parentDir)
|
||||
|
||||
compMap[parts] = {
|
||||
'folder': compName,
|
||||
'yml': ymlFiles[0],
|
||||
'category': category # Save the category to the map
|
||||
}
|
||||
dirs.clear()
|
||||
return compMap
|
||||
|
||||
def addCompsToTree(compMap):
|
||||
"""Build a completely fresh tree from scratch and insert component nodes."""
|
||||
fresh_tree = OrderedDict()
|
||||
|
||||
for pathSeg, compItem in compMap.items():
|
||||
compName = compItem['folder']
|
||||
curNode = fresh_tree
|
||||
|
||||
for seg in pathSeg:
|
||||
if seg not in curNode:
|
||||
curNode[seg] = OrderedDict()
|
||||
curNode = curNode[seg]
|
||||
|
||||
curNode[compName] = OrderedDict({
|
||||
"__type__": "component",
|
||||
"__name__": compName,
|
||||
"__yml__": compItem['yml'],
|
||||
"__category__": compItem['category'] # Inject category into the tree
|
||||
})
|
||||
|
||||
return fresh_tree
|
||||
|
||||
# ... [Keep readCompYaml and Page Routes exactly as they are] ...
|
||||
|
||||
# --- API ROUTES (Library, Components & Icons) ---
|
||||
|
||||
@app.route('/api/icon/<category>')
|
||||
def getIcon(category):
|
||||
"""Serve the icon corresponding to the component category."""
|
||||
for ext in ('.png', '.svg', '.jpg'):
|
||||
icon_path = os.path.join(ICONS_DIR, f"{category}{ext}")
|
||||
if os.path.exists(icon_path):
|
||||
return send_from_directory(ICONS_DIR, f"{category}{ext}")
|
||||
|
||||
fallback = os.path.join(ICONS_DIR, "default.png")
|
||||
if os.path.exists(fallback):
|
||||
return send_from_directory(ICONS_DIR, "default.png")
|
||||
|
||||
# return png if not found
|
||||
transparent_png = (
|
||||
b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x01\x00\x00\x00\x01'
|
||||
b'\x08\x06\x00\x00\x00\x1f\x15\xc4\x89\x00\x00\x00\nIDATx\x9cc\x00\x01'
|
||||
b'\x00\x00\x05\x00\x01\r\n\xf4\xc0\x00\x00\x00\x00IEND\xaeB`\x82'
|
||||
)
|
||||
return Response(transparent_png, mimetype='image/png')
|
||||
|
||||
# ... [Keep existing API routes below] ...
|
||||
|
||||
def readCompYaml(compName):
|
||||
"""Load YAML from component folder."""
|
||||
for root, dirs, files in os.walk(COMPS_ROOT):
|
||||
if os.path.basename(root) == compName:
|
||||
dirs.clear()
|
||||
ymlFiles = [f for f in files if f.endswith('.yml')]
|
||||
if ymlFiles:
|
||||
ymlPath = os.path.join(root, ymlFiles[0])
|
||||
with open(ymlPath, 'r', encoding='utf-8') as f:
|
||||
return yaml.safe_load(f)
|
||||
return None
|
||||
|
||||
# --- AUTHENTICATION & PAGE ROUTES ---
|
||||
@app.route('/')
|
||||
def home():
|
||||
"""Route to login page, or bypass to dashboard if already authenticated."""
|
||||
if 'user_id' in session:
|
||||
return redirect(url_for('dashboard'))
|
||||
return render_template('login.html')
|
||||
|
||||
@app.route('/login', methods=['POST'])
|
||||
def login():
|
||||
"""Verify credentials against the database."""
|
||||
username = request.form.get('username')
|
||||
password = request.form.get('password')
|
||||
|
||||
user = database.get_user(username)
|
||||
|
||||
# Verify hash from database matches entered password
|
||||
if user and check_password_hash(user[2], password):
|
||||
session['user_id'] = user[0]
|
||||
session['username'] = user[1]
|
||||
return redirect(url_for('dashboard'))
|
||||
else:
|
||||
return render_template('login.html', error="Invalid username or password")
|
||||
|
||||
@app.route('/dashboard')
|
||||
def dashboard():
|
||||
"""User project list."""
|
||||
if 'user_id' not in session:
|
||||
return redirect(url_for('home'))
|
||||
|
||||
return render_template('dashboard.html', username=session['username'])
|
||||
|
||||
@app.route('/canvas')
|
||||
def canvas():
|
||||
"""The main EDA editor."""
|
||||
if 'user_id' not in session:
|
||||
return redirect(url_for('home'))
|
||||
|
||||
# Note: Ensure your old index.html is renamed to canvas.html in the frontend folder
|
||||
return render_template('canvas.html')
|
||||
|
||||
@app.route('/logout')
|
||||
def logout():
|
||||
"""Clear session and return to login."""
|
||||
session.clear()
|
||||
return redirect(url_for('home'))
|
||||
|
||||
|
||||
|
||||
|
||||
@app.route('/api/save-layout', methods=['POST'])
|
||||
def save_layout():
|
||||
try:
|
||||
data = request.get_json()
|
||||
filename = data.get('filename', 'layout.yaml')
|
||||
content = data.get('content', '')
|
||||
|
||||
os.makedirs(SAVE_DIR, exist_ok=True)
|
||||
|
||||
save_path = os.path.join(SAVE_DIR, filename)
|
||||
|
||||
with open(save_path, 'w', encoding='utf-8') as f:
|
||||
f.write(content)
|
||||
|
||||
return jsonify({
|
||||
"message": "successfully saved",
|
||||
"path": save_path
|
||||
}), 200
|
||||
|
||||
except Exception as e:
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
|
||||
|
||||
# --- API ROUTES (Library & Components) ---
|
||||
@app.route('/api/library')
|
||||
def getLib():
|
||||
"""Get library structure."""
|
||||
# tree = buildTree(YML_PATH)
|
||||
if os.path.isdir(COMPS_ROOT):
|
||||
compMap = findComps(COMPS_ROOT)
|
||||
fresh_tree = addCompsToTree(compMap)
|
||||
return jsonify(fresh_tree)
|
||||
|
||||
|
||||
|
||||
@app.route('/api/component/<component_name>')
|
||||
def getComp(component_name):
|
||||
"""Return component YAML data."""
|
||||
data = readCompYaml(component_name)
|
||||
if data is None:
|
||||
return jsonify({"error": "Component not found"}), 404
|
||||
return jsonify(data)
|
||||
|
||||
@app.route('/api/component/<component_name>/image')
|
||||
def getCompImg(component_name):
|
||||
"""Return first image in component folder."""
|
||||
for root, dirs, files in os.walk(COMPS_ROOT):
|
||||
if os.path.basename(root) == component_name:
|
||||
dirs.clear()
|
||||
for ext in ('.png', '.jpg', '.jpeg', '.svg'):
|
||||
for f in files:
|
||||
if f.lower().endswith(ext):
|
||||
return send_from_directory(root, f)
|
||||
break
|
||||
return jsonify({"error": "No image found"}), 404
|
||||
|
||||
if __name__ == '__main__':
|
||||
print("Starting mxpic EDA Server on http://127.0.0.1:3000")
|
||||
app.run(host='127.0.0.1', port=3000, debug=True)
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "mxpic_project_1",
|
||||
"technology": "Silterra/EMO1_2ML_CU_Al_RDL"
|
||||
}
|
||||
+12
-18
@@ -1,8 +1,11 @@
|
||||
# =============================================
|
||||
# mxPIC Cell/Project Definition File
|
||||
# =============================================
|
||||
name: comp_1
|
||||
type: composite
|
||||
schema_version: "2.0.0"
|
||||
kind: cell
|
||||
project: mxpic_project_1
|
||||
name: mxpic_project_1
|
||||
type: project
|
||||
version: "1.0.0"
|
||||
|
||||
# 1. External Ports (How this cell connects to the outside world)
|
||||
@@ -28,28 +31,19 @@ ports:
|
||||
|
||||
# 2. Instances (The sub-components dropped onto this canvas)
|
||||
instances:
|
||||
component_1:
|
||||
component: EMO1_2ML_CU_Al_RDL/composite/Mach_Zender_modulators/MZM_800G_L3000_GSSG_TRAIL_TypeX5_QY_v1_20260303
|
||||
x: 100.0
|
||||
y: 100.0
|
||||
canvas_1:
|
||||
component: canvas_1
|
||||
x: 250.0
|
||||
y: 200.0
|
||||
rotation: 0.0
|
||||
mirror: false
|
||||
settings:
|
||||
length:
|
||||
|
||||
component_2:
|
||||
component: EMO1_2ML_CU_Al_RDL/electronics/inductors/INDC_200pH_SiNPP_QY_202604
|
||||
x: 400.0
|
||||
y: 100.0
|
||||
rotation: 0.0
|
||||
mirror: false
|
||||
settings:
|
||||
length:
|
||||
|
||||
component_3:
|
||||
component: EMO1_2ML_CU_Al_RDL/electronics/pads/Spec_PADs_ABCD_292_P125_250_W80_80_QY_20260324
|
||||
x: 700.0
|
||||
y: 100.0
|
||||
component: canvas_1
|
||||
x: 250.0
|
||||
y: 280.0
|
||||
rotation: 0.0
|
||||
mirror: false
|
||||
settings:
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "mxpic_project_1_2",
|
||||
"technology": "Silterra/EMO1_2ML_CU_Al_RDL"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "mxpic_project_1_3",
|
||||
"technology": "Silterra/EMO1_2ML_CU_Al_RDL"
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"name": "mxpic_project_1_4",
|
||||
"technology": "Silterra/EMO1_2ML_CU_Al_RDL"
|
||||
}
|
||||
+997
-306
File diff suppressed because it is too large
Load Diff
@@ -1,829 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
{% raw %}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>mxPIC Core - Canvas</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
/* optihk Shared Dark Theme Variables */
|
||||
:root {
|
||||
--bg-main: #0f172a;
|
||||
--bg-card: #1e293b;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--accent-hover: #0284c7;
|
||||
--border: #334155;
|
||||
--input-bg: #0b1120;
|
||||
}
|
||||
|
||||
body,
|
||||
html,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text-main);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Custom Dark Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-main);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Tree View Styling */
|
||||
details {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.tree-folder summary {
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.component-leaf {
|
||||
cursor: grab;
|
||||
padding: 4px 6px;
|
||||
margin-left: 15px;
|
||||
margin-top: 2px;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
border-radius: 4px;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.component-leaf:hover {
|
||||
background: var(--border);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Side Panel Blocks */
|
||||
.left-block, .right-block {
|
||||
background: var(--bg-main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-block-header, .right-block-header {
|
||||
background: var(--bg-card);
|
||||
padding: 8px 12px;
|
||||
font-weight: 600;
|
||||
font-size: 0.85em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.left-block-body, .right-block-body {
|
||||
padding: 12px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
border: 1px dashed var(--border);
|
||||
padding: 12px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5em;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: var(--border);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Standard Form Inputs inside panels */
|
||||
input[type="number"], input[type="text"] {
|
||||
background-color: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
font-family: inherit;
|
||||
font-size: 0.9em;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="number"]:focus, input[type="text"]:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ReactFlow Dark Mode Overrides */
|
||||
.react-flow__controls button {
|
||||
background-color: var(--bg-card) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
fill: var(--text-main) !important;
|
||||
}
|
||||
.react-flow__controls button:hover {
|
||||
background-color: var(--border) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel">
|
||||
const { useState, useEffect, useRef, useCallback, useMemo, memo } = React;
|
||||
const {
|
||||
ReactFlow,
|
||||
ReactFlowProvider,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
Controls,
|
||||
Background,
|
||||
useReactFlow,
|
||||
addEdge,
|
||||
Handle,
|
||||
Position,
|
||||
useUpdateNodeInternals,
|
||||
} = window.ReactFlow;
|
||||
|
||||
// --- NODE DESIGN (Dark CAD Style) ---
|
||||
const RotatableNode = ({ id, data, selected }) => {
|
||||
const updateNodeInternals = useUpdateNodeInternals();
|
||||
useEffect(() => {
|
||||
updateNodeInternals(id);
|
||||
}, [data.rotation, updateNodeInternals, id]);
|
||||
|
||||
const baseHandleStyle = {
|
||||
width: 10, height: 10,
|
||||
background: 'var(--bg-main)',
|
||||
border: '2px solid var(--accent)',
|
||||
borderRadius: '50%',
|
||||
};
|
||||
const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
|
||||
const leftBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(-50%, -50%)' };
|
||||
const rightTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(50%, -50%)' };
|
||||
const rightBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(50%, -50%)' };
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '10px 20px',
|
||||
border: selected ? '2px solid var(--accent)' : '1px solid var(--border)',
|
||||
borderRadius: 6,
|
||||
background: 'var(--bg-card)',
|
||||
color: 'var(--text-main)',
|
||||
minWidth: 100, textAlign: 'center',
|
||||
position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
|
||||
transition: selected ? 'none' : 'transform 0.1s ease',
|
||||
boxSizing: 'border-box',
|
||||
boxShadow: selected ? '0 0 15px rgba(56, 189, 248, 0.2)' : '0 4px 6px rgba(0,0,0,0.3)',
|
||||
fontFamily: "'Inter', sans-serif",
|
||||
fontSize: '0.85rem'
|
||||
}}>
|
||||
<div>{data.componentDisplayName}</div>
|
||||
<Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Left} id="port-lt-target" style={{ ...leftTopPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Left} id="port-lb-source" style={{ ...leftBottomPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Left} id="port-lb-target" style={{ ...leftBottomPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Right} id="port-rt-source" style={{ ...rightTopPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Right} id="port-rt-target" style={{ ...rightTopPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Right} id="port-rb-source" style={{ ...rightBottomPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Right} id="port-rb-target" style={{ ...rightBottomPort, zIndex: 5 }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TreeNode = ({ name, children }) => {
|
||||
if (children && children.__type__ === 'component') {
|
||||
const componentName = children.__name__;
|
||||
const handleDragStart = (event) => {
|
||||
event.dataTransfer.setData('application/reactflow', componentName);
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
return (
|
||||
<div className="component-leaf" draggable onDragStart={handleDragStart}>
|
||||
<span style={{color: 'var(--accent)', marginRight: '4px'}}>❖</span> {name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasChildren = children && Object.keys(children).length > 0;
|
||||
return (
|
||||
<details>
|
||||
<summary className="tree-folder">
|
||||
<span style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>📂 {name}</span>
|
||||
</summary>
|
||||
{hasChildren &&
|
||||
Object.entries(children).map(([childName, childData]) => (
|
||||
<TreeNode key={childName} name={childName} children={childData} />
|
||||
))
|
||||
}
|
||||
</details>
|
||||
);
|
||||
};
|
||||
|
||||
const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
|
||||
<aside style={{
|
||||
width: width, background: 'var(--bg-card)', borderRight: '1px solid var(--border)',
|
||||
padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="left-block">
|
||||
<div className="left-block-header">
|
||||
<span>PDK Libraries</span>
|
||||
<button className="toggle-btn" onClick={onToggle} title={expanded ? 'Collapse all' : 'Expand all'}>
|
||||
{expanded ? '▾' : '▸'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="left-block-body" style={{ maxHeight: '45vh', overflowY: 'auto' }} key={treeKey} ref={treeRef}>
|
||||
{library && Object.keys(library).length > 0 ? (
|
||||
Object.entries(library).map(([key, value]) => (
|
||||
<TreeNode key={key} name={key} children={value} />
|
||||
))
|
||||
) : (
|
||||
<p style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Loading library...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left-block">
|
||||
<div className="left-block-header">Routing modes</div>
|
||||
<div className="left-block-body">
|
||||
<ul style={{ paddingLeft: 20, margin: 0, color: 'var(--text-muted)', lineHeight: '1.8' }}>
|
||||
<li>Single mode wires</li>
|
||||
<li>Multi-mode wires</li>
|
||||
<li>DC electrical wires</li>
|
||||
<li>RF electrical wires</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="left-block-header">Session</div>
|
||||
<div className="left-block-body" style={{color: 'var(--text-muted)'}}>
|
||||
<div style={{marginBottom: '4px'}}>Name: XXXXXX</div>
|
||||
<div style={{marginBottom: '10px'}}>ID: 12345678</div>
|
||||
<button disabled style={{
|
||||
background: 'var(--border)', color: 'var(--text-muted)',
|
||||
border: 'none', padding: '6px 12px', borderRadius: '4px', width: '100%'
|
||||
}}>Log out</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
const RightPanel = memo(({ selectedNode, width, onRenameComponent }) => {
|
||||
const [componentData, setComponentData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [enlarged, setEnlarged] = useState(null);
|
||||
const { setNodes } = useReactFlow();
|
||||
const [editingComponentName, setEditingComponentName] = useState(false);
|
||||
const [tempComponentName, setTempComponentName] = useState('');
|
||||
const [localX, setLocalX] = useState('');
|
||||
const [localY, setLocalY] = useState('');
|
||||
const [localRotation, setLocalRotation] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const nodeId = selectedNode?.id;
|
||||
if (!nodeId) {
|
||||
setComponentData(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const compName = selectedNode?.data?.componentName;
|
||||
if (!compName) {
|
||||
setComponentData(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
|
||||
|
||||
setLoading(true);
|
||||
fetch(`/api/component/${encodeURIComponent(compName)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedNode) {
|
||||
setLocalX(selectedNode.position.x.toFixed(3));
|
||||
setLocalY(selectedNode.position.y.toFixed(3));
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}, [selectedNode?.position.x, selectedNode?.position.y, selectedNode?.data?.rotation, selectedNode?.id]);
|
||||
|
||||
const updatePosition = useCallback((id, axis, value) => {
|
||||
const val = parseFloat(value);
|
||||
if (isNaN(val)) return;
|
||||
setNodes(nds => nds.map(n => n.id === id ? { ...n, position: { ...n.position, [axis]: val } } : n));
|
||||
}, [setNodes]);
|
||||
|
||||
const updateRotation = useCallback((id, value) => {
|
||||
const val = parseFloat(value);
|
||||
if (isNaN(val)) return;
|
||||
const clamped = Math.min(180, Math.max(-180, val));
|
||||
setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, rotation: clamped } } : n));
|
||||
}, [setNodes]);
|
||||
|
||||
const formatPort = (port) => {
|
||||
if (!port) return '—';
|
||||
return `x:${port.x ?? '?'}, y:${port.y ?? '?'}, a:${port.a ?? '?'}, w:${port.width ?? '?'}`;
|
||||
};
|
||||
|
||||
const currentRotation = selectedNode?.data?.rotation ?? 0;
|
||||
const currentComponentDisplayName = selectedNode?.data?.componentDisplayName || '';
|
||||
|
||||
const handleStartEditName = () => {
|
||||
setTempComponentName(currentComponentDisplayName);
|
||||
setEditingComponentName(true);
|
||||
};
|
||||
|
||||
const handleSaveName = () => {
|
||||
const newName = tempComponentName.trim();
|
||||
if (newName && selectedNode) {
|
||||
onRenameComponent(selectedNode.id, newName);
|
||||
}
|
||||
setEditingComponentName(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSaveName();
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingComponentName(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<aside style={{
|
||||
width: width, background: 'var(--bg-card)', borderLeft: '1px solid var(--border)',
|
||||
padding: 12, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Transforms</div>
|
||||
<div className="right-block-body">
|
||||
{selectedNode ? (
|
||||
<div>
|
||||
<label>X Coordinate</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localX}
|
||||
onChange={(e) => setLocalX(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localX);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updatePosition(selectedNode.id, 'x', val);
|
||||
setLocalX(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalX(selectedNode.position.x.toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>Y Coordinate</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localY}
|
||||
onChange={(e) => setLocalY(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localY);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updatePosition(selectedNode.id, 'y', val);
|
||||
setLocalY(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalY(selectedNode.position.y.toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>Angle (deg)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localRotation}
|
||||
onChange={(e) => setLocalRotation(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localRotation);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updateRotation(selectedNode.id, val);
|
||||
setLocalRotation(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') e.currentTarget.blur();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ color: 'var(--text-muted)', fontStyle: 'italic', textAlign: 'center' }}>Select a node to inspect</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedNode?.data?.componentName && (
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Parameters</div>
|
||||
<div className="right-block-body">
|
||||
{loading ? (
|
||||
<p style={{color: 'var(--text-muted)'}}>Loading data...</p>
|
||||
) : componentData ? (
|
||||
<>
|
||||
<div style={{ marginBottom: '15px' }}>
|
||||
<label>Instance Name</label>
|
||||
{editingComponentName ? (
|
||||
<input
|
||||
type="text"
|
||||
value={tempComponentName}
|
||||
onChange={(e) => setTempComponentName(e.target.value)}
|
||||
onBlur={handleSaveName}
|
||||
onKeyDown={handleKeyDown}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '6px 8px',
|
||||
backgroundColor: 'var(--input-bg)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
wordBreak: 'break-all',
|
||||
color: 'var(--accent)'
|
||||
}}
|
||||
onClick={handleStartEditName}
|
||||
title="Click to edit"
|
||||
>
|
||||
<span>{currentComponentDisplayName || componentData.name}</span>
|
||||
<span style={{fontSize: '12px', color: 'var(--text-muted)'}}>✎</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{color: 'var(--text-muted)', lineHeight: '1.6'}}>
|
||||
<p style={{ margin: '0 0 8px 0', wordBreak: 'break-all' }}>
|
||||
<strong style={{color: 'var(--text-main)'}}>Cell:</strong> {componentData.name}
|
||||
</p>
|
||||
<p style={{ margin: '0 0 8px 0' }}>
|
||||
<strong style={{color: 'var(--text-main)'}}>Foundry:</strong> {componentData.foundry}<br/>
|
||||
<strong style={{color: 'var(--text-main)'}}>Process:</strong> {componentData.process}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Ports:</p>
|
||||
<ul style={{ paddingLeft: 15, margin: '0 0 15px 0', color: 'var(--text-muted)' }}>
|
||||
{componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
|
||||
<li key={portName} style={{ letterSpacing: '0.5px' }}>
|
||||
<span style={{color: 'var(--accent)'}}>{portName}</span>: {formatPort(portInfo)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p style={{color: 'var(--text-main)', fontWeight: '500', marginBottom: '4px'}}>Preview:</p>
|
||||
<div style={{
|
||||
border: '1px solid var(--border)', width: '100%', height: 100,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: 'var(--input-bg)', borderRadius: '4px',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<img
|
||||
src={`/api/component/${encodeURIComponent(componentData.name)}/image`}
|
||||
alt="Component layout"
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', cursor: 'pointer' }}
|
||||
onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
e.currentTarget.parentElement.innerHTML = '<span style="color:var(--text-muted)">No preview</span>';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: 'var(--text-muted)' }}>No data available</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="right-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="right-block-header">Inverse Design</div>
|
||||
<div className="right-block-body placeholder-block">Requires AI Upgrade</div>
|
||||
</div>
|
||||
|
||||
{enlarged && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
backgroundColor: 'rgba(15, 23, 42, 0.9)', zIndex: 1000,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'zoom-out',
|
||||
backdropFilter: 'blur(4px)'
|
||||
}}
|
||||
onClick={() => setEnlarged(null)}
|
||||
>
|
||||
<img
|
||||
src={enlarged}
|
||||
alt="Enlarged layout"
|
||||
style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain', border: '1px solid var(--border)', background: 'var(--bg-main)' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}, (prevProps, nextProps) => {
|
||||
const prev = prevProps.selectedNode;
|
||||
const next = nextProps.selectedNode;
|
||||
if (prev?.id !== next?.id) return false;
|
||||
if (prev?.position?.x !== next?.position?.x) return false;
|
||||
if (prev?.position?.y !== next?.position?.y) return false;
|
||||
if (prev?.data?.rotation !== next?.data?.rotation) return false;
|
||||
if (prev?.data?.componentName !== next?.data?.componentName) return false;
|
||||
if (prev?.data?.componentDisplayName !== next?.data?.componentDisplayName) return false;
|
||||
if (prevProps.width !== nextProps.width) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const ResizeHandle = ({ onMouseDown }) => (
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
style={{
|
||||
width: 6, cursor: 'col-resize', background: 'transparent',
|
||||
transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
/>
|
||||
);
|
||||
|
||||
function App() {
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
const reactFlowInstance = useReactFlow();
|
||||
|
||||
const [library, setLibrary] = useState(null);
|
||||
const [treeKey, setTreeKey] = useState(0);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const treeContainerRef = useRef(null);
|
||||
|
||||
const [leftWidth, setLeftWidth] = useState(260);
|
||||
const [rightWidth, setRightWidth] = useState(260);
|
||||
const [dragging, setDragging] = useState(null);
|
||||
|
||||
const [gridSnap, setGridSnap] = useState(false);
|
||||
|
||||
const componentCounterRef = useRef(1);
|
||||
|
||||
const generateComponentDisplayName = useCallback(() => {
|
||||
const name = `component_${componentCounterRef.current}`;
|
||||
componentCounterRef.current += 1;
|
||||
return name;
|
||||
}, []);
|
||||
|
||||
const renameComponent = useCallback((nodeId, newComponentDisplayName) => {
|
||||
setNodes(nds => nds.map(n => {
|
||||
if (n.id === nodeId) {
|
||||
return {
|
||||
...n,
|
||||
data: {
|
||||
...n.data,
|
||||
componentDisplayName: newComponentDisplayName
|
||||
}
|
||||
};
|
||||
}
|
||||
return n;
|
||||
}));
|
||||
}, [setNodes]);
|
||||
|
||||
const fetchLibrary = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/library');
|
||||
const data = await res.json();
|
||||
setLibrary(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch library', err);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { fetchLibrary(); }, [fetchLibrary]);
|
||||
|
||||
const selectedNode = useMemo(() => nodes.find(n => n.selected), [nodes]);
|
||||
|
||||
const onDragOver = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
}, []);
|
||||
|
||||
const onDrop = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
const type = event.dataTransfer.getData('application/reactflow');
|
||||
if (!type) return;
|
||||
const position = reactFlowInstance.screenToFlowPosition({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
});
|
||||
const componentDisplayName = generateComponentDisplayName();
|
||||
const newNode = {
|
||||
id: Date.now().toString(),
|
||||
type: 'rotatableNode',
|
||||
position,
|
||||
data: {
|
||||
label: type,
|
||||
componentName: type,
|
||||
rotation: 0,
|
||||
componentDisplayName: componentDisplayName
|
||||
},
|
||||
};
|
||||
setNodes((nds) => nds.concat(newNode));
|
||||
}, [setNodes, reactFlowInstance, generateComponentDisplayName]);
|
||||
|
||||
const onConnect = useCallback((connection) => {
|
||||
setEdges((eds) => addEdge({ ...connection, type: 'smoothstep', style: { stroke: 'var(--accent)', strokeWidth: 2 } }, eds));
|
||||
}, [setEdges]);
|
||||
|
||||
const expandAll = useCallback(() => {
|
||||
if (treeContainerRef.current) {
|
||||
treeContainerRef.current.querySelectorAll('details').forEach(d => d.open = true);
|
||||
}
|
||||
}, []);
|
||||
const collapseAll = useCallback(() => setTreeKey(k => k + 1), []);
|
||||
const handleToggle = useCallback(() => {
|
||||
if (expanded) { collapseAll(); setExpanded(false); }
|
||||
else { expandAll(); setExpanded(true); }
|
||||
}, [expanded, expandAll, collapseAll]);
|
||||
|
||||
const handleResizeStart = useCallback((side) => (e) => {
|
||||
e.preventDefault();
|
||||
setDragging(side);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (!dragging) return;
|
||||
const onMouseMove = (e) => {
|
||||
if (dragging === 'left') {
|
||||
setLeftWidth(Math.min(500, Math.max(150, e.clientX)));
|
||||
} else if (dragging === 'right') {
|
||||
const newWidth = window.innerWidth - e.clientX;
|
||||
setRightWidth(Math.min(500, Math.max(150, newWidth)));
|
||||
}
|
||||
};
|
||||
const onMouseUp = () => setDragging(null);
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}, [dragging]);
|
||||
|
||||
const toggleGridSnap = useCallback(() => {
|
||||
setGridSnap(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', width: '100%', height: '100%', userSelect: dragging ? 'none' : 'auto' }}>
|
||||
<LeftPanel
|
||||
library={library} treeKey={treeKey} expanded={expanded}
|
||||
onToggle={handleToggle} treeRef={treeContainerRef} width={leftWidth}
|
||||
/>
|
||||
<ResizeHandle onMouseDown={handleResizeStart('left')} />
|
||||
|
||||
<div style={{ flex: 1, position: 'relative' }}>
|
||||
|
||||
{/* Grid Snap Toggle Switch */}
|
||||
<div style={{
|
||||
position: 'absolute', top: 15, right: 15, zIndex: 10,
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
background: 'var(--bg-card)', padding: '6px 12px', borderRadius: '8px',
|
||||
border: '1px solid var(--border)', boxShadow: '0 4px 6px rgba(0,0,0,0.3)'
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '0.85em', fontWeight: '500', color: 'var(--text-main)', userSelect: 'none'
|
||||
}}>Snap to Grid</span>
|
||||
<div
|
||||
onClick={toggleGridSnap}
|
||||
style={{
|
||||
width: 40, height: 20, borderRadius: 10,
|
||||
background: gridSnap ? 'var(--accent)' : 'var(--input-bg)',
|
||||
border: '1px solid ' + (gridSnap ? 'var(--accent)' : 'var(--border)'),
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center',
|
||||
padding: '0 2px', transition: 'background 0.3s, border-color 0.3s',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: 16, height: 16, borderRadius: '50%',
|
||||
background: '#fff',
|
||||
transform: gridSnap ? 'translateX(20px)' : 'translateX(0)',
|
||||
transition: 'transform 0.2s',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={{ rotatableNode: RotatableNode }}
|
||||
fitView
|
||||
snapToGrid={gridSnap}
|
||||
snapGrid={[10, 10]}
|
||||
nodesDraggable={true}
|
||||
nodesConnectable={true}
|
||||
elementsSelectable={true}
|
||||
connectionRadius={50}
|
||||
>
|
||||
<Controls style={{ bottom: 15, left: 15 }} />
|
||||
{/* Dark mode background for the canvas */}
|
||||
<Background color="#334155" gap={20} size={1} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
<ResizeHandle onMouseDown={handleResizeStart('right')} />
|
||||
<RightPanel
|
||||
selectedNode={selectedNode}
|
||||
width={rightWidth}
|
||||
onRenameComponent={renameComponent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<ReactFlowProvider>
|
||||
<App />
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
{% endraw %}
|
||||
@@ -1,750 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
{% raw %}
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Canvas</title>
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/reactflow@11/dist/umd/index.js" crossorigin></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/reactflow@11/dist/style.css" />
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
body,
|
||||
html,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-block {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.left-block-header {
|
||||
background: #e0e0e0;
|
||||
padding: 6px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left-block-body {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.tree-folder summary {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.right-block {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.right-block-header {
|
||||
background: #e0e0e0;
|
||||
padding: 6px 10px;
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.right-block-body {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.placeholder-block {
|
||||
border: 1px dashed #bbb;
|
||||
padding: 8px;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.8em;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.component-leaf {
|
||||
cursor: grab;
|
||||
padding: 2px 4px;
|
||||
margin-left: 20px;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.component-leaf:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="text/babel">
|
||||
const { useState, useEffect, useRef, useCallback, useMemo, memo } = React;
|
||||
const {
|
||||
ReactFlow,
|
||||
ReactFlowProvider,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
Controls,
|
||||
Background,
|
||||
useReactFlow,
|
||||
addEdge,
|
||||
Handle,
|
||||
Position,
|
||||
useUpdateNodeInternals,
|
||||
} = window.ReactFlow;
|
||||
|
||||
const RotatableNode = ({ id, data, selected }) => {
|
||||
const updateNodeInternals = useUpdateNodeInternals();
|
||||
useEffect(() => {
|
||||
updateNodeInternals(id);
|
||||
}, [data.rotation, updateNodeInternals, id]);
|
||||
|
||||
const baseHandleStyle = {
|
||||
width: 14, height: 14,
|
||||
background: '#555',
|
||||
border: 'none',
|
||||
borderRadius: '50%',
|
||||
};
|
||||
const leftTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(-50%, -50%)' };
|
||||
const leftBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(-50%, -50%)' };
|
||||
const rightTopPort = { ...baseHandleStyle, top: '24%', transform: 'translate(50%, -50%)' };
|
||||
const rightBottomPort = { ...baseHandleStyle, top: '76%', transform: 'translate(50%, -50%)' };
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '10px 20px', border: '1px solid #333', borderRadius: 6,
|
||||
background: '#fff', minWidth: 100, textAlign: 'center',
|
||||
position: 'relative', transform: `rotate(${data.rotation || 0}deg)`,
|
||||
transition: selected ? 'none' : 'transform 0.1s ease',
|
||||
boxSizing: 'border-box',
|
||||
}}>
|
||||
<div>{data.componentDisplayName}</div>
|
||||
<Handle type="source" position={Position.Left} id="port-lt-source" style={{ ...leftTopPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Left} id="port-lt-target" style={{ ...leftTopPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Left} id="port-lb-source" style={{ ...leftBottomPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Left} id="port-lb-target" style={{ ...leftBottomPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Right} id="port-rt-source" style={{ ...rightTopPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Right} id="port-rt-target" style={{ ...rightTopPort, zIndex: 5 }} />
|
||||
<Handle type="source" position={Position.Right} id="port-rb-source" style={{ ...rightBottomPort, zIndex: 10 }} />
|
||||
<Handle type="target" position={Position.Right} id="port-rb-target" style={{ ...rightBottomPort, zIndex: 5 }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TreeNode = ({ name, children }) => {
|
||||
if (children && children.__type__ === 'component') {
|
||||
const componentName = children.__name__;
|
||||
const handleDragStart = (event) => {
|
||||
event.dataTransfer.setData('application/reactflow', componentName);
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
return (
|
||||
<div className="component-leaf" draggable onDragStart={handleDragStart}>
|
||||
🔷 {name}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const hasChildren = children && Object.keys(children).length > 0;
|
||||
return (
|
||||
<details>
|
||||
<summary className="tree-folder">
|
||||
<span style={{ wordBreak: 'break-all', whiteSpace: 'normal' }}>📂 {name}</span>
|
||||
</summary>
|
||||
{hasChildren &&
|
||||
Object.entries(children).map(([childName, childData]) => (
|
||||
<TreeNode key={childName} name={childName} children={childData} />
|
||||
))
|
||||
}
|
||||
</details>
|
||||
);
|
||||
};
|
||||
|
||||
const LeftPanel = ({ library, treeKey, expanded, onToggle, treeRef, width }) => (
|
||||
<aside style={{
|
||||
width: width, background: '#f4f4f4', borderRight: '1px solid #ccc',
|
||||
padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="left-block">
|
||||
<div className="left-block-header">
|
||||
<span>PDK Libraries</span>
|
||||
<button className="toggle-btn" onClick={onToggle} title={expanded ? 'Collapse all' : 'Expand all'}>
|
||||
{expanded ? '▾' : '▸'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="left-block-body" style={{ maxHeight: '45vh', overflowY: 'auto' }} key={treeKey} ref={treeRef}>
|
||||
{library && Object.keys(library).length > 0 ? (
|
||||
Object.entries(library).map(([key, value]) => (
|
||||
<TreeNode key={key} name={key} children={value} />
|
||||
))
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>Loading library...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left-block">
|
||||
<div className="left-block-header">Routing selections</div>
|
||||
<div className="left-block-body">
|
||||
<ul style={{ paddingLeft: 20, margin: 0 }}>
|
||||
<li>Single mode wires</li>
|
||||
<li>Multi-mode wires</li>
|
||||
<li>DC electrical wires</li>
|
||||
<li>RF electrical wires</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="left-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="left-block-header">User info</div>
|
||||
<div className="left-block-body">
|
||||
<div>Name: XXXXXX</div>
|
||||
<div>ID: 12345678</div>
|
||||
<button disabled>Log out</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
const RightPanel = memo(({ selectedNode, width, onRenameComponent }) => {
|
||||
const [componentData, setComponentData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [enlarged, setEnlarged] = useState(null);
|
||||
const { setNodes } = useReactFlow();
|
||||
const [editingComponentName, setEditingComponentName] = useState(false);
|
||||
const [tempComponentName, setTempComponentName] = useState('');
|
||||
const [localX, setLocalX] = useState('');
|
||||
const [localY, setLocalY] = useState('');
|
||||
const [localRotation, setLocalRotation] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const nodeId = selectedNode?.id;
|
||||
if (!nodeId) {
|
||||
setComponentData(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const compName = selectedNode?.data?.componentName;
|
||||
if (!compName) {
|
||||
setComponentData(null);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
if (componentData && componentData.name === compName && componentData.nodeId === nodeId) return;
|
||||
|
||||
setLoading(true);
|
||||
fetch(`/api/component/${encodeURIComponent(compName)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
setComponentData({ ...data, nodeId: nodeId, componentDisplayName: selectedNode.data.componentDisplayName || data.name });
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [selectedNode?.id, selectedNode?.data?.componentName, selectedNode?.data?.componentDisplayName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedNode) {
|
||||
setLocalX(selectedNode.position.x.toFixed(3));
|
||||
setLocalY(selectedNode.position.y.toFixed(3));
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}, [selectedNode?.position.x, selectedNode?.position.y, selectedNode?.data?.rotation, selectedNode?.id]);
|
||||
|
||||
const updatePosition = useCallback((id, axis, value) => {
|
||||
const val = parseFloat(value);
|
||||
if (isNaN(val)) return;
|
||||
setNodes(nds => nds.map(n => n.id === id ? { ...n, position: { ...n.position, [axis]: val } } : n));
|
||||
}, [setNodes]);
|
||||
|
||||
const updateRotation = useCallback((id, value) => {
|
||||
const val = parseFloat(value);
|
||||
if (isNaN(val)) return;
|
||||
const clamped = Math.min(180, Math.max(-180, val));
|
||||
setNodes(nds => nds.map(n => n.id === id ? { ...n, data: { ...n.data, rotation: clamped } } : n));
|
||||
}, [setNodes]);
|
||||
|
||||
const formatPort = (port) => {
|
||||
if (!port) return '—';
|
||||
return `x:${port.x ?? '?'}, y:${port.y ?? '?'}, a:${port.a ?? '?'}, w:${port.width ?? '?'}`;
|
||||
};
|
||||
|
||||
const currentRotation = selectedNode?.data?.rotation ?? 0;
|
||||
const currentComponentDisplayName = selectedNode?.data?.componentDisplayName || '';
|
||||
|
||||
const handleStartEditName = () => {
|
||||
setTempComponentName(currentComponentDisplayName);
|
||||
setEditingComponentName(true);
|
||||
};
|
||||
|
||||
const handleSaveName = () => {
|
||||
const newName = tempComponentName.trim();
|
||||
if (newName && selectedNode) {
|
||||
onRenameComponent(selectedNode.id, newName);
|
||||
}
|
||||
setEditingComponentName(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSaveName();
|
||||
} else if (e.key === 'Escape') {
|
||||
setEditingComponentName(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<aside style={{
|
||||
width: width, background: '#fafafa', borderLeft: '1px solid #ccc',
|
||||
padding: 10, display: 'flex', flexDirection: 'column', height: '100%',
|
||||
boxSizing: 'border-box', overflowY: 'auto'
|
||||
}}>
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Properties</div>
|
||||
<div className="right-block-body">
|
||||
{selectedNode ? (
|
||||
<div>
|
||||
<label>X:</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localX}
|
||||
onChange={(e) => setLocalX(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localX);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updatePosition(selectedNode.id, 'x', val);
|
||||
setLocalX(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalX(selectedNode.position.x.toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>Y:</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localY}
|
||||
onChange={(e) => setLocalY(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localY);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updatePosition(selectedNode.id, 'y', val);
|
||||
setLocalY(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalY(selectedNode.position.y.toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<br /><br />
|
||||
<label>A (deg):</label>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
value={localRotation}
|
||||
onChange={(e) => setLocalRotation(e.target.value)}
|
||||
onBlur={() => {
|
||||
const val = parseFloat(localRotation);
|
||||
if (!isNaN(val) && selectedNode) {
|
||||
updateRotation(selectedNode.id, val);
|
||||
setLocalRotation(val.toFixed(3));
|
||||
} else if (selectedNode) {
|
||||
setLocalRotation(((selectedNode.data?.rotation || 0)).toFixed(3));
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
style={{ width: '100%', marginTop: 4 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>Click a node to edit</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedNode?.data?.componentName && (
|
||||
<div className="right-block">
|
||||
<div className="right-block-header">Item details</div>
|
||||
<div className="right-block-body">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : componentData ? (
|
||||
<>
|
||||
<div style={{ marginBottom: '10px' }}>
|
||||
<strong style={{ display: 'block', marginBottom: '4px' }}>Component name:</strong>
|
||||
{editingComponentName ? (
|
||||
<input
|
||||
type="text"
|
||||
value={tempComponentName}
|
||||
onChange={(e) => setTempComponentName(e.target.value)}
|
||||
onBlur={handleSaveName}
|
||||
onKeyDown={handleKeyDown}
|
||||
autoFocus
|
||||
style={{ width: '100%', padding: '4px', fontSize: '0.85em', boxSizing: 'border-box' }}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
padding: '4px 6px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '3px',
|
||||
display: 'inline-block',
|
||||
wordBreak: 'break-all'
|
||||
}}
|
||||
onClick={handleStartEditName}
|
||||
title="Click to edit"
|
||||
>
|
||||
{currentComponentDisplayName || componentData.name} ✎
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p style={{ wordBreak: 'break-all', whiteSpace: 'normal', overflowWrap: 'break-word', marginTop: '8px' }}>
|
||||
<strong>PDK name:</strong><br />{componentData.name}
|
||||
</p>
|
||||
<p><strong>Description:</strong><br />
|
||||
Foundry: {componentData.foundry}<br />
|
||||
Process: {componentData.process}<br />
|
||||
Year: {componentData.year}<br />
|
||||
Designer: {componentData.designer}
|
||||
</p>
|
||||
<p><strong>PDK:</strong> (string)</p>
|
||||
<p><strong>Ports:</strong></p>
|
||||
<ul style={{ paddingLeft: 20, margin: 0 }}>
|
||||
{componentData.ports && Object.entries(componentData.ports).map(([portName, portInfo]) => (
|
||||
<li key={portName} style={{ letterSpacing: '0.5px' }}>{portName}: {formatPort(portInfo)}</li>
|
||||
))}
|
||||
</ul>
|
||||
<p><strong>Image:</strong></p>
|
||||
<div style={{
|
||||
border: '1px dashed #ccc', width: '100%', height: 80,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: '#999', background: '#fcfcfc', marginTop: 4,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<img
|
||||
src={`/api/component/${encodeURIComponent(componentData.name)}/image`}
|
||||
alt="Component layout"
|
||||
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', cursor: 'pointer' }}
|
||||
onClick={() => setEnlarged(`/api/component/${encodeURIComponent(componentData.name)}/image`)}
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
e.currentTarget.parentElement.innerHTML = 'No image available';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p style={{ color: '#999' }}>No data</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="right-block" style={{ marginTop: 'auto' }}>
|
||||
<div className="right-block-header">Function block to be explored</div>
|
||||
<div className="right-block-body placeholder-block">Reserved for future functionality</div>
|
||||
</div>
|
||||
|
||||
{enlarged && (
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.8)', zIndex: 1000,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
cursor: 'zoom-out',
|
||||
}}
|
||||
onClick={() => setEnlarged(null)}
|
||||
>
|
||||
<img
|
||||
src={enlarged}
|
||||
alt="Enlarged layout"
|
||||
style={{ maxWidth: '90%', maxHeight: '90%', objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
);
|
||||
}, (prevProps, nextProps) => {
|
||||
const prev = prevProps.selectedNode;
|
||||
const next = nextProps.selectedNode;
|
||||
if (prev?.id !== next?.id) return false;
|
||||
if (prev?.position?.x !== next?.position?.x) return false;
|
||||
if (prev?.position?.y !== next?.position?.y) return false;
|
||||
if (prev?.data?.rotation !== next?.data?.rotation) return false;
|
||||
if (prev?.data?.componentName !== next?.data?.componentName) return false;
|
||||
if (prev?.data?.componentDisplayName !== next?.data?.componentDisplayName) return false;
|
||||
if (prevProps.width !== nextProps.width) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const ResizeHandle = ({ onMouseDown }) => (
|
||||
<div
|
||||
onMouseDown={onMouseDown}
|
||||
style={{
|
||||
width: 6, cursor: 'col-resize', background: 'transparent',
|
||||
transition: 'background 0.2s', zIndex: 5, flexShrink: 0,
|
||||
}}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = '#ccc'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
/>
|
||||
);
|
||||
|
||||
function App() {
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
const reactFlowInstance = useReactFlow();
|
||||
|
||||
const [library, setLibrary] = useState(null);
|
||||
const [treeKey, setTreeKey] = useState(0);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const treeContainerRef = useRef(null);
|
||||
|
||||
const [leftWidth, setLeftWidth] = useState(240);
|
||||
const [rightWidth, setRightWidth] = useState(220);
|
||||
const [dragging, setDragging] = useState(null);
|
||||
|
||||
const [gridSnap, setGridSnap] = useState(false);
|
||||
|
||||
const componentCounterRef = useRef(1);
|
||||
|
||||
const generateComponentDisplayName = useCallback(() => {
|
||||
const name = `component_${componentCounterRef.current}`;
|
||||
componentCounterRef.current += 1;
|
||||
return name;
|
||||
}, []);
|
||||
|
||||
const renameComponent = useCallback((nodeId, newComponentDisplayName) => {
|
||||
setNodes(nds => nds.map(n => {
|
||||
if (n.id === nodeId) {
|
||||
return {
|
||||
...n,
|
||||
data: {
|
||||
...n.data,
|
||||
componentDisplayName: newComponentDisplayName
|
||||
}
|
||||
};
|
||||
}
|
||||
return n;
|
||||
}));
|
||||
}, [setNodes]);
|
||||
|
||||
const fetchLibrary = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/library');
|
||||
const data = await res.json();
|
||||
setLibrary(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch library', err);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => { fetchLibrary(); }, [fetchLibrary]);
|
||||
|
||||
const selectedNode = useMemo(() => nodes.find(n => n.selected), [nodes]);
|
||||
|
||||
const onDragOver = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
}, []);
|
||||
|
||||
const onDrop = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
const type = event.dataTransfer.getData('application/reactflow');
|
||||
if (!type) return;
|
||||
const position = reactFlowInstance.screenToFlowPosition({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
});
|
||||
const componentDisplayName = generateComponentDisplayName();
|
||||
const newNode = {
|
||||
id: Date.now().toString(),
|
||||
type: 'rotatableNode',
|
||||
position,
|
||||
data: {
|
||||
label: type,
|
||||
componentName: type,
|
||||
rotation: 0,
|
||||
componentDisplayName: componentDisplayName
|
||||
},
|
||||
};
|
||||
setNodes((nds) => nds.concat(newNode));
|
||||
}, [setNodes, reactFlowInstance, generateComponentDisplayName]);
|
||||
|
||||
const onConnect = useCallback((connection) => {
|
||||
setEdges((eds) => addEdge({ ...connection, type: 'straight' }, eds));
|
||||
}, [setEdges]);
|
||||
|
||||
const expandAll = useCallback(() => {
|
||||
if (treeContainerRef.current) {
|
||||
treeContainerRef.current.querySelectorAll('details').forEach(d => d.open = true);
|
||||
}
|
||||
}, []);
|
||||
const collapseAll = useCallback(() => setTreeKey(k => k + 1), []);
|
||||
const handleToggle = useCallback(() => {
|
||||
if (expanded) { collapseAll(); setExpanded(false); }
|
||||
else { expandAll(); setExpanded(true); }
|
||||
}, [expanded, expandAll, collapseAll]);
|
||||
|
||||
const handleResizeStart = useCallback((side) => (e) => {
|
||||
e.preventDefault();
|
||||
setDragging(side);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (!dragging) return;
|
||||
const onMouseMove = (e) => {
|
||||
if (dragging === 'left') {
|
||||
setLeftWidth(Math.min(500, Math.max(150, e.clientX)));
|
||||
} else if (dragging === 'right') {
|
||||
const newWidth = window.innerWidth - e.clientX;
|
||||
setRightWidth(Math.min(500, Math.max(150, newWidth)));
|
||||
}
|
||||
};
|
||||
const onMouseUp = () => setDragging(null);
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
window.addEventListener('mouseup', onMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
window.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
}, [dragging]);
|
||||
|
||||
const toggleGridSnap = useCallback(() => {
|
||||
setGridSnap(prev => !prev);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', width: '100%', height: '100%', userSelect: dragging ? 'none' : 'auto' }}>
|
||||
<LeftPanel
|
||||
library={library} treeKey={treeKey} expanded={expanded}
|
||||
onToggle={handleToggle} treeRef={treeContainerRef} width={leftWidth}
|
||||
/>
|
||||
<ResizeHandle onMouseDown={handleResizeStart('left')} />
|
||||
|
||||
<div style={{ flex: 1, position: 'relative' }}>
|
||||
<div style={{
|
||||
position: 'absolute', top: 10, right: 10, zIndex: 10,
|
||||
display: 'flex', alignItems: 'center', gap: 8,
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '0.85em', fontWeight: 'bold', fontFamily: "'Sofia Pro', sans-serif",
|
||||
color: '#333', userSelect: 'none'
|
||||
}}>Grid lock</span>
|
||||
<div
|
||||
onClick={toggleGridSnap}
|
||||
style={{
|
||||
width: 48, height: 24, borderRadius: 12,
|
||||
background: gridSnap ? '#28a745' : '#ccc',
|
||||
cursor: 'pointer', display: 'flex', alignItems: 'center',
|
||||
padding: '0 2px', transition: 'background 0.3s',
|
||||
boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.2)',
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: 20, height: 20, borderRadius: '50%',
|
||||
background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)',
|
||||
transform: gridSnap ? 'translateX(24px)' : 'translateX(0)',
|
||||
transition: 'transform 0.2s',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onDragOver={onDragOver}
|
||||
onDrop={onDrop}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={{ rotatableNode: RotatableNode }}
|
||||
fitView
|
||||
snapToGrid={gridSnap}
|
||||
snapGrid={[10, 10]}
|
||||
nodesDraggable={true}
|
||||
nodesConnectable={true}
|
||||
elementsSelectable={true}
|
||||
connectionRadius={50}
|
||||
>
|
||||
<Controls />
|
||||
<Background />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
<ResizeHandle onMouseDown={handleResizeStart('right')} />
|
||||
<RightPanel
|
||||
selectedNode={selectedNode}
|
||||
width={rightWidth}
|
||||
onRenameComponent={renameComponent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<ReactFlowProvider>
|
||||
<App />
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
{% endraw %}
|
||||
+461
-68
@@ -5,25 +5,56 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard</title>
|
||||
<!-- Importing a clean, modern font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Base Dark Theme for EDA */
|
||||
:root {
|
||||
--bg-main: #0f172a;
|
||||
--bg-card: #1e293b;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--accent-hover: #0284c7;
|
||||
--border: #334155;
|
||||
--bg-main: #060b16;
|
||||
--bg-card: #0d1626;
|
||||
--bg-elevated: #121d31;
|
||||
--bg-panel: #162238;
|
||||
--text-main: #f6f8fb;
|
||||
--text-muted: #93a3b8;
|
||||
--accent: #6ee7ff;
|
||||
--accent-hover: #7c3aed;
|
||||
--accent-green: #34d399;
|
||||
--accent-warm: #f97316;
|
||||
--border: #28364c;
|
||||
--border-strong: #42516a;
|
||||
--danger: #ef4444;
|
||||
--panel-soft: #09111f;
|
||||
--folder-icon: #f8c14a;
|
||||
--shadow: rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
--bg-main: #edf3f8;
|
||||
--bg-card: #ffffff;
|
||||
--bg-elevated: #f8fbff;
|
||||
--bg-panel: #eef5fb;
|
||||
--text-main: #132032;
|
||||
--text-muted: #64758a;
|
||||
--accent: #2563eb;
|
||||
--accent-hover: #0f9f7a;
|
||||
--accent-green: #16a34a;
|
||||
--accent-warm: #38bdf8;
|
||||
--border: #d5e0eb;
|
||||
--border-strong: #b8c7d8;
|
||||
--panel-soft: #f4f8fb;
|
||||
--folder-icon: #38bdf8;
|
||||
--shadow: rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-main);
|
||||
font-family: 'IBM Plex Sans', "Segoe UI", sans-serif;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
||||
radial-gradient(circle at 16% 8%, rgba(124, 58, 237, 0.2), transparent 28%),
|
||||
radial-gradient(circle at 82% 16%, rgba(249, 115, 22, 0.11), transparent 24%),
|
||||
var(--bg-main);
|
||||
background-size: 44px 44px, 44px 44px, auto, auto, auto;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -31,115 +62,235 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Top Navigation Bar */
|
||||
body.light-mode {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
|
||||
radial-gradient(circle at 16% 8%, rgba(56, 189, 248, 0.16), transparent 28%),
|
||||
radial-gradient(circle at 82% 16%, rgba(34, 197, 94, 0.12), transparent 24%),
|
||||
var(--bg-main);
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
background-color: var(--bg-card);
|
||||
padding: 15px 40px;
|
||||
background: rgba(13, 22, 38, 0.9);
|
||||
padding: 14px 42px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(14px);
|
||||
}
|
||||
|
||||
body.light-mode header {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
margin-left: auto;
|
||||
margin-right: 20px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-main);
|
||||
border-radius: 8px;
|
||||
height: 34px;
|
||||
padding: 0 13px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
font-size: 1.22rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.brand::before {
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-hover) 60%, var(--accent-warm));
|
||||
box-shadow: 0 0 0 5px rgba(110, 231, 255, 0.08);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.logout-btn:hover {
|
||||
color: #ef4444;
|
||||
/* Red hover for logout */
|
||||
}
|
||||
|
||||
/* Main Content Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 40px 20px;
|
||||
max-width: 1060px;
|
||||
padding: 46px 22px 28px;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: clamp(1.75rem, 3vw, 2.45rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 strong {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Projects Section */
|
||||
.section-title {
|
||||
font-size: 1.1rem;
|
||||
font-family: 'IBM Plex Mono', Consolas, monospace;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 15px;
|
||||
margin: 34px 0 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* File Cards */
|
||||
.project-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
margin-bottom: 40px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
margin: 0 0 30px;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--bg-card);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
padding: 15px 20px;
|
||||
min-height: 76px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 16px 34px var(--shadow);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-green), transparent);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 20px 44px rgba(37, 99, 235, 0.18);
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
.project-meta {
|
||||
margin-left: auto;
|
||||
color: var(--text-muted);
|
||||
font-family: 'IBM Plex Mono', Consolas, monospace;
|
||||
font-size: 0.76rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.delete-project-btn {
|
||||
margin-left: 14px;
|
||||
border: 1px solid rgba(239, 68, 68, 0.45);
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
color: #fecaca;
|
||||
border-radius: 8px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.light-mode .delete-project-btn {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.delete-project-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.18);
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.file-icon,
|
||||
.project-icon {
|
||||
margin-right: 15px;
|
||||
color: var(--accent);
|
||||
font-size: 1.2rem;
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, var(--folder-icon), var(--accent-green));
|
||||
box-shadow: inset 0 -7px 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
|
||||
.file-icon::before,
|
||||
.project-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: -5px;
|
||||
width: 13px;
|
||||
height: 7px;
|
||||
background: var(--folder-icon);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
/* Action Button */
|
||||
.new-project-form {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.new-project-btn {
|
||||
background-color: var(--accent);
|
||||
color: #0f172a;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
||||
color: #06111f;
|
||||
font-family: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -147,68 +298,310 @@
|
||||
}
|
||||
|
||||
.new-project-btn:hover {
|
||||
background-color: var(--accent-hover);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.new-project-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 20px;
|
||||
color: var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(5, 11, 22, 0.74);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.modal-backdrop.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-panel {
|
||||
width: min(460px, calc(100vw - 32px));
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
|
||||
var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
box-shadow: 0 28px 86px var(--shadow);
|
||||
}
|
||||
|
||||
.modal-panel h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.modal-panel select {
|
||||
width: 100%;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 11px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.modal-panel select:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.12);
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-main);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-terminal {
|
||||
margin-top: 28px;
|
||||
min-height: 96px;
|
||||
max-height: 150px;
|
||||
overflow: auto;
|
||||
background: #020617;
|
||||
color: #c7f9ff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
font-family: 'IBM Plex Mono', Consolas, Monaco, monospace;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.5;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
body.light-mode .log-terminal {
|
||||
background: #f8fafc;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
header {
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.project-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
margin-left: 45px;
|
||||
width: calc(100% - 45px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Top Navigation -->
|
||||
<header>
|
||||
<div class="brand">opti<span>hk</span></div>
|
||||
<button class="theme-toggle" id="theme-toggle" type="button">Bright Mode</button>
|
||||
<a href="/logout" class="logout-btn">Logout</a>
|
||||
</header>
|
||||
|
||||
<!-- Main Dashboard -->
|
||||
<div class="container">
|
||||
<h2>Welcome back, <strong>{{ username }}</strong>!</h2>
|
||||
|
||||
<div class="section-title">Your Recent Layouts</div>
|
||||
<ul class="project-list">
|
||||
<li class="project-card">
|
||||
<span class="file-icon">📄</span>
|
||||
400G_Transceiver_v1.gds
|
||||
</li>
|
||||
<li class="project-card">
|
||||
<span class="file-icon">📄</span>
|
||||
Ring_Modulator_Test.gds
|
||||
</li>
|
||||
<div class="section-title">Your Projects</div>
|
||||
<ul class="project-list" id="project-list">
|
||||
<li class="project-card">Loading projects...</li>
|
||||
</ul>
|
||||
|
||||
<!-- Canvas Link -->
|
||||
<form action="/canvas" method="GET" class="new-project-form">
|
||||
<form id="new-project-form" class="new-project-form">
|
||||
<button type="submit" class="new-project-btn">
|
||||
<span>+</span> New PIC Layout
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="new-project-form" style="margin-top: 15px;">
|
||||
<button type="button" class="new-project-btn" onclick="location.href='/open-project'">
|
||||
Open Project
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- System Footer -->
|
||||
<footer>
|
||||
Powered by mxpic core
|
||||
</footer>
|
||||
|
||||
<div class="log-terminal" id="log-terminal">
|
||||
<div>[system] Dashboard ready.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-backdrop" id="technology-modal">
|
||||
<div class="modal-panel">
|
||||
<h3>Select Technology</h3>
|
||||
<select id="technology-select"></select>
|
||||
<div class="modal-actions">
|
||||
<button class="secondary-btn" type="button" id="cancel-project">Cancel</button>
|
||||
<button class="new-project-btn" type="button" id="create-project">Create Project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const projectList = document.getElementById('project-list');
|
||||
const newProjectForm = document.getElementById('new-project-form');
|
||||
const technologyModal = document.getElementById('technology-modal');
|
||||
const technologySelect = document.getElementById('technology-select');
|
||||
const createProjectButton = document.getElementById('create-project');
|
||||
const cancelProjectButton = document.getElementById('cancel-project');
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const logTerminal = document.getElementById('log-terminal');
|
||||
let technologies = [];
|
||||
|
||||
function addLog(message) {
|
||||
const line = document.createElement('div');
|
||||
line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
||||
logTerminal.appendChild(line);
|
||||
logTerminal.scrollTop = logTerminal.scrollHeight;
|
||||
}
|
||||
|
||||
function applyTheme(mode) {
|
||||
document.body.classList.toggle('light-mode', mode === 'light');
|
||||
themeToggle.textContent = mode === 'light' ? 'Dark Mode' : 'Bright Mode';
|
||||
localStorage.setItem('mxpic-theme', mode);
|
||||
}
|
||||
|
||||
applyTheme(localStorage.getItem('mxpic-theme') || 'dark');
|
||||
themeToggle.addEventListener('click', () => {
|
||||
applyTheme(document.body.classList.contains('light-mode') ? 'dark' : 'light');
|
||||
});
|
||||
|
||||
function openProject(name) {
|
||||
window.location.href = `/canvas?project=${encodeURIComponent(name)}`;
|
||||
}
|
||||
|
||||
async function loadProjects() {
|
||||
try {
|
||||
const response = await fetch('/api/projects');
|
||||
const data = await response.json();
|
||||
projectList.innerHTML = '';
|
||||
|
||||
if (!data.projects || data.projects.length === 0) {
|
||||
const empty = document.createElement('li');
|
||||
empty.className = 'project-card';
|
||||
empty.textContent = 'No projects yet. Create a new PIC layout to begin.';
|
||||
projectList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
data.projects.forEach(project => {
|
||||
const item = document.createElement('li');
|
||||
item.className = 'project-card';
|
||||
item.onclick = () => openProject(project.name);
|
||||
const cellCount = project.cells ? project.cells.length : 0;
|
||||
const technology = project.technology ? ` · ${project.technology}` : '';
|
||||
item.innerHTML = `<span class="project-icon"></span><span class="project-name">${project.name}</span><span class="project-meta">${cellCount} cells${technology}</span>`;
|
||||
const deleteButton = document.createElement('button');
|
||||
deleteButton.className = 'delete-project-btn';
|
||||
deleteButton.type = 'button';
|
||||
deleteButton.textContent = 'Delete';
|
||||
deleteButton.onclick = async (event) => {
|
||||
event.stopPropagation();
|
||||
if (deleteButton.dataset.confirm !== 'true') {
|
||||
deleteButton.dataset.confirm = 'true';
|
||||
deleteButton.textContent = 'Confirm';
|
||||
addLog(`Click Confirm to delete project "${project.name}".`);
|
||||
setTimeout(() => {
|
||||
deleteButton.dataset.confirm = 'false';
|
||||
deleteButton.textContent = 'Delete';
|
||||
}, 3200);
|
||||
return;
|
||||
}
|
||||
const result = await fetch(`/api/projects/${encodeURIComponent(project.name)}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!result.ok) {
|
||||
addLog(`Delete failed for "${project.name}".`);
|
||||
return;
|
||||
}
|
||||
addLog(`Deleted project "${project.name}".`);
|
||||
loadProjects();
|
||||
};
|
||||
item.appendChild(deleteButton);
|
||||
projectList.appendChild(item);
|
||||
});
|
||||
} catch (error) {
|
||||
projectList.innerHTML = '<li class="project-card">Failed to load projects.</li>';
|
||||
}
|
||||
}
|
||||
|
||||
newProjectForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
technologyModal.classList.add('open');
|
||||
});
|
||||
|
||||
cancelProjectButton.addEventListener('click', () => {
|
||||
technologyModal.classList.remove('open');
|
||||
});
|
||||
|
||||
createProjectButton.addEventListener('click', async () => {
|
||||
const selectedTechnology = technologySelect.value;
|
||||
const response = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: 'mxpic_project_1', technology: selectedTechnology })
|
||||
});
|
||||
const project = await response.json();
|
||||
addLog(`Created project "${project.name}" with technology "${selectedTechnology}".`);
|
||||
openProject(project.name);
|
||||
});
|
||||
|
||||
async function loadTechnologies() {
|
||||
const response = await fetch('/api/technologies');
|
||||
const data = await response.json();
|
||||
technologies = data.technologies || [];
|
||||
technologySelect.innerHTML = '';
|
||||
technologies.forEach(tech => {
|
||||
const option = document.createElement('option');
|
||||
option.value = tech.id;
|
||||
option.textContent = tech.label;
|
||||
technologySelect.appendChild(option);
|
||||
});
|
||||
if (technologies.length === 0) {
|
||||
const option = document.createElement('option');
|
||||
option.value = '';
|
||||
option.textContent = 'No technology found';
|
||||
technologySelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
|
||||
loadTechnologies();
|
||||
loadProjects();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+317
-72
@@ -4,76 +4,268 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>mxPIC EDA - Login</title>
|
||||
<!-- Importing the same clean font used in the dashboard -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Shared Dark Theme Variables */
|
||||
:root {
|
||||
--bg-main: #0f172a;
|
||||
--bg-card: #1e293b;
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
--accent: #38bdf8;
|
||||
--accent-hover: #0284c7;
|
||||
--border: #334155;
|
||||
--input-bg: #0b1120;
|
||||
--error-text: #ef4444;
|
||||
--error-bg: rgba(239, 68, 68, 0.1);
|
||||
--bg-main: #060b16;
|
||||
--bg-panel: #0c1424;
|
||||
--bg-card: #121b2d;
|
||||
--bg-soft: #182237;
|
||||
--text-main: #f6f8fb;
|
||||
--text-muted: #91a0b5;
|
||||
--accent: #6ee7ff;
|
||||
--accent-strong: #7c3aed;
|
||||
--accent-warm: #f97316;
|
||||
--accent-red: #ef4444;
|
||||
--border: #28364c;
|
||||
--border-strong: #42516a;
|
||||
--input-bg: #09111f;
|
||||
--shadow: rgba(0, 0, 0, 0.42);
|
||||
--error-text: #fecaca;
|
||||
--error-bg: rgba(239, 68, 68, 0.14);
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
--bg-main: #edf3f8;
|
||||
--bg-panel: #f8fbff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-soft: #eef5fb;
|
||||
--text-main: #132032;
|
||||
--text-muted: #64758a;
|
||||
--accent: #2563eb;
|
||||
--accent-strong: #0f9f7a;
|
||||
--accent-warm: #38bdf8;
|
||||
--accent-red: #dc2626;
|
||||
--border: #d5e0eb;
|
||||
--border-strong: #b8c7d8;
|
||||
--input-bg: #f5f8fb;
|
||||
--shadow: rgba(37, 99, 235, 0.13);
|
||||
--error-text: #b91c1c;
|
||||
--error-bg: rgba(220, 38, 38, 0.08);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: 'IBM Plex Sans', "Segoe UI", sans-serif;
|
||||
color: var(--text-main);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
||||
radial-gradient(circle at 16% 12%, rgba(124, 58, 237, 0.25), transparent 28%),
|
||||
radial-gradient(circle at 84% 82%, rgba(249, 115, 22, 0.16), transparent 26%),
|
||||
linear-gradient(135deg, var(--bg-main), #0a1222 55%, #171923);
|
||||
background-size: 42px 42px, 42px 42px, auto, auto, auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Centered Login Card */
|
||||
.login-card {
|
||||
background-color: var(--bg-card);
|
||||
body.light-mode {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px),
|
||||
radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.18), transparent 28%),
|
||||
radial-gradient(circle at 84% 82%, rgba(34, 197, 94, 0.13), transparent 24%),
|
||||
linear-gradient(135deg, #f9fbfd, var(--bg-main));
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 22px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
|
||||
background: rgba(18, 27, 45, 0.88);
|
||||
color: var(--text-main);
|
||||
border-radius: 8px;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 14px 34px var(--shadow);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
/* Branding */
|
||||
.brand-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
body.light-mode .theme-toggle {
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.login-shell {
|
||||
width: min(980px, 100%);
|
||||
min-height: 560px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 400px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(12, 20, 36, 0.84);
|
||||
box-shadow: 0 32px 96px var(--shadow);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
body.light-mode .login-shell {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
padding: 44px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(110, 231, 255, 0.1), transparent 35%),
|
||||
linear-gradient(315deg, rgba(124, 58, 237, 0.16), transparent 42%),
|
||||
var(--bg-panel);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-visual::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 92px 48px auto auto;
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
border: 1px solid rgba(110, 231, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 0 22px rgba(110, 231, 255, 0.025),
|
||||
inset 0 0 0 28px rgba(249, 115, 22, 0.045);
|
||||
}
|
||||
|
||||
.login-visual::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 44px 130px auto;
|
||||
width: 260px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent), transparent);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.login-visual > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.brand-logo span {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.system-title {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
.brand-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(135deg, var(--accent), var(--accent-strong) 58%, var(--accent-warm));
|
||||
position: relative;
|
||||
box-shadow: 0 0 0 5px rgba(110, 231, 255, 0.09);
|
||||
}
|
||||
|
||||
.brand-mark::before,
|
||||
.brand-mark::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.brand-mark::before {
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
top: 16px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.brand-mark::after {
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
left: 16px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.visual-copy h1 {
|
||||
margin: 0 0 14px 0;
|
||||
max-width: 430px;
|
||||
font-size: clamp(2.1rem, 4vw, 3.25rem);
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.visual-copy p {
|
||||
max-width: 430px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.65;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.status-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(18, 27, 45, 0.72);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.78rem;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.status-pill strong {
|
||||
display: block;
|
||||
color: var(--text-main);
|
||||
font-size: 0.92rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
||||
var(--bg-card);
|
||||
padding: 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.system-title {
|
||||
color: var(--text-muted);
|
||||
font-family: 'IBM Plex Mono', Consolas, monospace;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-card h2 {
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 1.48rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Form Layout */
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
@@ -83,9 +275,9 @@
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.84rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@@ -94,65 +286,104 @@
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-main);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
padding: 12px 15px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.98rem;
|
||||
padding: 13px 14px;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
|
||||
background: var(--bg-panel);
|
||||
box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
button[type="submit"] {
|
||||
background-color: var(--accent);
|
||||
color: #0f172a;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
|
||||
color: #04101f;
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 12px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
padding: 13px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
margin-top: 10px;
|
||||
transition: transform 0.1s ease, box-shadow 0.2s ease;
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background-color: var(--accent-hover);
|
||||
color: white;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button[type="submit"]:active {
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
/* Error Message Styling */
|
||||
.error-message {
|
||||
background-color: var(--error-bg);
|
||||
color: var(--error-text);
|
||||
border: 1px solid var(--error-text);
|
||||
border: 1px solid rgba(239, 68, 68, 0.38);
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.login-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.login-visual {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: static;
|
||||
justify-self: end;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button class="theme-toggle" id="theme-toggle" type="button">Bright Mode</button>
|
||||
|
||||
<div class="login-card">
|
||||
<div class="brand-header">
|
||||
<div class="brand-logo">opti<span>hk</span></div>
|
||||
<div class="system-title">mxPIC Core Access</div>
|
||||
<main class="login-shell">
|
||||
<section class="login-visual">
|
||||
<div class="brand-logo">
|
||||
<div class="brand-mark"></div>
|
||||
opti<span>hk</span>
|
||||
</div>
|
||||
|
||||
<!-- The form sends data to the /login route in server.py -->
|
||||
<div class="visual-copy">
|
||||
<h1>Photonic EDA workspace for reusable PIC cells.</h1>
|
||||
<p>Build hierarchical canvases from PDK components, inspect ports and parameters, and prepare structured layout definitions for mxPIC generation.</p>
|
||||
</div>
|
||||
|
||||
<div class="status-strip">
|
||||
<div class="status-pill"><strong>PDK</strong>Silterra ready</div>
|
||||
<div class="status-pill"><strong>Cells</strong>Hierarchical</div>
|
||||
<div class="status-pill"><strong>Flow</strong>Canvas to GDS</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="login-card">
|
||||
<div class="system-title">mxPIC Core Access</div>
|
||||
<h2>Sign in to your EDA workspace</h2>
|
||||
|
||||
<form action="/login" method="POST">
|
||||
<div class="input-group">
|
||||
<label for="username">Username</label>
|
||||
@@ -167,13 +398,27 @@
|
||||
<button type="submit">Log In</button>
|
||||
</form>
|
||||
|
||||
<!-- Elegantly styled error message block -->
|
||||
{% if error %}
|
||||
<div class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
|
||||
function applyTheme(mode) {
|
||||
document.body.classList.toggle('light-mode', mode === 'light');
|
||||
themeToggle.textContent = mode === 'light' ? 'Dark Mode' : 'Bright Mode';
|
||||
localStorage.setItem('mxpic-theme', mode);
|
||||
}
|
||||
|
||||
applyTheme(localStorage.getItem('mxpic-theme') || 'dark');
|
||||
themeToggle.addEventListener('click', () => {
|
||||
applyTheme(document.body.classList.contains('light-mode') ? 'dark' : 'light');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user