Skip to content

Commit d0256a0

Browse files
mvladicmvladic
committed
1 parent 46c5397 commit d0256a0

File tree

4 files changed

+107
-44
lines changed

4 files changed

+107
-44
lines changed

‎packages/eez-studio-ui/_stylesheets/project-editor.less

+12-3
Original file line numberDiff line numberDiff line change
@@ -3645,7 +3645,8 @@
36453645
}
36463646

36473647
.EezStudio_PageZoomButton {
3648-
padding: 1px 6px;
3648+
padding: 1px 4px;
3649+
width: 72px;
36493650

36503651
background-color: @selectionBackgroundColor;
36513652
&:hover {
@@ -3672,14 +3673,22 @@
36723673

36733674
li {
36743675
list-style: none;
3676+
36753677
cursor: pointer;
3678+
36763679
&:hover {
36773680
color: @selectionColor;
36783681
background-color: @selectionBackgroundColor;
36793682
}
36803683

3681-
.form-check {
3682-
margin: 2px 16px;
3684+
&.EezStudio_PageZoomButton_DropdownContent_MenuItem {
3685+
margin: 2px 0;
3686+
padding: 2px 0 2px 24px;
3687+
}
3688+
3689+
&.EezStudio_PageZoomButton_DropdownContent_Checkmark {
3690+
margin: 2px 0px;
3691+
padding: 2px;
36833692
}
36843693
}
36853694
}

‎packages/project-editor/features/page/PageEditor.tsx

+24-5
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export class PageTabState extends FlowTabState {
155155
}
156156

157157
get transform() {
158-
if (this.projectStore.uiStateStore.globalFlowZoom) {
158+
if (!this.isRuntime && this.projectStore.uiStateStore.globalFlowZoom) {
159159
const newTransform = this._transform.clone();
160160
newTransform.scale = this.projectStore.uiStateStore.flowZoom;
161161
return newTransform;
@@ -166,12 +166,31 @@ export class PageTabState extends FlowTabState {
166166
set transform(transform: Transform) {
167167
runInAction(() => {
168168
this._transform = transform;
169-
if (this.projectStore.uiStateStore.globalFlowZoom) {
169+
if (
170+
!this.isRuntime &&
171+
this.projectStore.uiStateStore.globalFlowZoom
172+
) {
170173
this.projectStore.uiStateStore.flowZoom = transform.scale;
171174
}
172175
});
173176
}
174177

178+
resetTransform(transform?: Transform) {
179+
if (!transform) {
180+
if (this.projectStore.uiStateStore.globalFlowZoom) {
181+
this.projectStore.uiStateStore.flowZoom = 1;
182+
}
183+
184+
transform = this.transform;
185+
}
186+
187+
transform.scale = 1;
188+
transform.translate = {
189+
x: -this.flow.pageRect.width / 2,
190+
y: -this.flow.pageRect.height / 2
191+
};
192+
}
193+
175194
loadState() {
176195
if (this.isRuntime) {
177196
return;
@@ -216,10 +235,10 @@ export class PageTabState extends FlowTabState {
216235
selection: this.widgetContainer.saveState(),
217236
transform: {
218237
translate: {
219-
x: this._transform.translate.x,
220-
y: this._transform.translate.y
238+
x: this.transform.translate.x,
239+
y: this.transform.translate.y
221240
},
222-
scale: this._transform.scale
241+
scale: this.transform.scale
223242
},
224243
timeline: this.timeline.saveState()
225244
};

‎packages/project-editor/flow/editor/flow-document.tsx

+44-1
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,57 @@ export class FlowDocument implements IDocument {
159159
add: false
160160
},
161161
undefined,
162-
objects.length == 0
162+
this.flow.object instanceof ProjectEditor.PageClass &&
163+
objects.length == 0
163164
? [
164165
new MenuItem({
165166
label: "Center View",
166167
click: async () => {
167168
this.flowContext.viewState.centerView();
168169
}
169170
}),
171+
new MenuItem({
172+
label: "Center View on All Pages",
173+
click: async () => {
174+
this.flowContext.viewState.centerView();
175+
176+
for (const page of this.projectStore.project
177+
.pages) {
178+
if (page != this.flow.object) {
179+
let uiState =
180+
this.projectStore.uiStateStore.getObjectUIState(
181+
page,
182+
"flow-state"
183+
);
184+
185+
if (!uiState) {
186+
uiState = {};
187+
}
188+
189+
uiState.transform = {
190+
translate: {
191+
x: this.flowContext.viewState
192+
.transform.translate.x,
193+
y: this.flowContext.viewState
194+
.transform.translate.y
195+
},
196+
scale:
197+
uiState.transform?.scale ??
198+
this.flowContext.viewState
199+
.transform.scale
200+
};
201+
202+
runInAction(() => {
203+
this.projectStore.uiStateStore.updateObjectUIState(
204+
page,
205+
"flow-state",
206+
uiState
207+
);
208+
});
209+
}
210+
}
211+
}
212+
}),
170213
...(this.projectStore.uiStateStore.globalFlowZoom
171214
? []
172215
: [

‎packages/project-editor/project/ui/Toolbar.tsx

+27-35
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
model as scrapbookModel
3535
} from "project-editor/store/scrapbook";
3636
import { closest } from "eez-studio-shared/dom";
37+
import { Icon } from "eez-studio-ui/icon";
3738

3839
////////////////////////////////////////////////////////////////////////////////
3940

@@ -779,47 +780,38 @@ const PageZoomButton = observer(
779780
}}
780781
/>
781782
</div>
782-
<li>
783-
<hr className="dropdown-divider" />
784-
</li>
783+
<hr className="dropdown-divider" />
785784
{[10, 25, 50, 75, 100, 150, 200, 400, 800, 1600].map(
786785
zoom => (
787-
<li key={zoom}>
788-
<a
789-
className="dropdown-item"
790-
href="#"
791-
onClick={() => {
792-
this.zoom = zoom / 100;
793-
this.setDropDownOpen(false);
794-
}}
795-
>
796-
Zoom to {zoom}%
797-
</a>
786+
<li
787+
key={zoom}
788+
className="EezStudio_PageZoomButton_DropdownContent_MenuItem"
789+
onClick={() => {
790+
this.zoom = zoom / 100;
791+
this.setDropDownOpen(false);
792+
}}
793+
>
794+
Zoom to {zoom}%
798795
</li>
799796
)
800797
)}
801-
<li>
802-
<hr className="dropdown-divider" />
803-
</li>
804-
<li>
805-
<div className="form-check">
806-
<input
807-
className="form-check-input"
808-
type="checkbox"
809-
checked={this.globalZoom}
810-
id="EezStudio_PageZoomButton_DropdownContent_GlobalZoomCheckbox"
811-
onChange={action(event => {
812-
this.globalZoom = event.target.checked;
813-
this.setDropDownOpen(false);
814-
})}
798+
<hr className="dropdown-divider" />
799+
<li
800+
className="EezStudio_PageZoomButton_DropdownContent_Checkmark"
801+
onClick={() => {
802+
this.globalZoom = !this.globalZoom;
803+
this.setDropDownOpen(false);
804+
}}
805+
>
806+
{this.globalZoom ? (
807+
<Icon icon="material:check_box" size={20} />
808+
) : (
809+
<Icon
810+
icon="material:check_box_outline_blank"
811+
size={20}
815812
/>
816-
<label
817-
className="form-check-label"
818-
htmlFor="EezStudio_PageZoomButton_DropdownContent_GlobalZoomCheckbox"
819-
>
820-
Global zoom
821-
</label>
822-
</div>
813+
)}
814+
<span style={{ paddingLeft: 2 }}>Global zoom</span>
823815
</li>
824816
</ul>
825817
</div>,

0 commit comments

Comments
 (0)