@formicoidea/labre-framework-edgy 0.34.2 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commands.js +2 -1
- package/dist/toolbar/node-config.js +3 -113
- package/package.json +3 -3
package/dist/commands.js
CHANGED
|
@@ -24,6 +24,7 @@ const SPECS = [
|
|
|
24
24
|
iconKey: 'edgy.board',
|
|
25
25
|
category: 'diagrams',
|
|
26
26
|
element: 'board',
|
|
27
|
+
board: true,
|
|
27
28
|
run: createEdgyBoard,
|
|
28
29
|
},
|
|
29
30
|
{
|
|
@@ -89,7 +90,7 @@ export const edgyCommands = SPECS.map((spec, order) => ({
|
|
|
89
90
|
defaultKeys: { mac: [], other: [] },
|
|
90
91
|
availability: 'always',
|
|
91
92
|
run: spec.run,
|
|
92
|
-
telemetry: { framework: 'edgy', element: spec.element },
|
|
93
|
+
telemetry: { framework: 'edgy', element: spec.element, board: spec.board },
|
|
93
94
|
}));
|
|
94
95
|
export const edgyCommandIcons = {
|
|
95
96
|
'edgy.facets': edgyFacetsIcon,
|
|
@@ -1,11 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { packColor, } from '@formicoidea/labre-core/components/color-picker';
|
|
3
|
-
import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
|
|
4
|
-
import { DefaultTheme, isTransparent, LineWidth, resolveColor, ShapeElementModel, StrokeStyle, } from '@formicoidea/labre-core/model';
|
|
1
|
+
import { neutralPalettes, paletteColorAction, shapeToolbarConfig, } from '@formicoidea/labre-core/gfx/shape';
|
|
5
2
|
import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
|
|
6
|
-
import { getMostCommonValue } from '@formicoidea/labre-core/shared/utils';
|
|
7
3
|
import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
|
|
8
|
-
import { html } from 'lit';
|
|
9
4
|
/**
|
|
10
5
|
* The typical EDGY palette, surfaced as ready-made swatches in the EDGY node
|
|
11
6
|
* color picker (facet + intersection colours, saturated then pastel), followed
|
|
@@ -30,117 +25,12 @@ const EDGY_PALETTES = [
|
|
|
30
25
|
* black, transparent) — the historical colours are dropped in favour of the
|
|
31
26
|
* EDGY swatches above.
|
|
32
27
|
*/
|
|
33
|
-
const
|
|
34
|
-
const EDGY_PALETTE_LIST = [
|
|
35
|
-
...EDGY_PALETTES,
|
|
36
|
-
...DefaultTheme.Palettes.filter(p => NEUTRAL_KEY.test(p.key)),
|
|
37
|
-
];
|
|
38
|
-
// Mirror of the shape color action's text-color rule.
|
|
39
|
-
function getTextColor(fillColor) {
|
|
40
|
-
if (fillColor === DefaultTheme.black)
|
|
41
|
-
return DefaultTheme.white;
|
|
42
|
-
if (fillColor === DefaultTheme.white)
|
|
43
|
-
return DefaultTheme.black;
|
|
44
|
-
return DefaultTheme.shapeTextColor;
|
|
45
|
-
}
|
|
28
|
+
const EDGY_PALETTE_LIST = [...EDGY_PALETTES, ...neutralPalettes()];
|
|
46
29
|
/**
|
|
47
30
|
* EDGY fill / stroke colour picker — identical to the shape one but seeded with
|
|
48
31
|
* the EDGY palette swatches (`.palettes`).
|
|
49
32
|
*/
|
|
50
|
-
const edgyColorAction =
|
|
51
|
-
id: 'e.color',
|
|
52
|
-
when(ctx) {
|
|
53
|
-
return ctx.getSurfaceModelsByType(ShapeElementModel).length > 0;
|
|
54
|
-
},
|
|
55
|
-
content(ctx) {
|
|
56
|
-
const models = ctx.getSurfaceModelsByType(ShapeElementModel);
|
|
57
|
-
if (!models.length)
|
|
58
|
-
return null;
|
|
59
|
-
const enableCustomColor = ctx.features.getFlag('enable_color_picker');
|
|
60
|
-
const theme = ctx.theme.edgeless$.value;
|
|
61
|
-
const firstModel = models[0];
|
|
62
|
-
const originalFillColor = firstModel.fillColor;
|
|
63
|
-
const originalStrokeColor = firstModel.strokeColor;
|
|
64
|
-
const mapped = models.map(({ filled, fillColor, strokeColor, strokeWidth, strokeStyle }) => ({
|
|
65
|
-
fillColor: filled
|
|
66
|
-
? resolveColor(fillColor, theme)
|
|
67
|
-
: DefaultTheme.transparent,
|
|
68
|
-
strokeColor: resolveColor(strokeColor, theme),
|
|
69
|
-
strokeWidth,
|
|
70
|
-
strokeStyle,
|
|
71
|
-
}));
|
|
72
|
-
const fillColor = getMostCommonValue(mapped, 'fillColor') ??
|
|
73
|
-
resolveColor(DefaultTheme.shapeFillColor, theme);
|
|
74
|
-
const strokeColor = getMostCommonValue(mapped, 'strokeColor') ??
|
|
75
|
-
resolveColor(DefaultTheme.shapeStrokeColor, theme);
|
|
76
|
-
const strokeWidth = getMostCommonValue(mapped, 'strokeWidth') ?? LineWidth.Four;
|
|
77
|
-
const strokeStyle = getMostCommonValue(mapped, 'strokeStyle') ?? StrokeStyle.Solid;
|
|
78
|
-
const pickColorWrapper = (field, pickCallback) => (e) => {
|
|
79
|
-
e.stopPropagation();
|
|
80
|
-
switch (e.detail.type) {
|
|
81
|
-
case 'pick':
|
|
82
|
-
pickCallback(e.detail.detail);
|
|
83
|
-
break;
|
|
84
|
-
case 'start':
|
|
85
|
-
ctx.store.captureSync();
|
|
86
|
-
models.forEach(model => model.stash(field));
|
|
87
|
-
break;
|
|
88
|
-
case 'end':
|
|
89
|
-
ctx.store.transact(() => {
|
|
90
|
-
models.forEach(model => model.pop(field));
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
const onPickFillColor = pickColorWrapper('fillColor', palette => {
|
|
95
|
-
const value = palette.value;
|
|
96
|
-
const filled = isTransparent(value);
|
|
97
|
-
const props = packColor('fillColor', value);
|
|
98
|
-
const crud = ctx.std.get(EdgelessCRUDIdentifier);
|
|
99
|
-
models.forEach(model => {
|
|
100
|
-
if (filled && !model.filled) {
|
|
101
|
-
const color = getTextColor(value);
|
|
102
|
-
Object.assign(props, { filled, color });
|
|
103
|
-
}
|
|
104
|
-
crud.updateElement(model.id, props);
|
|
105
|
-
});
|
|
106
|
-
});
|
|
107
|
-
const onPickStrokeColor = pickColorWrapper('strokeColor', palette => {
|
|
108
|
-
const props = packColor('strokeColor', palette.value);
|
|
109
|
-
const crud = ctx.std.get(EdgelessCRUDIdentifier);
|
|
110
|
-
models.forEach(model => crud.updateElement(model.id, props));
|
|
111
|
-
});
|
|
112
|
-
const onPickStrokeStyle = (e) => {
|
|
113
|
-
e.stopPropagation();
|
|
114
|
-
const { type, value } = e.detail;
|
|
115
|
-
const crud = ctx.std.get(EdgelessCRUDIdentifier);
|
|
116
|
-
const props = type === 'size'
|
|
117
|
-
? { strokeWidth: value }
|
|
118
|
-
: { strokeStyle: value };
|
|
119
|
-
for (const model of models) {
|
|
120
|
-
crud.updateElement(model.id, props);
|
|
121
|
-
}
|
|
122
|
-
};
|
|
123
|
-
return html `
|
|
124
|
-
<edgeless-shape-color-picker
|
|
125
|
-
@pickFillColor=${onPickFillColor}
|
|
126
|
-
@pickStrokeColor=${onPickStrokeColor}
|
|
127
|
-
@pickStrokeStyle=${onPickStrokeStyle}
|
|
128
|
-
.palettes=${EDGY_PALETTE_LIST}
|
|
129
|
-
.payload=${{
|
|
130
|
-
fillColor,
|
|
131
|
-
strokeColor,
|
|
132
|
-
strokeWidth,
|
|
133
|
-
strokeStyle,
|
|
134
|
-
originalFillColor,
|
|
135
|
-
originalStrokeColor,
|
|
136
|
-
theme,
|
|
137
|
-
enableCustomColor,
|
|
138
|
-
}}
|
|
139
|
-
>
|
|
140
|
-
</edgeless-shape-color-picker>
|
|
141
|
-
`;
|
|
142
|
-
},
|
|
143
|
-
};
|
|
33
|
+
const edgyColorAction = paletteColorAction('e.color', EDGY_PALETTE_LIST);
|
|
144
34
|
/**
|
|
145
35
|
* EDGY nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
|
|
146
36
|
* actions operate on them directly. We reuse the line-style + text actions, add
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formicoidea/labre-framework-edgy",
|
|
3
3
|
"description": "Labre edgy framework for @formicoidea/labre-core.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.36.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "lajola",
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
"dist"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@formicoidea/labre-core": "0.
|
|
35
|
-
"@formicoidea/labre-ddd-shared": "0.
|
|
34
|
+
"@formicoidea/labre-core": "0.36.0",
|
|
35
|
+
"@formicoidea/labre-ddd-shared": "0.36.0",
|
|
36
36
|
"@preact/signals-core": "^1.8.0",
|
|
37
37
|
"lit": "^3.2.0",
|
|
38
38
|
"yjs": "^13.6.21"
|