mirror of
https://github.com/penpot/penpot-plugins.git
synced 2025-01-08 16:00:27 -05:00
feat: sort layers
This commit is contained in:
parent
d2382e0c0f
commit
d0e62f30dc
1 changed files with 27 additions and 20 deletions
|
@ -12,6 +12,7 @@ export class AppElement extends HTMLElement {
|
||||||
|
|
||||||
const result =
|
const result =
|
||||||
(luminosityFirstColor + 0.05) / (luminositySecondColor + 0.05);
|
(luminosityFirstColor + 0.05) / (luminositySecondColor + 0.05);
|
||||||
|
|
||||||
this.setColors(firstColor, secondColor);
|
this.setColors(firstColor, secondColor);
|
||||||
this.setResult(result.toFixed(2).toString());
|
this.setResult(result.toFixed(2).toString());
|
||||||
this.setA11yTags(result);
|
this.setA11yTags(result);
|
||||||
|
@ -135,20 +136,35 @@ export class AppElement extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initCalculate(selection: string[]) {
|
||||||
|
const shapes =
|
||||||
|
this.page.objects['#00000000-0000-0000-0000-000000000000'].shapes;
|
||||||
|
|
||||||
|
const index1 = shapes.findIndex((shape: any) => {
|
||||||
|
return shape === selection[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
const index2 = shapes.findIndex((shape: any) => {
|
||||||
|
return shape === selection[1];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (index1 < index2) {
|
||||||
|
selection = [selection[1], selection[0]];
|
||||||
|
}
|
||||||
|
|
||||||
|
const obj0 = this.page.objects['#' + selection[0]]?.fills?.[0]?.fillColor;
|
||||||
|
const obj1 = this.page.objects['#' + selection[1]]?.fills?.[0]?.fillColor;
|
||||||
|
|
||||||
|
if (obj0 && obj1) {
|
||||||
|
this.calculateContrast(obj0, obj1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
window.addEventListener('message', (event) => {
|
window.addEventListener('message', (event) => {
|
||||||
if (event.data.type === 'selection') {
|
if (event.data.type === 'selection') {
|
||||||
if (event.data.content.length === 2) {
|
if (event.data.content.length === 2) {
|
||||||
const obj0 =
|
this.initCalculate(event.data.content);
|
||||||
this.page.objects['#' + event.data.content[0]]?.fills?.[0]
|
|
||||||
?.fillColor;
|
|
||||||
const obj1 =
|
|
||||||
this.page.objects['#' + event.data.content[1]]?.fills?.[0]
|
|
||||||
?.fillColor;
|
|
||||||
|
|
||||||
if (obj0 && obj1) {
|
|
||||||
this.calculateContrast(obj0, obj1);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.setColors(null, null);
|
this.setColors(null, null);
|
||||||
this.setResult('0');
|
this.setResult('0');
|
||||||
|
@ -161,16 +177,7 @@ export class AppElement extends HTMLElement {
|
||||||
this.page = event.data.content.page;
|
this.page = event.data.content.page;
|
||||||
|
|
||||||
if (event.data.content.selection.length === 2) {
|
if (event.data.content.selection.length === 2) {
|
||||||
const obj0 =
|
this.initCalculate(event.data.content.selection);
|
||||||
this.page.objects['#' + event.data.content.selection[0]]?.fills?.[0]
|
|
||||||
?.fillColor;
|
|
||||||
const obj1 =
|
|
||||||
this.page.objects['#' + event.data.content.selection[1]]?.fills?.[0]
|
|
||||||
?.fillColor;
|
|
||||||
|
|
||||||
if (obj0 && obj1) {
|
|
||||||
this.calculateContrast(obj0, obj1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} else if (event.data.type === 'theme') {
|
} else if (event.data.type === 'theme') {
|
||||||
this.setAttribute('data-theme', event.data.content);
|
this.setAttribute('data-theme', event.data.content);
|
||||||
|
|
Loading…
Reference in a new issue