Add background outer image shade.
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 93 KiB |
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 80 KiB |
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 52 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 113 KiB |
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 188 KiB |
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 56 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 59 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 142 KiB |
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 31 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 101 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 66 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 44 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 96 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 90 KiB |
Before Width: | Height: | Size: 178 KiB After Width: | Height: | Size: 172 KiB |
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 94 KiB |
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 88 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 89 KiB |
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 92 KiB |
@ -17,7 +17,6 @@
|
||||
*/
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import { ElementClass, Point } from '@wisemapping/web2d';
|
||||
import TopicConfig from './TopicConfig';
|
||||
import NodeModel from './model/NodeModel';
|
||||
import Workspace from './Workspace';
|
||||
import DragTopic from './DragTopic';
|
||||
@ -33,7 +32,7 @@ abstract class NodeGraph {
|
||||
|
||||
private _options: NodeOption;
|
||||
|
||||
private _onFocus: boolean;
|
||||
protected _onFocus: boolean;
|
||||
|
||||
private _size: SizeType;
|
||||
|
||||
@ -126,26 +125,7 @@ abstract class NodeGraph {
|
||||
return this._model.getId();
|
||||
}
|
||||
|
||||
setOnFocus(focus: boolean) {
|
||||
if (this._onFocus !== focus) {
|
||||
this._onFocus = focus;
|
||||
const outerShape = this.getOuterShape();
|
||||
if (focus) {
|
||||
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
|
||||
outerShape.setOpacity(1);
|
||||
} else {
|
||||
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
|
||||
outerShape.setOpacity(0);
|
||||
}
|
||||
this.setCursor('move');
|
||||
|
||||
// In any case, always try to hide the editor ...
|
||||
this.closeEditors();
|
||||
|
||||
// Fire event ...
|
||||
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
||||
}
|
||||
}
|
||||
abstract setOnFocus(focus: boolean): void;
|
||||
|
||||
abstract closeEditors(): void;
|
||||
|
||||
|
@ -262,8 +262,9 @@ abstract class Topic extends NodeGraph {
|
||||
|
||||
getOuterShape(): ElementClass {
|
||||
if (!this._outerShape) {
|
||||
const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, 'rounded rectangle');
|
||||
rect.setPosition(-2, -3);
|
||||
const rect = this._buildShape({}, 'rounded rectangle');
|
||||
|
||||
rect.setPosition(-3, -3);
|
||||
rect.setOpacity(0);
|
||||
this._outerShape = rect;
|
||||
}
|
||||
@ -520,8 +521,8 @@ abstract class Topic extends NodeGraph {
|
||||
let result = model.getBackgroundColor();
|
||||
|
||||
if (!result && !this.isCentralTopic()) {
|
||||
const bolderColor = this.getBorderColor();
|
||||
result = ColorUtil.lightenColor(bolderColor, 140);
|
||||
const borderColor = this.getBorderColor();
|
||||
result = ColorUtil.lightenColor(borderColor, 40);
|
||||
}
|
||||
|
||||
if (!result) {
|
||||
@ -634,6 +635,28 @@ abstract class Topic extends NodeGraph {
|
||||
});
|
||||
}
|
||||
|
||||
setOnFocus(focus: boolean) {
|
||||
if (this.isOnFocus() !== focus) {
|
||||
this._onFocus = focus;
|
||||
const outerShape = this.getOuterShape();
|
||||
|
||||
const fillColor = TopicStyle.defaultOuterBackgroundColor(this, focus);
|
||||
const borderColor = TopicStyle.defaultOuterBorderColor(this);
|
||||
|
||||
outerShape.setFill(fillColor);
|
||||
outerShape.setStroke(1, 'solid', borderColor);
|
||||
outerShape.setOpacity(focus ? 1 : 0);
|
||||
|
||||
this.setCursor('move');
|
||||
|
||||
// In any case, always try to hide the editor ...
|
||||
this.closeEditors();
|
||||
|
||||
// Fire event ...
|
||||
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
|
||||
}
|
||||
}
|
||||
|
||||
areChildrenShrunken(): boolean {
|
||||
const model = this.getModel();
|
||||
return model.areChildrenShrunken() && !this.isCentralTopic();
|
||||
@ -975,7 +998,7 @@ abstract class Topic extends NodeGraph {
|
||||
const outerShape = this.getOuterShape();
|
||||
const innerShape = this.getInnerShape();
|
||||
|
||||
outerShape.setSize(roundedSize.width + 4, roundedSize.height + 6);
|
||||
outerShape.setSize(roundedSize.width + 6, roundedSize.height + 6);
|
||||
innerShape.setSize(roundedSize.width, roundedSize.height);
|
||||
|
||||
// Update the figure position(ej: central topic must be centered) and children position.
|
||||
@ -1208,6 +1231,14 @@ abstract class Topic extends NodeGraph {
|
||||
const text = this.getText();
|
||||
textShape.setText(text.trim());
|
||||
|
||||
// Update other shape style ...
|
||||
const outerShape = this.getOuterShape();
|
||||
const outerFillColor = TopicStyle.defaultOuterBackgroundColor(this, this.isOnFocus());
|
||||
const outerBorderColor = TopicStyle.defaultOuterBorderColor(this);
|
||||
|
||||
outerShape.setFill(outerFillColor);
|
||||
outerShape.setStroke(1, 'solid', outerBorderColor);
|
||||
|
||||
// Calculate topic size and adjust elements ...
|
||||
const textWidth = textShape.getWidth();
|
||||
const textHeight = textShape.getHeight();
|
||||
|
@ -17,21 +17,9 @@
|
||||
*/
|
||||
|
||||
const CONNECTOR_WIDTH = 6;
|
||||
|
||||
const OUTER_SHAPE_ATTRIBUTES = {
|
||||
fillColor: 'rgb(252,235,192)',
|
||||
stroke: '1 solid rgb(241,163,39)',
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
const OUTER_SHAPE_ATTRIBUTES_FOCUS = { fillColor: 'rgb(244,184,45)', x: 0, y: 0 };
|
||||
|
||||
const INNER_RECT_ATTRIBUTES = { stroke: '2 solid' };
|
||||
|
||||
export default {
|
||||
CONNECTOR_WIDTH,
|
||||
OUTER_SHAPE_ATTRIBUTES,
|
||||
OUTER_SHAPE_ATTRIBUTES_FOCUS,
|
||||
INNER_RECT_ATTRIBUTES,
|
||||
};
|
||||
|
@ -55,7 +55,7 @@ class TopicEventDispatcher extends Events {
|
||||
|
||||
// Open the new editor ...
|
||||
const model = topic.getModel();
|
||||
if (model.getShapeType() !== 'image' && !this._readOnly && eventType === TopicEvent.EDIT) {
|
||||
if (!this._readOnly && eventType === TopicEvent.EDIT) {
|
||||
editor.show(topic, textOverwrite);
|
||||
} else {
|
||||
this.fireEvent(eventType, { model, readOnly: this._readOnly });
|
||||
@ -71,6 +71,9 @@ class TopicEventDispatcher extends Events {
|
||||
}
|
||||
|
||||
static getInstance(): TopicEventDispatcher {
|
||||
if (!this._instance) {
|
||||
throw new Error('Event dispatched has not been initialized');
|
||||
}
|
||||
return this._instance;
|
||||
}
|
||||
}
|
||||
|
@ -21,6 +21,7 @@ import { FontStyleType } from './FontStyleType';
|
||||
import { FontWeightType } from './FontWeightType';
|
||||
import { $msg } from './Messages';
|
||||
import { TopicShapeType } from './model/INodeModel';
|
||||
import ColorUtil from './render/ColorUtil';
|
||||
import Topic from './Topic';
|
||||
|
||||
type FontStyle = {
|
||||
@ -43,8 +44,8 @@ type TopicStyleType = {
|
||||
|
||||
const TopicDefaultStyles = {
|
||||
CENTRAL_TOPIC: {
|
||||
borderColor: 'rgb(57,113,177)',
|
||||
backgroundColor: 'rgb(80,157,192)',
|
||||
borderColor: '#3971B1',
|
||||
backgroundColor: '#509DC0',
|
||||
fontStyle: {
|
||||
font: 'Verdana',
|
||||
size: 10,
|
||||
@ -58,14 +59,14 @@ const TopicDefaultStyles = {
|
||||
shapeType: 'rounded rectangle' as TopicShapeType,
|
||||
},
|
||||
MAIN_TOPIC: {
|
||||
borderColor: 'rgb(2,59,185)',
|
||||
backgroundColor: 'rgb(224,229,239)',
|
||||
borderColor: '#023BB9',
|
||||
backgroundColor: '#E0E5EF',
|
||||
fontStyle: {
|
||||
font: 'Arial',
|
||||
size: 8,
|
||||
style: 'normal' as FontStyleType,
|
||||
weight: 'normal' as FontWeightType,
|
||||
color: 'rgb(82,92,97)',
|
||||
color: '#525C61',
|
||||
},
|
||||
connectionStyle: LineType.THICK_CURVED,
|
||||
connectionColor: '#495879',
|
||||
@ -73,14 +74,14 @@ const TopicDefaultStyles = {
|
||||
shapeType: 'line' as TopicShapeType,
|
||||
},
|
||||
SUB_TOPIC: {
|
||||
borderColor: 'rgb(2,59,185)',
|
||||
backgroundColor: 'rgb(224,229,239)',
|
||||
borderColor: '#96e3ff',
|
||||
backgroundColor: '#96e3ff',
|
||||
fontStyle: {
|
||||
font: 'Arial',
|
||||
size: 6,
|
||||
style: 'normal' as FontStyleType,
|
||||
weight: 'normal' as FontWeightType,
|
||||
color: 'rgb(82,92,97)',
|
||||
color: '#525C61',
|
||||
},
|
||||
connectionStyle: LineType.THICK_CURVED,
|
||||
connectionColor: '#495879',
|
||||
@ -89,14 +90,14 @@ const TopicDefaultStyles = {
|
||||
},
|
||||
|
||||
ISOLATED_TOPIC: {
|
||||
borderColor: 'rgb(2,59,185)',
|
||||
backgroundColor: 'rgb(224,229,239)',
|
||||
borderColor: '#023BB9',
|
||||
backgroundColor: '#96e3ff',
|
||||
fontStyle: {
|
||||
font: 'Verdana',
|
||||
size: 8,
|
||||
style: 'normal' as FontStyleType,
|
||||
weight: 'normal' as FontWeightType,
|
||||
color: 'rgb(82,92,97)',
|
||||
color: '#525C61',
|
||||
},
|
||||
msgKey: 'ISOLATED_TOPIC',
|
||||
connectionStyle: LineType.THIN_CURVED,
|
||||
@ -136,6 +137,28 @@ class TopicStyle {
|
||||
return this._getStyles(topic).fontStyle;
|
||||
}
|
||||
|
||||
static defaultOuterBorderColor(topic: Topic): string {
|
||||
let result: string;
|
||||
if (topic.getShapeType() === 'line') {
|
||||
result = '#F4B82D';
|
||||
} else {
|
||||
const innerBorderColor = topic.getBorderColor();
|
||||
result = ColorUtil.lightenColor(innerBorderColor, 70);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
static defaultOuterBackgroundColor(topic: Topic, onFocus: boolean): string {
|
||||
let result: string;
|
||||
if (topic.getShapeType() === 'line') {
|
||||
result = onFocus ? '#F4B82D' : '#FCEBC0';
|
||||
} else {
|
||||
const innerBgColor = topic.getBackgroundColor();
|
||||
result = ColorUtil.lightenColor(innerBgColor, 70);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
static defaultBackgroundColor(topic: Topic): string {
|
||||
return this._getStyles(topic).backgroundColor;
|
||||
}
|
||||
|
@ -0,0 +1,34 @@
|
||||
import { Story, Meta } from '@storybook/html';
|
||||
import createTopic, { TopicArgs } from './Topic';
|
||||
|
||||
export default {
|
||||
title: 'Mindplot/TextEditor',
|
||||
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
borderColor: { control: 'color' },
|
||||
fontFamily: {
|
||||
options: ['Arial', 'Verdana'],
|
||||
control: { type: 'select' },
|
||||
},
|
||||
fontSize: { control: { type: 'number', min: 0, max: 20, step: 2 } },
|
||||
fontColor: { control: 'color' },
|
||||
shapeType: {
|
||||
options: ['rectangle', 'rounded rectangle', 'elipse', 'line'],
|
||||
control: { type: 'select' },
|
||||
},
|
||||
text: { control: 'text' },
|
||||
noteText: { control: 'text' },
|
||||
linkText: { control: 'text' },
|
||||
eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<TopicArgs> = (args: TopicArgs) => createTopic(args);
|
||||
|
||||
export const MultilineEditor = Template.bind({});
|
||||
MultilineEditor.args = {
|
||||
text: 'Border Style',
|
||||
borderColor: '#52E661',
|
||||
readOnly: false,
|
||||
};
|
@ -1,6 +1,6 @@
|
||||
import createTopic from './Topic';
|
||||
import { Story, Meta } from '@storybook/html';
|
||||
import createTopic, { TopicArgs } from './Topic';
|
||||
|
||||
// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
|
||||
export default {
|
||||
title: 'Mindplot/Topic',
|
||||
// More on argTypes: https://storybook.js.org/docs/html/api/argtypes
|
||||
@ -22,22 +22,17 @@ export default {
|
||||
linkText: { control: 'text' },
|
||||
eicon: { control: 'multi-select', options: ['❤️', '🌈', '🖇️'] },
|
||||
},
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
|
||||
const Template = ({ ...args }) => createTopic({ ...args });
|
||||
const Template: Story<TopicArgs> = (args: TopicArgs) => createTopic(args);
|
||||
|
||||
export const BoderderStyle = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
BoderderStyle.args = {
|
||||
text: 'Border Style',
|
||||
borderColor: 'red',
|
||||
borderColor: '#52E661',
|
||||
};
|
||||
|
||||
export const FontStyle = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
FontStyle.args = {
|
||||
text: 'Font Style',
|
||||
fontColor: 'red',
|
||||
@ -46,33 +41,39 @@ FontStyle.args = {
|
||||
};
|
||||
|
||||
export const BackgroundColor = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
BackgroundColor.args = {
|
||||
text: 'Background Color Style',
|
||||
backgroundColor: 'red',
|
||||
text: 'Back Color Style',
|
||||
backgroundColor: '#52E661',
|
||||
};
|
||||
|
||||
export const NoteFeature = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
NoteFeature.args = {
|
||||
text: 'Note Feature',
|
||||
noteText: 'This is great note\nwith two lines',
|
||||
};
|
||||
|
||||
export const LinkFeature = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
LinkFeature.args = {
|
||||
text: 'Link Feature',
|
||||
linkText: 'https://www.google.com/',
|
||||
};
|
||||
|
||||
export const IconFeature = Template.bind({});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
IconFeature.args = {
|
||||
text: 'EIcon Feature\n with multi-line',
|
||||
eicon: ['❤️', '🌈', '🖇️'],
|
||||
};
|
||||
|
||||
export const ShapeLine = Template.bind({});
|
||||
ShapeLine.args = {
|
||||
text: 'Shape Line',
|
||||
shapeType: 'line',
|
||||
eicon: ['🖇️'],
|
||||
};
|
||||
|
||||
export const ShapeEllipse = Template.bind({});
|
||||
ShapeEllipse.args = {
|
||||
text: 'Shape Ellipse',
|
||||
eicon: ['🌈'],
|
||||
shapeType: 'elipse',
|
||||
};
|
||||
|
@ -6,6 +6,7 @@ import CentralTopic from '../../../src/components/CentralTopic';
|
||||
import Workspace from '../../../src/components/Workspace';
|
||||
import ScreenManager from '../../../src/components/ScreenManager';
|
||||
import EmojiIconModel from '../../../src/components/model/EmojiIconModel';
|
||||
import TopicEventDispatcher from '../../../src/components/TopicEventDispatcher';
|
||||
|
||||
const registerRefreshHook = (topic: Topic) => {
|
||||
// Trigger a redraw after the node is added ...
|
||||
@ -20,6 +21,20 @@ const registerRefreshHook = (topic: Topic) => {
|
||||
globalThis.observer.observe(document.getElementById('root')!, { childList: true });
|
||||
};
|
||||
|
||||
export type TopicArgs = {
|
||||
readOnly?: boolean;
|
||||
backgroundColor?: string;
|
||||
fontFamily?: string;
|
||||
borderColor?: string;
|
||||
fontSize?: number;
|
||||
fontColor?: string;
|
||||
shapeType?: 'rectangle' | 'rounded rectangle' | 'elipse' | 'line';
|
||||
text?: string;
|
||||
noteText?: string;
|
||||
linkText?: string;
|
||||
eicon?: string[];
|
||||
};
|
||||
|
||||
const createTopic = ({
|
||||
backgroundColor = undefined,
|
||||
text = undefined,
|
||||
@ -31,7 +46,8 @@ const createTopic = ({
|
||||
noteText = undefined,
|
||||
linkText = undefined,
|
||||
eicon = undefined,
|
||||
}) => {
|
||||
readOnly = true,
|
||||
}: TopicArgs) => {
|
||||
// Build basic container ...
|
||||
const divElem = document.createElement('div');
|
||||
const jqueryDiv = $(divElem);
|
||||
@ -43,7 +59,8 @@ const createTopic = ({
|
||||
|
||||
// Initialize designer helpers ...
|
||||
const screenManager = new ScreenManager(divElem);
|
||||
const workspace = new Workspace(screenManager, 0.3, true);
|
||||
const workspace = new Workspace(screenManager, 0.3, readOnly);
|
||||
TopicEventDispatcher.configure(readOnly);
|
||||
|
||||
// Update model ...
|
||||
const mindmap = new Mindmap();
|
||||
@ -55,6 +72,7 @@ const createTopic = ({
|
||||
model.setFontColor(fontColor);
|
||||
model.setFontFamily(fontFamily);
|
||||
model.setFontSize(fontSize);
|
||||
model.setShapeType(shapeType);
|
||||
|
||||
if (noteText) {
|
||||
const note = new NoteModel({ text: noteText });
|
||||
@ -75,7 +93,7 @@ const createTopic = ({
|
||||
|
||||
// Create topic UI element ...
|
||||
mindmap.addBranch(model);
|
||||
const centralTopic = new CentralTopic(model, { readOnly: true });
|
||||
const centralTopic = new CentralTopic(model, { readOnly });
|
||||
workspace.append(centralTopic);
|
||||
|
||||
// Register refresh hook ..
|
||||
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 110 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 52 KiB |