8000 Feat/fullscreen rendering by MrCoder · Pull Request #753 · ZenUml/web-sequence · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Feat/fullscreen rendering #753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 2, 2025
Merged

Feat/fullscreen rendering #753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d257631
feat(fullscreen): add toggle fullscreen functionality and correspondi…
MrCoder May 1, 2025
4f94a88
feat(fullscreen): implement fullscreen toggle functionality with even…
MrCoder May 1, 2025
7350f41
fix(deploy): update upload-artifact action to version 4
MrCoder May 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/deploy-staging.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ jobs:
if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' # This conditional will skip the step for Dependabot PRs
run: yarn deploy:staging --token ${{ secrets.FIREBASE_TOKEN }}
- name: Upload artifacts # Find artifacts under actions/jobs
uses: actions/upload-artifact@v3
uses: actions/upload-artifact@v4
with:
name: chrome-extension
path: extension
239 changes: 74 additions & 165 deletions src/components/ContentWrap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,9 +428,9 @@ export default class ContentWrap extends Component {
this.props.onLogin();
return;
}
const png = await this.getPngBlob();
saveAs(png, 'zenuml.png');
mixpanel.track({ event: 'downloadPng', category: 'ui' });
const png = await this.getPngBlob();
saveAs(png, 'zenuml.png');
mixpanel.track({ event: 'downloadPng', category: 'ui' });
}

async getPngBlob() {
Expand Down Expand Up @@ -817,6 +817,47 @@ export default class ContentWrap extends Component {
this.cm.js.setValue(codeService.addCode(code, param));
}

async toggleFullscreen() {
const demoElement = document.getElementById('js-demo-side');
if (!document.fullscreenElement) {
if (demoElement.requestFullscreen) {
demoElement.requestFullscreen();
trackEvent('ui', 'enterFullscreen');
mixpanel.track('Enter Fullscreen');
} else if (demoElement.mozRequestFullScreen) { /* Firefox */
demoElement.mozRequestFullScreen();
trackEvent('ui', 'enterFullscreen');
mixpanel.track('Enter Fullscreen');
} else if (demoElement.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
demoElement.webkitRequestFullscreen();
trackEvent('ui', 'enterFullscreen');
mixpanel.track('Enter Fullscreen');
} else if (demoElement.msRequestFullscreen) { /* IE/Edge */
demoElement.msRequestFullscreen();
trackEvent('ui', 'enterFullscreen');
mixpanel.track('Enter Fullscreen');
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
trackEvent('ui', 'exitFullscreen');
mixpanel.track('Exit Fullscreen');
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
trackEvent('ui', 'exitFullscreen');
mixpanel.track('Exit Fullscreen');
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
trackEvent('ui', 'exitFullscreen');
mixpanel.track('Exit Fullscreen');
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
trackEvent('ui', 'exitFullscreen');
mixpanel.track('Exit Fullscreen');
}
}
}

render() {
return (
<SplitPane
Expand Down Expand Up @@ -847,35 +888,6 @@ export default class ContentWrap extends Component {
className="code-wrap"
>
>
{/* <div
className="js-code-wrap__header code-wrap__header"
title="Double click to toggle code pane"
>
>
<label className="btn-group" title="Click to change">
<span className="code-wrap__header-label">ZenUML</span>
<span className="caret" style="display:none" />
<select
data-type="js"
className="js-mode-select hidden-select"
style="display: none"
>
value={this.props.currentItem.jsMode}
>
<option value="js">JS</option>
<option value="coffee">CoffeeScript</option>
<option value="es6">ES6 (Babel)</option>
<option value="typescript">TypeScript</option>
</select>
</label>
<div className="code-wrap__header-right-options">
<a
className="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
title="Toggle code pane"
>
/>
</div>
</div> */}
<Toolbox clickSvg={this.toolboxUpdateToApp.bind(this)} />
<UserCodeMirror
ref={(dslEditor) => (this.dslEditor = dslEditor)}
Expand Down Expand Up @@ -950,11 +962,6 @@ export default class ContentWrap extends Component {
<use xlinkHref="#settings-icon" />
</svg>
</a>
{/* <a
className="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"
title="Toggle code pane"
>
/> */}
</div>
</div>
<UserCodeMirror
Expand All @@ -977,117 +984,8 @@ export default class ContentWrap extends Component {
/>
</div>
</div>
{/*<div label="Cheat sheet">*/}
{/* <div*/}
{/* data-code-wrap-id="0"*/}
{/* id="htmlCodeEl"*/}
{/* data-type="html"*/}
{/* class="code-wrap"*/}
{/* >
{/* >*/}
{/* /!* <div*/}
{/* class="js-code-wrap__header code-wrap__header"*/}
{/* >
{/* >*/}
{/* <label class="btn-group" dropdow title="Click to change">*/}
{/* About*/}
{/* </label>*/}
{/* <div class="code-wrap__header-right-options">*/}
{/* <a*/}
{/* class="js-code-collapse-btn code-wrap__header-btn code-wrap__collapse-btn"*/}
{/* title="Toggle code pane"*/}
{/* >
{/* />*/}
{/* </div>*/}
{/* </div> *!/*/}
{/* <div className="cheat-sheet">*/}
{/* <table>*/}
{/* <tr>*/}
{/* <th>Feature</th>*/}
{/* <th>Sample</th>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Participant</td>*/}
{/* <td>*/}
{/* ParticipantA*/}
{/* <br />*/}
{/* ParticipantB*/}
{/* </td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Message</td>*/}
{/* <td>A.messageA()</td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Asyc message</td>*/}
{/* <td>Alice-&gt;Bob: How are you?</td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Nested message</td>*/}
{/* <td>*/}
{/* A.messageA() {'{'}*/}
{/* <br />*/}
{/* &nbsp;&nbsp;B.messageB()*/}
{/* <br />*/}
{/* {'}'}*/}
{/* </td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td class="tg-0pky">Self-message</td>*/}
{/* <td class="tg-0pky">internalMessage()</td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Alt</td>*/}
{/* <td>*/}
{/* if (condition1) {'{'}*/}
{/* <br />*/}
{/* &nbsp;&nbsp;A.methodA()*/}
{/* <br />*/}
{/* {'}'} else if (condition2) {'{'}*/}
{/* <br />*/}
{/* &nbsp;&nbsp;B.methodB()*/}
{/* <br />*/}
{/* {'}'} else {'{'}*/}
{/* <br />*/}
{/* &nbsp;&nbsp;C.methodC()*/}
{/* <br />*/}
{/* {'}'}*/}
{/* </td>*/}
{/* </tr>*/}
{/* <tr>*/}
{/* <td>Loop</td>*/}
{/* <td>*/}
{/* while (condition) {'{'}*/}
{/* <br />*/}
{/* &nbsp;&nbsp;A.methodA()*/}
{/* <br />*/}
{/* {'}'}*/}
{/* </td>*/}
{/* </tr>*/}
{/* </table>*/}
{/* </div>*/}
{/* </div>*/}
{/*</div>*/}
</Tabs>
</div>
{/*<SplitPane*/}
{/*class="code-side"*/}
{/*id="js-code-side"*/}
{/*sizes={this.state.codeSplitSizes}*/}
{/*minSize={minCodeWrapSize}*/}
{/*direction={*/}
{/*this.props.currentLayoutMode === 2 ||*/}
{/*this.props.currentLayoutMode === 5*/}
{/*? 'horizontal'*/}
{/*: 'vertical'*/}
{/*}*/}
{/*>
{/*>
{/* => (this.codeSplitInstance = splitInstance)}*/}
{/*>*/}
{/**/}
{/**/}
{/*</Tabs>*/}
<div class="demo-side" id="js-demo-side">
<div className="h-full flex flex-col">
<div
Expand Down Expand Up @@ -1137,42 +1035,53 @@ export default class ContentWrap extends Component {
</div>
<div className="flex items-center gap-3 text-sm font-semibold">
<button
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
aria-label="Export as PNG"
>
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
aria-label="Toggle Fullscreen"
>
title="Toggle Fullscreen Presenting Mode"
>
<svg className="w-5 h-5 fill-current">
<use xlinkHref="#fullscreen-icon"/>
</svg>
<span>Present</span>
</button>
<button
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
aria-label="Export as PNG"
>
>
<svg className="w-5 h-5 fill-current">
<use xlinkHref="#icon-download" />
<use xlinkHref="#icon-download"/>
</svg>
<span>PNG</span>
</button>
<button
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
aria-label="Copy PNG to Clipboard"
>
className="px-3 py-1 bg-gray-300 text-gray-600 flex items-center gap-1.5 rounded-lg hover:bg-gray-400 duration-200"
aria-label="Copy PNG to Clipboard"
>
>
<svg className="w-5 h-5 fill-current">
<use xlinkHref="#icon-copy" />
<use xlinkHref="#icon-copy"/>
</svg>
<span>Copy PNG</span>
</button>
</div>
</div>
)}
<Console
isConsoleOpen={this.state.isConsoleOpen}
>
this,
)}
>
this,
)}
toggleConsole={this.toggleConsole.bind(this)}
>
=> (this.consoleCm = el)}
isConsoleOpen={this.state.isConsoleOpen}
>
this,
)}
>
this,
)}
toggleConsole={this.toggleConsole.bind(this)}
>
=> (this.consoleCm = el)}
/>
<CssSettingsModal
show={this.state.isCssSettingsModalOpen}
show={this.state.isCssSettingsModalOpen}
closeHandler={async () =>
await this.setState({ isCssSettingsModalOpen: false })
}
Expand Down
3 changes: 3 additions & 0 deletions src/components/Icons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ export function Icons() {
<symbol id="keyboard-icon" viewBox="0 0 24 24">
<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
</symbol>
<symbol id="fullscreen-icon" viewBox="0 0 24 24">
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
</symbol>
<symbol id="mode-icon" viewBox="0 0 100 100">
<g>
<rect x={0} y={0} width={28} height={47} />
Expand Down
0