4 |
5 |
6 |
7 |
21 |
22 |
23 |
26 |
27 |
28 | 
8 |
11 |
12 |
13 |
31 |
33 |
34 |
47 |
65 |
66 |
67 |
48 |
64 |
49 |
50 |
63 |
51 |
55 | {{localeData.MA_head}}
52 | 54 |
56 |
58 |
59 | 
60 |
61 |
62 | {{localeData.MA_sentence}}
57 |58 |
60 |
2 |
20 |
39 |
50 |
--------------------------------------------------------------------------------
/src/app/components/footer/footer.component.scss:
--------------------------------------------------------------------------------
1 | $grid-breakpoints: (
2 | xs: 0,
3 | sm: 576px,
4 | md: 768px,
5 | lg: 992px,
6 | xl: 1200px
7 | ) !default;
8 | $nav-tabs-border-color: black; // ics-custom
9 |
10 | :host {
11 | border-top: 1px solid $nav-tabs-border-color;
12 | filter: grayscale(100%);
13 | transition: all 0.2s;
14 | &:hover {
15 | filter: grayscale(0%);
16 | }
17 |
18 |
19 |
20 | > a {
21 | display: block;
22 | //@include hover-focus-active {
23 | // background-color: transparent;
24 | //}
25 |
26 | &:last-of-type {
27 | margin-left: 20px;
28 | }
29 |
30 |
31 | @media (max-width: 420px) {
32 | &:last-of-type {
33 | display: none;
34 | }
35 | }
36 | }
37 |
38 | > *:nth-child(2) {
39 | margin-left: rem-calc(5);
40 | margin-right: auto;
41 | }
42 |
43 | }
44 |
45 | .scope {
46 | &__grid {
47 | display: grid;
48 | width: 100%;
49 |
50 | grid-template-columns: auto 1fr auto;
51 | grid-template-rows: 35px;
52 | grid-template-areas: "tools sns maker";
53 |
54 | @media (max-width: map-get($grid-breakpoints, "md")) {
55 | grid-template-columns: 1fr;
56 | grid-template-rows: 35px;
57 | grid-template-areas: "sns";
58 | }
59 |
60 | &-tools {
61 | grid-area: tools;
62 | display: flex;
63 | align-items: center;
64 | padding-left: 10px;
65 |
66 | @media (max-width: map-get($grid-breakpoints, "md")) {
67 | display: none;
68 | }
69 | }
70 | &-sns {
71 | grid-area: sns;
72 | display: flex;
73 | justify-content: flex-end;
74 | align-items: center;
75 |
76 | @media (max-width: map-get($grid-breakpoints, "md")) {
77 | justify-content: center;
78 | }
79 | }
80 | &-maker {
81 | grid-area: maker;
82 | display: flex;
83 | align-items: center;
84 | padding-left: 20px;
85 | padding-right: 10px;
86 |
87 | @media (max-width: map-get($grid-breakpoints, "md")) {
88 | display: none;
89 | }
90 | }
91 | }
92 |
93 | }
94 |
95 |
--------------------------------------------------------------------------------
/src/app/components/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-footer',
5 | templateUrl: './footer.component.html',
6 | styleUrls: ['./footer.component.scss']
7 | })
8 | export class FooterComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/components/header-desktop/header-desktop.component.html:
--------------------------------------------------------------------------------
1 | 
10 | 
18 | 
37 |
40 |
45 | 
48 |
49 |
48 |
2 |
3 |
28 |
--------------------------------------------------------------------------------
/src/app/components/header-desktop/header-desktop.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ics-creative/project-particle-develop/273acaab3efd45b5a3734244978205a770d932b8/src/app/components/header-desktop/header-desktop.component.scss
--------------------------------------------------------------------------------
/src/app/components/header-desktop/header-desktop.component.ts:
--------------------------------------------------------------------------------
1 | import {DrawingData} from 'particlejs';
2 | import {LocaleData} from '../../i18n/locale-data';
3 | import {LocaleEnData} from '../../i18n/locale-en';
4 | import {LocaleJaData} from '../../i18n/locale-ja';
5 | import {LocaleManager} from '../../i18n/locale-manager';
6 | import {PlatformData} from '../../data/platform-data';
7 | import {Component, EventEmitter, Input, Output} from '@angular/core';
8 |
9 | @Component({
10 | selector: 'app-header-desktop',
11 | templateUrl: './header-desktop.component.html',
12 | styleUrls : ['header-desktop.component.scss'],
13 | })
14 |
15 | export class HeaderDesktopComponent {
16 | @Output() public exportSvgEvent = new EventEmitter();
17 | @Output() public exportPngEvent = new EventEmitter();
18 | @Output() public exportJpgEvent = new EventEmitter();
19 | @Output() public exportWebpEvent = new EventEmitter();
20 | @Output() public exportParameterEvent = new EventEmitter();
21 | @Output() public importParameterEvent = new EventEmitter();
22 |
23 | @Input() public drawingData!: DrawingData;
24 | @Input() public platformData!: PlatformData;
25 |
26 | public lastSelectFile: any;
27 |
28 | constructor(public localeData: LocaleData) {
29 | }
30 |
31 | public exportParameter(): void {
32 | this.exportParameterEvent.emit(null);
33 | }
34 |
35 | public exportSvg(): void {
36 | this.exportSvgEvent.emit(null);
37 | }
38 |
39 | public exportPng(): void {
40 | this.exportPngEvent.emit(null);
41 | }
42 |
43 | public exportJpg(): void {
44 | this.exportJpgEvent.emit(null);
45 | }
46 |
47 | public exportWebp(): void {
48 | this.exportWebpEvent.emit(null);
49 | }
50 |
51 | public selectParameterFile(obj: any): void {
52 | this.lastSelectFile = obj.target.files[0];
53 |
54 | this.importParameterEvent.emit(null);
55 | }
56 |
57 | public selectEn(): void {
58 | new LocaleManager().changeLocale(this.localeData, new LocaleEnData());
59 | }
60 |
61 | public selectJa(): void {
62 | new LocaleManager().changeLocale(this.localeData, new LocaleJaData());
63 | }
64 |
65 | }
66 |
--------------------------------------------------------------------------------
/src/app/components/header-mobile/header-mobile.component.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/app/components/header-mobile/header-mobile.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ics-creative/project-particle-develop/273acaab3efd45b5a3734244978205a770d932b8/src/app/components/header-mobile/header-mobile.component.scss
--------------------------------------------------------------------------------
/src/app/components/header-mobile/header-mobile.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, ElementRef, EventEmitter, Input, Output} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 |
4 | @Component({
5 | selector : 'app-header-mobile',
6 | templateUrl: './header-mobile.component.html',
7 | styleUrls : ['header-mobile.component.scss'],
8 | })
9 | export class HeaderMobileComponent {
10 | @Output() exportPngEvent = new EventEmitter();
11 |
12 | @Input() drawingData!: DrawingData;
13 | private element: ElementRef;
14 |
15 | exportPng() {
16 | this.exportPngEvent.emit(null);
17 | }
18 |
19 | constructor(element: ElementRef) {
20 | this.element = element;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/components/input-range/input-range.component.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
27 |
6 |
7 | {{localeData.H_exportImage}}
8 |
14 |
15 |
16 |
17 |
18 |
19 | {{localeData.H_language}}
20 |
24 |
25 |
26 |
3 |
17 |
--------------------------------------------------------------------------------
/src/app/components/input-range/input-range.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | @Component({
4 | selector : 'app-input-range',
5 | styles : [`
6 | input[type=range] {
7 | display: block;
8 | width: 100%;
9 | }
10 | .row {
11 | padding-left: 0;
12 | padding-right: 0;
13 | justify-content: space-between;
14 | }
15 | [class*="col"] {
16 | padding-right: 0;
17 | padding-left: 0;
18 | }
19 | `],
20 | templateUrl: './input-range.component.html'
21 | })
22 | /**
23 | * Input タグ (range type)のコンポーネントです。
24 | * @author ICS-Ikeda
25 | * @since 2016-01-20
26 | */
27 | export class InputRangeComponent {
28 | @Input() public drawingData!: DrawingData;
29 |
30 | /** 対象のプロパティー名を指定します。 */
31 | @Input() public targetProperty!: string;
32 |
33 | /** ラベルの名称を指定します。 */
34 | @Input() public label!: string;
35 |
36 | /** 最小値を指定します。 */
37 | @Input() public min!: number;
38 |
39 | /** 最大値を指定します。 */
40 | @Input() public max!: number;
41 |
42 | /** ラベル間の間隔を示す数値を指定します。 */
43 | @Input() public step!: number;
44 |
45 | constructor() {
46 | }
47 |
48 | public handleChange(event: any): void {
49 | // なぜか string になっている可能性がある
50 | const tmp: any =
4 |
9 |
10 |
11 |
15 |
16 |
3 |
29 |
--------------------------------------------------------------------------------
/src/app/components/modal-export-json/modal-export-json.component.scss:
--------------------------------------------------------------------------------
1 | textarea {
2 | height: 300px;
3 | margin-bottom: 1rem;
4 |
5 | color: #000;
6 | background: #bdbdbd;
7 | font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/components/modal-export-json/modal-export-json.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, ElementRef, Input, ViewChild} from '@angular/core';
2 | import * as jQuery from 'jquery';
3 | import {DrawingData} from 'particlejs';
4 | import {LocaleData} from '../../i18n/locale-data';
5 |
6 | @Component({
7 | selector : 'app-property-io-box',
8 | templateUrl: './modal-export-json.component.html',
9 | styleUrls : ['./modal-export-json.component.scss'],
10 | })
11 |
12 | export class ModalExportJsonComponent {
13 |
14 | @ViewChild('modal', { static: true }) modal: any;
15 | @ViewChild('outputLink', { static: true }) outputLink: any;
16 | @ViewChild('jsonValue', { static: true }) jsonValue: any;
17 |
18 | @Input() drawingData!: DrawingData;
19 |
20 | element: ElementRef;
21 |
22 | constructor(element: ElementRef, public localeData: LocaleData) {
23 | this.element = element;
24 | }
25 |
26 | public setIOButtonLink(json: string) {
27 | const link = (
4 |
27 |
28 |
2 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/app/components/modal-template/modal-template.component.scss:
--------------------------------------------------------------------------------
1 | .scope-list {
2 | display: flex;
3 | flex-wrap: wrap;
4 | width: 100%;
5 | justify-content: space-between;
6 | }
7 |
8 | figure {
9 | width: 33%;
10 | box-sizing: border-box;
11 | margin-bottom: rem-calc(8.5);
12 | padding-left: 5px;
13 | padding-right: 5px;
14 |
15 | img {
16 | width: 100%;
17 | height: auto;
18 | cursor: pointer;
19 | border: 1px solid #555;
20 |
21 | }
22 |
23 | &:hover {
24 | img {
25 | border-color: #999;
26 | }
27 | }
28 |
29 | figcaption {
30 | font-size: 1.0rem;
31 | color: #999;
32 | text-align: center;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/components/modal-template/modal-template.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | import {ParticleParameter} from '../../assets/particle-parameter';
4 | import {LocaleData} from '../../i18n/locale-data';
5 |
6 | @Component({
7 | selector : 'app-modal-template',
8 | templateUrl: './modal-template.component.html',
9 | styleUrls : ['./modal-template.component.scss'],
10 | })
11 |
12 | export class ModalTemplateComponent implements OnInit {
13 | @Input() drawingData!: DrawingData;
14 | @Input() templateList: any[];
15 | public template!: ParticleParameter;
16 |
17 | constructor(public localeData: LocaleData) {
18 | const template = new ParticleParameter();
19 | this.templateList = template.list;
20 | }
21 |
22 | ngOnInit() {
23 | // テンプレートを適用
24 | this.drawingData.importData(this.templateList[0].property);
25 | }
26 |
27 | public selectTemplate(value: DrawingData) {
28 | this.drawingData.importData(value);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-canvas/property-canvas.component.html:
--------------------------------------------------------------------------------
1 |
3 |
25 |
4 |
24 |
5 |
10 | {{localeData.ST_head}}
6 | 9 |
11 |
20 |
23 |
12 |
15 | 
16 | {{template.name}}
17 |
18 |
19 |
16 |
2 |
3 |
5 |
23 |
24 |
26 |
34 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-canvas/property-canvas.component.scss:
--------------------------------------------------------------------------------
1 | input[type="color"] {
2 | margin-right: 10px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-canvas/property-canvas.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | import {LocaleData} from '../../../i18n/locale-data';
4 |
5 | @Component({
6 | selector : 'app-canvas-property-panel',
7 | templateUrl: './property-canvas.component.html',
8 | styleUrls : ['property-canvas.component.scss'],
9 | })
10 |
11 | export class PropertyCanvasPanelComponent {
12 | @Input() public drawingData!: DrawingData;
13 |
14 | constructor(public localeData: LocaleData) {
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-color/property-color-unit.component.html:
--------------------------------------------------------------------------------
1 | {{localeData.SF_head}}
4 |
6 |
12 |
13 |
14 |
20 |
21 |
22 | 23 |
{{localeData.SF_bgColor}}
25 |
27 |
31 | {{drawingData.bgColor}}
32 |
33 |
10 |
11 |
12 |
13 |
30 |
31 |
32 |
33 |
49 |
50 |
51 |
52 |
53 |
2 |
3 |
5 |
24 |
26 |
46 |
48 |
56 |
58 |
65 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-color/property-color.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ics-creative/project-particle-develop/273acaab3efd45b5a3734244978205a770d932b8/src/app/components/properties/property-color/property-color.component.scss
--------------------------------------------------------------------------------
/src/app/components/properties/property-color/property-color.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {AlphaCurveType, DrawingData} from 'particlejs';
3 | import {LocaleData} from '../../../i18n/locale-data';
4 |
5 | interface TestObject {
6 | name: string;
7 | value: number;
8 | }
9 |
10 | @Component({
11 | selector : 'app-color-property-panel',
12 | templateUrl: './property-color.component.html',
13 | styleUrls : ['./property-color.component.scss'],
14 | })
15 |
16 | export class PropertyColorPanelComponent {
17 | @Input() public drawingData!: DrawingData;
18 | public objArray: TestObject[];
19 |
20 | constructor(public localeData: LocaleData) {
21 | this.objArray = [
22 | {name: 'Normal', value: AlphaCurveType.Normal},
23 | {name: 'Random', value: AlphaCurveType.Random},
24 | ];
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-emitter/property-emitter.component.html:
--------------------------------------------------------------------------------
1 | {{localeData.SC_head_start}}
4 |
6 |
13 |
14 |
20 |
21 |
22 |
23 | {{localeData.SC_head_end}}
25 |
27 |
33 |
34 |
40 |
41 |
42 |
43 |
44 |
45 | {{localeData.SC_head_alphaCurve}}
47 |
49 |
52 |
53 |
54 |
55 | {{localeData.SC_head_blendMode}}
57 |
59 |
63 |
64 |
2 |
3 |
5 |
6 |
97 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-emitter/property-emitter.component.ts:
--------------------------------------------------------------------------------
1 | import {DrawingData} from 'particlejs';
2 | import {LocaleData} from '../../../i18n/locale-data';
3 | import {Component, Input} from '@angular/core';
4 |
5 | @Component({
6 | selector : 'app-emitter-property-panel',
7 | templateUrl: './property-emitter.component.html'
8 | })
9 |
10 | export class PropertyEmitterPanelComponent {
11 | @Input() public drawingData!: DrawingData;
12 |
13 | constructor(public localeData: LocaleData) {
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-particle/property-particle.component.html:
--------------------------------------------------------------------------------
1 | {{localeData.SE_head}}
4 |
7 |
13 |
14 |
15 |
21 |
22 |
23 |
24 | 25 |
31 |
32 |
33 |
39 |
40 |
41 |
42 | 43 |
49 |
50 |
51 |
56 |
57 |
58 |
59 | 60 |
66 |
67 |
68 |
69 | 70 |
76 |
77 |
78 |
84 |
85 |
86 |
87 | 88 |
94 |
95 |
96 | 24 | 25 |
42 | 43 |
59 | 60 |
69 | 70 |
87 | 88 |
2 |
3 |
5 |
6 |
59 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-particle/property-particle.component.ts:
--------------------------------------------------------------------------------
1 | import {DrawingData} from 'particlejs';
2 | import {LocaleData} from '../../../i18n/locale-data';
3 | import {Component, Input} from '@angular/core';
4 |
5 | @Component({
6 | selector : 'app-particle-property-panel',
7 | templateUrl: './property-particle.component.html'
8 | })
9 |
10 | export class PropertyParticlePanelComponent {
11 | @Input() drawingData!: DrawingData;
12 | @Input() shapeIdList: any;
13 |
14 | constructor(public localeData: LocaleData) {
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-shape/property-shape-itemrenderer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-shape/property-shape-itemrenderer.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, Input, ViewChild} from '@angular/core';
2 | import {Assets} from 'particlejs';
3 |
4 | @Component({
5 | selector : 'app-shape-itemrenderer',
6 | templateUrl: './property-shape-itemrenderer.component.html',
7 | })
8 |
9 | /**
10 | * シェイプの選択パネル内のアイテムレンダラーです。
11 | */
12 | export class PropertyShapeItemRendererComponent implements AfterViewInit {
13 | @Input() private shapeId!: string;
14 |
15 | @ViewChild('myCanvas', { static: true }) myCanvas: any;
16 |
17 | constructor() {
18 | }
19 |
20 | ngAfterViewInit() {
21 | const canvas = this.myCanvas.nativeElement;
22 |
23 | const stage = new createjs.Stage(canvas);
24 |
25 | // Adobe Animate CCから書きだしたシェイプを使う
26 | const cls = {{localeData.SP_head}}
4 |6 |
7 |
13 |
14 |
15 |
21 |
22 |
23 |
24 |
30 |
31 |
32 |
38 |
39 |
40 |
41 | 42 |
48 |
49 |
50 |
56 |
57 |
58 | 41 | 42 |
2 |
3 |
5 |
6 |
20 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-shape/property-shape.component.scss:
--------------------------------------------------------------------------------
1 | .scope-list-item {
2 | cursor: pointer;
3 | display: block;
4 | width: 64px;
5 | height: 64px;
6 | box-sizing: border-box;
7 | line-height: 0;
8 | margin-bottom: 15px;
9 | margin-right: 15px;
10 | border: 1px solid rgba(0, 0, 0, 0.1);
11 | transition: all 0.15s;
12 |
13 | &:hover, &.selected {
14 | background: #222;
15 | border-color: #333;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-shape/property-shape.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {DrawingData, ShapeData} from 'particlejs';
3 | import {LocaleData} from '../../../i18n/locale-data';
4 |
5 | @Component({
6 | selector : 'app-shape-property-panel',
7 | templateUrl: './property-shape.component.html',
8 | styleUrls : ['property-shape.component.scss'],
9 | })
10 |
11 | /**
12 | * シェイプの選択パネルの制御クラスです。
13 | */
14 | export class PropertyShapePanelComponent {
15 | @Input() public drawingData!: DrawingData;
16 | @Input() public shapeIdList: string[] = new ShapeData().assetList;
17 |
18 | constructor(public localeData: LocaleData) {
19 | }
20 |
21 | public handleClick(shapeId: string) {
22 |
23 | const index = this.drawingData.shapeIdList.indexOf(shapeId);
24 | if (index === -1) { // 含まれていなければ
25 | // 追加
26 | this.drawingData.shapeIdList.push(shapeId);
27 | } else { // 含まれていたら
28 | // 2個以上のときのみ
29 | if (this.drawingData.shapeIdList.length >= 2) {
30 | // 削除
31 | this.drawingData.shapeIdList.splice(index, 1);
32 | }
33 | }
34 | }
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-template/property-template.component.html:
--------------------------------------------------------------------------------
1 | {{localeData.SS_head}}
4 |6 |
7 |
19 |
8 |
18 |
12 |
17 |
2 |
3 |
5 |
6 |
7 |
22 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-template/property-template.component.scss:
--------------------------------------------------------------------------------
1 | .scope-list {
2 | display: flex;
3 | flex-wrap: wrap;
4 | width: 100%;
5 | justify-content: space-between;
6 | }
7 |
8 | figure {
9 | width: 33%;
10 | box-sizing: border-box;
11 | margin-bottom: rem-calc(8.5);
12 | padding-left: 5px;
13 | padding-right: 5px;
14 | cursor: pointer;
15 | user-select: none;
16 |
17 | img {
18 | width: 100%;
19 | height: auto;
20 | border: 1px solid #555;
21 | pointer-events: none;
22 | transition: all 0.15s;
23 | }
24 |
25 | &:hover {
26 | img {
27 | border-color: #999;
28 | }
29 | }
30 |
31 | figcaption {
32 | font-size: 1.0rem;
33 | color: #999;
34 | text-align: center;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/components/properties/property-template/property-template.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | import {ParticleParameter} from '../../../assets/particle-parameter';
4 | import {LocaleData} from '../../../i18n/locale-data';
5 |
6 | @Component({
7 | selector : 'app-particle-template-property-panel',
8 | styleUrls : ['./property-template.component.scss'],
9 | templateUrl: './property-template.component.html',
10 | })
11 |
12 |
13 | export class PropertyTemplatePanelComponent implements OnInit {
14 | @Input() drawingData!: DrawingData;
15 | @Input() templateList: any[];
16 | public public!: ParticleParameter;
17 |
18 | constructor(public localeData: LocaleData) {
19 | const template = new ParticleParameter();
20 |
21 | this.templateList = template.list;
22 | }
23 |
24 | ngOnInit() {
25 | // テンプレートを適用
26 | this.drawingData.importData(this.templateList[0].property);
27 | }
28 |
29 | public selectTemplate(value: DrawingData) {
30 | this.drawingData.importData(value);
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/components/properties/property.component.html:
--------------------------------------------------------------------------------
1 | {{localeData.ST_head}}
4 |7 |
8 |
21 |
9 |
10 |
11 |
13 |
17 | {{template.name}}
18 |
19 |
20 |
17 |
2 |
3 |
11 |
12 |
13 |
51 |
--------------------------------------------------------------------------------
/src/app/components/properties/property.component.scss:
--------------------------------------------------------------------------------
1 | $gray-900: #323232 !default;
2 |
3 | ::ng-deep .pd-property {
4 | flex: 285px;
5 | height: 100%;
6 | overflow: hidden;
7 |
8 | &__inner {
9 | height: 100%;
10 | background-color: $gray-900;
11 | }
12 |
13 | .nav-tabs {
14 | a {
15 | padding: rem-calc(2) rem-calc(15);
16 | font-size: rem-calc(16);
17 | }
18 | .nav-item {
19 | height: 35px;
20 | }
21 | }
22 |
23 | &__ul {
24 | background: #222222;
25 | }
26 | &__nav-item{
27 | padding: 0 1rem;
28 | line-height: 35px;
29 | background: #222222;
30 | }
31 |
32 | .tab-content {
33 | height: calc(100vh - 125px);
34 | overflow: auto;
35 | }
36 |
37 | .pd-section {
38 | height: 100%;
39 | overflow-y: auto;
40 | border: none;
41 |
42 | &__header {
43 | padding-top: 10px;
44 | padding-bottom: 10px;
45 | border: none;
46 |
47 | + hr {
48 | margin-top: 0;
49 | }
50 | h3 {
51 | text-align: center;
52 | }
53 | }
54 |
55 | &__block {
56 |
57 | padding-left: 10px;
58 | padding-right: 10px;
59 |
60 | &__list {
61 | display: flex;
62 | flex-wrap: wrap;
63 | }
64 | }
65 |
66 | hr {
67 | margin-top: rem-calc(12);
68 | margin-bottom: rem-calc(12);
69 | }
70 | }
71 |
72 | // IE11 & Edge のスクロールバー対策
73 | .tab-pane {
74 | height: 100%;
75 | }
76 | }
77 |
78 |
--------------------------------------------------------------------------------
/src/app/components/properties/property.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | import {LocaleData} from '../../i18n/locale-data';
4 |
5 | @Component({
6 | selector : 'app-property-panel',
7 | templateUrl: './property.component.html',
8 | styleUrls : ['property.component.scss'],
9 | })
10 | export class PropertyPanelComponent {
11 | @Input() public drawingData!: DrawingData;
12 |
13 | constructor(public localeData: LocaleData) {
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/components/stage/stage.component.ts:
--------------------------------------------------------------------------------
1 | import {AfterViewInit, Component, Input, ViewChild} from '@angular/core';
2 | import {DrawingData} from 'particlejs';
3 | import {ParticleCanvas} from '../../particle/particle-canvas';
4 |
5 | @Component({
6 | selector: 'app-stage',
7 | template: `
8 |
20 | `
21 | })
22 |
23 | export class StageComponent implements AfterViewInit {
24 |
25 | @ViewChild('myCanvas', { static: true }) myCanvas: any;
26 |
27 | @Input() drawingData!: DrawingData;
28 | private particleCanvas!: ParticleCanvas;
29 |
30 | constructor() {
31 |
32 | }
33 |
34 | private onResumeClick() {
35 | this.particleCanvas.resume();
36 | }
37 |
38 | private onPauseClick() {
39 | this.particleCanvas.pause();
40 | }
41 |
42 | public exportSvg(): Promise
14 |
18 |
19 |
20 |
24 |
25 |
26 |
30 |
31 |
32 |
36 |
37 |
38 |
42 |
43 |
44 |
48 |
49 |
50 |
110 |
115 |
111 | Particle Develop
112 | LOADING... 113 |
114 | 112 | LOADING... 113 |