Skip to content

Commit

Permalink
#563
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvladic
mvladic committed Oct 7, 2024
1 parent 46c5397 commit d0256a0
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 44 deletions.
15 changes: 12 additions & 3 deletions packages/eez-studio-ui/_stylesheets/project-editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3645,7 +3645,8 @@
}

.EezStudio_PageZoomButton {
padding: 1px 6px;
padding: 1px 4px;
width: 72px;

background-color: @selectionBackgroundColor;
&:hover {
Expand All @@ -3672,14 +3673,22 @@

li {
list-style: none;

cursor: pointer;

&:hover {
color: @selectionColor;
background-color: @selectionBackgroundColor;
}

.form-check {
margin: 2px 16px;
&.EezStudio_PageZoomButton_DropdownContent_MenuItem {
margin: 2px 0;
padding: 2px 0 2px 24px;
}

&.EezStudio_PageZoomButton_DropdownContent_Checkmark {
margin: 2px 0px;
padding: 2px;
}
}
}
Expand Down
29 changes: 24 additions & 5 deletions packages/project-editor/features/page/PageEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export class PageTabState extends FlowTabState {
}

get transform() {
if (this.projectStore.uiStateStore.globalFlowZoom) {
if (!this.isRuntime && this.projectStore.uiStateStore.globalFlowZoom) {
const newTransform = this._transform.clone();
newTransform.scale = this.projectStore.uiStateStore.flowZoom;
return newTransform;
Expand All @@ -166,12 +166,31 @@ export class PageTabState extends FlowTabState {
set transform(transform: Transform) {
runInAction(() => {
this._transform = transform;
if (this.projectStore.uiStateStore.globalFlowZoom) {
if (
!this.isRuntime &&
this.projectStore.uiStateStore.globalFlowZoom
) {
this.projectStore.uiStateStore.flowZoom = transform.scale;
}
});
}

resetTransform(transform?: Transform) {
if (!transform) {
if (this.projectStore.uiStateStore.globalFlowZoom) {
this.projectStore.uiStateStore.flowZoom = 1;
}

transform = this.transform;
}

transform.scale = 1;
transform.translate = {
x: -this.flow.pageRect.width / 2,
y: -this.flow.pageRect.height / 2
};
}

loadState() {
if (this.isRuntime) {
return;
Expand Down Expand Up @@ -216,10 +235,10 @@ export class PageTabState extends FlowTabState {
selection: this.widgetContainer.saveState(),
transform: {
translate: {
x: this._transform.translate.x,
y: this._transform.translate.y
x: this.transform.translate.x,
y: this.transform.translate.y
},
scale: this._transform.scale
scale: this.transform.scale
},
timeline: this.timeline.saveState()
};
Expand Down
45 changes: 44 additions & 1 deletion packages/project-editor/flow/editor/flow-document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,14 +159,57 @@ export class FlowDocument implements IDocument {
add: false
},
undefined,
objects.length == 0
this.flow.object instanceof ProjectEditor.PageClass &&
objects.length == 0
? [
new MenuItem({
label: "Center View",
click: async () => {
this.flowContext.viewState.centerView();
}
}),
new MenuItem({
label: "Center View on All Pages",
click: async () => {
this.flowContext.viewState.centerView();

for (const page of this.projectStore.project
.pages) {
if (page != this.flow.object) {
let uiState =
this.projectStore.uiStateStore.getObjectUIState(
page,
"flow-state"
);

if (!uiState) {
uiState = {};
}

uiState.transform = {
translate: {
x: this.flowContext.viewState
.transform.translate.x,
y: this.flowContext.viewState
.transform.translate.y
},
scale:
uiState.transform?.scale ??
this.flowContext.viewState
.transform.scale
};

runInAction(() => {
this.projectStore.uiStateStore.updateObjectUIState(
page,
"flow-state",
uiState
);
});
}
}
}
}),
...(this.projectStore.uiStateStore.globalFlowZoom
? []
: [
Expand Down
62 changes: 27 additions & 35 deletions packages/project-editor/project/ui/Toolbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
model as scrapbookModel
} from "project-editor/store/scrapbook";
import { closest } from "eez-studio-shared/dom";
import { Icon } from "eez-studio-ui/icon";

////////////////////////////////////////////////////////////////////////////////

Expand Down Expand Up @@ -779,47 +780,38 @@ const PageZoomButton = observer(
}}
/>
</div>
<li>
<hr className="dropdown-divider" />
</li>
<hr className="dropdown-divider" />
{[10, 25, 50, 75, 100, 150, 200, 400, 800, 1600].map(
zoom => (
<li key={zoom}>
<a
className="dropdown-item"
href="#"
onClick={() => {
this.zoom = zoom / 100;
this.setDropDownOpen(false);
}}
>
Zoom to {zoom}%
</a>
<li
key={zoom}
className="EezStudio_PageZoomButton_DropdownContent_MenuItem"
onClick={() => {
this.zoom = zoom / 100;
this.setDropDownOpen(false);
}}
>
Zoom to {zoom}%
</li>
)
)}
<li>
<hr className="dropdown-divider" />
</li>
<li>
<div className="form-check">
<input
className="form-check-input"
type="checkbox"
checked={this.globalZoom}
id="EezStudio_PageZoomButton_DropdownContent_GlobalZoomCheckbox"
onChange={action(event => {
this.globalZoom = event.target.checked;
this.setDropDownOpen(false);
})}
<hr className="dropdown-divider" />
<li
className="EezStudio_PageZoomButton_DropdownContent_Checkmark"
onClick={() => {
this.globalZoom = !this.globalZoom;
this.setDropDownOpen(false);
}}
>
{this.globalZoom ? (
<Icon icon="material:check_box" size={20} />
) : (
<Icon
icon="material:check_box_outline_blank"
size={20}
/>
<label
className="form-check-label"
htmlFor="EezStudio_PageZoomButton_DropdownContent_GlobalZoomCheckbox"
>
Global zoom
</label>
</div>
)}
<span style={{ paddingLeft: 2 }}>Global zoom</span>
</li>
</ul>
</div>,
Expand Down

0 comments on commit d0256a0

Please sign in to comment.