Add hypermedia feature to README #73
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
A new section has been added to the README that highlights the hypermedia feature of the tool, which generates class diagrams with clickable links leading directly to the source code. This section also provides guidance on how to enable this feature and integrate the SVG diagrams into HTML while preserving the clickable links.
|
文章や配置はもちろん変更してもらって構いませんというかしてください！😃 |
|
@koriym |
|
サンプル作ってみて <html lang="en">
<head>
<title>Ray.Aop Class Diagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a class diagram for the Ray.Aop project.">
<! -- This image was generated by the https://github.com/smeghead/php-class-diagram/ library -->.
<script>
var svgDoc = null;
window.addEventListener("load", function() {
var svgObject = document.getElementById("svgObject");
svgObject.addEventListener("load", function() {
var svgObject = document.getElementById("svgObject");
svgDoc = svgObject.getSVGDocument();
if (!svgDoc) {
console.error("Failed to load SVG document.");
}
});
});
function togglePrivateMethods() {
var svgObject = document.getElementById("svgObject");
var svgDoc = svgObject.getSVGDocument();
if (svgDoc) {
var privateMethods = svgDoc.querySelectorAll(".private-method");
privateMethods.forEach(method => {
if (method.classList.contains("hidden")) {
method.classList.remove("hidden");
} else {
method.classList.add("hidden");
}
});
} else {
console.error("SVG document not found or not yet loaded.");
}
}
</script>
<style>
object {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<object id="svgObject" type="image/svg+xml" data="images/php-class-diagram.svg"></object>
<button onclick="togglePrivateMethods()">Toggle Private Methods</button>
</body>
</html>こんな感じで動きそうですけど、動いてません （残骸ですが置いてきます😅 ） |
|
@koriym https://smeghead.github.io/pages-practice/ PlantUMLの出力するSVGは絶対座標で出力されているようで、要素の表示状態を切り替えてもフレキシブルにレイアウト調整が行なわれる訳ではなさそうでした。(なんとか特定の要素の表示非表示をトグルすることはできました) |
|
なるほどー。なかなか難しいですね。 ところでこれ表示が綺麗ですね。今iPadで見てるんですがレスポンシブで横向きも縦向きも綺麗です😍 |
|
SVGのおかげで綺麗なドキュメントを簡単に出せるのは嬉しいですね😅 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
A new section has been added to the README that highlights the hypermedia feature of the tool, which generates class diagrams with clickable links leading directly to the source code. This section also provides guidance on how to enable this feature and integrate the SVG diagrams into HTML while preserving the clickable links.
READMEにハイパーメディアセクションを追加
imgタグで埋め込むとただの画像になってしまうのと、その回避法が広く知られていないことを前提＆考慮して、ハイパーリンクが有効になるobjectとembedの例をembedを紹介。extras
追加要素や雑感などコメントします！
objectで埋め込むとDOMがJSで操作可能になる。一部のユーザーにとってはその情報が有用かもしれない。