Skip to content

Commit 7705ba8

Browse files
nartcnartc
committed
docs: add text stories
1 parent e0f362f commit 7705ba8

File tree

1 file changed

+285
-0
lines changed

1 file changed

+285
-0
lines changed

‎libs/angular-three-soba/src/abstractions/text.stories.ts

+285
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
2+
import { Meta, moduleMetadata, Story } from '@storybook/angular';
3+
import { extend } from 'angular-three';
4+
import { NgtsText } from 'angular-three-soba/abstractions';
5+
import { DoubleSide, MeshBasicMaterial } from 'three';
6+
import { makeCanvasOptions, StorybookSetup, turn } from '../setup-canvas';
7+
8+
extend({ MeshBasicMaterial });
9+
10+
@Component({
11+
standalone: true,
12+
template: `
13+
<ngts-text
14+
[text]="text"
15+
[fontSize]="12"
16+
[maxWidth]="200"
17+
[lineHeight]="1"
18+
[letterSpacing]="0.02"
19+
[textAlign]="'left'"
20+
[font]="'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'"
21+
[anchorX]="'center'"
22+
[anchorY]="'middle'"
23+
(beforeRender)="turn($any($event).object)"
24+
>
25+
<ngt-mesh-basic-material [color]="color" [side]="DoubleSide" [transparent]="true" [opacity]="1" />
26+
</ngts-text>
27+
`,
28+
imports: [NgtsText],
29+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
30+
})
31+
class CustomMaterialTextStory {
32+
@Input() text = '';
33+
@Input() color = 'turquoise';
34+
readonly turn = turn;
35+
readonly DoubleSide = DoubleSide;
36+
}
37+
38+
@Component({
39+
standalone: true,
40+
template: `
41+
<ngts-text
42+
[text]="text"
43+
[color]="'#EC2D2D'"
44+
[fontSize]="12"
45+
[maxWidth]="200"
46+
[lineHeight]="1"
47+
[letterSpacing]="0.02"
48+
[textAlign]="'right'"
49+
[direction]="'auto'"
50+
[font]="'https://fonts.gstatic.com/s/scheherazade/v20/YA9Ur0yF4ETZN60keViq1kQgtA.woff'"
51+
[anchorX]="'center'"
52+
[anchorY]="'middle'"
53+
(beforeRender)="turn($any($event).object)"
54+
/>
55+
`,
56+
imports: [NgtsText],
57+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
58+
})
59+
class LTRTextStory {
60+
@Input() text = '';
61+
readonly turn = turn;
62+
}
63+
64+
@Component({
65+
standalone: true,
66+
template: `
67+
<ngts-text
68+
[text]="text"
69+
[color]="'#EC2D2D'"
70+
[fontSize]="12"
71+
[maxWidth]="200"
72+
[lineHeight]="1"
73+
[letterSpacing]="0.02"
74+
[textAlign]="'left'"
75+
[font]="'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'"
76+
[anchorX]="'center'"
77+
[anchorY]="'middle'"
78+
[outlineOffsetX]="'10%'"
79+
[outlineOffsetY]="'10%'"
80+
[outlineBlur]="'30%'"
81+
[outlineOpacity]="0.3"
82+
[outlineColor]="'#EC2D2D'"
83+
(beforeRender)="turn($any($event).object)"
84+
/>
85+
`,
86+
imports: [NgtsText],
87+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
88+
})
89+
class ShadowTextStory {
90+
@Input() text = '';
91+
readonly turn = turn;
92+
}
93+
94+
@Component({
95+
standalone: true,
96+
template: `
97+
<ngts-text
98+
[text]="text"
99+
[color]="'#EC2D2D'"
100+
[fontSize]="12"
101+
[maxWidth]="200"
102+
[lineHeight]="1"
103+
[letterSpacing]="0.02"
104+
[textAlign]="'left'"
105+
[font]="'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'"
106+
[anchorX]="'center'"
107+
[anchorY]="'middle'"
108+
[strokeWidth]="'2.5%'"
109+
[strokeColor]="'#fff'"
110+
(beforeRender)="turn($any($event).object)"
111+
/>
112+
`,
113+
imports: [NgtsText],
114+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
115+
})
116+
class StrokeTextStory {
117+
@Input() text = '';
118+
readonly turn = turn;
119+
}
120+
121+
@Component({
122+
standalone: true,
123+
template: `
124+
<ngts-text
125+
[text]="text"
126+
[color]="'#EC2D2D'"
127+
[fontSize]="12"
128+
[maxWidth]="200"
129+
[lineHeight]="1"
130+
[letterSpacing]="0.02"
131+
[textAlign]="'left'"
132+
[font]="'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'"
133+
[anchorX]="'center'"
134+
[anchorY]="'middle'"
135+
[outlineWidth]="2"
136+
[outlineColor]="'#fff'"
137+
(beforeRender)="turn($any($event).object)"
138+
/>
139+
`,
140+
imports: [NgtsText],
141+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
142+
})
143+
class OutlineTextStory {
144+
@Input() text = '';
145+
readonly turn = turn;
146+
}
147+
148+
@Component({
149+
standalone: true,
150+
template: `
151+
<ngts-text
152+
[text]="text"
153+
[color]="color"
154+
[fontSize]="12"
155+
[maxWidth]="200"
156+
[lineHeight]="1"
157+
[letterSpacing]="0.02"
158+
[textAlign]="'left'"
159+
[font]="'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff'"
160+
[anchorX]="'center'"
161+
[anchorY]="'middle'"
162+
(beforeRender)="turn($any($event).object)"
163+
/>
164+
`,
165+
imports: [NgtsText],
166+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
167+
})
168+
class DefaultTextStory {
169+
@Input() text = '';
170+
@Input() color = '#ec2d2d';
171+
readonly turn = turn;
172+
}
173+
174+
export default {
175+
title: 'Abstractions/Text',
176+
decorators: [moduleMetadata({ imports: [StorybookSetup] })],
177+
} as Meta;
178+
179+
export const Default: Story = (args) => ({
180+
props: {
181+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
182+
story: DefaultTextStory,
183+
inputs: args,
184+
},
185+
template: `
186+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
187+
`,
188+
});
189+
190+
Default.args = {
191+
text: `LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
192+
MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
193+
CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
194+
EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.`,
195+
color: '#ec2d2d',
196+
};
197+
198+
export const Outline: Story = (args) => ({
199+
props: {
200+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
201+
story: OutlineTextStory,
202+
inputs: args,
203+
},
204+
template: `
205+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
206+
`,
207+
});
208+
209+
Outline.args = {
210+
text: `LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
211+
MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
212+
CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
213+
EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.`,
214+
};
215+
216+
export const Stroke: Story = (args) => ({
217+
props: {
218+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
219+
story: StrokeTextStory,
220+
inputs: args,
221+
},
222+
template: `
223+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
224+
`,
225+
});
226+
227+
Stroke.args = {
228+
text: `LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
229+
MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
230+
CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
231+
EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.`,
232+
};
233+
234+
export const Shadow: Story = (args) => ({
235+
props: {
236+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
237+
story: ShadowTextStory,
238+
inputs: args,
239+
},
240+
template: `
241+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
242+
`,
243+
});
244+
245+
Shadow.args = {
246+
text: `LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
247+
MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
248+
CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
249+
EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.`,
250+
};
251+
252+
export const LTR: Story = (args) => ({
253+
props: {
254+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
255+
story: LTRTextStory,
256+
inputs: args,
257+
},
258+
template: `
259+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
260+
`,
261+
});
262+
263+
LTR.args = {
264+
text: `ان عدة الشهور عند الله اثنا عشر شهرا في كتاب الله يوم خلق السماوات والارض SOME LATIN TEXT HERE منها اربعة حرم
265+
ذلك الدين القيم فلاتظلموا فيهن انفسكم وقاتلوا المشركين كافة كما يقاتلونكم كافة واعلموا ان الله مع المتقين`,
266+
};
267+
268+
export const CustomMaterial: Story = (args) => ({
269+
props: {
270+
options: makeCanvasOptions({ camera: { position: [0, 0, 200] } }),
271+
story: CustomMaterialTextStory,
272+
inputs: args,
273+
},
274+
template: `
275+
<storybook-setup [options]="options" [story]="story" [inputs]="inputs" />
276+
`,
277+
});
278+
279+
CustomMaterial.args = {
280+
text: `LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE
281+
MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO
282+
CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR.
283+
EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, SUNT IN CULPA QUI OFFICIA DESERUNT MOLLIT ANIM ID EST LABORUM.`,
284+
color: 'turquoise',
285+
};

0 commit comments

Comments
 (0)