Skip to content

Commit 109e2d3

Browse files
bhestonbheston
authored
Designer: Added some convenience settings (#249)
1 parent b71a327 commit 109e2d3

5 files changed

Lines changed: 64 additions & 22 deletions

File tree

‎packages/adaptive-ui-designer-figma-plugin/src/core/messages.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,9 @@ export interface NodeDataMessage {
1010
nodes: PluginUINodeData[];
1111
}
1212

13-
export type PluginMessage = CreateStatesMessage | NodeDataMessage;
13+
export interface SkipInvisibleNodesMessage {
14+
readonly type: 'SKIP_INVISIBLE_NODES';
15+
value: boolean;
16+
}
17+
18+
export type PluginMessage = CreateStatesMessage | NodeDataMessage | SkipInvisibleNodesMessage;

‎packages/adaptive-ui-designer-figma-plugin/src/figma/controller.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export class FigmaController extends Controller {
2828
// Resend the nodes to the plugin UI
2929
FigmaPluginNode.clearCache();
3030
await this.setSelectedNodes([message.id]);
31+
} else if (message.type === "SKIP_INVISIBLE_NODES") {
32+
figma.skipInvisibleInstanceChildren = message.value;
3133
}
3234
}
3335

‎packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts‎

Lines changed: 47 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { css, customElement, FASTElement, html, observable, repeat, when } from "@microsoft/fast-element";
2+
import { twoWay } from "@microsoft/fast-element/binding/two-way.js";
23
import { DesignToken, staticallyCompose } from "@microsoft/fast-foundation";
34
import { StyleProperty, StylePropertyShorthand, Styles } from "@adaptive-web/adaptive-ui";
45
import { neutralStrokeReadableRest } from "@adaptive-web/adaptive-ui/reference";
56
import type { AdaptiveDesignTokenOrGroup, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
67
import { StatesState } from "@adaptive-web/adaptive-ui-designer-core";
7-
import type { PluginMessage} from "../core/messages.js";
8+
import type { PluginMessage, SkipInvisibleNodesMessage} from "../core/messages.js";
89
import SubtractIcon from "./assets/subtract.svg";
910
import { UIController } from "./ui-controller.js";
1011
import { AppliedDesignTokenItem, StyleModuleDisplay, StyleModuleDisplayList } from "./ui-controller-styles.js";
@@ -195,7 +196,7 @@ const footerTemplate = html<App>`
195196
<adaptive-button
196197
appearance="stealth"
197198
aria-label=${genStylesLabel}
198-
style="display: ${(x) => (x.controller.code.supportsCodeGen ? "block" : "none")};"
199+
style="display: ${/* HACK: Not using this currently (x) => (x.controller.code.supportsCodeGen ? "block" : */"none"/*)*/};"
199200
@click=${(x) => {
200201
const val = x.controller.code.generateForSelectedNodes();
201202
clipboardCopy(val);
@@ -218,6 +219,7 @@ const template = html<App>`
218219
<adaptive-tabs activeid="styling">
219220
<adaptive-tab id="styling">Styling</adaptive-tab>
220221
<adaptive-tab id="tokens">Design Tokens</adaptive-tab>
222+
<adaptive-tab id="settings">Settings</adaptive-tab>
221223
<adaptive-tab-panel id="stylingPanel">
222224
<div style="overflow-y: overlay;">
223225
${when(
@@ -435,6 +437,12 @@ const template = html<App>`
435437
)}
436438
${when((x) => !x.supportsDesignSystem, html` <div>Selected layers don't support design tokens</div> `)}
437439
</adaptive-tab-panel>
440+
<adaptive-tab-panel id="settingsPanel">
441+
<div class="settings-layout">
442+
<adaptive-switch :checked="${twoWay((x) => x.controller.autoRefreshEnabled)}">Auto refresh</adaptive-switch>
443+
<adaptive-switch :checked="${twoWay((x) => x.skipInvisibleNodes)}">Skip invisible nodes (composition mode)</adaptive-switch>
444+
</div>
445+
</adaptive-tab-panel>
438446
</adaptive-tabs>
439447
${(x) => footerTemplate}
440448
`;
@@ -513,6 +521,13 @@ const styles = css`
513521
height: 100%;
514522
}
515523
524+
.settings-layout {
525+
display: flex;
526+
flex-direction: column;
527+
gap: 16px;
528+
padding: 16px;
529+
}
530+
516531
footer {
517532
display: grid;
518533
grid-template-columns: 1fr auto;
@@ -637,31 +652,43 @@ export class App extends FASTElement {
637652
}
638653
}
639654

655+
@observable
656+
public skipInvisibleNodes: boolean = false;
657+
protected skipInvisibleNodesChanged(prev: boolean, next: boolean) {
658+
const message: SkipInvisibleNodesMessage = {
659+
type: "SKIP_INVISIBLE_NODES",
660+
value: next
661+
};
662+
this.dispatchMessage(message);
663+
}
664+
640665
constructor() {
641666
super();
642667

643668
this.controller = new UIController((message) => this.dispatchMessage(message));
644669
}
645670

646671
private refreshObservables() {
647-
this.backgroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.backgroundFill]);
648-
this.foregroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.foregroundFill]);
649-
this.borderFillTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderFill);
650-
this.borderThicknessTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderThickness);
651-
this.densityTokens = this.controller.styles.getAppliedDesignTokens([...StylePropertyShorthand.padding, StyleProperty.gap]);
652-
this.cornerRadiusTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.cornerRadius);
653-
this.textTokens = this.controller.styles.getAppliedDesignTokens([
654-
StyleProperty.fontFamily,
655-
StyleProperty.fontStyle,
656-
StyleProperty.fontWeight,
657-
StyleProperty.fontSize,
658-
StyleProperty.lineHeight
659-
]);
660-
this.shadowTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.shadow]);
661-
662-
this.appliedStyleModules = this.controller.styles.getAppliedStyleModules();
663-
664-
this.statesState = this.controller.states.getState();
672+
if (this.controller) {
673+
this.backgroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.backgroundFill]);
674+
this.foregroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.foregroundFill]);
675+
this.borderFillTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderFill);
676+
this.borderThicknessTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.borderThickness);
677+
this.densityTokens = this.controller.styles.getAppliedDesignTokens([...StylePropertyShorthand.padding, StyleProperty.gap]);
678+
this.cornerRadiusTokens = this.controller.styles.getAppliedDesignTokens(StylePropertyShorthand.cornerRadius);
679+
this.textTokens = this.controller.styles.getAppliedDesignTokens([
680+
StyleProperty.fontFamily,
681+
StyleProperty.fontStyle,
682+
StyleProperty.fontWeight,
683+
StyleProperty.fontSize,
684+
StyleProperty.lineHeight
685+
]);
686+
this.shadowTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.shadow]);
687+
688+
this.appliedStyleModules = this.controller.styles.getAppliedStyleModules();
689+
690+
this.statesState = this.controller.states.getState();
691+
}
665692
}
666693

667694
private dispatchMessage(message: PluginMessage): void {

‎packages/adaptive-ui-designer-figma-plugin/src/ui/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { AdaptiveDesignSystem } from '@adaptive-web/adaptive-web-components';
22
import { buttonDefinition } from "@adaptive-web/adaptive-web-components/button";
33
import { dividerDefinition } from "@adaptive-web/adaptive-web-components/divider";
4+
import { switchDefinition } from "@adaptive-web/adaptive-web-components/switch";
45
import { tabDefinition } from "@adaptive-web/adaptive-web-components/tab";
56
import { tabPanelDefinition } from "@adaptive-web/adaptive-web-components/tab-panel";
67
import { tabsDefinition } from "@adaptive-web/adaptive-web-components/tabs";
@@ -12,6 +13,7 @@ import { App } from "./app.js";
1213
AdaptiveDesignSystem.defineComponents({
1314
buttonDefinition,
1415
dividerDefinition,
16+
switchDefinition,
1517
tabDefinition,
1618
tabPanelDefinition,
1719
tabsDefinition,

‎packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,12 @@ export class UIController {
121121

122122
private _selectedNodes: PluginUINodeData[] = [];
123123

124+
/**
125+
* Whether auto refresh is enabled.
126+
*/
127+
@observable
128+
public autoRefreshEnabled: boolean = false;
129+
124130
/**
125131
* Whether the designer will auto refresh the selected nodes when the selection changes.
126132
*/
@@ -156,7 +162,7 @@ export class UIController {
156162

157163
this._selectedNodes = nodes;
158164

159-
this.autoRefresh = !(this._selectedNodes.length === 1 && this._selectedNodes[0].type === "PAGE");
165+
this.autoRefresh = this.autoRefreshEnabled && !(this._selectedNodes.length === 1 && this._selectedNodes[0].type === "PAGE");
160166

161167
this._elements.selectedNodesChanged();
162168

0 commit comments

Comments
 (0)