Skip to content

Commit

Permalink
fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@metaforpro
metaforpro committed Dec 24, 2023
1 parent ceea967 commit 352314f
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 47 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
padding: 0;
height: 100svh;
width: 100svw;
overflow: hidden;
}
</style>
<script type="module">
Expand Down
51 changes: 25 additions & 26 deletions src/core/worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ import { getPath, pathToD } from "../actions/svgPath.js"
*
* @typedef {Object} BoundingBox
* @property {Size} size
* @property {Position} [position={ x: 0, y: 0 }]
* @property {Position} [position]
* @property {Position} [absolutePosition]
* @typedef {Object} EdgeBoundingBox
* @property {Size} size
* @property {Position} [position={ x: 0, y: 0 }]
* @property {Position} [position]
* @property {import("elkjs").ElkEdgeSection[]} [sections]
*
* @typedef {{ edges:Map<string, EdgeBoundingBox>, nodes: Map<string, BoundingBox>}} GraphBounding
Expand Down Expand Up @@ -136,29 +137,25 @@ onmessage = async ({ data: { type, params } }) => {
const lca = GraphRelation.edges.get(elkEdge.id)
const elkLca = stateNodeToElkNodeMap.get(lca)
const edge = GraphBounding.edges.get(elkEdge.id)
if (elkEdge.sections) {
/**@type {import("elkjs").ElkEdgeSection[]} */
const translatedSections = elkLca
? elkEdge.sections.map((section) => ({
...section,
startPoint: {
x: section.startPoint.x + elkLca.absolutePosition.x,
y: section.startPoint.y + elkLca.absolutePosition.y,
},
endPoint: {
x: section.endPoint.x + elkLca.absolutePosition.x,
y: section.endPoint.y + elkLca.absolutePosition.y,
},
bendPoints: section.bendPoints?.map((bendPoint) => {
return {
x: bendPoint.x + elkLca.absolutePosition.x,
y: bendPoint.y + elkLca.absolutePosition.y,
}
}),
}))
: elkEdge.sections
if (translatedSections) edge.sections = translatedSections
}
edge.sections = elkLca
? elkEdge.sections.map((section) => ({
...section,
startPoint: {
x: section.startPoint.x + elkLca.absolutePosition.x,
y: section.startPoint.y + elkLca.absolutePosition.y,
},
endPoint: {
x: section.endPoint.x + elkLca.absolutePosition.x,
y: section.endPoint.y + elkLca.absolutePosition.y,
},
bendPoints: section.bendPoints?.map((bendPoint) => {
return {
x: bendPoint.x + elkLca.absolutePosition.x,
y: bendPoint.y + elkLca.absolutePosition.y,
}
}),
}))
: elkEdge.sections
edge.position = {
x: (elkEdge.labels?.[0].x || 0) + (elkLca?.absolutePosition.x || 0),
y: (elkEdge.labels?.[0].y || 0) + (elkLca?.absolutePosition.y || 0),
Expand All @@ -169,12 +166,13 @@ onmessage = async ({ data: { type, params } }) => {
* @param {import("src/actions/layout.js").ELKNode | undefined} parent
*/
const setLayout = (elkNode, parent) => {
const node = GraphBounding.nodes.get(elkNode.id)
stateNodeToElkNodeMap.set(elkNode.id, elkNode)
elkNode.absolutePosition = {
x: (parent?.absolutePosition.x ?? 0) + elkNode.x,
y: (parent?.absolutePosition.y ?? 0) + elkNode.y,
}
const node = GraphBounding.nodes.get(elkNode.id)

node.size = {
width: elkNode.width,
height: elkNode.height,
Expand Down Expand Up @@ -230,6 +228,7 @@ onmessage = async ({ data: { type, params } }) => {
let path
if (sections.length) {
const section = sections[0]
/* @ts-ignore */
path = [["M", section.startPoint], ...(section.bendPoints?.map((point) => ["L", point]) || [])]
const preLastPoint = path[path.length - 1][1]
const xSign = Math.sign(section.endPoint.x - preLastPoint.x)
Expand Down
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ class StateMachine extends HTMLElement {
case "node":
case "edge":
const { width, height } = element.getBoundingClientRect()
console.log(element.id, width)
graphSize[`${element.className}s`].set(element.id, { width, height })
break
default:
Expand Down
19 changes: 11 additions & 8 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,21 @@
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
z-index: 1;
}
.node-content {
.node-container {
height: 100%;
width: 100%;
padding: 0.5rem /* 8px */;
align-self: flex-start;
overflow: hidden;
background-color: rgb(var(--surface-700) / var(--bg-opacity, 1));
border-style: solid;
border-width: 2px;
box-sizing: border-box;
border-radius: 0.5rem /* 8px */;
border-color: rgb(var(--surface-700) / var(--border-opacity, 1));
}
.node-content {
padding: 0.5rem /* 8px */;
align-self: flex-start;
overflow: hidden;
background-color: rgb(var(--surface-700) / var(--bg-opacity, 1));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Expand Down Expand Up @@ -83,7 +86,7 @@
.edge {
visibility: hidden;
position: fixed;
z-index: 9999;
z-index: 3;
display: flex;
cursor: pointer;
align-items: center;
Expand Down Expand Up @@ -158,7 +161,7 @@ svg {
height: 100%;
width: 100%;
overflow: visible;
z-index: 9999;
z-index: 2;
}
.line {
fill: rgb(var(--tertiary-900) / 1);
Expand Down
28 changes: 15 additions & 13 deletions src/templates/Node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,22 @@ export default ({ id, entry, exit, invoke, key, type }) => {
const markedType = ["history", "final"].includes(type)
return html`
<div class="node" id="${id}">
<div class="node-content" data-active="false" data-preview="false">
<div class="node-header">
${markedType ? html`<div class="node-type" data-node-type=${type} />` : ""}
<div class="node-title">${key}</div>
<div class="node-container">
<div class="node-content" data-active="false" data-preview="false">
<div>
${markedType ? html`<div class="node-type" data-node-type=${type} />` : ""}
<div class="node-title">${key}</div>
</div>
${invoke.length
? html`<div class="node-actions" data-type="invoke">${invoke.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
${entry.length
? html`<div class="node-actions" data-type="entry">${entry.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
${exit.length
? html`<div class="node-actions" data-type="exit">${exit.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
</div>
${invoke.length
? html`<div class="node-actions" data-type="invoke">${invoke.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
${entry.length
? html`<div class="node-actions" data-type="entry">${entry.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
${exit.length
? html`<div class="node-actions" data-type="exit">${exit.map((item) => html`<div>${item}</div>`)}</div>`
: ""}
</div>
</div>
`
Expand Down

0 comments on commit 352314f

Please sign in to comment.