Skip to content

Commit

Permalink
fix: sellection change event
Browse files Browse the repository at this point in the history
  • Loading branch information
@bart-krakowski
bart-krakowski committed Apr 7, 2023
1 parent d86190c commit 5a5c0ab
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 62 deletions.
55 changes: 27 additions & 28 deletions packages/status/code.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,32 +14,10 @@ const init = () => __awaiter(this, void 0, void 0, function* () {
const canvasBackground = rgbToHsl(backgrounds[0].type === 'SOLID' && backgrounds[0].color);
const appearance = canvasBackground.l > 40 ? 'light' : 'dark';
if (isSection(selection) || isFrame(selection)) {
const { color } = selection.fills[0];
const status = Object.keys(statusInfo).find((status) => {
return ((statusInfo[status].colorSchemes.light.color.r === color.r &&
statusInfo[status].colorSchemes.light.color.g === color.g &&
statusInfo[status].colorSchemes.light.color.b === color.b) ||
(statusInfo[status].colorSchemes.dark.color.r === color.r &&
statusInfo[status].colorSchemes.dark.color.g === color.g &&
statusInfo[status].colorSchemes.dark.color.b === color.b));
});
const status = recognizeStatus(selection);
figma.ui.postMessage({ status, appearance });
}
});
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
figma.ui.onmessage = ({ type, payload }) => {
switch (type) {
case 'change-status':
Expand Down Expand Up @@ -139,6 +117,17 @@ const rgbToHsl = ({ r, g, b }) => {
l,
};
};
const recognizeStatus = (selection) => {
const { color } = selection.fills[0];
return Object.keys(statusInfo).find((status) => {
return ((statusInfo[status].colorSchemes.light.color.r === color.r &&
statusInfo[status].colorSchemes.light.color.g === color.g &&
statusInfo[status].colorSchemes.light.color.b === color.b) ||
(statusInfo[status].colorSchemes.dark.color.r === color.r &&
statusInfo[status].colorSchemes.dark.color.g === color.g &&
statusInfo[status].colorSchemes.dark.color.b === color.b));
});
};
const isSection = (node) => {
return node.type === 'SECTION';
};
Expand Down Expand Up @@ -185,21 +174,31 @@ init();
figma.on('run', ({ parameters }) => {
if (parameters) {
startPluginWithParameters(parameters);
figma.closePlugin();
}
});
figma.on('selectionchange', () => {
startPluginWithParameters({});
});
const slugify = (str) => str
.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/[^\w- ]+/g, '')
.replace(/ +/g, '-')
.replace(/[\u{1F600}-\u{1F64F}]/gu, '')
.replace(/^-/, '');
function startPluginWithParameters(parameters) {
const { workStatus } = parameters;
changeStatus({
status: slugify(workStatus),
appearance: 'light',
figma.currentPage.selection.forEach((el) => {
const status = recognizeStatus(el);
const { backgrounds } = figma.currentPage;
const canvasBackground = rgbToHsl(backgrounds[0].type === 'SOLID' && backgrounds[0].color);
const appearance = canvasBackground.l > 40 ? 'light' : 'dark';
figma.ui.postMessage({ status, appearance });
changeStatus({
status: slugify(workStatus !== null && workStatus !== void 0 ? workStatus : status),
appearance: 'light',
});
});
figma.closePlugin();
}
figma.parameters.on('input', ({ query, result }) => {
result.setSuggestions(['🚧 In progress', '⏰ Awaiting feedback', '✅ Development ready'].filter((s) => s.includes(query)));
Expand Down
69 changes: 35 additions & 34 deletions packages/status/code.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ type StatusInfo = {
}
}
type ChangeStatusPayload = {
status: Status
status?: Status
appearance: Appearance
}

Expand All @@ -22,18 +22,7 @@ const init = async () => {
const appearance = canvasBackground.l > 40 ? 'light' : 'dark'

if (isSection(selection) || isFrame(selection)) {
const { color } = selection.fills[0]
const status = Object.keys(statusInfo).find((status) => {
return (
(statusInfo[status].colorSchemes.light.color.r === color.r &&
statusInfo[status].colorSchemes.light.color.g === color.g &&
statusInfo[status].colorSchemes.light.color.b === color.b) ||
(statusInfo[status].colorSchemes.dark.color.r === color.r &&
statusInfo[status].colorSchemes.dark.color.g === color.g &&
statusInfo[status].colorSchemes.dark.color.b === color.b)
)
})

const status = recognizeStatus(selection)
figma.ui.postMessage({ status, appearance })
}
}
Expand All @@ -52,21 +41,6 @@ interface PluginParameters extends ParameterValues {
workStatus?: Status
}

const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
]

figma.ui.onmessage = ({ type, payload }: MessageProps) => {
switch (type) {
case 'change-status':
Expand Down Expand Up @@ -170,6 +144,20 @@ const rgbToHsl = ({ r, g, b }: RGB) => {
}
}

const recognizeStatus = (selection: FrameNode | SectionNode): Status => {
const { color } = selection.fills[0]
return Object.keys(statusInfo).find((status) => {
return (
(statusInfo[status].colorSchemes.light.color.r === color.r &&
statusInfo[status].colorSchemes.light.color.g === color.g &&
statusInfo[status].colorSchemes.light.color.b === color.b) ||
(statusInfo[status].colorSchemes.dark.color.r === color.r &&
statusInfo[status].colorSchemes.dark.color.g === color.g &&
statusInfo[status].colorSchemes.dark.color.b === color.b)
)
}) as Status
}

const isSection = (node: SceneNode): node is SectionNode => {
return node.type === 'SECTION'
}
Expand Down Expand Up @@ -224,25 +212,38 @@ init()
figma.on('run', ({ parameters }: RunEvent) => {
if (parameters) {
startPluginWithParameters(parameters)
figma.closePlugin()
}
})

figma.on('selectionchange', () => {
startPluginWithParameters({})
})

const slugify = (str: string) =>
str
.toLowerCase()
.replace(/[^\w ]+/g, '')
.replace(/[^\w- ]+/g, '')
.replace(/ +/g, '-')
.replace(/[\u{1F600}-\u{1F64F}]/gu, '')
.replace(/^-/, '')

function startPluginWithParameters(parameters: PluginParameters) {
const { workStatus } = parameters
changeStatus({
status: slugify(workStatus) as Status,
appearance: 'light',
})

figma.closePlugin()
figma.currentPage.selection.forEach((el) => {
const status = recognizeStatus(el as FrameNode | SectionNode)
const { backgrounds } = figma.currentPage
const canvasBackground = rgbToHsl(backgrounds[0].type === 'SOLID' && backgrounds[0].color)
const appearance = canvasBackground.l > 40 ? 'light' : 'dark'

figma.ui.postMessage({ status, appearance })

changeStatus({
status: slugify(workStatus ?? status) as Status,
appearance: 'light',
})
})
}

figma.parameters.on('input', ({ query, result }) => {
Expand Down

0 comments on commit 5a5c0ab

Please sign in to comment.